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

欢迎关注我们的公众号:Web前端Talk。前端文章持续更新。

资源管理制作

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,
这些属性都将影响到动画帧效果。

(2)将textAni Clip拖入至对应节点

4、prefab制作

(1)创建空节点拖入至资源管理器的prefab文件夹,点击该prefab,右侧可添加任意组件,例如:渲染组件->Label,修改string为“hello world!!!”

(2)如何获取prefab,新增命名为test的JavaScript脚本,编辑脚本,在properties申明

{
testPrefab: cc.Prefab,
btn: cc.Node,
bg: cc.Node,
_num:1
}

在onload函数中创建对象池this.pipePool = new cc.NodePool();申明createPre函数,用于挂载在开始游戏button节点,按钮每点击一次从对象池拿出prefab对象,重新计算并给定y轴位置,渲染到bg节点。

关键代码:this.pipePool.put(tPrefab);

官方说法是向缓冲池中存入一个不再需要的节点对象。这个函数会自动将目标节点从父节点上移除,但是不会进行 cleanup 操作;如果想让节点一直存在,则不使用该方法(当生成的节点过多时,占用内存过大,导致性能问题,需要及时释放)。

5、audioClip

音乐资源,和图片一样直接拖入到sound下即可,一般以.mp3文件为准

游戏部署 

1、准备工作:微信小游戏appid,微信小游戏开发权限(公众号,或小程序上可申请),可https访问的服务器管理权限;

2、cocos creator2.0以上提供了构建打包至多平台功能,可以直接打包成微信小游戏包,选择工具菜单栏->项目->构建发布,根据打包环境要求,选择发布平台,这里选择wechat game,初始场景为游戏加载时第一场景展示,填写微信小游戏appid,填写远程resource服务器地址,也可不填。

构建打包成功之后,打开微信小程序开发工具,选择小游戏,点击+选中刚打包后的项目路径;

由于微信小游戏打包发布,代码体积被限制4M之内,我们不得不优化。唯一能动的是res资源文件。

先关闭微信小游戏项目,将资源文件夹res移除,上传res文件夹到远程服务器下,可通过https访问到即可,再重新打开微信小程序开发工具,设置game.js。

wxDownloader.REMOTE_SERVER_ROOT = ‘你的远程服务器res绝对路径’;这样打包体积就缩小一半以上。点击右上角上传,显示为体验版,点击确定,填写发布信息后上传。

游戏体验

1、在游戏未正式发布前,无法直接通过小程序搜索进行游戏,需要添加体验号。

2、由于开发者本人就是管理员,可以直接进行游戏

3、微信游戏体验预览图

微-信-公-众-号: Web前端Talk(migufe)

