Help us understand the problem. What is going on with this article?

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

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

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

スロット機能について

今回紹介するスロット機能についてはこちらになります。(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に変更

起動をする

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

yushimatenjin
インターネットに無限の可能性を感じています。
https://twitter.com/Mxcn3
playcanvas
"PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています"
https://playcanvas.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした