Egret消滅星星

前言

• 目的:是爲了熟悉Egret引擎
• 這款小遊戲仍是個半成品。

一些經常使用方法、技巧

*官網的一些經常使用方api版本多，隱藏的較深，比較很差找，因此總結下一些經常使用的。

類	描述
DisplayObject	顯示對象基類，全部顯示對象均繼承自此類
Bitmap	位圖，用來顯示圖片
Shape	用來顯示矢量圖，可使用其中的方法繪製矢量圖形
DisplayObjectContainer	顯示對象容器接口，全部顯示對象容器均實現此接口
Sprite	與DisplayObjectContainer相似，多一些功能
Stage	舞臺類
TextField	文本類
TextInput	輸入文本類

Bitmap

這應該是最經常使用到的

//建立一個圖片精靈
    let sky = new egret.Bitmap();
      sky.texture = RES.getRes("game_scene_bg"); //RES.getRes獲取資源
      sky.width = 100;
      skt.height = 100;
      this.addChild(sky);
      
    //九宮格位圖,改變長寬而不改變圓角處，見下圖。
    let sky = new egret.Bitmap();
      sky.texture = RES.getRes("game_scene_bg"); //RES.getRes獲取資源
      this.addChild(sky);
      let rect:egret.Rectangle = new egret.Rectangle(30,31,40,41);
      sky.scale9Grid = rect;

除了寬高還有許多屬性，能夠設置也能夠獲取，遊戲中會有許多邏輯判斷，都將會用到這些數據。

alpha:1
anchorOffsetX:0
anchorOffsetY:0
blendMode:"normal"
cacheAsBitmap:false
filters:null
hashCode:40
height:456
mask:null
matrix:Matrix
measuredHeight:456 
measuredWidth:326
name:""
numChildren:3
parent:Main
platingPage:
playingPage {$hashCode: 46, $EventDispatcher: {…}, $children: Array(0), $parent: null, $stage: null, …}
rotation:0
scaleX:1
scaleY:1
scrollRect:null
skewX:0
skewY:0
stage:Stage
touchChildren:true
touchEnabled:false
visible:true
width:326
x:0
y:0

Shape

let shp:egret.Shape = new egret.Shape();
    shp.x = 100;
    shp.y = 100;
    shp.graphics.lineStyle( 10, 0x00ff00 );
    shp.graphics.beginFill( 0xff0000, 1);
    shp.graphics.drawCircle( 0, 0, 50 ); //圓 x,y,r
    //shp.graphics.drawRect( 0, 0, 100, 200 ); 矩形
    //shp.graphics.moveTo( 50, 50); 移動，不劃線
    //shp.graphics.curveTo( 100,100, 200,50);  曲線
    //shp.graphics.lineTo( 100, 20 ); 直線
    shp.graphics.endFill();
    this.addChild( shp );

TextField

let label:egret.TextField = new egret.TextField(); 
  label.text = "這是一個文本"; 
  label.textColor = 0xff0000; //顏色
  label.fontFamily = "KaiTi"; //字體
  label.textAlign = egret.HorizontalAlign.RIGHT; //佈局默認LEFT
  //描邊屬性
  label.strokeColor = 0x0000ff;
  label.stroke = 2;

  this.addChild( label );

TextInput

let txInput:egret.TextField = new egret.TextField;
  txInput.type = egret.TextFieldType.INPUT;
  txInput.width = 282;
  txInput.height = 43;
  txInput.x = 134;
  txInput.y = 592;
  txInput.textColor = 0x000000;
  /// 注意_container是事先創建好的一個顯示容器，即 egret.Sprite，而且已經添加到顯示列表中
  this._container.addChild(txInput);

Tween

let delay = 200, during = 100;
egret.Tween.get(sprite)
  .to({alpha: 0}, 1)  //動畫類型經常使用的有alpha、ritation、scaleX、scaleY、
  .to({alpha: 1, y: during}, delay)
            ...
  .wait(400)
  .call(()=>{
    ...
  });

添加、移除精靈

• parent.addChild(); //添加
• parent.removeChild(); //單個對象
• parent.removeChildren() ;//移除全部子對象
• parent.numChildren //獲取parent容器子對象的數量
• parent.getChildIndex(); //獲取精靈深度（疊放次序）
• parent.getChildAt(); //經過index獲取子對象（效率高）
• parent.getChildByName(); //經過name屬性獲取子對象（效率低）
• child.parent //獲取父級對象

Demo 部分代碼

/**
 *  結構Main - >startPage -> playingPage -> 結束頁？
 *  還有一種方案就是編寫自定義監聽事件，在每一個頁面結束以後觸發自定義事件，通知Main移除前頁面進入下一個頁面,結構：
 Main -> startPage, Main -> playingPage, Main -> 結束頁
 */

Main.ts

/**
     *  加載資源
     *  添加兩個子對象：背景、遊戲開始頁
     */
    private startPage = new StartPage(); //遊戲開始頁
    private onResourceLoadComplete(event: RES.ResourceEvent) {
    if (event.groupName == "startPage") {
        ...
        ...
        ...
      //背景
      let sky = new egret.Bitmap();
      sky.texture = RES.getRes("game_scene_bg");
      this.addChild(sky);
      sky.width = this.stage.stageWidth;
      sky.height = this.stage.stageHeight;

      this.addChild(this.startPage);
    }
  }