↑↑↑这里推荐下我们的技术公众号,欢迎您的加入,一起探讨↑↑↑

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

  1. android:怎样用一天时间,写出“飞机大战”这种游戏!(无框架-SurfaceView绘制)...

    序言 作为一个android开发人员,时常想开发一个小游戏娱乐一下大家,今天就说说,我是怎么样一天写出一个简单的"飞机大战"的. 体验地址:http://www.wandoujia ...

  2. 用python写(飞机大战小游戏)

    w'cwc下面我们进入详细教程: 一.首先我们先建一个文件夹 planewars(名字随便取): 然后用我们python中的pycharm打开这个文件,我们飞机大战的项目就在这进行 二.我们要写这个小 ...

  3. 【python】使用pygame写的飞机大战游戏

    制作原因 做这个小游戏是因为学校的实训内容,老师给的要求是飞机大战,当时我感觉飞机大战这个题材太多了,就做了个飞艇大战,图片也是很久之前学习前端时攒下的素材,自己用ps改了改拿来用效果还不错 因为实训 ...

  4. javaScript写的飞机大战小游戏

    效果图   html文件 <!DOCTYPE html> <html lang='zh'> <head><meta charset='UTF-8'>&l ...

  5. 教表弟用Python写了个“飞机大战”游戏!表弟:可以拜你为师吗?

    今天由于我生病,于是在家休息.刚好我表弟来我家里玩!由于太无聊了,就顺便教他写个"飞机大战"的游戏!还不错,他玩的也挺开心,哈哈哈.如果有想要源码的小伙伴们可以找我要! 操作环境 ...

  6. 重温经典:Python版飞机大战源码 神器 玩游戏就玩自己开发的

    目录 导语 正文 一.环境安装 二.我方飞机 三.敌方飞机 四.控制键盘移动 五.检测子弹碰撞 六.效果图 总结 免费源码领取处: 往期文章推荐-- Python从入门到实战-- 绘图Turtle系列 ...

  7. java程序之飞机大战_java写飞机大战一

    从前看马士兵老师的教程,学过一个坦克大战,不过当时一头雾水,一直想着模仿着写一个飞机大战,放假了终于动手写了,虽然AWT似乎已经不推荐用了,但是懒得研究swing啊,作为javase的练习还是可以的. ...

  8. 小白尝试c++编写飞机大战

    前几天看大佬写了个神经网络训练AI玩飞机大战,我想,凭我现有知识能不能也写一个飞机大战,就进行了尝试,成果如下. #include<iostream> #include<ctime& ...

  9. Python游戏之Pygame——太空飞机大战(一)

    学习Python,最好的办法是实战,实战!我们知道,有无数的先人和大侠提供了非常多的软件包供我们选用.有时候学习是一件很枯燥的事,玩游戏就不一样了.我们玩的最多的游戏是别人开发的,能不能开发出一款自己 ...

  10. java飞机大战背景图片_Java简单飞机大战(1)

    在完成了多线程小球之后,就可以写一个飞机大战小游戏了,虽然比较简单,但玩起来还是有一点乐趣的.下面就讲一下我的大概思路和一些实现步骤. 一开始当然要想好一个框架,毕竟框架还是很重要的.当点击开始按钮的 ...

最新文章

  1. git reset --hard HEAD
  2. 跨链(5)“蚂蚁区块链”之跨链数据连接服务
  3. linux下安装php的swoole扩展模块(安装后php加载不出来?)
  4. Android之用HttpURLConnection断点下载谷歌云存储(google cloud storage)文件
  5. 编写函数判断一个数是否是回文数_程序员面试金典 - 面试题 01.04. 回文排列
  6. python是什么牌子主机_python 收集主机信息
  7. vtk删除一个actor_如何构建一个基于actor的简单区块链
  8. CCF201412-2 Z字形扫描(解法二)(100分)
  9. leetcode题解—1021、删除最外层的括号
  10. 利用VS的代码优化和openmp并行计算提高程序运行速度
  11. 南京财经大学计算机考研资料汇总
  12. 适合智能电视的K歌神器,纯麦U7PRO麦克风体验
  13. 适配各种Windows分辨率,为DPI添加感知,当在高DPI时,禁用WINFORM缩放等。
  14. 计算机组成原理平均cpi怎么算_计算机组成原理-计算机的性能指标及计算题
  15. Android航海航线地图,Alfa的航海大时代航线介绍 全航线跑商路线详解
  16. 微信 css3动画失效,css3 动画效果在微信中无效
  17. pycharm 中 ‘unicodeescape’ codec can’t decode bytes in position XXX: trun错误解决方案背景描述...
  18. ICDE‘22推荐系统论文之Research篇
  19. UML-认识六种箭头,轻松读懂UML图
  20. 八字易经算法之用JAVA实现二十八星宿算命

热门文章

  1. python-igraph创建网络(图)
  2. alios things开发板_AliOS Things这个操作系统怎么样?
  3. Linux上svnserve “db/txn-current-lock: Permission denied“ 问题解决办法
  4. 负雪明烛开通公众号啦~ 欢迎关注「负雪明烛」
  5. Python爬虫 requests使用post请求发送文件
  6. 网易人工智能事业部:“悄无声息”再捞金!
  7. html怎么用img添加图片,img标签(html怎么用img添加图片)
  8. shell-grammar
  9. 【Selenium】Selenium的3种等待方式
  10. 2016机器学习大盘点(第3篇)