爆款拆解与实现:动态画出物理线条,手把手教你制作“画线救狗”

引言

哈喽大家好,不知道小伙伴们有没有见过上面这款游戏?

这款游戏在买量题材中相当火爆,很多热门商业游戏中都添加了同款玩法,然后通过该玩法制作广告素材进行买量。

出场率 如此高的游戏,笔者好奇在Cocos游戏开发中应该如何实现呢?

言归正传 ,小伙伴们跟随笔者,一起来看看在Cocos游戏开发中,如何实现画线救狗的玩法

本文 收录于《亿元Cocos小游戏实战合集》,欢迎小伙伴们点赞推荐订阅转发。

本文实战源码可在文末获取,小伙伴们自行前往。

1. 拆解一下游戏

我们先来拆解一下实现这个游戏有哪些关键点:

  1. 画线:游戏的核心功能,就是在屏幕上画出任意形状的线,画完后会产生物理效果,保护狗狗,防止狗狗掉落和被蜜蜂攻击。

  2. 狗狗:游戏的主角,我们要通过画线对它进行保护,狗狗在倒计时结束后未掉落和被蜜蜂攻击即可通关,否则失败。

  3. 蜜蜂:不停地朝着狗狗的方向进攻,碰撞到线后,尝试后退再继续进攻。

  4. 蜂巢:蜜蜂出发的地方,在这里面实例化指定数量的蜜蜂。

2. 怎么实现?

1.画线

一看到画线 ,第一时间就要想到Graphics组件,通过它再搭配我们的触摸事件,即可在屏幕上画出各种各样的线条。

画线完成后,线的主要作用是保护狗狗,防止狗狗掉落和被蜜蜂攻击。我们需要给线增加物理效果(例如受重力影响、和蜜蜂发生碰撞)。

游戏中的物体,如果想要通过物理系统发生碰撞,我们需要给它加上刚体组件和碰撞组件。

  • 刚体组件:
  • 碰撞组件:

由于 线是玩家在游戏过程中实时绘制出来的,而且是不规则的,我们需要在代码中进行动态添加,而且还要分段添加,所以我们需要通过addComponent动态添加。

2.狗狗

狗狗和上面画线的一样,如果想要发生碰撞,同样需要添加刚体和碰撞组件。

想要在代码中 根据碰撞进行相关逻辑处理,可以通过监听碰撞组件的BEGIN_CONTACT事件,例如判断狗狗是否被蜜蜂攻击到和狗狗是否掉到水里。

为了 区分和判断狗狗和不同的物体发生碰撞,我们需要在菜单项目->项目设置->物理->碰撞矩阵中添加碰撞分组,以及编辑他们之间哪些可以发生碰撞。

3. 蜜蜂

蜜蜂 的主要逻辑就是进攻狗狗,通过狗狗的位置和自身的位置就能够得到蜜蜂进攻的方向,然后通过applyForceToCenter给蜜蜂添加力,即可让蜜蜂进行运动。

此外,当蜜蜂碰撞到线时,我们可以做一个后退效果,然后继续进攻,形成不断攻击的效果。

4. 蜂巢

蜂巢的逻辑就相对简单了,就是通过计时,定时创建指定数量的蜜蜂,给蜜蜂添加碰撞相关组件,以及控制脚本即可。

3. 游戏实战

1.资源准备

简单 准备一批游戏所需的资源,包括蜂巢、地板、胜利/失败界面、木头、狗狗、水和蜜蜂

2.拼UI

界面 的拼接比较简单,从上到下分别是游戏管理器、画线容器、关卡管理器、倒计时标签、胜利/失败界面

关卡通过预制体进行编辑,在关卡管理器中进行动态加载。

3.写代码

由于文章篇幅问题,下面只展示游戏的核心源码,实战完整源码可在文末获取。

(1)画线管理器

首先通过触摸事件的四大天王进行监听。

触摸开始时 ,创建新节点、添加Graphics组件、画线起点移动到触摸位置。

触摸移动时,每移动到一个位置,画线一次,并记录点位。

上述过程可以进行简单检测,避免频繁画线。

画线结束时 ,给记录的所有点位间的线动态添加组件(核心)。

(2)狗狗控制器

通过 Contact2DType.BEGIN_CONTACT事件监听碰撞事件,初始状态为Static静止不动。

通过名字简单判断碰撞到了哪些物体。

(3)蜜蜂控制器

蜜蜂的进攻:计算方向向量,施加力,使蜜蜂进行运动。

蜜蜂的后撤 :计算后撤方向,通过linearVelocity线性速度进行后撤。

(4)蜂巢控制器

蜜蜂的产生:创建蜜蜂、添加刚体、添加碰撞体、添加蜜蜂管理器。

4.效果演示

关卡1

关卡2

结语

以上就是热门买量游戏《画线救狗》的拆解,不知道小伙伴们学废了没有?

本文实战源码 可通过阅读原文获取。


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

AD:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。

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

推荐文章:

亿元Cocos小游戏实战合集

Cocos游戏如何接入安卓穿山甲广告变现?

你知道和不知道的微信小游戏常用API整理,赶紧收藏用起来~

Cocos游戏如何快速接入抖音小游戏广告变现?

如何在CocosCreator3.8中实现割绳子游戏效果

如何在CocosCreator3.8中实现动态切割模型?

Cocos游戏开发中的贴花效果

相关推荐
weixin_5316518114 小时前
File.stream() 与 FormData 技术详解
开发语言·前端·javascript
董世昌4114 小时前
如何声明一个类?类如何继承?
java·开发语言·前端
2501_9419820514 小时前
企业微信 API 外部群主动推送技术解析
前端·chrome
小鸡脚来咯14 小时前
后端开发vue速成
开发语言·前端·javascript
马达加斯加D14 小时前
Web系统设计 --- HTTP + GraphQL
前端·http·graphql
lifewange1 天前
UI自动化页面元素定位有几种方式
前端·ui·自动化
牛奶1 天前
2026 春涧·前端走向全栈
前端·人工智能·全栈
Piper蛋窝1 天前
AI 有你想不到,也它有做不到 | 2025 年深度使用 Cursor/Trae/CodeX 所得十条经验
前端·后端·代码规范
LYFlied1 天前
WebAssembly为何能实现极致性能:从设计原理到执行优势
前端·wasm·跨端