无聊吗?写个【飞机大战】来玩吧(下篇)

介绍了如何使用cocos creator开发游戏,此篇是详细介绍功能点以及如何部署打包至微信小游戏体验。

资源管理制作

1、准备工具

cocos creatorv2.0.5官方最新版本、sublime tetx3或vscode、texturePackerGUI、微信小程序开发工具

 

2、sprite,图集资源制作

(1)图集列表类似于UI里的瀑布流图,将所有的.png .jpg .jpeg图片合并压缩为一个图集资源。

 

(2)使用texturePackerGUI工具,打开工具,将本机示例图片文件夹下所有.jpg拖入至左处empty...

 

左图为未拖入图片的,右图为已拖入图片

无聊吗?写个【飞机大战】来玩吧(下篇)

Data file是设置cocos图集.plist文件保存路径,texture file是.png保存路径,max size是设置最大尺寸

无聊吗?写个【飞机大战】来玩吧(下篇)

点击publish sprite sheet保存文件,由于系统的图片较大,max size设置为3072之后才能publish,生成后的.png文件巨大,不建议每个图片文件超过100kb以上进行合并。再从cocos creator工具中查看,图集atlas制作完毕

无聊吗?写个【飞机大战】来玩吧(下篇)

3、动画animationClip制作

(1)准备多个静态图,在层级下新增一个空节点,添加sprite、animation组件,sprite拖入一个静止时的背景图,选中当前节点,选择下方动画编辑器,新建clip文件,保存在animation文件夹下,此时文件夹下多了一个textAni,点击红框内编辑动画。

无聊吗?写个【飞机大战】来玩吧(下篇)

属性列表中选择cc.Sprite.spriteFrame,是插入帧图片属性,比如每0.1间隔插入一帧图片,每帧图片所展示的效果渐渐呈现,线性时间内播放动画。

无聊吗?写个【飞机大战】来玩吧(下篇)

Animation组件有 position,x,y, scale,scaleX,scaleY,rotation, width,height,color,opacity, anchorX,anchorY,skewX,skewY, cc.Sprite.spriteFrame、 cc.Sprite.fillType, cc.Sprite.fillCenter, cc.Sprite.fillStart, cc.Sprite.fillRange, 这些属性都将影响到动画帧效果。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyfgfp.html