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

源码仓库:

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

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券