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

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

![](https://i.imgur.com/a4aEUsb.jpg)

https://playcanv.as/p/tOXnTMGL/


### スロット機能について

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

[3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)

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

スロットを作成するためにはスロットの絵柄のテクスチャーを用意します。
![スロット](https://i.imgur.com/Gfs7lrG.png)

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


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

![](https://i.imgur.com/oOOHtIM.png)


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

![](https://i.imgur.com/RUBfCRz.png)

マテリアルの準備についてはこちらで完了です。
![](https://i.imgur.com/IU6h5QE.png)


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

PlayCanvasドキュメントの[アニメ化されたテクスチャー](https://developer.playcanvas.com/ja/tutorials/animated-textures/)を参考にしスクリプトを追加します。


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

![](https://i.imgur.com/vRqZ4Zu.png)


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

![](https://i.imgur.com/zVrespB.png)


#### 3. シーンを選択する
![](https://i.imgur.com/aovnpsW.png)


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

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

[Scrolling-Texture](https://playcanvas.com/editor/code/405882?tabs=4469009,4469008)


![](https://i.imgur.com/EPeRxuU.png)



#### 5. Scrolling-Texture.jsをコピーします。
![](https://i.imgur.com/DmC9QoZ.png)


### 表示するためのEntityを作成

#### 1. Boxを追加する
![](https://i.imgur.com/dhDeSDF.png)

#### 2. マテリアルをBoxにドラックアンドドロップ
マテリアルにドラックアンドドロップをしてマテリアルを適用します。
![](https://i.imgur.com/p9ImpMK.png)


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

ADD COMPONENTからスクリプトを追加します。
![](https://i.imgur.com/qH0v4sf.png)


#### 4. SCRIPTSにscrollingTextureを追加
![](https://i.imgur.com/p0op2JV.png)


#### 5. materialAssetにslotを追加
![](https://i.imgur.com/H6iofa3.png)


#### 6. Speedを設定する
Speedの属性に値を追加します。

![](https://i.imgur.com/Hptcsku.png)

#### 7. 起動
![](https://i.imgur.com/dBIukkK.png)


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

Editをクリック

![](https://i.imgur.com/pBKlB5P.png)

#### EmissiveMapOffsetを追加する



```javascript
// 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) `

こうすることで動くようなりました。
![](https://i.imgur.com/ORlRWFY.png)


### 微調整をする


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

![](https://i.imgur.com/sXAWfv8.png)


#### 2.Boxの大きさを変更する
Scaleを長方形に設定します。

![](https://i.imgur.com/DAqqdnL.png)

#### 3.カメラの位置を調整する
カメラのデフォルトで設定されている`Rotation`を0に変更

![](https://i.imgur.com/PARFamc.png)


### 起動をする

![](https://i.imgur.com/vyOCMRH.png)


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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">シンプルなスロットです。 <a href="https://t.co/Z8vPjFxxDT">https://t.co/Z8vPjFxxDT</a></p>&mdash; はが (@Mxcn3) <a href="https://twitter.com/Mxcn3/status/1184020784739569664?ref_src=twsrc%5Etfw">October 15, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<font color="OrangeRed">
PlayCanvas開発で参考になりそうな記事の一覧です。
</font>
<font color="OrangeRed">
入門

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)
- [JavaScriptでスロットを実装する。【PlayCanvas】](https://qiita.com/yushimatenjin/items/e84c42da74df1eb07386)
- [3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)
</font>
<font color="OrangeRed">
応用
</font>

- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
</font>
<font color="OrangeRed">
その他の記事はこちらになります。

- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [【iOS13】新しくなったWebVRの使い方 ](https://qiita.com/yushimatenjin/items/344d86b3d193e0a88567)
</font>

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


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

[日本PlayCanvasユーザー会 - Slack](https://t.co/IdSRIfJhN5?amp=1)