尝试制作 Bomber Man 游戏

今天想尝试用 Decentraland SDK 制作一个Bomber Man 的游戏。 这是我用Decentraland SDK 制作的第三个游戏, 制作才刚开始, 目前还没完成。这个贴就当成是一个制作记录。

这是目前的游戏画面。

image.png


制作场景 Scene Modeling

场景方面, 一部分可以用 代码完成, 一部分要用 Blender 建模。

首先,放入一个 BoxShape() 做桌面。然后调暗色。

image.png

然后再铺草地。 草地由多个 PlaneShape() 铺在上面完成。 Texture 用这个。

image.png

image.png

一开始我发现在场景里的颜色非常暗淡, 不像texture 里那么鲜明, 问了Discord 里的人后才知道要给material 的 specularIntensity 调成0 和 roughness 调到 1.0

image.png

这里学习到即使场景有 169 个草地plane 但是可以共享同一个material 和 shape 。那就可以比较省资源。

image.png

image.png

有了草地后, 我们再植入一些阻挡方块。 这个用 BoxShape() + texture 完成。

image.png

跟草地一样, 即使有 n 个 也要share material 和 shape 比较省。transform 不能share 因为每一个 的位置不一样。

然后在用这个做 texture

image.png

这个弄好后, 场景就差不多了。 接下来就可以制作人物了。


人物建模 Character Modeling

这一部分我就不用代码了,因为我需要给人物做 animation。 我来说说用 Blender 建模的过程和思维。

那首先, Decentraland 的3D 模型是必须用很少很少 的polygon 完成的,俗称的 Low Poly。 如果场景人物多的话, 那每个人物分配到更少 polygon 了。想了一想什么 3d shape 是很少polygon 的, 那就是最基本的 cube 了。所以干脆整个人从头到脚就用 Cube 来完成好了 。

这是模型的草图

image.png

然后在做 Texture UV mapping 。 首先要给cube 的 edge mark seam。 Mark Seam 的意思就是用一把剪刀把这个方块给拆成平面。然后去 Gimp 那里画个简单的脸做texture 好了。

image.png

身体, 手, 脚,颈 就不必上texture 了, 直接上色就好了。


人物 Rigging 和 Animation

这个过程有学到新的东西。 一开始我本来想连Armature 骨架 都不想用, 直接去animate 那些 Cube的LocRot (Location + Rotation),反正就8 个cube 而已。 这个方式简单粗暴, 就是在对的frame 移动你的人物的四肢,按 I 建给 LocRot 建keyframe。

image.png

如果只是完成单一的animation 是可行的。

boxguy_256x384.gif

后来发现这样做 等下要做 多个 animation clip 时在 Non Linear Animation (NLA) 那里会遇上很大的麻烦。 然后你会看到一堆东西在 action editor . 说明这是错误示范。

image.png

所以最好还是去create 骨架先, 然后在把这些cube 绑定在骨架

image.png

然后你的 action editor 在你 animate 各种动作完成后就可以整整齐齐 的一个动作一个clip 了

image.png

好了, 建模完成了。 把整个人物 export 去 gltf 2.0 格式。

把模型gltf 加到 resources.ts

image.png

写一个 player 的class

image.png

那就建模完成了 。

那今天就写到这里先, 其它的以后有空在写好了。。

谢谢阅读。