微信小游戏入门实战《小猫钓鱼》
BigBear 老师的微信小游戏入门实战《小猫钓鱼》,源码已经适配到 Cocos Creator 2.2.0,下是在晓衡在微信开发者工具下的视频演示:
源码仓库:
https://github.com/ayarami/examples-game-FishingCat
在交流群里,不时有伙伴在开发微信小游戏时对授权登录、排行榜时遇到问题。这让我想起 BigBear 老师的《小猫钓鱼》实战系列,从0基础开始手把手教你使用 Cocos Creator 开发微信小游戏,非常的详细!在获得 BigBear 的同意后,将他的教程在公众号上分享给需要的伙伴。
一、工具安装
1. CocosCreator 2.2.0
下载地址:
http://cocos2d-x.org/filedown/CocosCreator_v2.2.0_win
安装教程:
- 打开下载好的7z压缩包并解压,运行CocosCreator_setup.exe
- 注意安装路径,然后瞎XX乱点就行
2. 微信web开发者工具
特别简单是不是?在 Creator 之前的 Cocos 简直安装贼繁琐,参见网上各种各样的教程现在简单了,直接傻瓜式一键操作,对于新手很友好。
另外需要注意的是,别忘记注册 Cocos 以及微信开发者。
二、游戏玩法
现在简单介绍一下即将开发的这个小游戏的玩法,很简单,游戏开始时我们需要控制鱼钩向水里深处前进,当鱼钩勾到鱼时,小猫开始收鱼线,把鱼钩向上拉,直到拉出水面,在这回收的过程中,我们需要控制鱼钩尽量多的勾到鱼。
把需求搞清楚以后,我们就开始动手来开发吧。
资源下载:
设计尺寸
首先,这是一个竖屏游戏,而 Creator 默认创建的是横板游戏,因此我们需要把游戏竖起来。在这个竖起来的过程中,你需要知道有两个东西:设计分辨率和屏幕分辨率 关于这两个“分辨率”,可以参考官方教程:
我们选择Canvas,将 DesignResolution 修改为640*960。
构建场景
接下来,我们需要把鱼钩给弄好。
1.选中Canvas,右键创建渲染节点Sprite,在编辑器的属性检查器中,将节点名改为Hook (邓紫棋:(╬▔皿▔)凸不要乱用我的Hook!!)
2.替换Hook的SpriteFrame为我们以及制作好的鱼钩资源
3.在assets中创建脚本Hook.js,并将脚本作为组建添加到节点Hook上
添加的方法为,点击节点Hook,在属性检查器中,添加组件添加用户脚本组件Hook.js
4.在Hook.js脚本中添加如下代码,来让鱼钩动起来:
start () {this.node.runAction(cc.repeatForever(cc.moveBy(5,cc.p(0,-100))));
},
OK,现在我们点击一下预览游戏,看看效果如何?看了下效果 (⊙﹏⊙) 鱼钩向下移动没错,可是镜头没有!
摄像机
没关系,接下来我们处理摄像机镜头这一块的东西。
1. Hook节点添加一个空子节点,节点名改为Camera。同时给这个节点添加组件,选择其他组件中的Camera,这就是我们游戏的摄像机了。Camera作为Hook的子节点,这样就可以让镜头跟随鱼钩进行移动喽,而我们不需要额外再写什么代码。
2. Camera节点添加一个子节点,子节点类型为Widget,节点名改为HUD。这个节点我们主要用于放置一些UI节点。注意修改HUD的大小为640*960 Camera的背景颜色改为蓝色( /(ㄒoㄒ)/~~因为没有做背景图片啊 ) Camera的cullingMask以及clearFlag进行设置:并且将MainCamera的cullingMask以及clearFlag进行设置;
3. 在HUD下面添加一个Label,用于Score显示,坐标设置到左上角。好了,这样就完成鱼钩以及摄像头,以及UI的部分功能喽。
为了能看出效果,我添加了一下背景,毕竟需要参照物才能看出来
怎么样,是不是有点样子了?
三、完整教程
BigBear 老师的《小猫钓鱼》教程共有10篇,涉及 Cocos Creator 的界面编辑、动作动画、碰撞系统、微信登录排行等诸多方面:
点击【阅读原文】可以进入 BigBear 老师的 CSDN 博客,里面有全部完整教程,供你参考学习。
在此感谢为公众号提供教程的老师、伙伴们,如果你也有技术与经验,并愿意与大家分享交流,欢迎加晓衡的微信:z6346289,我们一起“砥砺前行、共同成长”。
◈◈◈社区精彩好文◈◈◈
(作者:麒麟子)
微信小游戏入门实战《小猫钓鱼》相关推荐
- CocosCreator微信小游戏入门实战《小猫钓鱼》(十一):总结以及源码分享
转载请保留原文链接:https://blog.csdn.net/zzx023/article/details/83068228 基本上到这里作为一个cocoscreator以及微信小游戏的开发者,我相 ...
- 微信小游戏开发实战教程系列开启
**这是小蚂蚁游戏开发公众号原创的第35篇. 在写完了"人人都能做游戏"的新手系列教程后,我收到了不少反馈.有人告诉我,因为看了我的系列教程做出了自己人生的第一个小游戏.也有人告诉 ...
- 微信小游戏开发实战教程13-随机生成形状功能的实现
微信小游戏开发实战系列的第13篇. 本节内容包括:通过使用列表来实现可以设置权重的随机功能,以及游戏中的随机生成形状功能的具体实现. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游 ...
- 微信小游戏开发实战教程15-关卡编辑器的制作以及关卡分享功能的实现
微信小游戏开发实战系列的第15篇. 本节主要内容有游戏中的关卡编辑器的实现思路以及如何利用分享功能将自己制作的关卡与好友分享. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游戏&q ...
- 微信小游戏开发实战教程8-消除处理
这是小蚂蚁游戏开发公众号原创的第42篇,微信小游戏开发实战系列的第8篇,点击上方的#微信小游戏开发实战话题可以查看本系列的所有内容. 本篇主要内容包括如何对网格上满足消除条件的方块进行消除处理. 如果 ...
- 微信小游戏入门案例——拼图游戏
微信小游戏入门案例--拼图游戏 涉及内容:canvas组件.小程序界面绘图API 目录结构: pages\game\game.js // pages/game/game.js // 方块的初始位置 v ...
- CocosCreator3D微信小游戏入门RunningBall(一): 物理
CocosCreator3D微信小游戏入门:RunningBall(一) 在CocosCreator3D发布之前,虽然CocosCreator2.x版本已经有了3D的功能,但是这些3D功能并不能完全支 ...
- 微信小游戏开发实战教程14-闯关模式的实现
这是微信小游戏开发实战系列的第14篇. 本文主要内容是介绍精致1010闯关模式的设计和实现思路. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游戏"系列教程,它会手把手的 ...
- 微信小游戏开发实战教程11-使用本地缓存
这是微信小游戏开发实战系列的第11篇. 本节主要内容:使用本地缓存来记录玩家的设置以及各种类型数据的本地缓存和读取操作. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游戏" ...
最新文章
- 算法--微软面试:指定数字在数组中出现的次数
- java三目运算符判断boonlean,java三元运算符
- 信息学奥赛一本通(C++)在线评测系统——基础(二)基础算法 —— 1313:【例3.5】位数问题
- Flask-Cache的使用
- android 代码签名apk,[Android]混淆代码后生成带签名的apk
- idae 安装的插件怎么删掉_X7 IE阻止我安装插件怎么办
- Ubuntu 解决 pip 安装 lxml 出现 x86_64-linux-gnu-gcc 异常
- 网络编程mina介绍
- android 丢包率测试工具,android的ping的实现丢包率的获取
- html5临时保存与永久保存,5种方法永久保存网页内容
- 中国城市交通管理体制改革初探
- Linux环境:可变剪切分析软件rMATS安装、使用与解读
- 全球各个国家及其首都中英文对照表
- EC2 Auto Scaling知识点
- HDUOJ 6441 Find Integer
- 浮点数二分模板---yxc
- 【UOJ#311】【UNR #2】积劳成疾(动态规划)
- 微信24小时到账_千万别被微信给骗了,二十四小时到账根本不能撤回!
- 奖补不要错过!2022年四川省18地市高新技术企业奖励补贴政策及申报条件汇编!
- 华硕ASUS Prime Z370M-PLUS II黑苹果OpenCore EFI