竹知了很火?于是我用Cocos做了一个

引言

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

不知道 小伙伴们最近有没有留意到,有个叫竹知了的玩具火了起来,小伙伴们小时候有没有玩过?

笔者回想起来,小时候路边摊几块钱就能买到的小玩意儿,声音又响又闹,常常玩不了多久就被大人没收。

如今再想找一件实物,却已经不太容易了。

于是 ,我打算用Cocos 做一个,与此同时,授人以鱼不如授人以渔 ,本期带大家一起看看如何在Cocos中实现一个竹知了的小游戏,大家学会了记得点个免费的小红心,谢谢大家!

注意,本期内容不讨论竹知了背后的故事,只探讨如何快速做一个竹知了的小游戏,仅供学习和参考。

一. 实战前夕

磨刀不误砍柴工,实战之前做足准备:

1. 下载Cocos

打开官网,我们直接点击下载:

跳转之后 再次点击下载,完成CocosDashboard的下载安装。

2. 安装编辑器

打开 CocosDashboard,点击安装->安装编辑器->选择我们合适引擎版本->这里我们选择3.8.7:

3. 新建项目

编辑器 安装好之后,我们新建一个名为zhuzhiliao的2D空项目:

4. 准备素材

本期游戏素材均通过AI生成,请注意甄别。

我们 找到搭子生成竹知了最关键的两个部件(竹竿和竹知了 )和背景 ,并且放到项目的textures目录下:

二. 场景编辑

1. 界面拼接

首先 ,将我们的图片全部拖到Canvas下:

然后,简单调整一下每个图片的位置:

这个简单,还有吗?

2. 添加组件

接着 分别给竹竿和知了添加碰撞和刚体组件,并且根据自己喜好调整对应的参数:

不知道 怎么添加的小伙伴直接点面板下面的添加组件按钮,在弹出框输入搜索并且选择即可添加:

添加完成 之后,点上方的播放按钮即可看到效果(怎么知了会跑?):

那怎么办?

3. 添加约束

为了 避免知了跑掉,我们需要给它添加一个约束,这里我们用的是距离关节DistanceJoint2D。

记得还要调整一下关节的两个锚点到正确的位置:

再次运行,就可以看到知了被约束了:

是不是少了点什么?没错,是绳子!

三. 画绳子

1. 新建脚本

在资源管理器中 右键scripts目录,新建一个脚本:

2. 编辑脚本

用脚本编辑器 打开脚本,添加上方若干个属性,并且在OnLoad方法中添加常用的画线组件Graphics:

然后 在update方法中简单粗暴地进行画线即可:

3. 添加脚本

添加自定义脚本,我们同样可以直接从下方拖上来,并且设置指定的属性即可:

4. 看看效果

再次运行之后就可以看到绳子了!

四. 交互

竹知了这个玩具的关键的交互就是甩,通过甩竹竿让知了转动起来,下面我们一起来看看。

1. 点击事件

在 OnEnable方法中添加常用的四个点击事件以及对应的实现:

2. 原理

原理 其实很简单,因为我们用的是Cocos 内置的物理系统,我们只需要和竹竿进行交互即可,其余甩知了相关就交给系统就行,想要详细了解的小伙伴可以翻阅官方文档。

3. 效果演示

完成上次处理即可得到文章开头的效果:

五. 更近一步

看到这里的小伙伴应该发现了,还缺少两个灵魂,由于篇幅问题就简单描述下,小伙伴们可以自行补充:

  • 1. 声音 :知了转起来的时候应该是有声音的,可以通过AudioSource组件实现。

  • 2. 物理操控 :实战是通过按压屏幕甩知了,真正要模拟玩具的话,还要支持甩手机来甩知了,可通过设备重力传感事件Input.EventType.DEVICEMOTION来完成。

结语

小伙伴们都学废了吗?(为避免一些不必要的麻烦,本期就不提供原工程,都在文章里了。)

在哪里 可以学到这么清晰细致的游戏开发思路?关注我,跟上我的节奏!


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

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

推荐文章:

亿元Cocos小游戏实战合集2.0

亿元Cocos小游戏实战合集1.0

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

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

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

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

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

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

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

相关推荐
小poop39 分钟前
CSS 基础与实战:从入门到精通网页美化
前端
Csvn2 小时前
运行时性能
前端
Never_every993 小时前
位图转矢量工具哪个好?实测抠抠图AI位图转矢量工具
大数据·前端
paopaokaka_luck3 小时前
宠物门店经营管理系统(销售与库存联动、进货自动记账、 退换与退款关联、员工个人业绩、ECharts 经营分析、滞销识别与客户分层、宠物档案年龄计算)
前端·javascript·spring boot·mysql·echarts·mybatis·1024程序员节
空中湖4 小时前
用 React 写数据大屏:为什么我不建议用图表库
前端·react.js·前端框架
欣欣之王来了5 小时前
原始HTML插值:v-html指令的使用与安全风险
前端·学习·架构·项目·vue3教程
IT_陈寒5 小时前
Redis的LRU淘汰策略坑了我一整天
前端·人工智能·后端
计算机魔术师6 小时前
砍半价格、参数再涨,国产旗舰追到 Opus 鼻尖了
前端
特立独行的猫A6 小时前
10 MB 的桌面 AI 客户端:用仓颉 + 系统 WebView 替代 Electron
前端·harmonyos
修炼的dance7 小时前
白底图存JPG,sharp开mozjpeg背景杂点少近三成
前端