上一篇介绍了如何使用 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,
这些属性都将影响到动画帧效果.
(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, 微信游戏体验预览图
来源: https://www.cnblogs.com/migufe/p/10952822.html