JavaScriptでスロットを実装する。【PlayCanvas】

WebGLを使ったゲームエンジンのPlayCanvasを使ってスロットを作る方法を紹介します。

スロット機能について

今回紹介するスロット機能についてはこちらになります。(TwitterのPlayerカードにしてゲームをツイートに埋め込んでいます。)今回はPlayCanvasの新規登録につきましては省かせていただいております。PlayCanvasの新規登録についてはこちらの記事が参考になります。

3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】

準備 テクスチャを用意する

スロットを作成するためにはスロットの絵柄のテクスチャーを用意します。

テクスチャを含むマテリアルを作成

テクスチャを含むマテリアルを作成します。

1. テクスチャをアップロードして、空マテリアルを作成します

PlayCanvas上で

• Diffuse
• Emmisive
• Normals
  にそれぞれ絵柄のテクスチャをセットします。

マテリアルの準備についてはこちらで完了です。

スクリプトで絵柄を制御する

PlayCanvasドキュメントのアニメ化されたテクスチャーを参考にしスクリプトを追加します。

1.ドキュメントにアクセス

公式ドキュメントにアクセスをして「完成されたプロジェクト」にアクセスをします。

2. Editorをクリックしてスクリプトを取得

PlayCanvasでは公開されているプロジェクトでは、スクリプトの中身を見ることができますので、EDITORをクリックしてスクリプトを確認します。

3. シーンを選択する

4. Scrolling-texture.jsをダブルクリック

シーンの中に"Scrolling-texture.js"というスクリプトがありますのでコピーをします。

Scrolling-Texture

5. Scrolling-Texture.jsをコピーします。

表示するためのEntityを作成

1. Boxを追加する

2. マテリアルをBoxにドラックアンドドロップ

マテリアルにドラックアンドドロップをしてマテリアルを適用します。

3. ADD COMPONENTからスクリプトを追加

ADD COMPONENTからスクリプトを追加します。

4. SCRIPTSにscrollingTextureを追加

5. materialAssetにslotを追加

6. Speedを設定する

Speedの属性に値を追加します。

7. 起動

8. スクリプトを編集する

先程コピーしたスクリプトはEMISSIVEのスクロールをしないため、一つ残ってしまっています。なのでスクリプトを編集し、EMISSIVEも動くようにします。

Editをクリック

EmissiveMapOffsetを追加する

// scrolling-texture.js
var ScrollingTexture = pc.createScript('scrollingTexture');

ScrollingTexture.attributes.add('materialAsset', {
    type: 'asset'
});

ScrollingTexture.attributes.add('speed', {
    type: 'vec2'
});

ScrollingTexture.tmp = new pc.Vec2();

// initialize code called once per entity
ScrollingTexture.prototype.initialize = function() {
    // get the material that we will animate
    if (this.materialAsset) {
        this.material = this.materialAsset.resource;
    } 
};

// update code called every frame
ScrollingTexture.prototype.update = function(dt) {
    var tmp = ScrollingTexture.tmp;
    
    // Calculate how much to offset the texture
    // Speed * dt
    tmp.set(this.speed.x, this.speed.y);
    tmp.scale(dt);

    // Update the diffuse and normal map offset values
    this.material.diffuseMapOffset = this.material.diffuseMapOffset.add(tmp);
    this.material.normalMapOffset.add(tmp);
    this.material.emissiveMapOffset = this.material.emissiveMapOffset.add(tmp) /// 追加する
    this.material.update();
};

EmissiveMapOffsetを編集するこの一行を追加します。
this.material.emissiveMapOffset = this.material.emissiveMapOffset.add(tmp)

こうすることで動くようなりました。

微調整をする

1.y方向にテクスチャを移動させる

現在スクロールがx方向にしているのでこちらをスロットのようにy方向に移動するように変更します。

2.Boxの大きさを変更する

Scaleを長方形に設定します。

3.カメラの位置を調整する

カメラのデフォルトで設定されているRotationを0に変更

起動をする

これで回るスロットが実装できました。

シンプルなスロットです。 https://t.co/Z8vPjFxxDT

— はが (@Mxcn3) October 15, 2019

PlayCanvas開発で参考になりそうな記事の一覧です。 入門

• PlayCanvas入門- モデルの作成～ゲームに入れ込むまで
• JavaScriptでスロットを実装する。【PlayCanvas】
• 3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】

応用

• PlayCanvasのコードエディターでes6に対応する
• Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった
• PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む

その他の記事はこちらになります。

• React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す
• PlayCanvasのエディター上でHTML, CSSを組み込む方法
• 【iOS13】新しくなったWebVRの使い方

その他関連 - [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)

PlayCanvasのユーザー会のSlackを作りました！

少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

日本PlayCanvasユーザー会 - Slack