Egret社区
本帖最后由 熊猫少女 于 2018-10-8 14:01 编辑

小白接触白鹭引擎4天,成功做了一款足球小游戏

  在接触白鹭引擎的第四天,我摸索着用EUI做了一个小游戏。可能游戏逻辑比较简单,使用的知识点也比较基础,今天与大家分享交流,请大神勿喷,不吝指点。我的小游戏设定很简单:鼠标点击神棍一下,足球开始上下动,获胜一方出现Win图片。
效果图如下:

图片1.png
图片2.png     图片3.png

第一步、新建一个项目,我取名为ball_demo
图片4.png

首先打开Mian.ts删除OnbuttonClick函数,删除createGameScene函数里面的所有内容,我们需要重写。
图片5.png       图片6.png
第二步、制作ball的exml皮肤文件
1.resource文件夹下创建了一个gameSkins文件夹用来保存自定义的皮肤文件。在gameSkins文件夹下右键点击新建一个eui组件(注意:这里也可以选择新建一个Exml文件,然后再新建一个ts文件)
图片7.png
2.将图片资源拖入到resource/assets目录下,上方会提示有6项新增资源,点击保存。然后打开default.res.json确认刚刚导入的图片是否在默认的preload组里面。
图片8.png

图片9.png

图片10.png

3.确认过后,点击打开ball.exml文件,将舞台宽和高设置为640 * 1136。

图片11.png

4.点击舞台,选择左下方控件,然后选择Image将它拖到舞台上。设置它的位置和宽高(或者直接点击约束),使其完全充满舞台(也可以不拖Image组件直接拖资源到舞台上哦)。
图片12.png                 图片13.png

5.接下来选择选中左下角的资源图标,找到bgImg背景图片拖入组件的资源里面,再用同样的方法将两面国旗、足球和Win图片拖入。

图片14.png                 图片15.png

6.下一步开始游戏的Button制作:选择引擎自带的button组件,将Button组件拖到舞台上,设置它的位置。在右侧的属性面板会看到“正常,按下,禁用”三个空白。这里我们将三种情况下的图片分别拖入其中即可。

图片16.png

7.接下来,设置Id:要给三张图片和Button分别设置它们的id,方便我们在代码中获取到。

图片17.png

8.然后将win_Top和Win_Buttom两个图片设置为不可见,按下Ctrl + S保存皮肤文件。

图片18.png

第三步、编写ball.ts代码
1.首先我们会看到这段代码,这段代码是因为我们之前在创建exml皮肤文件是选择的是新建eui组件,系统会自动帮我们将exml文件和ts文件关联起来,不需要我们自己去写。

图片19.png

而如果是先建一个exml文件,又建的ts文件,需要在constructor构造函数里面写上
this.skinName = “路径”;

图片20.png

2.将一会需要用到的游戏对象定义为全局变量(注意:这里的变量名必须和你刚刚设置的皮肤文件里的id一致);

图片21.png

接下来在childrenCreated函数中添加btn_start的事件监听。

图片22.png

