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 5addAnimation("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是判断人物是否着地，初始化的时候值为 flaseif(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();}}}

 好了运行看看吧~