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();
}
}
}
好了运行看看吧~