news 2026/4/16 0:49:20

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
爆款拆解与实现:动态画出物理线条,手把手教你制作“画线救狗”

引言

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

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

出场率如此高的游戏,笔者好奇在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游戏开发中的贴花效果

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/13 16:28:54

联合国可持续发展目标:用技术促进优质教育普及

联合国可持续发展目标:用技术促进优质教育普及 在云南山区的一间教室里,教师用普通话讲授物理课,而前排几位学生却因方言差异频频皱眉;另一所城市的特殊教育学校中,听障学生努力盯着黑板,却错过了老师口头强…

作者头像 李华
网站建设 2026/4/13 17:40:36

儿童故事音频自动化生产:IndexTTS 2.0温暖声线轻松生成

儿童故事音频自动化生产:IndexTTS 2.0温暖声线轻松生成 在智能音箱每天给孩子讲睡前故事的今天,你是否想过——如果这声音来自妈妈本人,哪怕她正在加班、出差,甚至已经离世多年?这不是科幻情节,而是 Index…

作者头像 李华
网站建设 2026/4/9 20:10:03

day39图像数据与显存

一、 图像数据的介绍 1.1 灰度图像 从这里开始我们进入到了图像数据相关的部分,也是默认你有之前复试班计算机视觉相关的知识,但是一些基础的概念我仍然会提。 昨天我们介绍了minist这个经典的手写数据集,作为图像数据,相较于结…

作者头像 李华
网站建设 2026/4/13 6:47:25

React Native搭建环境一文说清:Windows配置流程

React Native环境搭建全攻略:Windows平台从零到跑通App 你是不是也经历过这样的时刻?满心欢喜想用React Native写个跨平台应用,结果刚打开终端执行 npx react-native init ,就弹出一连串错误:找不到JDK、SDK路径异常…

作者头像 李华
网站建设 2026/4/15 10:10:07

考古发掘现场:保存原始挖掘环境的声音全貌

考古发掘现场:保存原始挖掘环境的声音全貌 在陕西一处新石器时代遗址的探方边缘,考古领队蹲在土层交界处,对着助手低声讲解:“这个灰坑开口呈不规则椭圆形,底部有明显踩踏痕迹……”风声混着远处机械筛土的震动&#x…

作者头像 李华
网站建设 2026/4/12 6:58:50

地方戏曲数字化:建立濒危剧种的标准语音数据库

地方戏曲数字化:建立濒危剧种的标准语音数据库 在浙江某县文化馆的档案室里,一排排泛黄的录音带静静躺在铁皮柜中——那是上世纪八十年代几位越剧老艺人的清唱实录。如今,这些磁带已严重老化,播放时杂音刺耳,而熟悉那段…

作者头像 李华