はじめに

前回、Decentralandの概要と簡単なアーキテクチャの説明をしました。
今回からはDecentraland SDKを用いて実際にコンテンツを作っていきたいと思います。
まずはSDKのインストールと、シーンの雛形作成までやります。

Decentraland SDK

インストール

何はともあれDecentraland SDKをインストールしましょう。
npmでグローバルインストールします。

npm install -g decentraland

もしくは

yarn global add decentraland

無事インストールが完了すると、 dcl コマンドが利用できるようになります。

最初のシーンを作る

次に最初のコンテンツ(以降シーン)の雛形を作ります。
シーン作成用のディレクトリを作ってそこに移動し、下記コマンドを実行します。

dcl init

すると対話形式で以下のことを聞かれます。

1. Scene title
シーンのタイトルを入力します。
2. Your ethereum address
Ethereumアドレス。開発用なので、私はRopstenネットワークのアドレスを入れました。空でもOK。
3. Your name
開発者名を入力します。空でもOK。
4. Your email
Emailアドレスを入力します。空でもOK。
5. Parcels comprising the scene
パーセルの座標を入力します。利用用途がいまいち不明でした。空でもOK。

※2019.2 追記: コメントで情報いただきましたが、実際にデプロイしたい場合は自分の所有するパーセルの座標を入力しないとdeploy時に怒られるようです。

6. Which scene template would you like to generate?
シーンのタイプを指定します。今回は Basic を選択します。

すべての質問に答え終わったら、依存モジュールのインストールが行われ、シーンが構築されます。ディレクトリ構成は以下のようになります。

各々のファイルの使用用途

scene.tsx シーンのエントリーポイントとなるプログラムファイル
scene.json シーンのメタデータ記述ファイル
package.json and package-lock.json モジュールの依存関係定義ファイル
build.json ビルド用コンフィグファイル
tsconfig.json: Typescriptのコンフィグファイル

シーンのプレビュー

シーンの雛形ができ、それぞれのファイルの用途がわかったところで一度ビルドしてシーンを見てみましょう。下記コマンドを実行してください。

dcl start

実行すると8000番ポートでサーバが立ち上がり、ブラウザからシーンが覗けます。（もちろんOculus GoなどのHMDからでも確認できます）

方向はマウスでグリグリ動かせます。移動はW(↑)S(↓)A(←)D(→)です。
実際に見るとちょっとテンション上がるので是非。

その3へ続きます。

補足

シーンのタイプを今回Basicにしましたが、他のタイプについてそれぞれ補足説明しておきます。

Basic scene
boxやsphereなどのglTFモデルの置かれたノーマルシーンです。ちょうどA-Frameのデモみたいなやつです。

Interactive scene
ドアの開閉を制御するようなインタラクション付きのシーンです。ドアの開閉はクリックイベントを拾ってドアのState(開閉状態)を切り替えています。インタラクティブなコンテンツを作っていきたい方はこちらを。

Remote scene
Interactive sceneと同様にドアの開閉を制御するシーンですが、Stateはサーバで管理されています。通信はwebSocketを使用しています。インタラクティブなコンテンツ + サーバ通信を考えている方はこちらを選択して参考にするのが良いかと思います。

Static scene
XMLに記述されたシーンです。プログラムでシーンを制御できません。見て楽しみたいだけという方はこちらで。