from: http://bbs.9ria.com/thread-77302-1-1.html

 

演示程序

http://www.adamatomic.com/canabalt/

http://www.flixel.org/mode/

 

Flixel横板游戏制作教程（二）— AddingPlayer

本教程是接着Flixel 横板游戏制作教程（一）— HelloFlixel 来做的。
教程的解释都在注释里面了，请同学们仔细阅读。下面我们开始给游戏加入人物了。
首先是人物 Player 类：

 

package 
{
        import org.flixel.FlxG;
        import org.flixel.FlxSprite;
        
        /**
         * ...
         * @author zb
         */
        public class Player extends FlxSprite 
        {
                //嵌入的人物素材
                [Embed(source = 'media/spaceman.png')]
                protected var playerImg:Class;
                
                //以下3个静态变量只是个值，方便修改
                //人物移动的速度得值
                protected static const PLAYER_RUN_SPEED:int = 80;
                //人物收到的重力加速度的值
                protected static const GRAVITY_ACCELERATION:Number = 420;
                //人物跳跃时的加速度
                protected static const JUMP_ACCELERATION:Number = 200;
                
                //初始化给个初始坐标，当然可以不用参数，不过super的时候一定要加上
                public function Player(startX:Number=100,startY:Number=50):void 
                {
                        //这个是一定要要的
                        //参数1：人物的初始 x 坐标
                        //参数2：人物的初始 y 坐标
                        //参数3：背景图片，不是作为人物素材图，填 null 就行了
                        super(startX, startY, null);
                        
                        //加载人物素材图片
                        //参数1：要加载的素材图的类名，Embed上面的那个
                        //参数2：是否需要制作素材动画，
                        //也就是说true的话，素材会被分割成很多小块，并保存为动画用，否则不会有动画
                        //参数3：设置为true 的话 ，那么改Player的facing 属性(用于人物面朝方向)才有效果
                        //类似于调整sprite的scaleX为-1（LEFT）/ 1（RIGHT）,自动调整对称点为中心点
                        //第4、5个参数设置显示图片素材的 宽度和高度,以及该Player的有效碰撞矩阵范围
                        //同时也作为分割素材动画小块的宽度和高度,具体可以打开 spaceman.png 来看看
                        loadGraphic(playerImg, true, true, 8, 8);
                        
                        //drag像是摩擦力,当加速度小于drag的时候，就会慢慢停下来。
                        //当人物不移动时，记得设置 加速度 为0,这样就会受摩擦力作用，人物缓慢停下
                        //由于摩擦力是移动时受到的反作用力，所以是该值都是物体移动方向的反方向
                        //即该值本身在算法中已经由公式运算时加入了方向判断，不需要人为再操作将它改成负数。
                        //因此一般摩擦力最好设为正数，如果设为负数，那么这个摩擦力的方向就会和物体移动方向同向
                        /** 注意 **/
                        //drag 可以设置为0的，这样就不会有 缓慢开始移动和停下 的过程
                        drag.x = PLAYER_RUN_SPEED * 8;
                        
                        //设置人物 y轴的加速度大小，相当于 重力加速度吧
                        acceleration.y = GRAVITY_ACCELERATION;
                        
                        //设置人物 x轴的速度的最大值,
                        //只需设置正数就行了，会自动判断反向的最大值的
                        maxVelocity.x = PLAYER_RUN_SPEED;
                        
                        //设置人物 y轴的速度的最大值,同理也只需要设置正数
                        maxVelocity.y = JUMP_ACCELERATION;
                        
                        //添加动画段，数组代表动画的节点位置
                        //参数1：动画的名字
                        //参数2：动画数组
                        //由于上面loadGraphic的时候,已经将显示素材的宽度设置为8
                        //所以动画的播放的时候，就是用节点数 乘以 显示素材的宽度来表示在原图中的像素位置（X坐标）
                        //比如[1,2,3,0],显示宽度为8，就表示动画依次为原图像素的8、16，24，0的X坐标位置（对照素材图来看）
                        //参数3：帧率，表示动画播放的快慢；
                        //参数4：动画是否循环播放，默认为true
                        /**  注意下  **/
                        //这里用到的图片是单行的动作，如果素材图片是有多行的图片怎么办？
                        //是一样的，假如图片 宽度 为24px，有3列动作，高度 为16px，有2行动作，
                        //同样以 8  8 来分割宽和高
                        //那么整个图片分割后的节点索引值排列如下：
                        //*****   0   1   2
                        //*****   3   4   5
                        addAnimation("idle", [0]);
                        addAnimation("run", [1, 2, 3, 0], 12);
                        addAnimation("jump", [4]);
                        addAnimation("idle_up", [5]);
                        addAnimation("run_up", [6, 7, 8, 5], 12);
                        addAnimation("jump_up", [9]);
                        addAnimation("jump_down", [10]);
                }
                
                //重写update 方法，用于控制
                public override function update():void
                {
                        //人物移动设置
                        //这里设置加速度为0，对应上面的注释说的drag的作用
                        //当不按按钮的时候，人物加速度为0，就那么人物会收到drag影响而停下来
                        acceleration.x = 0;
                        
                        //判断按的是 方向键 左还是右
                        //有人会问，FlxG.keys.justPressed('LEFT')这种有什么区别
                        //这个很明显的，justPressed 是 判断刚好按下去才会判断为true
                        //而这个 是 一直按住 都会判断为 true
                        //一般人物走动时都是一直按住方向键来移动的
                        if(FlxG.keys.LEFT)
                        {
                                //按住左时，人物脸像左
                                //这个就体现之前loadGraphic 方法中第三个参数reverse的作用了
                                //因为我们的素材 只是单方向的，所以设置了true
                                //facing为LEFT 的时候会反转方向
                                //由于默认 RIGHT 为 正方向的，所以如果你的素材是以左为正方向的话
                                //请去 PS 中调整下吧。。。
                                facing = LEFT;
                                
                                //由于是要往左边走，drag的力度是向右的
                                //所以此时 加速度设置 为 负数，这样做就抵消了 drag
                                //人物也就不受到 “摩擦力”的作用了
                                acceleration.x = -drag.x;
                        }
                        else if(FlxG.keys.RIGHT)
                        {
                                //这是往右的情况
                                facing = RIGHT;
                                
                                //这里就说明了 drag为正数的时候，方向与人物移动方向相反
                                acceleration.x = drag.x;
                        }
                        
                        //按下 X 键 的时候，进行跳跃
                        //onFloor是判断人物是否着地，初始化的时候值为 flase
                        if(FlxG.keys.justPressed('X') && onFloor)
                        {
                                //跳跃的时候，人物的y轴速度是向上的
                                velocity.y = -JUMP_ACCELERATION;
                        }
                        
                        //以下是判断人物的一些速度状态来进行各种动画播放
                        //看清楚 if，else if的判断，所以只会做其中一个，按优先级来排列判断内容
                        if(velocity.y != 0)
                        {
                                //y轴速度不为0 的时候，播放跳跃的动画
                                play("jump");
                        }
                        else if(velocity.x == 0)
                        {
                                //y轴速度为 0 了，就判断这里
                                //x轴速度为0 的时候，播放闲暇的动画
                                play("idle");
                        }
                        else
                        {
                                //y轴速度为 0 且 x轴速度不为 0，就播放跑步动画
                                play("run");
                        }
                        
                        /*** 切记 ***/
                        //这个语句一定要加上去，只要重写了update，就一定要调用 super的update
                        //否则不会刷新动画。。也不会相应你在这里所设置的控制
                        super.update();
                }
        }
        
}

 下面是 GameState 类，为什么不说MenuState呢，因为MenuState 被我当做开头动画了，所以游戏部分是 GameState 。
