新手小白学习Cocos Creator笔记

问题集

问题：一张包含多个小图的雪碧图，怎么在cocos里使用，并且能够在场景编辑器里直接预览到？

需要下载 TexturePacker 4.x 先合并处理图片，然后会得到两个文件：xxx.plist和xxx.png。

这时候拖动这两个文件到resources里，就能看到 一整张图里的小图像是分割开的，可以直接拖动到Sprite Frame 使用了：

    

 

 

 问题：如何用cocos实现头像圆形？

创建两个节点，外面的节点，新增Mask组件，作为圆形遮罩。里面的节点 添加Sprite组件，放图片。

  

 注意：不要滥用Mask，会影响性能。

Mask 组件一般在什么情况下使用？

Mask 是 UI 开发中非常高频使用的组件，主要用于以下几种场景：

1. 制作各类形状的头像（最常见）

游戏中的玩家头像、好友列表头像通常是方形的图片资源。为了 UI 美观，产品经理经常要求把头像做成圆形、圆角正方形或者异形（如盾牌形、心形）。

• 圆形/椭圆：用 ELLIPSE 类型。

• 圆角矩形：用 RECT 类型，并调整 Corner Radius（圆角半径）。

• 异形：用 SPRITE_STENCIL（模板遮罩）类型，然后拖入一张黑白或透明的特殊形状图片作为“模具”。

2. 滚动列表 / 聊天框（ScrollView）

当你做一个好友列表或聊天文字框时，列表很长，滑动时文字和图片会向上或向下超出屏幕指定的显示区域。

• Cocos 的 ScrollView 组件底层必须依赖一个带有 RECT（矩形）Mask 的节点，用来把超出视口（Viewport）的内容隐藏掉，否则列表内容会铺满全屏。

3. 游戏技能冷却（CD）倒计时效果

虽然现在很多 CD 效果直接用 Sprite 的 FILLED（填充）模式做，但有时需要做一些复杂的扇形、特殊轨迹的遮罩显隐动画（比如聚光灯效果），也会用到 Mask。

4. 新手引导的“镂空引导框”

进入游戏时的强制新手引导，需要把背景变黑，但把某个按钮“镂空”亮出来。

• 这种“反向遮罩”通常可以通过勾选 Mask 组件上的 Inverted（反向） 属性来实现。勾选后，原本被裁剪掉的外面会显示出来，而原本显示的里面反而会被挖空。

💡 性能优化小贴士（避坑指南）

虽然 Mask 很好用，但是在游戏开发中千万不要滥用：

• 会导致 DrawCall（渲染批次）飙升：每一个 Mask 组件都会打断 GPU 的批处理（Batching）。一个 Mask 至少会增加 2~3 个 DrawCall。如果你的好友列表里有 100 个好友头像，每个头像都挂一个 Mask，游戏可能会瞬间卡顿。

• 替代方案：如果界面上有大量重复的圆形头像（如排行榜），千万不要用 Mask。可以让美术直接提供一张中间镂空的圆形边框盖在方形头像上面，或者使用 自定义 Shader 来切圆形，这样性能会高出数十倍。

 

什么应该加在什么上？

 Controller、SafeArea 一般是挂在Canvas上。

 

 

Label组件，如何设置固定宽度然后左对齐 ？

cc.Label → 溢出处理，把 NONE 改为 CLAMP。

然后cc.UITransform → Content Sizeu就能设置设置宽度了，原来是None的时候，设置不了宽度。

 

 

首包要求4M以内，可以做什么？

一、前置规则（先看懂）

1. 微信硬性限制：主包≤4MB（点开游戏立刻下载，不达标无法上传）
2. 本地分包：主包 4M + 所有分包总和 ≤20M；开通虚拟支付上限 30M
3. 3.8.8 Bundle 分包 = 微信本地分包，构建自动生成 subpackages，无需手动改 game.json
4. 合成大西瓜必用 Box2D 物理，WASM 文件极易撑大主包，单独处理

二、第一步：引擎底层瘦身（直接省 1.5~3M，优先级最高）

1. 功能裁剪（项目设置→功能裁剪）

合成大西瓜只保留 2D + 物理，其余全部关闭：

• ✅ 开启：2D 渲染、Box2D 物理引擎、Audio 音频
• ❌ 关闭：3D、WebGL 高级渲染、Video 视频、DragonBone、Spine、AR、VR、原生交互插件、性能统计、自定义管线

2. 开启微信小游戏引擎插件（核心减重）

构建发布面板→微信小游戏，勾选：启用微信小游戏引擎插件

 

作用：玩家复用微信内置公共引擎，主包剔除大量引擎 JS，直接减少 1.8M 左右。

 

 

基础概念

预制件（Prefab）

定义：用于存储一些可以复用的场景对象。

它可以包含节点、组件以及组件上的数据。由预制件生成的实例既可以继承模板的数据，又可以有自己定制化的数据修改。

 

 

 

其他：

微信小游戏设计指南：https://developers.weixin.qq.com/minigame/design/#%E7%95%8C%E9%9D%A2%E5%B8%83%E5%B1%80

用户信息获取：https://developers.weixin.qq.com/minigame/dev/guide/open-ability/user-info.html

 

Cocos Creator 3D 引擎插件使用文档：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx0446ba2621dda60a&lang=zh_CN