PlayCanvasのエディターでVueが使える

まず、

PlayCanvasって

なんだ！！！

そんな人は以下のページに飛んでPlayCanvasってなんなのか知って！！！！！！！！
https://qiita.com/utautattaro/items/b3c956be2fbb6bb7c414

---

##PlayCanvasでVueを使う

PlayCanvasでVueを使うとしたら、PlayCanvasのエンジンを使ってVueと紐付けたりすると思います。

でも、PlayCanvasにもコードエディターがあるので、この中で使えないの？って話です。

使えちゃうんです

※実はすでにQiitaで記事にもなっていました。こっちはReactを使ってます。
https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d

###実は用意されてたEXTERNAL SCRIPTS

PlayCanvasのエディターからSettingsの中にEXTERNAL SCRIPTSと言う項目があります。

これ、PlayCanvasが呼ばれる前にスクリプトを読み込むことができるんです。

実はこれが用意される前はCDNは使えなかったこともありましたが、EXTERNAL SCRIPTSができたことでCDNも使えるようになったんですね。

###コード書いてみる

簡単にVueが動くのか確かめてみました。

index.html

<div id="app">
    <p>{{message}}</p>
    <ul>
    <li v-for="type in e_types" v-bind:style="listStyle">
        <p @click="onTypeClick(type)" v-bind:style="targetStyle">{{type}}</p>
    </li>
</div>

index.js

var Index = pc.createScript('index');

Index.attributes.add("html", {type:"asset", assetType:"html"});
Index.attributes.add("target", {type:"entity"});

Index.prototype.initialize = function() {
    var self = this;
    var wrapper = document.createElement("div");
    wrapper.style.position = "fixed";
    wrapper.style.top = 0;
    wrapper.style.left = 0;
    wrapper.style.zIndex = 10;
    wrapper.style.width = "30%";
    wrapper.style.height = "100%";
    wrapper.style.background = "#fff";
    document.body.appendChild(wrapper);
    
    wrapper.innerHTML = self.html._resources;
    
    var modelType = self.target.model._type;
    
    var app = new Vue({ 
        el: '#app',
        data: {
            message: 'Hello, PlayCanvas',
            e_types: {
                box: "box",
                capsule: "capsule",
                sphere: "sphere",
                cylinder: "cylinder",
                cone: "cone",
                plane: "plane"
            },
            listStyle: {
                listStyle: "none",
            },
            targetStyle: {
                display: "inline-block",
                padding: "5px",
                border: "1px solid #333",
                cursor: "pointer"
            }
        },
        methods: {
            onTypeClick: function(target) {
                self.target.model.type = target;
                modelType = target;
            }
        }
    });
};

以下のページで実際に動くのがみれます。
https://playcanv.as/p/whuMzZ7b/

Primitiveのtypeを取得し変更してあげているだけですが、PlayCanvasのエディター内でVueが
動きました。
工夫すればassets内のmodelを参照して一覧表示させるなんてこともできそうですね。

##終わり

こんな感じでEXTERNAL SCRIPTSからVueやReactなんかもPlayCanvas内のコードエディターで開発できるようになっちゃいます。
UIとかもBootStrapとか導入することも容易になって楽になりそうですね。

まだまだPlayCanvasはアップデートし続けているので、進化が楽しみです。