startPage.ts

public create(): void{
    //舞臺寬高
    let stageW = this.stage.stageWidth;
    let stageH = this.stage.stageHeight;

    //開始按鈕
    let starBtn = this.createBitmapByName("play_btn");
    this.addChild(starBtn);
    starBtn.width = 110;
    starBtn.height = 110;
    starBtn.anchorOffsetX = 55;
    starBtn.x = stageW * .5;
    starBtn.y = stageH * .6;
    starBtn.touchEnabled = true;
    starBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=> {
      this.removeChildren(); //移除全部子對象
      this.addChild(tip);  
    }, this);
    
    //遊戲提示
    let tip = this.createBitmapByName("help_info");
    tip.width = stageW * .9;
    tip.height = stageH * .55;
    tip.x = stageW * .05;
    tip.y = 120;
    tip.touchEnabled = true;
    tip.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=>{
      this.removeChild(tip);
      this.addChild(this.platingPage);  //添加遊戲頁
    }, this);
    
    //音樂按鈕
    let sound = this.createBitmapByName("sound_on_btn");
    let soundSwitch = true;
    this.addChild(sound);
    sound.width = 60;
    sound.height = 60;
    sound.anchorOffsetX = 60;
    sound.x =  stageW - 12;
    sound.y =  17;
    sound.touchEnabled = true;
    //點擊切換開關狀態
    sound.addEventListener(egret.TouchEvent.TOUCH_BEGIN, ()=>{
      if(soundSwitch){
        egret.Tween.get(sound)
          .to({scaleY: 1.1, scaleX: 1.1}, 150)
          .to({scaleY: 1, scaleX: 1}, 150);
        sound.texture = RES.getRes("sound_off_btn"); //替換資源
        soundSwitch = !soundSwitch;
      }
      else{
        egret.Tween.get(sound)
          .to({scaleY: 1.1, scaleX: 1.1}, 150)
          .to({scaleY: 1, scaleX: 1}, 150);
        sound.texture = RES.getRes("sound_on_btn");
        soundSwitch = !soundSwitch;
      }
    }, this);
  }

playingPage.ts

private createBlock():void{
    ...
    ...
    let matrix = []; //位置矩陣
    let Matrix = new egret.Sprite(); //新建一個容器，存放方塊，方便總體操做
    //初始化9*8方塊,
    this.addChild(Matrix);
    for(let j = 0; j<9; j++){
      matrix[j] = [];
      alreadyRet[j] = [], retrievalOk[j] = [];
      for(let i = 0; i<8; i++){
        let index = Math.floor(Math.random() * 5);
        let bl = this.createBitmapByName(`bl${index}`);
        matrix[j].push(bl);
        retrievalOk[j][i] = false;
        bl.name = index.toString();
        bl.width = 41;
        bl.height = 41;
        bl.x = 4 + 41 * j;
        bl.y = stageH - 3 - 41 * (i+1);
        Matrix.addChild(bl);
      }
    }
    //把點擊事件綁定到背景層
    let bg = this.parent.parent.getChildAt(0); //獲取背景精靈
    bg.touchEnabled = true;
    bg.addEventListener(egret.TouchEvent.TOUCH_BEGIN, click, this);
    function click(e) {
      position = this.getPosition(e); //經過點擊座標肯定點擊的方塊，避免了對每一個方塊都綁定點擊事件，提升效率
      ...
      ...
      //達到30分，進入下一關
      if(this.totalScore>=30){
        this.totalScore = 0;
        egret.Tween.get(Matrix)  //全部滑塊，下滑出屏幕
          .to({y:stageH},500)
          .call(()=>{
            //移除點擊事件，不然會形成重複綁定，後果很嚴重。
            bg.removeEventListener(egret.TouchEvent.TOUCH_BEGIN, click ,this);
            this.removeChild(Matrix);
            this.createBlock();
          });
        }
    }
  }
    
  /**
   * 幾乎每一個遊戲都要用到數字，複用率高，寫一個建立數字的方法
   * num：要顯示的數字
   * sprite：精靈（Sprite），把全部的數字都加入到他的子對象，方便總體 操做
   * width：單個數字的寬度
   * height：單個數字的寬度
   * x:數字x座標，錨點爲width/2,就是中間點橫座標。
   * y：最上方點的縱座標，爲了與其餘元素保持一致，方便計算。
   */
  private createNumber(num: number, sprite, width: number, height: number, x: number, y: number) {
    let number = num.toString();
    let len = number.length;
    let anchorX = width / 2 * len;
    sprite.removeChildren();
    for(let i = 0; i<len; i++){
      let item;
      item = new egret.Bitmap();
      //數字圖片使用官方Texture Merger合併。
      item.texture = RES.getRes(`number.${number.charAt(i)}`);
      item.width = width;
      item.height = height;
      item.anchorOffsetX = anchorX - width * i;
      item.x = x;
      item.y = y;
      sprite.addChild(item);
    }
  }

       以上代碼都沒有涉及邏輯部分並刪除了許多類似內容，每一個不一樣的遊戲邏輯都不同，參考價值不大，附上完整代碼：https://gitee.com/zhangweiqin...