如何用 JS 实现 3D 赛车效果

2011-07-12 by Dron

本文将分享如何用 JS 写出一个 3D 赛车,我之前曾在技术交流会上也讲过一次(这里是当时用的 PPT),后来有同学反馈说讲得太深奥没听懂。其实 PPT 里说的更多的是三维图形的基础知识,实现原理体现的稍微少一些,那么本文将着重从实现原理这块做一些补充。

先看赛车的示例:http://ucren.com/racing/,还是半成品状态,很多功能没有实现,不过目前也没有后续的开发计划。

准备工作:

1) 图片素材:图片素材是每一个网页游戏必不可少的,本游戏中素材涉及到白云远山N 棵不同的树小车时速表盘时速表针以及其它一些背景图片等。为了实现延伸,这里的白云及远山等图片素材一定要做成首尾相接看起来平滑的,中间不能出现交界痕迹,这样的图片可以从网上找到素材,再用 PhotoShop 进行处理。

2) 矢量绘图库:矢量绘画部分没有必要自己从头写起,我们应该将关注点放在游戏的业务逻辑部分,可以从网上找个自己用得顺手的基础库,比如 excanvasRaphael 等,如果不考虑浏览器兼容的话,也可以使用 HTML5 提供的 <canvas> 标签。强力推荐 Raphael,Raphael 是一个全浏览器监容的绘画库,她提供大部分常用基本图形的绘制方法,以及支持通过 SVGPath 语法来描绘任意曲线,更甚的是,每一个图形单元都对应一个 Raphael 对象,可以类似 JQuery 那样的链式调用来对图形单元进行操作,Raphael 的图形渲染载体是浏览器提供的原生 vml 或 svg,IE 下使用 vml,其它浏览器使用 svg。

实现原理:

实际上赛车的实现过程中考虑了很多细节的问题,由于篇幅有限,这里只挑一些重点的来介绍。

1) 白云及远山:这两个都是 <div> 的背景实现的,通过控制 <div> 样式中的 backgroundPositionX 属性来达到移动的目的,注意两个特点:a、运动方向与小车行驶的方向相反(小车左拐时,云和山向右移,反之则相反);b、由于白云离观察者的距离比远山要远,所以白云运动的速度比山体要慢(本游戏用的速度是 1:4)。在 IE6 下,变更 backgroundPosition 相关属性的值会使背景图片重载,导致界面上看起来闪烁,所以这里要用 document.execCommand("BackgroundImageCache", false, true) 命令强制背景图片缓存。

2) 路面:路面最重要的构成是两条贝赛尔曲线,贝塞尔曲线有几个重要的参数——起点、控制点一、控制点二和终点,这样的四个点即构成一条贝赛尔曲线。SVGPath 里的 C 指令可以完成贝塞尔曲线的绘制。路面变换弯度是如何实现的呢?幸好 vml/svg 节点的 path 属性是允许动态改变的,可以通过改变它的 path 来完成弯度的变化,这点 Raphael 库提供了很大的便利。如果是 <canvas> 实现的话,需要不断的重绘路面来达到目的。

3) 树木:本游戏中树木是由 6 张图片随机产生的,它们由远及近地运动来向玩家表达车子向前跑的状态,运动是通过不断改变树木的坐标和大小实现的,这里的坐标由路沿的两条贝塞尔曲线来确定。树木的运动有三个特点:a、离观察者越远的树越小,所以运动使树木不断变大,同时也使相邻树木的间距变大;b、由于前面的过程,树木的 y 坐标(top 值)不一定在逐渐增大,有时反而在减小;c、离观察者近的树,层次要位于离得远的树之上。

4) 车子:车子是由一张集合了 13 个可能出现的方向的图片组合而成(见上述图片素材部分),你可能会奇怪这样的图片怎么制作,其实很简单,我是拿 3dsmax 软件做成的,从网上找了一个 3d 车子模型,用 3dsmax 软件改改样子,并导出不同方向的图片,最终用 PhotoShop 合成。在网页上,用这张图片做为一个 <div> 的背景,仍然是通过控制 <div> 样式的 backgroundPositionX 属性来达到车子变换方向的目的。本游戏中车子在改变方向或位置的时候,将受到以下参数的影响:当前车速、人为加减速、自然减速(速度自然衰减)、被迫减速(碰擦路沿时)、弯道系数、左右方向键累积系数、离心力大小等,这些参数复合运算后的结果将决定车子当前应该处于的 x 坐标位置和方向。由于实现在不同的模块中,这里就不详细说明这些运算了。

5) 时速表:时速表由表盘和表针组成,表盘是静止的,表针是可以转动的。转动的原理是改变表针的 rotate 属性,这点在 Raphael 库也有也对应的方法实现,参见 Raphael 文档中的 rotate 方法。为了更加逼真,指针加入了抖动策略,具体为:如果车子处于匀速状态下,指针将在当前速度附近抖动,你可以将车子开满 180km/h 看看效果。

6) 速度:这是本游戏中最重要的参数之一,本游戏中将速度量化为 0-1,1 为满速,0 为静止不动。速度参数将决定网页上很多物件的移动:除了车子上述复杂过程外,还有白云和远山的位移速度、路面改变弯道的快慢程度、树木运动的快慢、时速表指针旋转的角度等。

关于实现原理就介绍到这里,下面说说我原来的一些想法:

后续可以做的:

1) 小地图:使路况与小地图结合起来,模拟真实世界。

2) 起点和终点:这是一个赛车游戏必备的。

3) 耗油:起跑时,油箱是满的,在车子跑动过程中,结合速度、路况、玩家控制、阻力等因素来消耗汽油,在到达终点之前油用完就 Game Over,考验玩家的驾驶水平。

4) 敌车:路上不可能只有一个车子嘛。

5) 复杂路况:可以用草丛、沙地、小石头、水坑等物体来复杂化路况,增加游戏的难度和趣味性。

6) 路边风景:结合小地图,可以在路边实现一些河流、建筑物等,纯树木还是很单调的。