阅读视图

发现新文章,点击刷新页面。

亿元Cocos小游戏实战合集指南和答疑

引言

哈喽大家好,我是亿元程序员,一位有着8年游戏行业经验的主程。

今天这篇文章,是给《亿元Cocos小游戏实战合集》做一个完整的指南和答疑。

历时100天14篇实战文章,很多小伙伴说"收藏了就是学会了",结果连合集里有什么内容、能学到什么都搞不清楚。

那今天我就把家底都掏出来,不仅告诉你有什么,更告诉你能学到什么。

本文合集可在文末获取,小伙伴们自行前往。

实战合集学习指南

实战合集每一篇文章都不是简单的代码堆砌,而是带着你理解原理、掌握方法、举一反三。

下面开始从你能学到什么和适合什么人群逐篇回顾,建议收藏,点击可导航:

1. 热门买量游戏拆解之画线救狗

在这里插入图片描述

能学到什么

  • Graphics组件画线实现:触摸事件监听+动态绘制线条
  • 物理系统应用:动态添加RigidBody2DCollider2D组件
  • 碰撞矩阵配置:分组管理不同物体的碰撞关系
  • 蜜蜂AI实现applyForceToCenter施加力进行运动
  • 简单后撤效果linearVelocity线性速度控制

适合人群: 零基础入门、想完整跟练第一个项目的小伙伴。


2. 代码+教程:我的打螺丝游戏核心玩法全部分享给你

在这里插入图片描述

能学到什么

  • 螺丝抓取与移动:按下/拔起状态切换与动画
  • 铰链关节(HingeJoint2D):实现木板围绕螺丝点旋转
  • 动态关节管理:移除旧关节、生成新关节的代码实现
  • 圆心距离判断:检测木板孔与螺丝孔的位置关系
  • Tween震动动画:无法移动时的动画效果

适合人群:想做打螺丝类游戏、学习物理关节使用的小伙伴。


3. 敢不敢挑战用Cocos3.8复刻曾经很火的割绳子游戏?

在这里插入图片描述

能学到什么

  • 多段绳子物理连接:刚体+关节链式连接
  • 绳子切割检测:画线与绳子的碰撞判定
  • 糖果物理运动:重力+碰撞的物理解谜

适合人群:想掌握Cocos物理系统、做物理解谜类游戏的小伙伴。


4. 小伙伴说我的绳子要是有纹理就完美了,我就笑了...

在这里插入图片描述

能学到什么

  • Graphics组件局限性分析:为什么画出来像"棍子"
  • 自定义Assembler:实现纹理画线完整流程
  • UIRenderer + Assembler:渲染管线原理
  • 路径点展开成Mesh:法线展开、顶点生成、索引构建
  • fillBuffers数据打包:坐标转换、UV映射、颜色控制
  • 割绳子绳子纹理:自定义渲染实现

适合人群:想深入理解Cocos渲染管线、学习自定义Assembler实现高级效果的小伙伴。


5. 最近很火的一个拼图游戏,老板让我用Cocos3.8做一个...

在这里插入图片描述

能学到什么

  • 拼图游戏核心机制:拖拽+吸附算法
  • 拼图块位置判断:检测是否到达正确位置
  • 拼图完成检测:胜利条件判定逻辑
  • 2D拼图完整流程:从零实现拼图游戏

适合人群: 拼图游戏入门、想做基础版拼图的小伙伴。

6.大哥,你这拼图游戏的边框也太丑了...

在这里插入图片描述

能学到什么

  • Mask组件圆角裁剪GRAPHICS_STENCIL类型使用
  • Graphics绘制圆角边框:自定义形状绘制
  • 多边形内缩/外扩算法:边框层叠效果实现
  • quadraticCurveTo弧线:圆角绘制
  • 内角直角过渡:拼图块拼接处处理

适合人群:想实现圆角拼图效果、学习Mask+Graphics组合使用的小伙伴。


7. 老板说拼图游戏太卷了,让我用Cocos做个3d版本的...

模型拼图游戏

能学到什么

  • Cocos3D相机系统:相机控制与视角调整
  • 3D模型加载与交互:点击、拖拽模型
  • 2D玩法迁移到3D:拼图游戏3D化思路

适合人群:想入门Cocos3D、做3D拼图的小伙伴。