GameState 类，具体看的顺序如下：
一、        声明部分;
二、        create();
三、        addGround();
四、        addPlayer();
五、        addStateFuntion();
六、        update();
下面是具体类的定义：

 

package 
{
        import org.flixel.FlxG;
        import org.flixel.FlxState;
        import org.flixel.FlxTileblock;
        import org.flixel.FlxU;
        
        /**
         * ...
         * @author zb
         */
        public class GameState extends FlxState 
        {
                //人物。。懂的
                protected var player:Player;
                
                //一个地图块，没地板就要进入黑洞了。。
                //地图素材
                [Embed(source='media/tech_tiles.png')]
                protected var tileImg:Class;
                //地图块
                protected var groundTile:FlxTileblock;
                override public function create():void 
                {
                        //本来打酱油的 hello flixel 文本 可以丢掉了
                        //add(new FlxText(50, 100, 200, 'Hello Flixel !!'));
                        
                        //在添加人物前，先建立一个地板。。。
                        //先看此方法
                        addGround();
                        
                        //这个是添加人物
                        //看完地图建立后，看这里
                        addPlayer();
                        
                        //下面是一些游戏功能的东东，很有用的
                        addStateFuntion();
                }
                
                private function addGround():void
                {
                        //新建地图块实例
                        //参数1：该地图块的x 坐标
                        //参数2：该地图块的y 坐标
                        //参数3：该地图块的宽度
                        //参数4：该地图块的高度
                        groundTile = new FlxTileblock(0, 200, 640, 20);
                        
                        //加载地图素材
                        //参数1：图片素材的类
                        //参数2：素材中每一个小块的宽度
                        //参数3：素材中每一个小块的高度
                        //参数4：构建地图块的时候，设置空白格子的数量
                        /**  注意  **/
                        //这里参数 2，3 都填了0（默认为 0），是因为引擎的自己的默认算法，
                        //具体算法是不是默认为宽高均为8就不清楚了
                        //参数4这里也填0（默认为 0），空白数量是根据填的 按一个比例算法进行的
                        //各位同学可以自己试着改改参数看看效果。。
                        groundTile.loadTiles(tileImg, 0, 0, 0);
                        
                        //这里讲 groundTile  add到 state中了
                        add(groundTile);
                }
                
                private function addPlayer():void
                {
                        player = new Player(100, 50);
                        add(player);
                }
                
                private function addStateFuntion():void
                {
                        //镜头追踪
                        //想要屏幕跟随人物的移动就靠他了
                        //参数1：追踪的对象
                        //参数2：镜头移动的缓动系数
                        FlxG.follow(player,2.5);
                        
                        //追踪缓动参数设置
                        //这个是对follow 的系数进一调整
                        //参数1：x轴的缓动的比例系数,当做是翻译理解吧。。
                        //参数2：y轴的缓动的比例系数
                        /** 注意 **/
                        //可能有同学对系数这概念不好理解，但是自己试下改改参数的值就明白了
                        FlxG.followAdjust(0.5, 0.0);
                        
                        //追踪镜头的移动范围
                        //应该很好理解的，就是一个矩阵范围
                        FlxG.followBounds(0, 0, 640, 480);
                        
                        //设置地图边界
                        //边界设置，超过边界的东东即便显示，也不会进行碰撞检测等
                        //可以试试将640 改为200，然后人物向右边移动就明白了
                        //不设置会默认无限大
                        //看清楚 是  FlxU 类哦！！！
                        /**  注意  **/
                        //对于 FlxG 和 FlxU 到底都有什么功能，直接看官方的 API吧，包里面有文档
                        FlxU.setWorldBounds(0, 0, 640, 480);
                }
                
            override public function update():void 
                {
                        //碰撞检测，不然 人物就不会和地板发生碰撞了
                        //这个也是 FlxU 类哦！！！
                        FlxU.collide(player, groundTile);
                        
                        //当然这么碰撞判断也可以的,反过来用groundTile来使用collide方法也可以的
                        //player.collide(groundTile);
                        
                        //还是要提醒下，别忘了加上。。。
                        super.update();
                }
        }
        
}

 好了运行看看吧~