话说上回游戏背景和音效成功的动起来了，接下来就是在背景上添加更多的模块来让游戏感体现出来，期待主角上场吧。。。
1.新建父类Role角色管理模块
class Role extends egret.DisplayObjectContainer{
/**
* 屏幕高宽
*/
private mStageW:number=0;
private mStageH:number=0;
/**
* 角色的血量
*/
private mBlood:number=0;
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.createAirplane,this);
}
/**
* 创建角色
*/
public createAirplane():void{
this.mStageW = this.stage.stageWidth;
this.mStageH = this.stage.stageHeight;
}
/**
* 检测敌机之间碰撞
*/
public checkCollosion(x:number,y:number,obj:egret.DisplayObjectContainer):boolean{
return false;
}
/**
* 更新角色的血量
*/
public updateBlood():void{
}
public setBlood(blood:number){
if(blood<=0){
blood = 0;
}
this.mBlood = blood;
}
public getBlood():number{
return this.mBlood
}
/**
* 获取屏幕高宽
*/
public getStageW() : number{
return this.mStageW;
}
public getStageH() : number{
return this.mStageH;
}
/**
* 获取角色位置
*/
public getX():number{
return 0;
}
public getY():number{
return 0;
}
/**
* 角色高宽
*/
public getWidth():number{
return 0;
}
public getHeight():number{
return 0;
}
}
角色基本信息，比如位置x,y；角色的高宽；血量等信息；每种角色的血量肯定都不一样的。
2.新建主角类Lead继承Role。
class Lead extends Role{
/**
* 角色
*/
private mLead: egret.Bitmap;
/**
* 血量，主角血量默认为100
*/
private mBloodShape:egret.Shape;
/**
* 主角分数
*/
private mScore:egret.TextField;
private mScoreNumber:number=0;
/**
* 主角控制器
*/
private mCollect: egret.Bitmap;
private mTouchStatus: boolean = false;
private mDistance:egret.Point = new egret.Point();
/**
* 尾部喷气
*/
private mPlayblow : egret.Bitmap;
private mPlayblowH : number;
private mSpeedAngle : number;
/**
* 主角出场完成
*/
private mTweenComplete: Function;
private mLevel:Level;
public constructor(tweenComplete:Function,level:Level) {
super();
this.mTweenComplete = tweenComplete;
this.mLevel = level;
}
public createAirplane():void{
super.createAirplane();
this.setBlood(100);
this.mSpeedAngle = 5;
var stageW = this.getStageW();
var stageH = this.getStageH();
//主角
this.mLead = ImageResUtils.createBitmapByName("lead_png");
this.addChild(this.mLead);
this.mLead.width = 68;
this.mLead.height = 68;
this.mLead.x = (stageW) / 2;
this.mLead.y = stageH+this.mLead.height*2;
//尾部火焰
this.mPlayblow = ImageResUtils.createBitmapByName("playblow_png");
this.addChildAt(this.mPlayblow,0);
this.mPlayblowH = 65;
this.mPlayblow.width = 68;
this.mPlayblow.height =this.mPlayblowH;
this.mPlayblow.x = this.mLead.x;
this.mPlayblow.y = this.mLead.y + this.mLead.height / 1.5;
var timer = new egret.Timer(5,0);
timer.addEventListener(egret.TimerEvent.TIMER,this.startBlowAnimation,this);
timer.start();
//手指触摸位置控制器
this.mCollect = ImageResUtils.createBitmapByName("playerunmatched_png");
this.addChild(this.mCollect);
this.mCollect.width = 68;
this.mCollect.height = 68;
this.mCollect.anchorOffsetX = this.mCollect.width / 2;
this.mCollect.anchorOffsetY = this.mCollect.height / 2
this.mCollect.x = this.mLead.x + this.mCollect.width/2;
this.mCollect.y = this.mPlayblow.y+this.mPlayblow.height * 1.2;
this.addEventListener(egret.Event.ENTER_FRAME,(evt:egret.Event)=>{
this.mCollect.rotation+=10;
},this);
//进场动画
var leadY = stageH - this.mLead.height * 3;
egret.Tween.get(this.mLead).to({y:leadY},2500,egret.Ease.backInOut).call(this.mTweenComplete,this.mLevel);
var playblowY = leadY + this.mLead.height / 1.5;
egret.Tween.get(this.mPlayblow).to({y:playblowY},2500,egret.Ease.backInOut);
egret.Tween.get(this.mCollect).to({y:playblowY+this.mPlayblow.height * 1.2},2500,egret.Ease.backInOut);
//移动主角
this.mCollect.touchEnabled = true;
this.mCollect.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.mouseDown,this);
this.mCollect.addEventListener(egret.TouchEvent.TOUCH_END,this.mouseUp,this);
//初始化血量
this.mBloodShape = new egret.Shape();
this.addChild(this.mBloodShape);
this.updateBlood();
//分数
this.mScore = new egret.TextField();
this.mScore.textColor = 0xfffffff;
this.mScore.width = 200;
this.mScore.height = 100;
this.mScore.textAlign = "center";
this.mScore.x = 0;
this.mScore.y = 30;
this.addChild(this.mScore);
this.updateScore();
}
/**
* 刷新主角血量
*/
public updateBlood():void{
this.mBloodShape.graphics.clear();
var blood:number = this.getBlood();
if(blood==0){
Level.GAME_STATE = Level.GAME_END;
}
if(blood>100){
blood=100;
}
if(blood<=20){
this.mBloodShape.graphics.beginFill(0xdc143c);
}else{
this.mBloodShape.graphics.beginFill(0xfffffff);
}
this.mBloodShape.graphics.drawRect(240,40,blood * 4,10);
this.mBloodShape.graphics.endFill();
}
/**
* 刷新分数
*/
private updateScore():void{
this.mScore.text = this.mScoreNumber.toString();
}
/**
* 按下
*/
private mouseDown(event: egret.TouchEvent) : void{
this.mTouchStatus = true;
this.mDistance.x = event.stageX - this.mLead.x;
this.mDistance.y = event.stageY - this.mLead.y;
this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,this.mouseMove,this);
};
/**
* 移动
*/
private mouseMove(event: egret.TouchEvent) : void{
if(this.mTouchStatus && this.getBlood()>0){
var leadX:number = event.stageX - this.mDistance.x;
var leadY:number = event.stageY - this.mDistance.y;
leadX = leadX<0?0:leadX;
leadX = leadX>this.getStageW()-this.mLead.width?this.getStageW()-this.mLead.width:leadX;
leadY = leadY<0?0:leadY;
leadY = leadY>this.getStageH()-this.mLead.height-this.mCollect.height?this.getStageH()-this.mLead.height-this.mCollect.height:leadY;
this.mLead.x = leadX;
this.mLead.y = leadY;
//尾气火焰移动
this.mPlayblow.x = this.mLead.x;
this.mPlayblow.y = this.mLead.y + this.mLead.height / 1.5;
//控制器
this.mCollect.x = this.mLead.x + this.mCollect.width/2;
this.mCollect.y = this.mPlayblow.y+this.mPlayblow.height * 1.2;
this.mCollect.alpha = 0;
}
}
/**
* 松开
*/
private mouseUp(event: egret.TouchEvent){
this.mTouchStatus = false;
this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE,this.mouseMove,this);
this.mCollect.alpha = 1;
}
/**
* 火焰喷射动画
*/
private startBlowAnimation() : void{
this.mPlayblowH += this.mSpeedAngle;
if(this.mPlayblowH>=75 || this.mPlayblowH<55){
this.mSpeedAngle = -this.mSpeedAngle;
}
this.mPlayblow.height = this.mPlayblowH;
}
public getX():number{
return this.mLead.x;
}
public getY():number{
return this.mLead.y;
}
public getWidth():number{
return this.mLead.width;
}
public getHeight():number{
return this.mLead.height;
}
}
主角类的每一个地方我都写了注释，很明确，主要说一下主角组成部分和在容器体现出的地方：
- 容器顶部多了一个数字和一个矩形条，分别代表的是游戏的分数以及血量。
1.分数核心代码：
//分数
this.mScore = new egret.TextField();
this.mScore.textColor = 0xfffffff;
this.mScore.width = 200;
this.mScore.height = 100;
this.mScore.textAlign = "center";
this.mScore.x = 0;
this.mScore.y = 30;
this.addChild(this.mScore);
this.updateScore();
/**
* 刷新分数
*/
private updateScore():void{
this.mScore.text = this.mScoreNumber.toString();
}
2.血量核心代码：
//设置血量为100
this.setBlood(100);
this.mBloodShape = new egret.Shape();
this.addChild(this.mBloodShape);
this.updateBlood();
/**
* 刷新主角血量
*/
public updateBlood():void{
this.mBloodShape.graphics.clear();
var blood:number = this.getBlood();
if(blood==0){
Level.GAME_STATE = Level.GAME_END;
}
if(blood>100){
blood=100;
}
if(blood<=20){
this.mBloodShape.graphics.beginFill(0xdc143c);
}else{
this.mBloodShape.graphics.beginFill(0xfffffff);
}
this.mBloodShape.graphics.drawRect(240,40,blood * 4,10);
this.mBloodShape.graphics.endFill();
}
这里出现了一个新的东西egret.Shape，可以做很多事情，类似于Android的Canvas可以绘制各种各样的形状，做游戏必学的。传送门
- 战机由三个部分组成：
1.飞机主体
//主角
this.mLead = ImageResUtils.createBitmapByName("lead_png");
this.addChild(this.mLead);
this.mLead.width = 68;
this.mLead.height = 68;
this.mLead.x = (stageW) / 2;
this.mLead.y = stageH+this.mLead.height*2;
2.主体尾部喷气式火焰
//尾部火焰
this.mPlayblow = ImageResUtils.createBitmapByName("playblow_png");
this.addChildAt(this.mPlayblow,0);
this.mPlayblowH = 65;
this.mPlayblow.width = 68;
this.mPlayblow.height =this.mPlayblowH;
this.mPlayblow.x = this.mLead.x;
this.mPlayblow.y = this.mLead.y + this.mLead.heisght / 1.5;
注意：引擎是不支持GIF的，所以动效你要么帧动画，要么自己代码实现。我这里是把火焰图片高度做不停的改变来实现喷射式效果。利用Timer定时器
var timer = new egret.Timer(5,0);
timer.addEventListener(egret.TimerEvent.TIMER,this.startBlowAnimation,this);
timer.start();
意思是每隔5秒执行一次回调方法startBlowAnimation；在回调函数来不停的改变火焰高度
/**
* 火焰喷射动画
*/
private startBlowAnimation() : void{
this.mPlayblowH += this.mSpeedAngle;
if(this.mPlayblowH>=75 || this.mPlayblowH<55){
this.mSpeedAngle = -this.mSpeedAngle;
}
this.mPlayblow.height = this.mPlayblowH;
}
3.看见主角战机下有一个在旋转的按钮没有？没错，那就是让玩家来触摸控制主角的地方，为什么需要这个设计呢？这就是体验问题，自己思考一下吧。
//手指触摸位置控制器
this.mCollect = ImageResUtils.createBitmapByName("playerunmatched_png");
this.addChild(this.mCollect);
this.mCollect.width = 68;
this.mCollect.height = 68;
this.mCollect.anchorOffsetX = this.mCollect.width / 2;
this.mCollect.anchorOffsetY = this.mCollect.height / 2
this.mCollect.x = this.mLead.x + this.mCollect.width/2;
this.mCollect.y = this.mPlayblow.y+this.mPlayblow.height * 1.2;
this.addEventListener(egret.Event.ENTER_FRAME,(evt:egret.Event)=>{
this.mCollect.rotation+=10;
},this);
这里一定要写上anchorOffsetX ，anchorOffsetY 的参数赋值，这样才能让控制器围绕自己中心点旋转。
通过addEventListener监听帧动画来维持持续旋转。
- 主角组合完成，怎么在容器中自由移动呢？
1.通过按住旋转控制器来上下左右移动主角，
//移动主角
this.mCollect.touchEnabled = true;
this.mCollect.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.mouseDown,this);
this.mCollect.addEventListener(egret.TouchEvent.TOUCH_END,this.mouseUp,this);
后面两个监听我能理解，手指按下和离开，第一行this.mCollect.touchEnabled = true;真不理解引擎为什么这样设计的，必须要给需要触摸事情的对象设置此参数，如果你不小心忽略了这一行，后面所有的触摸监听没有任何作用。
2.按下的时候除了记录位置，还需要添加监听整个屏幕的移动事件，这样才能知道手指移动的位置。
/**
* 按下
*/
private mouseDown(event: egret.TouchEvent) : void{
this.mTouchStatus = true;
this.mDistance.x = event.stageX - this.mLead.x;
this.mDistance.y = event.stageY - this.mLead.y;
this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,this.mouseMove,this);
};
3.上面说了主角是多个部分组成，所以移动的时候组合部位需要跟着移动，不然就解体了，移动的时候做了边缘判断，保证随便怎么移动都只能在容器可见位置，并且隐藏控制器，表示主角已经受到玩家控制。
/**
* 移动
*/
private mouseMove(event: egret.TouchEvent) : void{
if(this.mTouchStatus && this.getBlood()>0){
var leadX:number = event.stageX - this.mDistance.x;
var leadY:number = event.stageY - this.mDistance.y;
leadX = leadX<0?0:leadX;
leadX = leadX>this.getStageW()-this.mLead.width?this.getStageW()-this.mLead.width:leadX;
leadY = leadY<0?0:leadY;
leadY = leadY>this.getStageH()-this.mLead.height-this.mCollect.height?this.getStageH()-this.mLead.height-this.mCollect.height:leadY;
this.mLead.x = leadX;
this.mLead.y = leadY;
//尾气火焰移动
this.mPlayblow.x = this.mLead.x;
this.mPlayblow.y = this.mLead.y + this.mLead.height / 1.5;
//控制器
this.mCollect.x = this.mLead.x + this.mCollect.width/2;
this.mCollect.y = this.mPlayblow.y+this.mPlayblow.height * 1.2;
this.mCollect.alpha = 0;
}
}
4.手指离开的时候，移除监听屏幕移动事件，显示控制器。
/**
* 松开
*/
private mouseUp(event: egret.TouchEvent){
this.mTouchStatus = false;
this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE,this.mouseMove,this);
this.mCollect.alpha = 1;
}
3.回到我们的关卡类TheFirstPass修改startGame方法，添加主角类进场。
public startGame(){
super.startGame();
//加载背景
this.mBgGame = new BackgroundGame();
this.addChild(this.mBgGame);
//主角进场
var lead = new Lead(function(){
this.mBgGame.startAnimationBg();
},this);
this.addChild(lead);
//加载游戏音乐
this.mBgSoundMusic = new BgSoundMusic();
this.mBgSoundMusic.playMusic();
//游戏结束提示
this.mGameTextMessage = new egret.TextField();
this.mGameTextMessage.textColor = 0xfffffff;
this.mGameTextMessage.size = 40;
this.mGameTextMessage.textAlign = "center"
this.mGameTextMessage.x = 0;
//重新开始
this.mGameRestart = new egret.TextField();
this.mGameRestart.textColor = 0xfffffff;
this.mGameRestart.size = 40;
this.mGameRestart.textAlign = egret.HorizontalAlign.CENTER;
this.mGameRestart.verticalAlign = egret.VerticalAlign.MIDDLE;
this.mGameRestart.backgroundColor = 0x000000;
this.mGameRestart.text = "再来一次"
this.mGameRestart.touchEnabled = true;
this.mGameRestart.stroke = 1;
this.mGameRestart.strokeColor = 0xffffff;
}
相比上一章修改了一下出场逻辑，等主角出场动画完成后再开始执行游戏背景动画，这样看来好像更符合逻辑。
主角已经完美出场了，是不是感觉并不是很难呢，无非就是多看官方文档和亲自试验，期待下一篇吧，给主角配上武器。
在线体验
如果是电脑端记得先把浏览器缩小后再打开地址，不然是横过来的。
