实战案例|摇奖游戏的开发教程

今天，我们跟大家分享一个实战小案例-----具有互动特效的摇奖游戏。在这个小案例中，可以看到随风徐徐下落的花瓣，点击时还会有元宝掉落。这个实战案例可以直接用于抽奖游戏，或者游戏特效使用。

效果图如下：
逻辑图

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的过程中，如果有独特的方法或心得体验，欢迎与我们交流并分享给诸多开发者朋友！谢谢大家！