實戰案例|搖獎游戲的開發教程

今天，我們跟大家分享一個實戰小案例-----具有互動特效的搖獎游戲。在這個小案例中，可以看到隨風徐徐下落的花瓣，點擊時還會有元寶掉落。這個實戰案例可以直接用于抽獎游戲，或者游戲特效使用。

邏輯圖

1、創建項目

打開Wing，創建一個游戲項目

（因為游戲中用的素材背景圖是400x800的分辨率，所以我將屏幕的大小也設置成480x800）

2、添加素材到項目中

將游戲中用到的素材添加到項目中，并在資源配置文件中進行配置

3、顯示背景與搖錢樹

在createGameScene函數中添加如下代碼：

       var sky:egret.Bitmap = this.createBitmapByName("bg_jpg");
        this.addChild(sky);
        var stageW:number = this.stage.stageWidth;
        var stageH:number = this.stage.stageHeight;
        sky.width = stageW;
        sky.height = stageH;

        var normalTree_png:egret.Bitmap =  this.createBitmapByName("normalTree_png");
        this.addChild(normalTree_png);
        normalTree_png.y = this.height/2 - normalTree_png.height/2;
        normalTree_png.x = this.stage.stageWidth / 2 - normalTree_png.width / 2;

        private createBitmapByName(name:string):egret.Bitmap {
        var result:egret.Bitmap = new egret.Bitmap();
        var texture:egret.Texture = RES.getRes(name);
        result.texture = texture;
        return result;
    }

**4、添加花瓣飄落的特效---粒子特效制作

4.1 安裝粒子編輯器**

粒子特效是指為模擬顯示中的水、火、霧、氣等效果，將無數的單個粒子組合，使其呈現出固定形態，借由控制器、腳本來控制整體或者單個粒子的運動，從而模擬出真實的效果。

白鷺引擎提供了一款容易上手的粒子編輯器--------EgretFeather，能讓我們很快地在短短幾分鐘內創造和試驗我們自己的粒子特效。

可以通過下面的鏈接下載粒子編輯器。https://www.egret.com/downloads/feather.html

4.2 編輯粒子特效

在主界面上包含了幾個面板，分別是：紋理面板、顏色面板、動作面板、基本屬性面板、可視調節面板、渲染面板。

其中，“基本屬性”面板詳細定義了粒子發射器的相關參數，“動作屬性“面板定義了粒子運動環境參數，這二者決定了粒子的運動狀態。在編輯器中，我們可以實時看到生成的例子效果，非常直觀方便。

或者，我們可以通過”可視調節區“，通過拖拽鼠標來模擬自然現象進行調整。

基本屬性中有幾個參數需要解釋說明一下：

發射時長：例子出現的總時間，單位毫秒，-1是永遠出現。

發射位置y:例子出現的y坐標。

發射位置浮動y:y坐標，例子出現在那個范圍內。

4.3 添加粒子庫

在Egret中粒子特效是以第三方庫的形式使用的，所以首先我們需要在自己的項目中配置第三方庫particle.

我是在下面的鏈接中下載的第三方庫，官網為我們總結好了常用的第三方庫。

https://bbs.egret.com/thread-24868-1-1.html

打開我下載的壓縮包，找到particle.

如圖將particle目錄拷貝到項目中的libs目錄下，注意要放在modules目錄外面。

然后在，egretProperties.json文件中進行配置。

{
  "engineVersion": "5.2.33",
  "compilerVersion": "5.2.33",
  "template": {},
  "target": {
    "current": "web"
  },
  "modules": [
    {
      "name": "egret"
    },
    {
      "name": "game"
    },
    {
      "name": "tween"
    },
    {
      "name": "assetsmanager"
    },
    {
      "name": "promise"
    },
    {
      "name":"particle",
      "path":"./libs/particle"
    }
  ]
}

4.4 創建粒子對象，添加到顯示隊列中

添加成員屬性

private systemLeaf:particle.ParticleSystem;

在createGameScene中添加如下代碼

                       var texture = RES.getRes("leaftexiao_png");
        var config = RES.getRes("leaftexiao_json");
        this.systemLeaf = new particle.GravityParticleSystem(texture, config);
        this.addChild(this.systemLeaf);
        this.systemLeaf.start();

5、添加點擊事件，增加元寶掉落的特效

給搖錢樹添加點擊事件

       normalTree_png.touchEnabled = true;
       normalTree_png.addEventListener(egret.TouchEvent.TOUCH_TAP, this.rainHandler, this);

 private _rainParticle:particle.GravityParticleSystem;
    private rainHandler(e:egret.TouchEvent):void {
        if (this._rainParticle == null) {
            var texture = RES.getRes("silver_png");
            var config = RES.getRes("silverRain_json");
            this._rainParticle = new particle.GravityParticleSystem(texture, config);
            this.addChild(this._rainParticle);
        }

        this._rainParticle.start(1000);
    }

另：關于圖片格式jpg與png的區別

在游戲中常用的圖片格式是jpg和png，常用的繪圖軟件都可以生成這兩種格式的文件，他們之間的區別是：jpg圖片沒有透明通道，而png圖片可以保存透明部分。即如果圖像中間需要不規則邊界，或者中間需要透明部分，應保存為png格式；如果僅僅是矩形圖像，沒有透明的部分，則保存成jpg格式。通常同樣的圖像，jpg格式會比png格式小一些。

源碼地址：https://github.com/WQQPsyche/yaoqianshu

大家在使用Egret Wing的過程中，如果有獨特的方法或心得體驗，歡迎與我們交流并分享給諸多開發者朋友！謝謝大家！