尝试做一个弹珠台 (Pinball) 的游戏

0 comments

tensaix2j26.054 years agoHive.Blog5 min read

今天来分享一个制作弹珠台游戏的过程。这是我用 Decentraland SDK 的第四款游戏。目前还在WIP 的阶段。

首先， Pinball 这个游戏需要用到一个物理模拟引擎 Physics Simulation Engine。这个我们可以使用 Box2d.js 或 Box2d.ts 。Box2d.ts在 Github 里可以找到。在这之前必须确认 Box2d 可以在 Decentraland SDK 的环境下使用。

整个过程可以分成 3 段：

制作 Box2d 的Physic Bodies 。
用Blender 建模。
对齐3D模型跟 Box2D 的模型。

先来做 Box2D 的部分。还没开始建模前可以使用 js + html canvas 来弄一个prototype 。

这是因为 Box2d.js 里有提供一个叫 debugdraw() 的东西。用debugdraw 可以一行code 直接看到整个 b2World 里的物件，只需要建立一个 b2World, 丢进去一些 static bodies 和 dynamic bodies ，pass 进去 Canvas 的 context 。它就会呈现在你的canvas 上。这个很方便debug ，不必自己draw 出来。

至于那些 Static bodies 的 Polygon Shape 的 Coordinate 要如何排出来。首先去下载了一款叫 PhysicBodyEditor 的工具。但后来用用下觉得实在是太不好用了。

然后我想到 Blender 其实export 出来 .obj 格式档案就有全部物件的 vertices 的 coordinates ，用Blender 就可以了。不过 Blender 不会自动把你的mesh 做成 convex 的。Box2d 的static bodies 只可以是 Convex Shape ，不然它的collision detection 会失败。

Convex 就是不会有凹槽的形状。有凹槽的叫Concave 。数学上convex 就是说从里面看每个角度都是少过180度的，从外面看就必须每个角度超过180 度。

如果你用 PhysicBody Editor ，如果你不小心建了一个 concave shape ，它会自动拆成两个 convex shape。如果你用 Blender 就自己来。

那个 Flipper 可以用 Box2D 的 Revolute Joint , 然后那个 Plunger 可以用 Box2D 的 distance Joint.

这个必须了解 Box2D 的物件。不熟悉想学的话可以看Coding Train 的youtube 视频

https://www.youtube.com/watch?v=MsRROjQJxuo

2. 建模

Prototype 好了后，就可以开始建模了。只需要根据Box2d 的线条弄个mesh 出来。

然后上色

这个看起来太单调了。后来我研究看能不能 Bake 一点 soft shadow 进 Texture 。就是弄一些假的柔影子。因为Decentraland 不能打GI 光 (Global Illumination) 的。即使能也不能有即时的 soft shadow 或 ambient occlusion ，因为会耗计算。

这个用 Gimp 的 drop shadow就能做了。

通常 Pinball 桌台都有个主题的，就像主题乐园那样。所以我打算这个主题就是 Decentraland 本身。

背景就随便拉一些 decentraland 的logo 和 avatar 的平面图进去，调一下颜色，不要那么耀眼就可以了。背景最好是暗淡色，不然看不到球了。