簡介
Egret實戰開發，記錄每天的學習進度，歡迎和我一起學習交流~
大家好，今天寫下這篇文章記錄學習Egret游戲開發，作者目前也是在學習白鷺引擎的初級階段，又很多地方可能講解還不夠細致正確，我的僅供參考。此篇文章也又不足或者模糊的地方可以評論隨意指出。
之后我會持續更新Egret引擎的學習教程，想要了解Egret引擎的盆友記得加關注呦。我會用很多圖讓大家直觀的學習，避免走彎路，之后的代碼和引擎庫學習，希望朋友們看過我的講解之后再多去磕一磕，自我吸收一下，互相學習?？梢躁P注下我的公眾號 知言不盡。會為大家解答哦~
實現效果
背景從上向下移動
class BG extends egret.Sprite{
public bg:egret.Bitmap[] = [];
public fg:egret.Bitmap; //前景
public vy:number; //背景移動的速度
public game:MainGame; //上一級指針
public constructor(game:MainGame) {
super();
this.game = game;
for(let i = 0 ; i < 2; i ++){
this.bg[i] = Main.createBitmapByName("bg11_jpg");
this.addChild(this.bg[i]);
//對圖片的定位
this.bg[i].y = 0 - i* this.bg[i].height;
}
this.vy = 10; //背景移動速度
}
public update(){
for(let i = 0 ; i < 2; i++){
//圖片向下移動
this.bg[i].y+=this.vy;
//當圖片移動到屏幕下面就得放到上面
if(this.bg[i].y > 800){
//有幾張圖片就挪到幾張圖片高度
this.bg[i].y -=2*this.bg[i].height;
}
}
}
}
飛行射擊游戲是單屏游戲，類似跑酷 ，不可能讓攝像機停下來。背景向下運動，才能讓玩家感覺飛機在向前飛行。
1.背景實現： BG.ts
申請：
因為是2張圖片。構造數組 public bg:egret.Bitmap[] = [];
前景1張 public fg:egret.Bitmap; //前景
public vy:number; //背景移動的速度
public game:MainGame; //上一級指針 鏈式對象管理
前景3個圖片隨機生成
public resetFG(){
//隨機0~2 0天梯，1，2
let id = Math.floor(Math.random()*3);
switch(id){
case 0 :
this.fg.texture = RES.getRes("bg12_png");
if(Math.random()*100 < 50){//50%概論向左還是向右
this.fg.scaleX = -1;
this.fg.x = 480;
}else{
this.fg.scaleX = 1;
this.fg.x = 0;
}
break;
case 1:
this.fg.texture = RES.getRes("bg13_png");
this.fg.x = 480 - Math.random()*184;
this.fg.scaleX = 1;
break;
case 2 :
this.fg.texture = RES.getRes("bg13_png");
this.fg.x = Math.random() * 184;
this.fg.scaleX = -1;
break;
}
this.fg.y = -500 - Math.random()*100;
}
用Id來隨機前景圖片，使用狀態機來用id作為隨機生成顯示。下面做了一個細節，隨機進行翻轉，用scaleX來實現避免出現一樣的情況。
resetFG()方法會執行很多次，所有重置方法不存在默認值。只要是重置方法，都需要對屬性進行重新賦值。若不賦值，會保留上次的值。
二．角色控制
角色類
飛機有3張圖片，因為是2D游戲，用小細節來實現3D效果，
申請：
軌跡跟隨原理：
實際速度V，若手指移動很快為80像素， 但飛機最大速度為30. 實際走的為橙色三角形斜邊。
先求C，
vy = v * a/c; vx = v * b/c;
public touchMove() 對當前值更新
移動當中，oxoy上一次點擊不變，所以改變的是當前位置。ny跟著觸筆，時刻獲取最新位置。
touch三方法，ox oy nx ny 變化，玩家就可以移動，ox記錄開始，nx記錄玩家變化。
所以在update方法中，有軌跡跟隨的核心代碼
求c邊 a，b是橫縱軸移動距離，c是實際移動距離
根據速度的vxvy 再根據fi的值。向左飛只要比2大一直減。
用于顯示拖動飛機偏轉效果
至此，就顯示了文首的效果，若自己在學習過程中，出現問題，可以私信我為你解決，或者關注我的公眾號 知言不盡，找到我，獲取資源包， 發給你文件校驗。
