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

最新推荐文章于 2021-06-02 14:59:16 发布

原创最新推荐文章于 2021-06-02 14:59:16 发布 · 2.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了使用CocosCreator 2.2.0开发微信小游戏《小猫钓鱼》的入门步骤，包括工具安装、游戏玩法设计、场景构建和摄像机设置。提供源码仓库链接，详细教程可在BigBear老师的CSDN博客找到。

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。 640?wx_fmt=png

构建场景

接下来，我们需要把鱼钩给弄好。

1.选中Canvas，右键创建渲染节点Sprite，在编辑器的属性检查器中，将节点名改为Hook （邓紫棋：(╬▔皿▔)凸不要乱用我的Hook！！）

640?wx_fmt=png

2.替换Hook的SpriteFrame为我们以及制作好的鱼钩资源

640?wx_fmt=png

3.在assets中创建脚本Hook.js，并将脚本作为组建添加到节点Hook上

640?wx_fmt=png

添加的方法为，点击节点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进行设置： 640?wx_fmt=png 并且将MainCamera的cullingMask以及clearFlag进行设置;