淘宝互动游戏之我养的鸡要旅行
近期PD找到我,说我们的特价版小鸡送好礼要进行大改版,要让小鸡在地图上自由的走动起来,期间会遇到各种随机事件、玩法,从而提高趣味性和业务指标。交互图如下:
-
小鸡如何行走,是否需要前、后、左、右、左上、左下、右上、右下八个动画; -
遇到建筑物、河流如何处理; -
交互稿子上有景深的效果、有道路,小鸡如何做到在道路上走、和远景房子等融合。
行走
和设计一起看了一些人物扮演游戏,自己也想了一下DNF、三国这些2D游戏,没我们想得那么复杂需要八个方向不同的动画,不区分奔跑的话就两种动画,左下和右下就能满足大部分场景。
设计师:
| |
| |
▐ 方案一:基于射线投射的寻路算法
这是我一开始想到的思路,但存在不少问题。
具体的路径计算步骤为:
-
从起点发射一条射线到目标点。 -
如果射线直达目标点而不与任何障碍物相交,那么路径就是直线,寻路结束。 -
如果射线与障碍物交叉了,确定射线与哪个障碍物边界相交,并且找到这个边界的两个顶点。 -
对每一个顶点,计算从起点到顶点的直线距离。 -
将每个顶点视为新的起点,从这些顶点发射新的射线到目标点。 -
重复步骤2至5,直至找到不被障碍物阻断的直线路径,或者确定所有可能路径都检查完毕。 -
计算所有可能路径的长度,并选取最短路径。
图上所示全路径:
-
A-B-E-F-G-目标点
-
A-B-E-H-目标点
-
A-B-H-目标点
-
A-B-C-目标点
-
A-D-目标点(最优解)
-
A-D-C-目标点
该方案存在的问题:
-
计算成本高,需要大量射线投射和碰撞检测计算,每次遇到障碍物都需要寻找交叉点并再次发射新的射线。在大型地图或高度动态的环境中,这可能会导致性能问题; -
路径并非最优,算法可能找到一个避开障碍物的路径,但不一定是最短或最高效的路径。根据障碍物的布局和顶点的选择,最终的路径可能远远绕过障碍物,而不是采取更合理或直接的路线; -
不适合所有类型环境,试用于简单的矩形障碍物场景,遇到复杂的障碍物图形,如迷宫、凹凸类型的多边形,可能难以找到一个有效的通路。
▐ 方案二:基于A*的寻路算法
A*算法是一种栅格化地图上常用的高效寻路算法,利用估算的成本函数来遍历节点,从而找到一条从起点到终点的最短路径,这也是大部分游戏在使用的路径计算方法。
采用某乎上的一些分析例子和思路,A*搜索算法(A-Star Search)简介。
介绍一下概念,每个栅格即为一个Node节点,每个节点都有自己的三个属性值
-
g为从起点走到当前格子的成本; -
h为当前格子到终点的估计成本,使用的曼哈顿距离,即为 |x1 - x2| + |y1 - y2|; -
f为G值和H值的总和; -
openList为待计算的点; -
closeList为已选中的点
以一个简单的3*3的栅格介绍一下整体的A*算法的流程,初始点为(0, 0),目标点为(2, 2),格子的长宽皆为1、斜角的长度为1.4。
7. 循环4-6步,直到h为0时,即找到最短路径。
写了一个简单的以Javascript实现的版本:
// A*算法 Node 类,用于存储节点信息
class Node {
constructor(parent = null, position = null) {
this.parent = parent; // 父节点
this.position = position; // 节点在网格中的坐标位置
this.g = 0; // G值是从起点走到当前格子的成本
this.h = 0; // H值是当前格子到终点的估计成本
this.f = 0; // F值是G值和H值的总和
}
// 判断两个节点是否位于同一个位置
isEqual(otherNode) {
return this.position[0] === otherNode.position[0] && this.position[1] === otherNode.position[1];
}
}
// 启发式函数,用于估计到达目标的成本(此处使用曼哈顿距离)
function heuristic(nodeA, nodeB) {
const d1 = Math.abs(nodeB.position[0] - nodeA.position[0]);
const d2 = Math.abs(nodeB.position[1] - nodeA.position[1]);
return d1 + d2;
}
// 获取一个节点的所有可能的邻居(包括对角线上的位置)
function getNeighbors(currentNode, grid) {
const neighbors = [];
// 这里包括了八个方向上的移动
const directions = [
[-1, -1], [-1, 0], [-1, 1], // 左上 左 左下
[0, -1], [0, 1], // 上 下
[1, -1], [1, 0], [1, 1], // 右上 右 右下
];
// 查看每个方向的邻居是否可通行(非障碍)且在网格范围内
for (const direction of directions) {
const neighborPos = [
currentNode.position[0] + direction[0],
currentNode.position[1] + direction[1],
];
// 确保位置在网格内且不是障碍物
if (
neighborPos[0] >= 0 && neighborPos[0] < grid.length &&
neighborPos[1] >= 0 && neighborPos[1] < grid[0].length &&
grid[neighborPos[0]][neighborPos[1]] === 1
) {
neighbors.push(new Node(currentNode, neighborPos));
}
}
return neighbors;
}
// A* 算法主函数
function aStar(grid, start, end) {
const startNode = new Node(null, start);
const endNode = new Node(null, end);
let openSet = [startNode]; // 存储待检查的节点
let closedSet = []; // 存储已检查的节点
while (openSet.length > 0) {
console.log('startNode');
// 在openSet中找到F值最低的节点
let lowestIndex = 0;
for (let i = 0; i < openSet.length; i++) {
if (openSet[i].f < openSet[lowestIndex].f) {
lowestIndex = i;
}
}
let currentNode = openSet[lowestIndex];
// 如果当前节点是目的地,那么我们再次构造路径
if (currentNode.isEqual(endNode)) {
let path = [];
let current = currentNode;
while (current != null) {
path.push(current.position);
current = current.parent;
}
return path.reverse(); // 把数组反转,因为我们是从终点回溯到起点存储的
}
// 当前节点已经被处理过,移出openSet,并加入closedSet
openSet.splice(lowestIndex, 1);
closedSet.push(currentNode);
// 找到所有邻居
let neighbors = getNeighbors(currentNode, grid);
for (let neighbor of neighbors) {
// 如果邻居是不可访问的或已在closedSet中,忽略它们
// 如果这个邻居在关闭列表中,跳过它
if (closedSet.some(closedNode => closedNode.isEqual(neighbor))) {
continue;
}
// 对角线移动的成本要考虑 √2
// 通过查看相邻节点和当前节点的坐标差来判断是否为对角移动
const isDiagonalMove =
Math.abs(currentNode.position[0] - neighbor.position[0]) === 1 &&
Math.abs(currentNode.position[1] - neighbor.position[1]) === 1;
// 对角线移动的成本假定为 √2,其他为1
const tentativeG = currentNode.g + (isDiagonalMove ? Math.sqrt(2) : 1);
// 如果新的G值更低,或者邻居节点不在开放列表中
let openNode = openSet.find(openNode => openNode.isEqual(neighbor));
if (!openNode || tentativeG < neighbor.g) {
neighbor.g = tentativeG;
neighbor.h = heuristic(neighbor, endNode); // H值不变,因为它是启发式估计到终点的成本
neighbor.f = neighbor.g + neighbor.h;
neighbor.parent = currentNode;
// 如果邻居节点不在开放列表中,加入开放列表
if (!openNode) {
openSet.push(neighbor);
}
}
}
}
// 如果循环结束还没有到达终点,表示没有路径到达终点
return [];
}
对比上述射线检测的寻路算饭,A*寻路算法的优势比较明显:
-
最优路径保证:A*算法在合适的启发函数(Heuristic Function)下,保证找到从起点到终点的最短路径,而基于射线检测的方法可能无法始终保证找到最短的路径,尤其是在复杂多变的环境中; -
高效率:A*算法通过启发式评估(即评价函数 f(n) = g(n) + h(n)),能够高效地确定搜索的方向,从而减少需要探索的节点数量。相比之下,基于射线检测的方法可能需要多次尝试和错误,尤其是在遇到多个障碍物时,计算成本较高; -
兼容性好:A*算法可以灵活地应用于不同类型的地图和多样化的环境,无论是开放空间、狭窄通道还是复杂迷宫,都能有效工作。通过调整启发式函数,A可以适应各种需求。射线检测方法在一些特定场景(如开阔地带少量障碍)中可能更为直接高效,但在条件复杂的环境中,其性能可能会受到限制。
▐ 简易地图编辑器
-
实现栅格化
相比于方案一,基于A*的寻路逻辑,需要提前将地图进行栅格化(网格),栅格化是把连续的信息分解成离散的单元格(像素、方格、体素),便于计算处理和分析,我们需要将整张地图进行栅格化,这里是和实际渲染在手机上的地图进行1:1还原,每个单元格以50*50为宽和高,为什么为50,是一个经验值,值越小,鸡走动的约真实,路径就越细致,50已经能满足当前场景。
-
区块配置、预览
区块指的是地图上的事件的承载体,包含渲染坐标、障碍物坐标、落地点、事件code(服务端关联玩法)等信息。
同时支持运营开发同学自己勾选、编辑、移动障碍物等位置,图中勾选出来的障碍物即为1,不可通行。
如何做到在地图道路上走、和远景房子融合?
这块经过与设计、pd对接,在2d场景下很难实现,我们基于栅格的A*寻路能实现,但是会很不真实,如果要做到该效果,只能做3d的场景,下面是我画的路线图。
很明显该路线是曲折的,需要小鸡的各角度的侧身,也就是需要x、y、z轴,才能模拟真实的效果,也就是只有3D场景才能满足诉求,与设计同学讨论了一下决定用更适合2D的场景设计,如下图:
我们只需要将障碍物(场景、区块)设置好、在y轴上对小鸡做一定的scale缩放,来做透视扭曲(模拟现实中物体随着距离远近而变化的视觉效果)的效果,就能模拟一定的2.5d效果。
整体将背景结合寻路算法给设计和业务同学看了一下,对于效果还没达到预期,比较僵硬,需要做一些层次效果,来模拟真实走动的效果。
▐ 视差滚动
通过获取相机在x、y轴的滚动距离,与远、中、近景以不同的速率相乘,近景即为草丛区移动得更快,中景即为行动草地区按正常滚动距离移动,远景也就是云层和天空移动得更慢,来模拟摄像机的移动和景深的效果。
核心代码:
// 远景x轴速率
export const parallaxFactorFarX = 0.2;
// 远景y轴速率
export const parallaxFactorFarY = 0.2;
// 初始坐标
export const farOriginXY = [0, -60];
// 近景x轴速率
export const parallaxFactorNearX = 1.8;
// 近景y轴速率
export const parallaxFactorNearY = 1.05;
// 初始坐标
export const nearOriginXY = [0, gameHeightBounds - 420];
const { scrollX, scrollY } = this.scene.cameras.main;
if (scrollX >= 0 && scrollX <= 750 && scrollY >= 0 && this.bgFar && this.bgNear) {
this.bgFar.x = -scrollX * parallaxFactorFarX;
this.bgFar.y = -scrollY * parallaxFactorFarY + farOriginXY[1];
this.bgNear.x = -scrollX * parallaxFactorNearX;
this.bgNear.y = -scrollY * parallaxFactorNearY + nearOriginXY[1];
}
▐ 深度排序
通过调整游戏对象的 depth 值,可以确保某些对象看上去像是位于其他对象的前面或背后,从视觉上产生立体感、模拟真实世界。具体方案为:
-
我们会将当前存在地图上的游戏对象构建虚拟边框,常用矩形去表达,大部分spine对象的形状都是不固定的,面积也会很大,我们统一用矩形去描述游戏对象的轮廓 ; -
取每个虚拟边框的bottomY,也就是底边y轴的坐标,按从大到小排序; -
分不同的区间,区间左闭为上一个bottomY,右闭为当前bottomY,生成该区间内可以设置的深度; -
当小鸡行走时,读取y轴坐标,判断在哪一个区间,为小鸡设置该区间可以设置的深度。
核心代码如下:
// 划分区间
const divideRegional = (blocks: Array<{ id: number, bottomY: number }>) => {
blocks.sort((a, b) => a.bottomY - b.bottomY);
return blocks.map((item, idx) => {
const nextBottomY = blocks[idx + 1] ? blocks[idx + 1].bottomY : Infinity;
return {
regional: [(idx + 1) * 100, (idx + 1) * 100 + 100],
range: [item.bottomY, nextBottomY],
...item
}
})
}
// 行走时的判断
const currentY = chicken.getPosition().y + 130;
const currentRegion = regionals.find((rengional) => {
const [start, end] = rengional.range;
return currentY >= start && currentY <= end;
})
if (currentRegion) {
chicken.setDepth(currentRegion.regional[0] + 1);
} else {
chicken.setDepth(99);
}
▐ 阴影效果
因为我们以2d为主,光照、材质、阴影这块主要是以设计为主:
小鸡 | 神秘屋 | 双色球 | 彩蛋 |
|
|
| |
全链路指引
主动提的需求,担心用户不知道如何玩儿起来,得提供一个全链路的引导、指引你去熟悉新的玩法,一句话诉求为:用户长时间不行走、没有触发玩法、不浏览地图就触发指引,指引也有一定的优先级。如何划分优先级,这是业务属性,这里就不提了。
第一直觉代码如何编写?
-
在行走结束后启动定时器,在拖拽地图时、触发玩法后清除定时器; -
在拖拽地图结束后启动定时器,在走动、触发玩法后清除定时器; -
在触发玩法后启动定时器,在走动、拖拽地图后清除定时器。
多一个链路,这种像狗皮膏药一样的代码就会越来越多,很不优雅,且容易遗漏。
使用了组内小伙伴做的小而美的多流程定时器的能力,大致的思路如下:
核心思想就是,定时器统一管理,在过程中可以打断和重新计时,只有全部状态ok了,才能执行。
核心代码如下:
function ProcessTimer() {
let id = 0;
let hasEmit = false;
const timers = {};
const flags = {};
const types: any = {};
let func: any;
const run = (cb) => {
func = cb;
};
const startTimer = (type, delayTime) => {
// 触发过或者定时器存在
if (hasEmit || timers[type]) return;
timers[type] = setTimeout(() => {
flags[type] = true;
checkTimer();
}, delayTime);
};
const checkTimer = () => {
const keys = Object.keys(timers) || [];
const notSatisfied = keys.find((key) => !flags[key]);
// 满足所有的条件,出任务触点,只出一次
if (!notSatisfied && !hasEmit) {
hasEmit = true;
clearAllTimer();
if (func && typeof func === 'function') {
func();
}
}
};
const clearAllTimer = () => {
const keys = Object.keys(timers) || [];
keys.forEach((key) => {
clearTimer(key);
});
};
const clearTimer = (type) => {
flags[type] = false;
if (timers[type]) {
clearTimeout(timers[type]);
timers[type] = null;
}
};
const create = (delayTime = 8000) => {
const type = `timer${id++}`;
timers[type] = null; // 所有定时器
flags[type] = false;
types[type] = delayTime;
return {
start: () => {
startTimer(type, delayTime);
},
end: () => {
clearTimer(type);
},
type,
};
};
const reset = () => {
hasEmit = false;
}
return {
create,
run,
clearAllTimer,
reset,
};
}
export default ProcessTimer;
去年写过一篇关于前端业务代码分层的文章《小鸡PK业务架构治理记录》,主要是针对于rax这个视图引擎的,本文的区别在于属于混合开发的模式,Phaser游戏开发的内容占比甚至比传统的前端rax/react开发更多。对于我们的分层模式来说其实没什么区别,只不过多了一种渲染方式而已,用phaser渲染和用react还是rax渲染其实都没什么区别。
架构图:
Phaser游戏对象设计:
这样设计的好处是游戏对象可以在controller逻辑层任意调用,细看api,游戏对象只负责渲染,不包含任何业务逻辑。
总结
记录一下自己在做这个项目过程中遇到的问题和解决的思路,游戏的开发区别于传统前端,上述一些方案也自己慢慢摸索出来的,有更好的方案也可以一起讨论。
参考资料
-
《Spine动画是什么》:https://zhuanlan.zhihu.com/p/679339532 -
《A*搜索算法简介》:https://zhuanlan.zhihu.com/p/665252967
本文分享自微信公众号 - 大淘宝技术(AlibabaMTT)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
深度解读昇腾CANN模型下沉技术,提升模型调度性能
本文分享自华为云社区《深度解读昇腾CANN模型下沉技术,提升模型调度性能》,作者:昇腾CANN。 AI模型的运行通常情况下需要CPU和NPU(昇腾AI处理器)等AI专用处理器协同工作,CPU所在位置称为主机端(Host),而NPU所在位置称为设备端(Device)。对于采用Host调度的AI模型来说,Host下发Task的时序和Device执行Task的时序是异步的,如果Device执行Task的速度比Host下发Task的速度快,则Device会处于空闲状态。比如,大模型场景的增量推理或训练的FineTune阶段,都是计算量较小的场景,此时很容易出现单个算子的Host下发时间比Device上的算子执行时间还长,从而导致Device间歇处于空闲状态。这种现象通常称为Host Bound,这种模型也称为Host Bound模型。 如何减少Host Bound模型的Device空闲时间,从而优化模型执行性能显得尤其重要,GE(Graph Engine)图引擎通过图模式的Host调度和模型下沉调度的方式,可提升模型调度性能,缩短模型E2E执行时间。 1 模型Host调度 Host CPU将模...
- 下一篇
MySQL 中 GRANT 操作会引起复制中断吗?
一个案例讲清楚 GRANT 操作的生效过程。 作者:杨彩琳,爱可生华东交付部 DBA,主要负责 MySQL 日常问题处理及 DMP 产品支持。爱好跳舞,追剧。 爱可生开源社区出品,原创内容未经授权不得随意使用,转载请联系小编并注明来源。 本文约 1100 字,预计阅读需要 3 分钟。 问题背景 客户反馈,某业务测试环境的数据库主从同步断开。 登录到从库,执行 show slave status\G,发现 sql 线程没有工作了,具体报错为: LAST_ERROR_MUMBER: 1410 LAST_ERROR_MESSAGE: Worker 1 failed executing transaction 'c593bdc6-cd10-11ec-ac44-0050568a0cc2:2003275' at master log mysql-bin.00187, end_log_post 142 'You are not allowed to create a user with GRANT' on query. Default database: 'mysql'. Query: 'GRANT...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- Red5直播服务器,属于Java语言的直播服务器
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS7,CentOS8安装Elasticsearch6.8.6