3.关于ball足球的移动方法,这里我用的是缓动动画Tween。定义一个方法ballMove,利用随机函数在0~1之间随机一个数,如果小于0.5则球进下方,上方赢,反之下方赢。直接上代码吧。(原谅我暂时只能写这么Low的逻辑

图片23.png

[AppleScript] 纯文本查看 复制代码
private ballTween()
        {
                this.random = Math.random();
                if(this.random  < 0.5){
                        this.tw= egret.Tween.get(this.img_ball)
                        this.tw.to({y:1000},250).to({y:120},500).to({y:1000},500)
                        .to({y:120},500).to({y:1000},500).to({y:120},500).call(()=> 
                        {this.win_Buttom.visible =true;this.btn_start.currentState
                                 = "reset"; this.i = 4;
                        });
                }
                else if(this.random > 0.5){
                        this.tw= egret.Tween.get(this.img_ball)
                        this.tw.to({y:1000},250).to({y:120},500).to({y:1000},500)
                        .to({y:120},500).to({y:1000},500).call(()=> {this.win_Top.
                                visible =true;this.btn_start.currentState = "reset";
                                this.i = 4;
                        });
                        }
                }        



附:白鹭官方文档Tween缓动,官方文档里面写的很详细,比我写的更明白。
这里我开始用了官方的Timer计时器,发现总是有一点误差,最后用了缓动动画的.Call回调函数。当程序按照顺序执行完Tween缓动就会执行Call里面的方法(通过变量名.visible可以让Win图片显示出来。)

4.接下来写开始按钮的点击方法。这里用一个按钮来实现“开始、暂停、继续、和重新开始”四个功能。开始的想法是放四个按钮点哪个哪个显示其它隐藏,但实在太麻烦,最后的实现是换按钮图片。
打开ball.exml皮肤的源码,在Button里面的Skin一栏添加pause、resume和reset三个状态。

图片24.png

图片25.png

然后依照前面的source.up = “”; 分别给新增的三个状态添加图片资源即可。

图片26.png

按钮的4个功能可以通过switch case 来实现,如下图。
通过切换btn_start的 currentState当前状态来改变它的图片。

图片27.png

图片28.png

[AppleScript] 纯文本查看 复制代码
//点击神棍,足球开始缓动
        private onButtonClick(e:egret.TouchEvent){
                switch(this.i){
                        case 1://开始游戏
                                this.ballTween();
                                this.i++;
                                this.btn_start.currentState = "pause";
                        break;
                        case 2://暂停游戏
                                this.tw.setPaused(true);
                                this.btn_start.currentState = "resume";
                                this.i++;
                        break;
                        case 3://继续游戏
                                this.tw.setPaused(false);
                                this.btn_start.currentState = "pause";
                                this.i = 2;
                        break;
                        case 4://重新开始
                                //将win图片设置为不可见
                                this.win_Top.visible = false;
                                this.win_Buttom.visible = false;
                                //将足球图片位置居中
                                this.img_ball.x = this.stage.width /2 ;
                                this.img_ball.y = this.stage.height /2 ;
                                this.i = 1;
                                this.btn_start.currentState = "up"
                        break;
                }
        }


最后在游戏结束后,让btn_start的currentState = “reset”。i = 4(按钮功能为重新开始);

图片29.png

5.最后忘记补充一点:这里我做了一个按钮点击放大的效果,在皮肤源码里改button属性。不按下为90%,按下为100%。

图片30.png

图片31.png

到此,我的足球小游戏制作完毕。以后我还将发更多的在学习过程中制作的小案例与大家交流,共同进步,也请各位Egret大神多多赐教,分享更多优秀案例。


我已经将工程放到Github上了,可以点击下载工程源码。。


分享到 :
2 人收藏

22 个回复

倒序浏览
生死停留  初窥堂奥 | 2018-7-26 22:51:35
学习学习,但是没有图片资源,萌新怎么练习呀
熊猫少女  官方团队 | 2018-7-27 10:39:06
生死停留 发表于 2018-7-26 22:51
学习学习,但是没有图片资源,萌新怎么练习呀

这位童鞋,源码和素材已放到GitHub上,你可以下载,砸门一起学习,一起进步。。。
熊猫少女  官方团队 | 2018-7-27 10:39:14
生死停留 发表于 2018-7-26 22:51
学习学习,但是没有图片资源,萌新怎么练习呀

这位童鞋,源码和素材已放到GitHub上,你可以下载,砸门一起学习,一起进步。。。
生死停留  初窥堂奥 | 2018-7-28 00:06:09
熊猫少女 发表于 2018-7-27 10:39
这位童鞋,源码和素材已放到GitHub上,你可以下载,砸门一起学习,一起进步。。。 ...

那我就跟着**姐慢慢学习啦♪(^∇^*)
熊猫少女  官方团队 | 2018-7-30 09:17:32
生死停留 发表于 2018-7-28 00:06
那我就跟着**姐慢慢学习啦♪(^∇^*)

一起学习
apue_2e  初学乍练 | 2018-8-6 21:08:10
2.将一会需要用到的游戏对象定义为全局变量(注意:这里的变量名必须和你刚刚设置的皮肤文件里的id一致);

这个为什么要定义全局变量,我把他改成private,也没出错是为什么
熊猫少女  官方团队 | 2018-8-6 21:13:31
apue_2e 发表于 2018-8-6 21:08
2.将一会需要用到的游戏对象定义为全局变量(注意:这里的变量名必须和你刚刚设置的皮肤文件里的id一致); ...

定义全局变量是指在整个类中可以访问到,public公开可以在类外访问到,private只能在类内访问。这里的public和private,protected等是指访问修饰符,和全局变量是没关系的,在方法内定义的变量是局部变量,方法外是拿不到的,方法外定义的变量叫做全局变量
supercj  圆转纯熟 | 2018-8-16 11:51:46
标记一下!!!
viqecel  登堂入室 | 2018-8-26 22:57:02
正在编译项目...
  Error d:/phpStudy/PHPTutorial/WWW/ball/src/Main.ts (112,9): Cannot find name 'topMask'.
  Error d:/phpStudy/PHPTutorial/WWW/ball/src/Main.ts (112,41): Cannot find name 'stageW'.
  Error d:/phpStudy/PHPTutorial/WWW/ball/src/Main.ts (113,9): Cannot find name 'topMask'.
  Error d:/phpStudy/PHPTutorial/WWW/ball/src/Main.ts (114,9): Cannot find name 'topMask'.
  Error d:/phpStudy/PHPTutorial/WWW/ball/src/Main.ts (115,23): Cannot find name 'topMask'.
  Error d:/phpStudy/PHPTutorial/WWW/ball/src/Main.ts (134,28): Cannot find name 'stageW'.
  Error d:/phpStudy/PHPTutorial/WWW/ball/src/Main.ts (145,27): Cannot find name 'stageW'.
  Error d:/phpStudy/PHPTutorial/WWW/ball/src/Main.ts (158,66): Property 'onButtonClick' does not exist on type 'Main'.
项目共计编译耗时:4.131秒
编译失败
==========
另外.ball\src/ball.ts文件是怎么来的.上文没说
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

返回顶部