评论

[Egret引擎]H5倒车入库小游戏教程

前言:

  本文介绍如何用 egret游戏引擎开发一个简单的H5小游戏.

  至于后期如何转换成小游戏, 还需各位自己去egret官方文档查看.

准备工作:

利用H5的游戏引擎 : egret 开发而成(使用的是TypeScript)

1、安装EgretWing(IDE),Egret Launcher(egret引擎管理器,可以管理版本问题)

2、在Egret Launcher里面安装引擎5.2.13 (这里当时用的是5.2.13..有最新版本, 最新版本的API可能有点不同,记得多翻文档)

3、构建一个项目 





 小试牛刀:

1、动起来

修改Main.ts里面的 createGameScenestartAnimation





em~动起来了。接下来,就要给我们的“方块”润色润色。

首先找一个车身~~~


当然为了"逼真" 点还找下它的车轮啦。



2、更换车皮肤

     在 resource/assets中创建一个Car的文件夹,将上面的图片放进去~

     编辑resource/default.res.json文件,将上面的资源放进preload分组中(把Car文件夹拖进去,然后再把car里面的资源拖进右边的资源管理

     在resource/assets/eui_skins中创建CarSkin.exml (用设计模式设计,然后再进行调整):



 然后再编辑resource/default.thm.json,将resource/eui_skins/CarSkin.exml添加进exmls中。em~~至此,我们车的皮肤构造好了




有了皮肤,当然要构造一个车的类啦(然后就可以new一辆车了~)

 在src中创建文件夹Game并且在Game中创建文件  Car.ts


这里的y和x感觉是不是很神奇?为什么是会是负的?(留给读者思考思考。)

继续继续~~接下来我们要把方块变成我们的车~~ 

修改Main.ts 的 createGameScene






3、同理(这两个字是上学时期的噩梦~),更换背景以及添加按钮(有不明白的还是egret官方看文档~)



4、控制车辆动

首先添加按钮事件( 按钮怎么添加到界面上的,以及方向盘动画 & 怎么绑定事件的。。要自己去看文档哦~~)











em~~~接下来呢。。就是实现车辆的位移计算,以及定时器的加入。

车辆位移,其实就是更改车辆的X,Y坐标以及车辆的旋转角度(没错就是旋转角度,下图是我的“灵魂画作“)。


车辆转弯可以抽象成这样 ---->>后轮绕圈,同时车身也以后轮为圆心做一个自转运动(有点像地球绕太阳转以及自转的感觉,前面不知道为什么车身皮肤x, y要变负的,看到这里再仔细想想。。提示:自转点旋转)。。




5、碰撞检测

首先.找出碰撞区域


计算各种线段是否相交,显然有以下代码.(其实可以不用计算线的相交,在车边缘抽点,然后用点做区域判断也是OK的)




 6、收尾

增加碰撞检测定时器,增加成功提示等。





 em~~有点楞逼看不懂?

要贴代码文字?不给超过5W字文章,所以木有办法啦~要自己看图片研究啦(事实上这个游戏从入门到实现花了我3天)。

那就多看几遍(主要逻辑都写的那么明显了)。然后再看看egret的文档

最后祝各位也能把这个游戏  “ctrl+v “ 出来(还有有些地方要自己去实现的~)

最后一次编辑于  07-15  
点赞 0
收藏
评论