CocosCreator微信小游戏入门实战《小猫钓鱼》（六）：单例模式以及UI

最新推荐文章于 2026-05-22 14:16:28 发布
原创 最新推荐文章于 2026-05-22 14:16:28 发布 · 3.4k 阅读 · 5
标签
#Cocos #CocosCreator #微信小游戏
本文介绍了如何使用CocosCreator开发微信小游戏，详细讲解了UI组件的使用，如Widget、Button等，以及如何实现开始游戏和排行榜按钮的功能。通过单例模式解决UI与游戏逻辑的耦合问题，提高代码可维护性。

转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83064291

 

经过上一节的碰撞系统，我们已经基本完成一个微信小游戏核心玩法部分的开发工作。接下来我们需要开发另一块重要的东西：UI

 

CocosCreator为我们提供了很多已封装好的UI组件，这些组件基本上可以满足我们正常的开发需求。当然针对一些项目中的特殊需求，我们也可以通过定制制作符合需求的自定义UI。针对目前我们这个小游戏来讲，Cocos本身提供的UI已经是绰绰有余了。

关于UI控件的使用，参考官方文档：

http://docs.cocos.com/creator/manual/zh/ui/ui-components.html

 

在第一节中，我们在Camera下面创建了一个widget节点作为HUD界面的父节点。这个HUD界面始终会在Camera的范围内，因此我们不用担心Camera的移动会导致我们的一些UI处于范围外而无法正常显示。

 

使用Widget，Sprite，Label，Button这些控件，我们可以很快速的在剪辑器中拼凑出下面的UI界面：

 

接下来我们先实现开始游戏按钮的功能。

关于Button控件的使用，参考官方文档：

http://docs.cocos.com/creator/manual/zh/

