无聊吗?写个【飞机大战】来玩吧(下篇)
上一篇介绍了如何使用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)
↑↑↑这里推荐下我们的技术公众号,欢迎您的加入,一起探讨↑↑↑
无聊吗?写个【飞机大战】来玩吧(下篇)相关推荐
- android:怎样用一天时间,写出“飞机大战”这种游戏!(无框架-SurfaceView绘制)...
序言 作为一个android开发人员,时常想开发一个小游戏娱乐一下大家,今天就说说,我是怎么样一天写出一个简单的"飞机大战"的. 体验地址:http://www.wandoujia ...
- 用python写(飞机大战小游戏)
w'cwc下面我们进入详细教程: 一.首先我们先建一个文件夹 planewars(名字随便取): 然后用我们python中的pycharm打开这个文件,我们飞机大战的项目就在这进行 二.我们要写这个小 ...
- 【python】使用pygame写的飞机大战游戏
制作原因 做这个小游戏是因为学校的实训内容,老师给的要求是飞机大战,当时我感觉飞机大战这个题材太多了,就做了个飞艇大战,图片也是很久之前学习前端时攒下的素材,自己用ps改了改拿来用效果还不错 因为实训 ...
- javaScript写的飞机大战小游戏
效果图 html文件 <!DOCTYPE html> <html lang='zh'> <head><meta charset='UTF-8'>&l ...
- 教表弟用Python写了个“飞机大战”游戏!表弟:可以拜你为师吗?
今天由于我生病,于是在家休息.刚好我表弟来我家里玩!由于太无聊了,就顺便教他写个"飞机大战"的游戏!还不错,他玩的也挺开心,哈哈哈.如果有想要源码的小伙伴们可以找我要! 操作环境 ...
- 重温经典:Python版飞机大战源码 神器 玩游戏就玩自己开发的
目录 导语 正文 一.环境安装 二.我方飞机 三.敌方飞机 四.控制键盘移动 五.检测子弹碰撞 六.效果图 总结 免费源码领取处: 往期文章推荐-- Python从入门到实战-- 绘图Turtle系列 ...
- java程序之飞机大战_java写飞机大战一
从前看马士兵老师的教程,学过一个坦克大战,不过当时一头雾水,一直想着模仿着写一个飞机大战,放假了终于动手写了,虽然AWT似乎已经不推荐用了,但是懒得研究swing啊,作为javase的练习还是可以的. ...
- 小白尝试c++编写飞机大战
前几天看大佬写了个神经网络训练AI玩飞机大战,我想,凭我现有知识能不能也写一个飞机大战,就进行了尝试,成果如下. #include<iostream> #include<ctime& ...
- Python游戏之Pygame——太空飞机大战(一)
学习Python,最好的办法是实战,实战!我们知道,有无数的先人和大侠提供了非常多的软件包供我们选用.有时候学习是一件很枯燥的事,玩游戏就不一样了.我们玩的最多的游戏是别人开发的,能不能开发出一款自己 ...
- java飞机大战背景图片_Java简单飞机大战(1)
在完成了多线程小球之后,就可以写一个飞机大战小游戏了,虽然比较简单,但玩起来还是有一点乐趣的.下面就讲一下我的大概思路和一些实现步骤. 一开始当然要想好一个框架,毕竟框架还是很重要的.当点击开始按钮的 ...
最新文章
- git reset --hard HEAD
- 跨链(5)“蚂蚁区块链”之跨链数据连接服务
- linux下安装php的swoole扩展模块(安装后php加载不出来?)
- Android之用HttpURLConnection断点下载谷歌云存储(google cloud storage)文件
- 编写函数判断一个数是否是回文数_程序员面试金典 - 面试题 01.04. 回文排列
- python是什么牌子主机_python 收集主机信息
- vtk删除一个actor_如何构建一个基于actor的简单区块链
- CCF201412-2 Z字形扫描(解法二)(100分)
- leetcode题解—1021、删除最外层的括号
- 利用VS的代码优化和openmp并行计算提高程序运行速度
- 南京财经大学计算机考研资料汇总
- 适合智能电视的K歌神器,纯麦U7PRO麦克风体验
- 适配各种Windows分辨率,为DPI添加感知,当在高DPI时,禁用WINFORM缩放等。
- 计算机组成原理平均cpi怎么算_计算机组成原理-计算机的性能指标及计算题
- Android航海航线地图,Alfa的航海大时代航线介绍 全航线跑商路线详解
- 微信 css3动画失效,css3 动画效果在微信中无效
- pycharm 中 ‘unicodeescape’ codec can’t decode bytes in position XXX: trun错误解决方案背景描述...
- ICDE‘22推荐系统论文之Research篇
- UML-认识六种箭头,轻松读懂UML图
- 八字易经算法之用JAVA实现二十八星宿算命
热门文章
- python-igraph创建网络(图)
- alios things开发板_AliOS Things这个操作系统怎么样?
- Linux上svnserve “db/txn-current-lock: Permission denied“ 问题解决办法
- 负雪明烛开通公众号啦~ 欢迎关注「负雪明烛」
- Python爬虫 requests使用post请求发送文件
- 网易人工智能事业部:“悄无声息”再捞金!
- html怎么用img添加图片,img标签(html怎么用img添加图片)
- shell-grammar
- 【Selenium】Selenium的3种等待方式
- 2016机器学习大盘点(第3篇)