8. 小伙伴说我的拼图游戏用Mask不能合批...

Shader拼图游戏

能学到什么

  • Mask性能问题分析100张拼图404个DC的原因
  • 圆角Shader:替代Mask的渲染方案
  • 合批机制:材质共享、公共常量统一传递
  • DC优化实战:从404降到个位数

适合人群:想深入渲染优化、掌握Shader替代Mask方案的小伙伴。


9. 3d拼图我不会,老板:用Cocos做个会动的拼图总可以了吧!

spine拼图

能学到什么

  • RTT(RenderToTexture):将节点渲染到纹理
  • Spine骨骼动画动态分割RTT应用
  • 渲染纹理创建与使用RenderTexture实践
  • 多相机配合Spine动画渲染到纹理

适合人群:想学习RTT应用、实现Spine动画拼图的小伙伴。


10. 小伙伴们心心念念的倒水解谜游戏实战,终于来了...

倒水解谜游戏

能学到什么

  • Shader实现水的效果:颜色、分层、波纹、倾斜
  • Properties与uniform映射Shader变量传递机制
  • 动态传值到ShadersetProperty方法使用
  • cc_time时间变量:实现水面动画效果
  • UV坐标操作:水面倾斜与波动效果

适合人群:想学习Shader入门的小伙伴。


11. 大佬,现在AI游戏开发教程那么多,你不搞点卖给大学生吗?

挪猪游戏

能学到什么

  • AI工具:Cursor + Claude组合拳
  • AI辅助开发:写代码、Debug
  • "挪猪小游戏"全流程AI暴力开发实战

适合人群:想用AI工具提升开发效率、了解AI实战应用的小伙伴。


12. 俄罗斯方块谁不会做......啊?流沙版?

流沙方块游戏

能学到什么

  • 双网格系统设计:格子坐标系+沙粒网格(10×10细分100×200)
  • 碰撞检测算法:方块形状与沙粒逐个格子检测
  • 锁块机制:移动方块映射到固定网格
  • 沙粒物理模拟:从下往上遍历+随机列序+竖直/斜向下落
  • 消除规则:同色+四连通+横向贯通判定

适合人群:想搞骚操作、把经典游戏玩出新花样的小伙伴。


13. 这款值68亿的游戏,你不实战一下吗?安排!

在这里插入图片描述

能学到什么

  • 传送带像素消除类游戏:核心机制与玩法实现
  • 像素画资源管理:动态生成与加载
  • 像素画编辑器相关:编辑器

适合人群:想学习像素类游戏开发的小伙伴。


14. 老板说最近这款游戏很火让我抄,可是我连玩都玩不明白...

在这里插入图片描述

能学到什么

  • "小牛"解谜游戏:数独+扫雷混合玩法
  • 核心规则数据结构:颜色唯一性、行列唯一性、非相邻性
  • N皇后问题变种:回溯法生成合法关卡
  • 7种推导策略:找出单色、行列排除、邻居排除、单色占排、整排同色、多色共占、邻居互斥
  • 关卡编辑器设计:预编辑保证可解性

适合人群:想做益智解谜类游戏、学习算法在游戏中的应用的小伙伴。


合集常见答疑(Q&A)

Q1: 合集源码使用的Cocos引擎版本是多少?
A : Cocos Creator 3.8.7


Q2: 源码是否免费?
A : 文章中的代码截图都是核心片段,需要手敲,完整项目源码可在文末获取。


Q3: 适合新手吗?
A : 合集定位为**“实战进阶”**,建议有一定Cocos基础(会基本组件使用、懂TypeScript语法)的小伙伴阅读,但是部分文章比较细,源码有详细注释,也适合零基础入门,后面可能会出零基础系列(flag先立在这里)。


Q4: 合集还会更新吗?
A : 本套合集已经全部更新完毕,欢迎期待下一套合集。


Q5: 源码可以直接商用吗?
A : 合集源码均为博主原创,没有上架,可以二开上架商用。


Q6: 源码带编辑器吗?
A : 像素消除、找牛游戏附带编辑器(在根目录),其余游戏关卡只需要简单配置即可。


Q7: 有视频教程吗?
A : 目前以图文为主,部分复杂效果有配套动图演示。做视频太费时间了(其实就是懒),但如果后续大家呼声很高,可以考虑录制视频。


