Flixel学习笔记001 Hello Flixel

Posted 2020-07-18

　　下了Flixel都有大半年了，也是时候写点东西了。

　　这是Flixel的ActionScript3.0版本。作为一个光荣的墙国子民，能找到的资料也太少了。还是英文版，多少有点不高兴。还是自己写写吧。

　　还有一件事，现在才开始研究，是不是有点晚了？个人感觉ActionScript或者说Flash的衰落已经是一个事实了。

 

　　一开始要做什么呢？当然是显示一下文字啦。

　　看到Flixel里有一个FlxText类，构造函数里还是有Test:String的参数的，果断就是它了。

1 var text:FlxText = new FlxText(30, 30, 100, "Hello Flixel.");
2 this.addChild(text);

　　然后，就是呵呵了。问题居然是出在addChild上，一看FlxText的代码，它居然不是显示对象。。。还是老老实实地看别人的示例吧。

　　使用Flixel，第一步就是要建立FlxGame的示例。说白了，FlxGame相当于Flixel的文档类。当然，要构建FlxGame的实例就要有一个FlxState的子类作为它的构造函数的参数，不过其实直接放FlxState也是可以的。

　　当然，不要改别人的代码吧。我参照着别人的示例，写一个MenuState类继承FlxState类，作为参数传入FlxGame的构造函数里。看看FlxState的代码，就是一个空的函数，create():void。你可以在FlxG里面发现一个switchState(State:FlxState):void，然并卵，代码埋得太深，不知所云。不过看名字就知道，以后要变换状态就是它了。

　　文档类：

 1 package
 2 {
 3     import flash.display.Sprite;
 4     import flash.events.Event;
 5     
 6     import org.flixel.FlxGame;
 7     import org.MenuState;
 8     
 9     /**
10      * ...
11      * @author QuanJP [email protected]
12      */
13     public class Main extends Sprite 
14     {
15         
16         public var gameMain:FlxGame;
17         
18         public function Main() 
19         {
20             if (stage) init();
21             else addEventListener(Event.ADDED_TO_STAGE, init);
22         }
23         
24         private function init(e:Event = null):void 
25         {
26             removeEventListener(Event.ADDED_TO_STAGE, init);
27             // entry point
28             
29             gameMain = new FlxGame(800, 600,MenuState);
30             this.addChild(gameMain);
31             
32         }
33         
34     }
35     
36 }

　　然后是放在org文件夹下的MenuState类：

 1 package org
 2 {
 3     import org.flixel.FlxState;
 4     import org.flixel.FlxText;
 5     
 6     /**
 7      * ...
 8      * @author QuanJP [email protected]
 9      */
10     public class MenuState extends FlxState
11     {
12         
13         public function MenuState()
14         {
15         
16         }
17         
18         override public function create():void
19         {
20             super.create();
21             var txt:FlxText = new FlxText(100, 200, 100, "Hello Flixel.");
22             this.add(txt);    
23         }
24     
25     }
26 
27 }

　　好了，终于显示出来了。随便提醒一句，那些抄袭的，记得把FlashDevelop自动帮我加的注释删掉啊，么么哒。

　　然后就是尝试使用FlxButton类，这个类也是代码比较好看懂的。在此之前，先参照前面MenuState创建一个GameState。名字？随便取的啦。真的不知道叫什么好啦。完全复制MenuState的代码，再改改显示的内容，比如改成"Hi Flixel."。然后，回到MenuState，改改代码。

 1         override public function create():void
 2         {
 3             super.create();
 4             var txt:FlxText = new FlxText(100, 200, 100, "Hello Flixel.");
 5             this.add(txt);    
 6             
 7             var btn:FlxButton = new FlxButton(200,200,"Say Hi.",sayHi);
 8             this.add(btn);
 9         }
10         
11         public function sayHi():Boolean {
12             FlxG.switchState(new GameState());
13             return true;
14         }

　　让鼠标出来吧。在Main.as中，把FlxGame的构造函数最后一项测试设为true：

1         private function init(e:Event = null):void 
2         {
3             removeEventListener(Event.ADDED_TO_STAGE, init);
4             // entry point
5             
6             gameMain = new FlxGame(800, 600,MenuState,1,60,30,true);
7             this.addChild(gameMain);
8             
9         }

　　好了，可以实现状态之间的跳转了，不过在GameState后就没有状态变换了？唉，再次拷贝MenuState的代码吧。

　　然后，实现中文。理论上是直接可以的，可是，Flixel的FlxTest默认是使用内置字体的，见其构造函数最后一个参数。虽然我不主张改Flixel的代码，可这个地方真的不能忍啊，也是改了，还有改掉字体大小，这样比较适合显示中文。

 1         public function FlxText(X:Number, Y:Number, Width:uint, Text:String=null, EmbeddedFont:Boolean=false)
 2         {
 3             super(X,Y);
 4             makeGraphic(Width,1,0);
 5             
 6             if(Text == null)
 7                 Text = "";
 8             _textField = new TextField();
 9             _textField.width = Width;
10             _textField.embedFonts = EmbeddedFont;
11             _textField.selectable = false;
12             _textField.sharpness = 100;
13             _textField.multiline = true;
14             _textField.wordWrap = true;
15             _textField.text = Text;
16             var format:TextFormat = new TextFormat("system",22,0xffffff);
17             _textField.defaultTextFormat = format;
18             _textField.setTextFormat(format);
19             if(Text.length <= 0)
20                 _textField.height = 1;
21             else
22                 _textField.height = 10;
23             
24             _regen = true;
25             _shadow = 0;
26             allowCollisions = NONE;
27             calcFrame();
28         }

　　改了黄色部分，终于可以看得入眼了。如果你喜欢，可以改一下在org\flixel\data文件夹下的button.png，我以后再改吧。

　　最终的代码可以看看https://github.com/quanjp/LearningFlixel/tree/master/001helloFlixel，里面没有Flixel本身的代码，Flixel的版本应该是2.55。