PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む #JavaScript

はじめに

PlayCanvas EditorにExternal Scriptsという外部スクリプトを読み込むための機能が追加されました。
この機能ではエディターで設定をした外部のスクリプトを、起動時に

タグに挿入する機能となっております。機能自体はこの歯車の設定画面に追加されています。

外部スクリプトを追加する

今までのPlayCanvasではJavaScriptを埋め込む場合にはエディター上で埋め込むスクリプトを書かなければいけませんでしたがこのアップデートによりjQueryやFirebaseなどのSDKを埋め込む場合にもURLで指定が指定できるため、常に最新版を取ってくることができたりと便利になりました。

追加したスクリプトはエディター上で起動をしたときにタグのPlayCanvasが読み込まれる前に挿入されます。

朝起きたらPlayCanvasで外部スクリプトを読み込むのが簡単になったのでFirebaseとつないでみました。
https://t.co/c2GmILSFK7
— はが (@Mxcn3) August 6, 2019

PlayCanvasのプロジェクトはこちらになります。

External Scriptsで外部スクリプトを追加できるようになったのでRedux x PlayCanvasを試してみた。
Stateの値によってカメラが寄るサンプルです。 #playcanvas https://t.co/WaT9W5Gzbj
— はが (@Mxcn3) August 7, 2019

(公開リポジトリなのでフォークができます)
https://playcanvas.com/project/631609/

counter-vanillaを追加する

PlayCanvasはReactではないので、Reduxのサンプルの中のcounter-vanillaを使用してReduxの導入をします。

counter-vanilla/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Redux basic example</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
  </head>
  <body>
    <div>
      <p>
        Clicked: <span id="value">0</span> times
        <button id="increment">+</button>
        <button id="decrement">-</button>
        <button id="incrementIfOdd">Increment if odd</button>
        <button id="incrementAsync">Increment async</button>
      </p>
    </div>
    <script>
      function counter(state, action) {
        if (typeof state === 'undefined') {
          return 0
        }
        switch (action.type) {
          case 'INCREMENT':
            return state + 1
          case 'DECREMENT':
            return state - 1
          default:
            return state
        }
      }
      var store = Redux.createStore(counter)
      var valueEl = document.getElementById('value')
      function render() {
        valueEl.innerHTML = store.getState().toString()
      }
      render()
      store.subscribe(render)
      document.getElementById('increment')
        .addEventListener('click', function () {
          store.dispatch({ type: 'INCREMENT' })
        })
      document.getElementById('decrement')
        .addEventListener('click', function () {
          store.dispatch({ type: 'DECREMENT' })
        })
      document.getElementById('incrementIfOdd')
        .addEventListener('click', function () {
          if (store.getState() % 2 !== 0) {
            store.dispatch({ type: 'INCREMENT' })
          }
        })
      document.getElementById('incrementAsync')
        .addEventListener('click', function () {
          setTimeout(function () {
            store.dispatch({ type: 'INCREMENT' })
          }, 1000)
        })
    </script>
  </body>
</html>

counter-vanilla/index.htmlはindex.htmlだけあれば特にフレームワークを必要としないサンプルとなっています。
それではこのScriptをPlayCanvasに組み込んでいきましょう

External ScriptsへReduxの最新版を追加
index.html内のScript srcで読み込まれているスクリプトをExternal Scriptsの中へ追加します。

https://unpkg.com/redux@latest/dist/redux.min.js

2.HTML, CSSをPlayCanvas Editorに追加します。

index.html

      <p id="counter">
        Clicked: <span id="value">0</span> times
        <button id="increment">+</button>
        <button id="decrement">-</button>
      </p>

style.css

#counter{
    position: absolute;
    z-index: 1;
    color: red;
}

button{
    padding: 10px;
}

Store, HTML,CSSの表示をする部分のScriptを追加しAttributesに追加をする
HTMLをPlayCanvas上に追加をする為にAttributesとしてEditor上で先ほどEnditor上に追加をしたHTMLとCSSセットします。

Ui.js

constUi = pc.createScript("ui");

Ui.attributes.add("css", {
  type: "asset",
  assetType: "css",
  title: "CSS Asset"
});
Ui.attributes.add("html", {
  type: "asset",
  assetType: "html",
  title: "HTML Asset"
});
    
const counter = (state, action) => {
    if (typeof state === 'undefined') {
      return 1
    }
    switch (action.type) {
      case 'INCREMENT':
        return state + 1
      case 'DECREMENT':
        return state - 1
      default:
        return state
    }
}

const store = Redux.createStore(counter)

Ui.prototype.initialize = function() {
  const body = document.getElementsByTagName("body")[0];
  const head = document.getElementsByTagName("head")[0];
  const style = `<style>${this.css.resource}</style>`;
  body.insertAdjacentHTML("afterbegin", this.html.resource);
  head.insertAdjacentHTML("afterbegin", style);
  //HTML, CSSを挿入する
    
  var valueEl = document.getElementById('value')
  function render() {
    valueEl.innerHTML = store.getState().toString()
  }
  render()
  store.subscribe(render)
  document.getElementById('increment')
    .addEventListener('click', function () {
      store.dispatch({ type: 'INCREMENT' })
    })
  document.getElementById('decrement')
    .addEventListener('click', function () {
      store.dispatch({ type: 'DECREMENT' })
    })

};

このScriptを追加することでPlayCanvas上にカウンターが追加されました。

コンポーネントにStateの値を適用させる

テキストコンポーネント

このままだと、HTMLを上にかぶせているだけです、Reduxの状態を参照してインクリメントした文字に変更するエンティティを追加します。　　

2D Screenを追加

2D Screen以下にTextエンティティを追加
フォントを追加

4.Scriptを追加する

Textエンティティに対してtext.jsというスクリプトを追加します。

text.js

const Text = pc.createScript('text');
Text.prototype.update = function(dt) {
    this.entity.element.text = store.getState().toString()
};

カメラの値を変更する

Cameraエンティティにcamera.jsを追加する

camera.js

const Camera = pc.createScript('camera');

Camera.prototype.update = function() {
     this.entity.camera.fov = store.getState() * 2 - 30
};

これでReduxのアクションによりCameraエンティティのfovが寄る、Textエンティティの値を変更することができました

PlayCanvasのプロジェクトはこちらになります。

External Scriptsで外部スクリプトを追加できるようになったのでRedux x PlayCanvasを試してみた。
Stateの値によってカメラが寄るサンプルです。 #playcanvas https://t.co/WaT9W5Gzbj
— はが (@Mxcn3) August 7, 2019

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

応用

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

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

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

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

日本PlayCanvasユーザー会 - Slack