Q8: 是完整源码吗?
A : 游戏中核心玩法的源码,并非完整游戏。


Q9: 游戏有多少关?
A : 游戏是都核心玩法的演示,关卡一般为2-4关,部分随机关卡。


Q10: 能加入交流群吗?
A : 拥有合集的小伙伴可进实战群,遇到问题可以讨论,艾特博主探讨。


Q11: 接下来会有新的合集吗?
A : 会有的,已经在企划中。


Q12: 合集还会上调米数吗?
A : 会的,新合集上线后会再次上调。


结语

以上就是亿元Cocos小游戏实战合集的指南和答疑。

游戏开发这条路,说难不难,说简单也不简单。

简单的是开始,的是坚持。

合集获取(内含体验链接):亿元Cocos小游戏实战合集(已完结),再次感谢小伙伴们对创作的支持,我们下期见。


我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

实不相瞒,想要个爱心!请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

小伙伴说我的绳子要是有纹理就完美了,我就笑了...

在这里插入图片描述

引言

哈喽大家好,我是亿元程序员。

前阵子我发了一篇割绳子游戏实战的文章,其中核心在于如何制作一根不像棍子的物理绳子,受到小伙伴们的一致好评:

情绪价值 pro max

但是也有小伙伴认为绳子缺少纹理不够完美:

差点意思

看到这,我就笑了,哈哈,非常感谢小伙伴提供的素材,绳子的确可以优化成带有纹理的绳子。

言归正传,本期带大家一起来实战看看,如何通过自定义Assembler实现一根带有纹理的绳子。

本文源工程可在文末获取,小伙伴们自行前往,有体验链接。

为什么要有纹理?

因为没有纹理的线:

  • 像棍子
  • 像塑料吸管
  • 像程序员的头发(越来越少)

具体到游戏有割绳子游戏中的绳子纹理,箭头游戏中把箭头换成蛇或者其他皮肤。

游戏截屏

Cocos自带的Graphics虽然能画线,但有个问题就是不支持纹理。

所以本期我们就一起来实现一个。

实现纹理画线有哪些办法?

想要实现纹理画线,笔者能想到的,有且不局限于下面几种:

1.Sprite拼接

相信很多小伙伴第一反应能想到的就是这个方法,理论上当绳子的每一节越来越小,节数越来越多时,就会接近绳子的状态,否则绳子就会像双截棍一样。

哼哼哈嘿

2.MeshRenderer

通过自己生成Mesh(顶点 + 索引),用MeshRendererUIMeshRenderer进行渲染。

这样也是可以的

3.自定义Assembler

通过UIRendererAssembler,自己生成顶点数据,接入UI渲染管线(Assembler)。

喜欢看源码的小伙伴,可以看看Graphics组件MotionStreak(拖尾)组件

借鉴一下

接下来我们就借鉴一下,通过Assembler实现纹理画线。

纹理画线实战

1.核心原理

  • UIRenderer :Cocos 所有 2D UI 组件的「渲染基类」(Sprite、Label 都继承它)。

  • Assembler : 负责把「坐标、UV、颜色」打包成渲染器能识别的顶点数据。

  • 渲染流程我们写路径坐标-> 生成顶点(UIRenderer)-> 组装器打包(Assembler)-> 提交 GPU 渲染

根据上述流程,我们需要把“线”变成一条条三角形Mesh来画。

也就是:

一条线 -> 展开成一个“带宽度的条带” -> 用三角形拼出来 -> 再贴纹理

给大家画个图(别慌不是画饼):

点变成顶点

三角形

索引,顶点组成三角形

2.具体实现

新建一个TextureGraphics组件继承UIRenderer

首先路径点的收集,避免游戏逻辑改动太多,笔者模拟了一套Graphics组件的API

接着逐个将点沿着法线(垂直于方向)展开成两个顶点:

图示

然后逐个生成三角形:

图示

最后把数据更新到Assembler并且标记已修改,使得渲染数据可以重新计算:

3.Assembler

这是最重要的一层,负责把“线数据”变成GPU能画的顶点数据。

首先是创建createData,其中resize两个参数分别代表顶点数量和索引数量,updateRenderData是上面提到的更新数据接口:

