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开发者工具
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 安装教程：运行安装文件，一路下一步就OK特别简单是不是？在 Creator 之前的 Cocos 简直安装贼繁琐，参见网上各种各样的教程现在简单了，直接傻瓜式一键操作，对于新手很友好。
另外需要注意的是，别忘记注册 Cocos 以及微信开发者。
二、游戏玩法现在简单介绍一下即将开发的这个小游戏的玩法，很简单，游戏开始时我们需要控制鱼钩向水里深处前进，当鱼钩勾到鱼时，小猫开始收鱼线，把鱼钩向上拉，直到拉出水面，在这回收的过程中，我们需要控制鱼钩尽量多的勾到鱼。
把需求搞清楚以后，我们就开始动手来开发吧。
资源下载：
链接: https://pan.baidu.com/s/1rpqBRE9hSBw7TnC3eEQT9w 提取码: 2s7y设计尺寸
首先，这是一个竖屏游戏，而 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 的界面编辑、动作动画、碰撞系统、微信登录排行等诸多方面：
