微信小游戏入门实战《小猫钓鱼》

源码仓库：

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 的界面编辑、动作动画、碰撞系统、微信登录排行等诸多方面：