然后就是最重要的一环fillBuffers打包数据了:

上面最主要做了四件事:

  • 坐标转换并写入:通过矩阵将本地坐标转成世界坐标,把画的点变成屏幕位置
  • 写入UV:控制纹理如何贴在线上
  • 写入颜色:控制颜色
  • 写入索引:控制“哪3个点组成一个三角形”

最后要指定Assembler

4.使用

完成上面的操作之后,我们就可以和Graphics一样去使用它了,需要额外拖入一张纹理:

绳子图片就地取材,用的还是上次被指“像棍子”的那根:

这是棍子吧

写一个屏幕画线功能进行测试:

效果如下

给大家磕一个

效果应用

功能没问题之后,我们就可以实际应用到游戏中去了。

由于我们做了适配,我们只需要将Graphics组件换成我们的TextureGraphics即可实现纹理画线:

效果如下

在这里插入图片描述

效果出来后,我愣了几秒

结语

这,好像还是没有纹理好看点啊...

本文实战完整源码已集成到亿元Cocos小游戏实战合集(已完结),已经拥有的小伙伴可以直接更新。


我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

实不相瞒,想要个爱心!请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐文章:

亿元Cocos小游戏实战合集

老板说最近这款游戏很火让我抄,可是我连玩都玩不明白...

这款值68亿的游戏,你不实战一下吗?安排!

小伙伴说我的拼图游戏用Mask不能合批...

俄罗斯方块谁不会做......啊?流沙版?

最近很火的一个拼图游戏,老板让我用Cocos3.8做一个...

老板说拼图游戏太卷了,让我用Cocos做个3d版本的...

敢不敢挑战用Cocos3.8复刻曾经很火的割绳子游戏?

“我要验牌”很火吗?我特意写了个Shader去验...

电影截屏

引言

哈喽大家好,我是亿元程序员,相信大家都看或者听到过下面几句台词:

“我要验牌(wò yāo yān pǎi)”。

“牌没有问题”。

“给我擦皮鞋”。

如果要评选马年开年第一热梗,这几句台词估计能够遥遥领先。

为此,我特意写了一个Shader来"验牌"(蹭热度是吧?)。

言归正传,本期带大家一起来看看如何在Cocos游戏开发中,通过Shader实现卡牌的掀角(搓牌)效果,进行“验牌”

本文源工程可在文末获取,小伙伴们自行前往。

什么是掀角(搓牌)效果?

卡牌从一个角 / 边开始,以卷曲、倾斜、透视变形的方式,从背面逐渐翻转为正面,过程中牌面局部先露出、整体渐进展开,模拟真实纸张的弯曲与光影变化。

还是不懂?我斥巨资买了一副扑克牌来演示给大家看:

验给大家看

原来如此,但是游戏中要它何用?

掀角(搓牌)效果有什么用?

掀角(搓牌)效果不是花里胡哨,是专门用来提升 “手感、悬念、运营数据” 的,在棋牌、卡牌游戏里属于非常实用的设计。

总的来说有以下几种常见用处:

  • 提升真实手感 : 模拟现实里用手指搓开牌角偷看的动作,更像 “真打牌”,在棋牌和卡牌游戏中很常见。
  • 制造悬念,强化情绪 :不是一下子翻开,而是先露一点、再慢慢展开,在抽卡类游戏中很常见,常用作动画效果。
  • 循序渐进 :模拟翻书效果,逐渐展示全部内容,避免直白刷新,常用来展开新篇章。

好哦好哦,那要怎么实现呢?

掀角(搓牌)效果实战

这部分会比较啰嗦,小伙伴们可以直接跳到末尾四键四连点赞分享收藏转发

1.前期准备

首先准备正反面的扑克牌,有条件的可以买扑克自己拍,我直接去找AI搭子:

你这是扑克牌吗

然后CocosCreator3.8.7创建一个名叫woyaoyanpai2D项目,将准备好的图片放到assets目录下,简单布置场景,此处小3埋下伏笔。

买家秀

老规矩,我们先找到Shader的模板,为什么不用菜单生成?因为那不适用。

在资源管理器,搜索sprite找到内置的spriteshader,然后复制到assets目录,改个名字woyaoyanpai

让它抄

2.初见端倪

