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

效果圖如下：
邏輯圖

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的過程中，如果有獨特的方法或心得體驗，歡迎與我們交流并分享給諸多開發者朋友！謝謝大家！

總結

以上是生活随笔為你收集整理的实战案例|摇奖游戏的开发教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。