首页 > 资讯大全 > 互联网资讯互联网资讯 订阅

浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)

时间:2022-11-10 14:58:13 栏目:互联网资讯
【导读】:dir123目录大全(https://www.dir123.com)在线提供,互联网资讯「浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)」,供互联网资讯爱好者免费阅读。本文地址:https://www.dir123.com/news/775.html

  有些人玩游戏,是为了寻求刺激;有些人玩游戏,是为了休闲安静地打发时间。二者的感受如何才能兼得,近日,苏格兰爱丁堡的一位开发者Anslo 潜心开发了 16 个月,发布了一款名为《Slow Roads》(slowroads.io)的免费、轻松的驾驶游戏,可以让玩家在电脑上体验《速度与激情》的感觉,还能欣赏由程序自动生成的优美风景。此外,这款游戏可以直接在浏览器中运行,无需登录或者安装,对于玩家而言,即开即玩。

浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)

浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)

1玩法

  《Slow Roads》一经推出之后,便受到了不少玩家的关注和试玩。和传统驾驶类游戏有所不同,这款游戏在玩法和技术实现上有着巨大的差异。

  首先,在游戏玩法上,它没有撞车、没有失败更没有输赢。随着汽车的行驶,道路会一直在延伸,风景秀丽的景观在身边飞驰,最为值得关注无论是春夏秋冬,还是白天、傍晚、黑夜,亦或是森林、沙漠、环山,场景都可以一键“无缝切换”。

浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)

  另外,驾驶的车也可以切换为轿车、长途汽车、自行车。

浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)

  如果你的方向盘偏离了道路,也可以按一下「R」键将车重新定位到快速道上,甚至道路也是可以选择的。当然,如果你愿意,还可以驾驶越野车或者体验一下水下行驶的感觉。

  当然,玩累了,还可以开启自动驾驶模式。

浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)

  同时,这款游戏的操作也非常简单,W 键或向上箭头是加速,S 键或向下箭头是刹车。A 键和 D 键(或左右箭头)控制转向;玩家也可以通过按住 Shift 或双击 W 键来升级汽车;C 键可改变摄像机角度,Q 键和 E 键在可用的天气和照明条件下循环。如果你不喜欢键盘控制,也可以改用基于鼠标的转向。

浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)

  在技术实现上,与使用传统游戏引擎开发的游戏不同,Anslo 表示,《Slow Roads》使用了 three.js 的 3D JavaScript 库构建,可直接在Chrome、Firefox、Safari 和 Edge 浏览器中运行。与此同时,上述的场景切换都是由程序自动生成,通过技术实现,可以动态生成无限地图和处理事务。这是一个相当复杂且有趣的技术演示。用开发者 Anslo 自己的话来形容,「该游戏的实验正在挑战浏览器游戏的合理边界」。

  接下来,我们不妨一起来看一下具体的技术原理。

技术实现

  事实上,这一款游戏的制作不仅需要深厚的开发功底,也需要有设计、物理学等知识储备。在《Slow Roads》中,作者首先通过生成一个高度图,采用了类似于 Perlin噪声的算法,并进行了修改优化,从而实现更真实的山丘景观。

  继而使用一个 npm 包 Alea(https://www.npmjs.com/package/alea)用作 PRNG(伪随机数生成器,Preudo Random Number Generator),用于复制和粘贴实现。

  当完成第一步开发之后,第二步便是进行车子行驶的道路规划。Anslo 选择采用了以下步骤:

  选择地图中一个不太陡峭、不太深的地方,作为行驶的起点。同时,这也是道路中线的第一个点。

  进而选择一个方向,并测量周围的高度图,以此评估横向和纵向的坡度。

  然后,道路中线最好是能向坡度下滑的方向移动 10 米。点被编码在一个双向链表中,每个点都使用元数据(如坡度、道路宽度和曲率)注释。

  上面这个过程是会一直重复的(以从车辆位置开始的 15 公里的地平线为界),但注意行驶的车道不要有自相交的情况,这也是游戏中道路规划最难的地方。

  中线点的高度用一个 9 个点的窗口进行追溯平滑,以避免海拔的突然急剧变化。

  在一个较短的地平线上,大概 10 米的中线被用二次贝塞尔曲线以 1 米的分辨率进行平滑点的注释。

浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)

  当道路规划完成之后,第三步便是渲染环境。这里可以使用一个5x5 的大粗网格(这款游戏中,作者采用的是 10 米的分辨率和 1 公里的最大视距)来渲染大型场景。这被称之为“远网格”。

  在靠近道路的地方,是一个由更细的 5x5 网格组成的,每个网格拼接到一起,沿着道路中线行进,形成一个连续的 "走廊"。这就是 "近网格",从车辆的位置向前生成一个固定的水平线。

  同时,远处网格现在重叠的顶点被粗略地 "隐藏 "起来,把它们沉到几米以下。

  然后离道路中线接近的地方,在道路的高度和底层环境的高度之间插值,以实现无缝过渡。

  除了以上,Anslo还采用了一个额外的 3x3 网格,渲染离道路中线更近的地方,优化细节,实现更精细的体验。

浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)

  在图形细节中,这名开发者在游戏中的地面纹理使用世界坐标的 UV,并与 perlin 噪声混合,以改变草的颜色。另外,在树叶地图下应用了一个暗色的纹理,用来产生树影的感官。

浏览器上享受《速度与激情》,开发者花 16 个月用 JavaScript 造了一款驾驶游戏,水里也能开车!(图文)

  正如上文所述,这款游戏还采用了一些物理学的基础知识,如汽车每个轮子的动力学都是独立计算的,使用围绕重力、表面摩擦力和地面法线的常规运动学方程式。

最后

  目前这款游戏已经基本完成,不过,Anslo 认为也还有不少需要优化的地方,后续可能会改善天气效果、更多的车辆类型和控制器支持。

  作为一款没有使用如 Unity、UE5 等游戏引擎,而仅是使用了 JavaScript 实现的游戏而言,它的轻量级获得了不少好评:

  火星地图很有趣。另外,我发现汽车在倒挡时候可以同样快!

  如果能教会自动驾驶漂移会很酷。

  现在的我没有驾照,但是也能通过浏览器获得驾驶通信证了,荣誉!

  期待后续可以加上背景音乐!

  也有不少网友感叹似乎回到了高中时期玩《Geep Simulator》的年代。不过,目前《Slow Roads》暂时还没有开源版本的计划,但作者表示将来不排除有这种可能性。同时根据游戏的页面显示,Anslo 称正在致力于保持《Slow Roads》免费提供且没有广告,「享受这作为逃离资本主义的喘息之机」。

  试玩地址:slowroads.io

  参考资料:

  https://anslo.medium.com/slow-roads-tl-dr-a664ac6bce40

  https://twitter.com/anslogen

  https://arstechnica.com/gaming/2022/10/slow-roads-offers-a-chill-endless-driving-experience-in-your-browser/

  https://twitter.com/anslogen/status/1583850492463296517

版权声明:

1、本文系转载,版权归原作者所有,旨在传递信息,不代表看本站的观点和立场。

2、本站仅提供信息发布平台,不承担相关法律责任。

3、若侵犯您的版权或隐私,请联系本站管理员删除。

4、、本文由会员转载自互联网,如果您是文章原创作者,请联系本站注明您的版权信息。

互联网资讯推荐