写在前面：我的同事“熊猫妹”刚加入egret，之前从未接触过egret引擎，而且从来没有做过游戏，经过4天的学习，他成功制作了一款足球小游戏。本文主要记录他的开发过程：正文如下：接触白鹭引擎的第四天，摸索着用EUI做了一个小游戏。游戏。可能游戏的逻辑比较简单，用到的知识点比较基础。今天就和大家分享一下，交流一下。我这个小游戏的设置很简单：鼠标点击魔术棒，足球开始上下移动，获胜方出现Win画面。效果图如下：第一步，新建一个项目，我取名为ball_demo，先打开Mian.ts，删除OnbuttonClick函数，删除createGameScene函数中的所有内容，我们需要重写。第二步制作小球的exml皮肤文件1.在resource文件夹下创建gameSkins文件夹，用来保存自定义皮肤文件。在gameSkins文件夹上右击新建eui组件（注：这里也可以选择新建一个exml文件，然后新建ts文件）2.将图片资源拖到resource/assets目录下，有将上面的6项添加资源，点击保存。然后打开default.res.json确认刚才导入的图片是否在defaultpreload组中。3、确认无误后，点击打开ball.exml文件，设置舞台宽高为640*1136。4、点击舞台，选中左下方控件，然后选择Image，将其拖到舞台上。设置它的位置、宽度和高度（或者直接点击约束）让它完全填满舞台（也可以不拖动Image组件，直接把资源拖到舞台上）。5、接下来选择左下角的资源图标，找到bgImg背景图片拖入组件的资源中，然后用同样的方法拖入两个国旗，足球和Win图片。6、接下来开始游戏的按钮制作：选择引擎自带的按钮组件，将Button组件拖到舞台上，并设置好位置。在右侧的属性面板中，您会看到“Normal、Pressed、Disabled”三个空白。这里我们将三种情况下的图片分别拖进去。7、接下来设置Id：分别设置三张图片和Button的id，这样我们在代码中就可以获取到了。8、然后将win_Top和Win_Buttom这两张图片设置为不可见，按Ctrl+S保存皮肤文件。第三步，编写ball.ts代码1.首先，我们会看到这段代码。这段代码是因为我们在创建exml皮肤文件的时候选择了新建一个eui组件。系统会自动帮我们把转换后的exml文件和ts文件关联起来，不需要我们自己写。而如果先建一个eml文件，再建一个ts文件，需要在constructor构造函数中写this.skinName="path";2.将后面要用到的游戏对象定义为全局变量（注意：这里的变量名必须和刚才设置的皮肤文件中的id一致）；接下来，在childrenCreated函数中添加btn_start事件监听器。3.关于写ballfootball的运动方式，我这里用的是慢动作动画Tween。定义一个方法ballMove，使用random函数随机取一个0到1之间的数，小于0.5则小球进入底部，顶部获胜，否则底部获胜。直接上代码。（原谅我暂时只能写这么低的逻辑）附：Egret官方文档easinganimationTween，官方文档写的很详细，比我的清楚。这里我开始使用官方的Timer定时器，发现总是有点错误，最后使用了easing动画的.Call回调函数。当程序依次执行Tweeneasing时，会执行Call中的方法（可以通过变量名.visible来显示Win图片。）4、接下来编写开始按钮的点击方法。这里用一个按钮来实现“开始、暂停、继续、重启”四种功能。本来的想法是放四个按钮，哪个会显示，哪个会隐藏，但是太麻烦了。最终的实现是改变按钮图片。打开ball.exml皮肤源码，在Button的Skin栏中添加暂停、恢复、重置三种状态。然后根据前面的source.up="";分别为新增的三个状态添加图片资源。按钮的四种功能可以通过开关盒来实现，如下图所示。通过切换btn_start的currentState来改变它的图片。最后在游戏结束后，让currentState="reset"。i=4（按钮功能是重启）；5、最后忘记补充一点：这里我做了一个按钮点击放大的效果，并且在皮肤源码中更改了button属性。未按下时为90%，按下时为100%。6.不要忘记将它的锚点设置为中心点。至此，我的足球比赛结束了。以后我会贴出更多学习过程中做的小案例，与大家交流，共同进步。也请各位白鹭大神赐教，分享更多优秀案例。游戏源地址：https://github.com/duan003387...