Cocos Shader的固定格式通常分成以下3个部分:

  • 声明参数和渲染状态:定义渲染配置(混合模式、深度测试、属性参数等)。
  • 顶点着色器:决定每个顶点的位置和UV(纹理坐标)。
  • 片元着色器:决定每个像素的最终颜色。

正如笔者前面说过的,Shader入门阶段理解这三部分就足够上手,复杂效果可以结合AI辅助实现。。

下面我们将根据上面的三部分分别进行。

3.CCEffect(参数和渲染规则声明)

这部分是“配置项”,小伙伴们不用深钻细节,重点看properties里的参数(脚本会给这些参数传值):

划重点

具体如下

参数名 作用
faceTexture 卡牌正面的贴图(比如牌面的花色 / 数字)
faceUVFlip 正面贴图的翻转(比如牌面左右 / 上下反了,用这个修正)
touchPos 手指 / 鼠标拖拽的位置(UV 坐标,0~1 范围)
cornerPos 卡牌被掀起的角的位置(比如右下角是 (1,0),UV 坐标)
radius 卷曲的弧度(值越大,卷曲越明显)
paddingData 扩充范围数据(x/y 是向四周扩的像素,z/w 是卡牌宽高)

4.sprite-fs(片元着色器)

因为掀角(搓牌)主要在片元着色器实现,因此我们先来看看这部分。

片元着色器,粗暴地理解就是,它决定每个像素是什么颜色。

因此我们需要知道什么时候显示牌面,什么时候显示牌背才能知道显示什么颜色。

卷

卡片卷起来的时候,这里面涉及到一个数学模型叫“卷曲坐标系”。

看不懂别慌,问题不大

其中具体的含义如下:

变量 含义
dir 卷曲方向(和我们理解的方向相反)
D 拖拽距离(手指到角起点距离)
R 圆柱半径(卷起来的圆柱半径)

可以把卡牌卷曲理解成“绕一个圆柱滚起来”。

  • D:表示当前拖拽长度
  • 圆周公式:C = 2πR
  • 我们只卷一部分,所以用 D ≈ πR(半圈)

因此R ≈ D / π

这样就能根据拖拽距离动态算出卷曲半径。

建立完成以后,我们可以算出来当前渲染像素点相对于“卷曲交界线”的垂直距离x(投影),然后我们就能够根据x的值来进行分区,得出最终颜色。

看不懂要谎,问题很大

为了让小伙伴们更加容易理解,我给每一层叠加一层半透明的颜色(红、绿,蓝,黄),方便大家理解。

这下好理解了吧

5.sprite-vs(顶点着色器)

小伙伴可能会有疑问,什么时候应该在顶点着色器写,什么时候应该在片元着色器写。

先上一个简单的结论(其实后面还会涉及计算量问题,暂不讨论):

  • 顶点着色器(VS):改“形状”。
  • 片元着色器(FS):改“像素颜色”。

我们的效果有什么需要在顶点着色器完成的,直接给大家看下效果:

被裁了

对于一个Sprite,渲染范围就四个顶点,所以当像素出界后,无法正常显示。

因此我们需要在顶点着色器把范围扩大一下。

根据顶点位置扩大

扩大之后,图像会被拉伸,因此我们还要把UV缩回去,这样才能保证不变形。

相对运动

6.最终效果

原来是小瘪三

结语

我要验牌”这个梗最近的确很火,终于是烧到了游戏开发。

适度玩梗益脑,沉迷玩梗伤身。

本文实例工程可通过私信发送“我要验牌”获取。

更多实战完整源码包含编辑器已集成到亿元Cocos小游戏实战合集(已完结),感谢小伙伴们对创作的支持。


我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

实不相瞒,想要个爱心!请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐文章:

亿元Cocos小游戏实战合集

老板说最近这款游戏很火让我抄,可是我连玩都玩不明白...

这款值68亿的游戏,你不实战一下吗?安排!

小伙伴说我的拼图游戏用Mask不能合批...

俄罗斯方块谁不会做......啊?流沙版?

最近很火的一个拼图游戏,老板让我用Cocos3.8做一个...

老板说拼图游戏太卷了,让我用Cocos做个3d版本的...

敢不敢挑战用Cocos3.8复刻曾经很火的割绳子游戏?

❌