下载 App

有关《因果》的技术详解

精华修改于2025/11/0760 浏览技术交流
在《因果》中我使用了一系列不常用的思路来制作游戏,希望我现在的思路在以后还是有帮助
首先想分享的是碰撞检测
一般来说,进行碰撞检测常用的方案是碰撞体,即检测玩家是否与障碍物进行碰撞
在我上一个游戏《T.B.I》中使用的就是这种技术
另外说明一下,我使用的是h5技术(html+css+javascript)来制作游戏,目的是为了实现跨平台打包和分发,在pc端使用nw.js打包成exe,在移动端使用cordova打包成安装包
在js(javascript)中,对于div元素可以使用offset关键字来获取元素的各种属性,例如宽高,相较于父元素的绝对坐标,等等
在《T.B.I》中,对每一个障碍物增加一个“block”的类名,在加载场景的时候就获取包含“block”这个类名的所有元素,获得每一个元素的宽高和坐标并与与玩家的坐标进行判断
如果玩家的坐标位于任意一个障碍物的判定区域内,就判断为“被障碍挡住”,进而执行一系列的逻辑处理
方法是好方法,就是太麻烦了
使用这种碰撞体检测不仅需要手动创建元素,还要将其放进游戏场景进行微调
而且这种“摆放”不能预览,如果位置不合适只能在代码里进行微调后重新进入游戏场景查看
就,不太优雅
于是我将目光放在了canvas画布上
canvas画布算是万金油,如果有特效或其他效果一时间没法用常规的html结构实现,将重心放在canvas画布上准没错
canvas画布允许开发者直接在上面绘制像素,和渲染是一个思路,同时也允许直接在上面绘制图片
在《因果》中,我将游戏场景的布局在ps里直接绘制出来,然后将障碍物的部分标记为纯黑,然后将canvas画布平铺整个游戏场景,将场景图片绘制到canvas画布上
这时仅需要判断玩家的位置是否有黑色像素,如果玩家站在黑色像素上就判断为“被障碍物挡住”,进而执行其他逻辑
这样做的好处是可以预览整个游戏场景,且修改起来十分方便,基本上半个小时左右就可以完成一个小场景的制作和调试
在后期开发中还将这个障碍判定画布作为障碍物的阴影或底部来体现3d空间,算是开发《因果》时最用心的工作了
TapTap
注意观察障碍底部的阴影,不仅是3D效果的呈现,也是重要的碰撞判断条件
另外还发现喷溅的毒液会覆盖障碍物的黑色像素,达到了“场景破坏”的效果,但由于时间比较赶没有深入开发
接下来想分享的是敌人脚本加载
如果是在引擎上加载敌人脚本压根不是难事,但我使用的是js
在《T.B.I》中,我使用的是“中心管理”的方式,即在进入场景时就加载一个敌人脚本,这个脚本相当于“总指挥”,指挥每一个敌人应该干什么
但这种方式不能实现“动态添加敌人”的效果,只能在进入房间时就确定好每个敌人的序号,如果这时再加入一个敌人就会打乱获取敌人元素的顺序,整个场景就会变得不可控
但在《因果》中这个难题被解决了
在《因果》中,每一个敌人都有自己的脚本,即使用的是同一套动作模板
使用js的url参数可以区分不同敌人的脚本,在创建敌人的时候就将敌人的id作为url参数传进脚本文件的url中,这样就可以动态加载脚本文件了,基于此还制作了不停刷新敌人的无尽模式
TapTap
创建敌人的函数,六个参数分别为id名,类名,初始化图片路径,x坐标,y坐标,脚本路径
《因果》是我首次实现动态添加敌人的游戏,当我得知url参数居然能用在js文件的请求路径时,整个代码思路瞬间打开了
但问题仍然存在,在某些低端移动设备(oppo A5)上加载过多的敌人脚本就会发生卡顿,之前提到过的“总指挥”的方案只需要加载一个脚本
目前有一个折中的办法:每次加载一批敌人,清除一批后删除当前批的敌人脚本,然后加载新一批敌人和与之对应的脚本
但这就不能达到“动态添加”,只是分批加载而已
另外还有全向移动,子弹判定等技术细节,碍于篇幅就不在此一一列举了,日后可能会出额外篇幅详细说明
下面是《因果》的链接
猜你想搜
因果 js游戏开发技巧
UI的基础写法截图
UI的基础写法
MVC核心 UI显示逻辑与数据分离 简单的实现方法 1先更新数据,再更新UI,这个过程在Command里完成 2以一定频率(0.2秒或者0.4秒定期重绘UI,适合20个UIItem以内) UpdateUI逻辑 先清空所有的UIItem,再重新生成 按钮事件注册原则 #聚光灯游戏开发心得接力 所有在当前UIPanel下的成员变量和成员函数直接调用,在当前UIPanel以外的成员变量
精华
5 赞
2 回复
插件分享:运行中改代码立即生效,切回编辑器无需编译等待截图
插件分享:运行中改代码立即生效,切回编辑器无需编译等待
大家有没有遇到过: 1️⃣只想简单想改一下逻辑、函数,试验下代码,但是每次Unity都要编译好一会儿 2️⃣运行时候,修改了代码,不能立即生效、必须重启游戏 [表情_叹气].... 或许有朋友会说,哎呀,习惯了就好 可是!But! 无需“编译”真的很丝滑啊[表情_猫咪举手] 所改即所得,思维无间断,大脑友好式编程[表情_星星眼] 而且,有时候真的很赶时间啊[表情_委屈] 没有“编译”时间、运行时修
精华
11 赞
分享超级简单的ai生图方法,来自8号秘事制作经验截图
分享超级简单的ai生图方法,来自8号秘事制作经验
分享超级简单的ai生图方法。来自8号秘事制作经验 在上个月的8号秘事开发过程中,由于大家都是社畜,平时没有太多的时间,美术们在画完主场景后,没有太多时间去画一些交代剧情的美术资源。 我自己就通过搜索找到了一个非常简单的ai生图的方法,速度快效率高,而且不用花钱。虽然最终效果一般,但是综合来说,这还是个时间性价比很高的方法。 一.操作方法(附上神秘代码) 下面我来介绍使用方法,首先进入chatgpt
17 赞
1 回复
08:41
纯使用AI制作RPG游戏经验分享-怪物部分截图
纯使用AI制作RPG游戏经验分享-怪物部分
这次聚光灯参赛作品是纯AI写代码做的 分享一下之前制作的零代码基础用AI做游戏的教程给大家 #聚光灯游戏开发心得接力 #TapTap聚光灯独立游戏
精华
14 赞
2 回复
gamejam新手指南#3截图
gamejam新手指南#3
⭐本节目录 一、新手队伍会遇到哪些坑 二、策划案怎么写 三、团队友好协作小妙招 (——论11人野队如何实现0争执,0划水,0跑路) 《gamejam新手全指南》系列将在每晚18:00左右更新,会充分结合资料、参赛者介绍以及个人参赛体验,内容比较详细,[表情_开心]请大家请根据需要按标题查找~欢迎大家在评论区讨论及提问!! #gamejam #TapTap聚光灯独立游戏 #发现好游戏 #游戏制作 #
18 赞
【开发日志#1】分享几款游戏的制作方法截图
【开发日志#1】分享几款游戏的制作方法
到目前为止,参加比赛的游戏有《红树林》、《机动侠·X》、《2b青年的救赎2》、《俯瞰地球》、《宅萌博物馆2——AI绘画展》、《神域传说》、《育婴堂》。 《红树林》是一款3D恐怖游戏,主人公是一名幸存者,他偶然间跑入了一片森林,在暴雨和雷电的夹击下,他渴望生存…… 《红树林》的名字起源于我姑妈家隔壁的一家电影院,名字也叫“红树林”。游戏的场景使用了虚幻商城的限免素材,原素材还有一个开局画面,是红色的
13 赞
11 回复
不写代码不画图,1人21天用AI开发游戏截图
不写代码不画图,1人21天用AI开发游戏
👋 这是一篇用AI开发游戏的教程贴,以作者我本次参加聚光灯比赛为例~ 阅读完,你将收获: AI对游戏开发助力的点在哪? 如何丝滑地使用AI来进行游戏开发? AI在游戏开发中的局限在哪? 目录: 游戏创意 💡:还是得靠“人脑” 游戏方案 🗺️:人类种“种子”AI让它“发芽” 开发阶段 👨‍💻:让AI“小步快跑” 美术设计 🎨:搞定“风格一致性” 游戏音效 🎵:AI的“代码电子音” 总结反思 🤔:AI
精华
7 赞
2 回复
01:33
【聚光灯游戏推荐第三期】游戏荒?别划走!截图
【聚光灯游戏推荐第三期】游戏荒?别划走!
#发现好游戏 #平台跳跃 #猫 #人工智能 #推箱子 #反转 #发现好游戏 #聚光灯gamejam开发者日志 #聚光灯游戏开发心得接力
4 赞
坐骑系统开发避坑指南:4阶分级+内丹养成,让玩家肝得心甘情愿截图
坐骑系统开发避坑指南:4阶分级+内丹养成,让玩家肝得心甘情愿
坐骑不仅是代步工具,更是玩家的“战力伙伴”。这次更新的坐骑系统(凡兽→灵兽→珍兽→仙兽),从设计到落地踩了不少坑,最终形成了“固定基础属性+随机资质+内丹升级”的闭环,分享给大家可直接复用的思路! 一、先踩坑:初期设计的3个致命问题 1. 只分阶不分属性,玩家觉得“换皮不换质”,最早坐骑种类少,获取毫无成就感; 2. 资质随机太极端,非酋玩家弃坑:初始版本资质区间跨度大,有的凡兽比灵兽还强
4 赞
1 回复
第一关的地板截图
第一关的地板
其实其实作为一个初中生而言,时间是比较有限的 在一开始我们想设置的是地板塌陷,玩家在前面跑,地板在后面这种玩法 但很可惜因为技术的原因,还有当玩家进入游戏的时候,会有几秒的卡顿时间当人物进入游戏以后丢地板会造成玩家掉入虚空并且复活以后会一直重复这样的操作 所以我所以我们采用了最简单,最普效,最传统的方法,就是挖坑 对,就是挖坑 其实在一开始的第一关地板中是很明显的,可以看出地板的颜色哪里有坑 但是
5 赞