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

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

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

整个过程可以分成 3 段：

1. 制作 Box2d 的Physic Bodies 。
2. 用Blender 建模。
3. 对齐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 视频

---

2. 建模

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

然后上色

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

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

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

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

在到Blender 调texture 就好了 。

然后加几个发光的东西 （这个用上次说过的 emissiveIntensity 和 emissiveColor 来做）

那就差不多了。

还有一些手尾， 例如分数， jackpot ， extraball ， collect bonus 等等弄好就可以deploy 了。

可能会弄个 Highscore Boards 什么的。

谢谢阅读。