用Decentraland SDK制作一个可以互动的场景

今天用 Decentraland SDK 做了一个 Decentraland 的场景。是一个两个中国象棋棋盘的场景。

因为目前觉得土地太贵了， 所以暂时先deploy preview mode 到 github 的static host 。 因为github是static file host 而已，就是说server 无法跑 dcl start , 所以只能走 preview mode 。

http://tensaix2j.github.io/

整个制作过程， 可以分成 3个部分。

1. 建模 Modeling
2. 象棋逻辑
3. Multiplayer

1. 建模

这整个模型基本上就是一个 棋盘用 BoxShape() 搞定， 和一堆棋子用 CylinderShape() 搞定。 重点在如何做 Texture Mapping 和如何 Programatically 去控制 texture 的 UV map

首先，我去找两张 Png 图来做模型的 texture 。 一张棋盘。

2. 一张有全部棋子的 png 图

好了。 接下来来说说 Decentraland 的 模型概念。

Decentraland 里， 任何模型都要做成 Entity ， 然后 用 engine.add( entity ) 来带入场景。

一个 Entity 可以有很多 component (这个概念有用过　unity　的应该很熟悉), 今天我要讲主要的两个

1. Transform
2. Shape

要做个棋盘， 首先 ， 加入一个 entity ， 制造一个 BoxShape 和一个 Transform ， 用addComponent 把它 add 到 entity 上 。 用 transform 的 scale 来控制这个 entity 的 大小， 和 position 来控制位置。

然后再加一个 BasicMaterial Component 给这个 Entity ， Material 的 Texture 选择那张棋盘的图 就搞定了.

棋子就真的比较复杂。 因为用程序去搞 uvmap 是有一点复杂。 首先，加入一个 entity, 给entity 戴上 transform 和 shape ，shape 用 cylinder shape。 因为 cylinder 有太多的 顶点（vertices) , 给cylinder 直接弄uvmap 真的会疯掉。所以我再导入一个只有四个vertices 的 plane shape， 做成 child entity， 然后给 这个 plane 上 uvmap 。

face_shape.uvs = [

0/7 , 0/2,

1/7 , 0/2,

1/7 , 1/2,

0/7 , 1/2,

0/7 , 0/2,

1/7 , 0/2,

1/7 , 1/2,

0/7 , 1/2,

];

这个 array 的格式连Decentraland 的document 都不解释。大概研究了，后来搞懂了， 整个 array 基本上就是 [ src x1 , src y1 , src x2 , src y2, src x3 , src y3, src x4, src y4,

back src x1 , back src y1 , back src x2 , back src y2, back src x3 , back src y3, back src x4, back src y4

] .

1，2，3，4 分别是 左上， 右上， 右下， 左下 。

用棋子的 png 来举例， 我们的图要 横分成 7 块， 直分2 块 .

比如说要拿 黑马的位置就 是

x1 = 2/7 , x2 = 3/7 , x3 = 3/7 , x4 = 2/7

y1 = 1/2 , y2 = 1/2 , y3 = 2/2, x4 = 2/2

搞懂了就很简单。

好了，今天主要讲 modeling 先， 改天有空我会讲解Part 2 （象棋逻辑） 和 Part 3 (Multiplayer) .

谢谢阅读。