最低0.47元/天 解锁文章
CocosCreator微信小游戏入门实战《小猫钓鱼》（三）：预制体Prefab
BigBear的博客
10-15 5431
转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83063363   上一节我们完成了鱼的运动代码的编写，这一节我们主要需要通过预制体和单例实现将鱼放置到场景当中。   看起来将鱼放置到场景中是个很简单的事情，你可以说，上一节我已经知道怎么做出一只游来游去的鱼了，那我一只一只的按照之前的方法将它们放到场景中就可以了啊！   ...
CocosCreator微信小游戏入门实战《小猫钓鱼》（二）：动作系统
BigBear的博客
10-15 5719
转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83063228   上一节我们把基本的工程已经搭建起来了，并且写下了我们的第一行代码。相信你对于creator基本的操作以及Sprite已经有了一定的了解。 接下来，我们通过Prefab开始实现游戏中最为重要的配角——鱼。   动手之前，我们还是先了解一下制作需求： 我们需要...
CocosCreator微信小游戏入门实战《小猫钓鱼》（四）：触摸输入
BigBear的博客
10-15 3908
转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83063423   之前第一节的时候，我们让鱼钩简单的动了起来，并且让摄像头跟随鱼钩向下移动，可是我们并不能控制鱼钩的左右位置，这让我们的根本无法享受操作的乐趣。 所以这一节，我们来实现让玩家通过触摸输入控制鱼钩的运动。   首先我们先对第一节做好的鱼钩进行一下改造   ...
Cocos Creator开发微信小程序游戏
最新发布
yychen_java的博客
05-22 499
Cocos Creator 是目前国内小游戏开发占有率最高的引擎，对微信生态适配最好，支持一键发布。下面是一份从零开始的详细使用说明。
CocosCreator微信小游戏入门实战《小猫钓鱼》（五）：碰撞系统
BigBear的博客
10-15 2936
转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83064115   做游戏就和做导演一样，所以我们才有cc.director，哈哈。 通过前面几节，我们的游戏中已经拥有了鱼钩、鱼这两位主角，并且它们试镜成功（动作系统没问题），接下来得把最重要得对话剧本交给它们了，也就是我们游戏当中鱼钩与鱼之间的交互。   鱼与鱼钩交互过程中...
CocosCreator学习笔记14
2301_79022588的博客
08-24 937
单例模式是一种常见的设计模式，用于确保类只有一个实例，并提供一个全局访问点来获取该实例。通过获取单例实例对象，可以方便地在不同的场景和脚本中访问和修改单例类的方法和属性。2.在单例类中定义一个私有静态属性instance，用于存储类的唯一实例对象。使得类在整个应用程序中只有一个实例，并且提供一个访问该实例的全局方法。总的来说，将属性声明为静态属性意味着它属于类本身，而不是类的实例。对于静态属性，可以使用类名直接访问，而不需要创建类的实例。将属性声明为静态意味着该属性属于类本身，而不是类的实例。
CocosCreator微信小游戏入门实战《小猫钓鱼》（一）：写下第一行代码
热门推荐
BigBear的博客
10-15 1万+
转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83063130 吃饭先拿碗筷，想吃下“微信小游戏”这盘2018年的大菜，我们也得先将我们的“吃饭工具”准备好： CocosCreator 2.0.2 下载地址：http://cocos2d-x.org/filedown/CocosCreator_v2.0.2_win 安装教程...
CocosCreator微信小游戏入门实战《小猫钓鱼》（十一）：总结以及源码分享
BigBear的博客
10-16 6179
转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83068228 基本上到这里作为一个cocoscreator以及微信小游戏的开发者，我相信都可以完成了入门阶段的学习了。 不过比起cocosAP、微信APII、js、编辑器操作等方面的入门，我更希望再开发的过程中大家能够学习到并拥有思维上的一些进步。 现在我们就来总结一下： ...
微信小游戏入门实战《小猫钓鱼》
奎特尔星球
11-11 2306
BigBear 老师的微信小游戏入门实战《小猫钓鱼》，源码已经适配到 Cocos Creator 2.2.0，下是在晓衡在微信开发者工具下的视频演示：源码仓库：https://github.com/ayarami/examples-game-FishingCat在交流群里，不时有伙伴在开发微信小游戏时对授权登录、排行榜时遇到问题。这让我想起 BigBear 老师的《小猫钓鱼》实战系列，从0基础开始...
CocosCreator微信小游戏入门实战《小猫钓鱼》（十）：微信排行榜
BigBear的博客
10-15 3871
转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83064527   在开始微信排行榜之前，我们先了解一下微信的关系链数据。 https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html   wx.getFriendClou...
cocos creator小游戏_微信小游戏入门实战小猫钓鱼
weixin_39585761的博客
01-07 1265
BigBear 老师的微信小游戏入门实战《小猫钓鱼》，源码已经适配到 Cocos Creator 2.2.0，下是在晓衡在微信开发者工具下的视频演示：源码仓库：https://github.com/ayarami/examples-game-FishingCat在交流群里，不时有伙伴在开发微信小游戏时对授权登录、排行榜时遇到问题。这让我想起 BigBear 老师的《小猫钓鱼》实战系列，从...
【游戏设计模式】单例模式全解析---Cocos Creater实操
weixin_46554635的博客
11-05 1491
单例模式是一种创建型设计模式，它确保一个类只有一个实例，并提供了一个全局访问点来访问该实例。在内存中只有一个实例对象，不会过多创建对象，保证数据统一性。避免对资源的多重占用。
用23种设计模式打造一个cocos creator的游戏框架----(二)单例模式
aixh1985的博客
12-04 1451
在全局访问点gameInstance中设置了设置了当前唯一的游戏game:DemoGame，以及系统种需用到的存储单例，时间单例，及事件单例等等。有一些类会自带单例模式，有些采用统一的单例去管理。因为我们是设计一个游戏框架所以这里采用了统一的方式。方便认识整个系统中那些系统使用了单例。模式意图：保证一个类仅有一个实例，并提供一个访问它的全局访问点。意图：保证一个全局唯一的单例，并提供一个访问它的全局访问点。
CocosCreator游戏开发——泛型单例模式
JoeyHuangzx的专栏
03-31 3459
1、CocosCreator游戏开发中，我们在创建一些模块管理类的时候，一般都会用到单例模式，单例模式通常的做法是 export default class GameManager { private static instance: GameManager; public static getInstance(): GameManager { if (!G...
学习笔记 13_Cocos Creator_继承组件单例
Leovany的专栏
02-06 5921
前言 单例，在游戏开发中是比较常用的功能，全局唯一，可以在任何地方直接获取, 省去了方法赋值 或者 属性面板拖动的麻烦。 普通单例_饿汉模式 不管有没调用，一开始就创建单例 // Singleton.js var Singleton = cc.Class({ // 成员变量 name : "", age : 0, ctor () {
学习笔记_Cocos Creator_继承组件单例
01-04 1264
前言 单例，在游戏开发中是比较常用的功能，全局唯一，可以在任何地方直接获取, 省去了方法赋值 或者 属性面板拖动的麻烦。 普通单例_饿汉模式 不管有没调用，一开始就创建单例 1 // Singleton.js 2 var Singleton = cc.Class({ 3 4 // 成员变量 5 name : "", 6 age : 0, ...
cocoscreator 2.2.2 学习笔记-单例
静仙寨
09-15 318
实现基类模板 export default class Singleton<T>{ private static instance: any = null; public static Instance<T>(c: { new(): T }): T { if (this.instance == null) { this.instance = new c(); ...
[TypeScript][CocosCreator]泛型单例
iningwei的博客
07-22 4112
/** * Ts's singleton is too ugly.so i will not use it. */ export class Singleton<T>{ private static instance: any = null; public static Instance<T>(c: { new(): T }): T { ...
Cocoscreate脚本实现发射和监听自定义事件(使用单例模式)
wjysg8408982的博客
07-26 530
Cocoscreate脚本实现发射和监听自定义事件关于Cocoscreate自定义事件实现自定义事件的具体步骤1.自定义事件脚本2.注册和监听事件脚本3.发射事件脚本使用步骤3定义的 GameManger.ts发射事件 关于Cocoscreate自定义事件 因为Cocoscreate使用的是ts/js脚本，所以在自定义事件时，可以参考js/ts自定义事件的模式 实现自定义事件的具体步骤 1.自定义事件脚本 // 创建一个用来定义事件的叫CustomEvent.ts脚本代码如下 const {ccclass,
cocos creator js 单利模型
qq_41506812的博客
06-03 431
//单利模型 function Model(){ this.data=[1,2,3,4]; this.getInfo=(()=>{ console.log(this.data); console.log("调用到单例类了1") }), this.getInfo2=function(){ console.log("调用到单例类了2") } } Model.prototype.getText=function(){ .
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值