Egret社区

摇奖游戏制作

2020-1-19 14:50
1601
今天,做了一个小案例-----具有互动特效的摇奖游戏。在这个小案例中,可以看到随风徐徐下落的花瓣,点击时还会有元宝掉落。这个案例可以直接用于抽奖游戏,或者游戏特效使用。
效果图如下:
效果图.gif
file:///Users/wangqianqian/Desktop/2020-01/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/img/%E6%95%88%E6%9E%9C%E5%9B%BE.gif?lastModify=1579416826
逻辑图

1

1
file:///Users/wangqianqian/Desktop/2020-01/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/img/%E9%80%BB%E8%BE%91%E5%9B%BE.png?lastModify=1579416826
1、创建项目
打开wing,创建一个游戏项目
createPro.png
file:///Users/wangqianqian/Desktop/2020-01/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/img/createPro.png?lastModify=1579416826
(因为游戏中用的素材背景图是400x800的分辨率,所以我将屏幕的大小也设置成480x800)
2、添加素材到项目中
将游戏中用到的素材添加到项目中,并在资源配置文件中进行配置
res.png
file:///Users/wangqianqian/Desktop/2020-01/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/img/res.png?lastModify=1579416826
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
downloadFeater.png

file:///Users/wangqianqian/Desktop/2020-01/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/img/downloadFeater.png?lastModify=1579416826
4.2 编辑粒子特效
feather1.jpg
file:///Users/wangqianqian/Desktop/2020-01/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/img/feather1.jpg?lastModify=1579416826
在主界面上包含了几个面板,分别是:纹理面板、颜色面板、动作面板、基本属性面板、可视调节面板、渲染面板。
其中,“基本属性”面板详细定义了粒子发射器的相关参数,“动作属性“面板定义了粒子运动环境参数,这二者决定了粒子的运动状态。在编辑器中,我们可以实时看到生成的例子效果,非常直观方便。
或者,我们可以通过”可视调节区“,通过拖拽鼠标来模拟自然现象进行调整。
feather2.png
file:///Users/wangqianqian/Desktop/2020-01/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/img/feather2.png?lastModify=1579416826
基本属性中有几个参数需要解释说明一下:
发射时长:例子出现的总时间,单位毫秒,-1是永远出现。
发射位置y:例子出现的y坐标。
发射位置浮动y:y坐标,例子出现在那个范围内。

4.3 添加粒子库
在egret中粒子特效是以第三方库的形式使用的,所以首先我们需要在自己的项目中配置第三方库particle.
我是在下面的链接中下载的第三方库,官网为我们总结好了常用的第三方库。

11

11
打开我下载的压缩包,找到particle.
disanfangku2.png
file:///Users/wangqianqian/Desktop/2020-01/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/img/disanfangku.png?lastModify=1579416826
如图将particle目录拷贝到项目中的libs目录下,注意要放在modules目录外面。
file:///Users/wangqianqian/Desktop/2020-01/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/img/disanfangku2.png?lastModify=1579416826
然后在,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格式小一些。

res.png
feather2.png
feather1.png
feather1.jpg
downloadFeater.png
disanfangku2.png
disanfangku.png
createPro.png
逻辑图.png
效果图.gif
分享到 :
0 人收藏

1 个回复

倒序浏览
l1076952234  登堂入室 | 2020-1-20 10:30:31
666
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部