플레이캔버스의 한돈 얘기를 할 때 HTML UI를 사용할 때가 있어요.
VueJS로 제어할 수 있다면 여러가지 편의가 있을텐데... 그렇게 생각하면서 해봤더니 꼼짝도 해냈어요

이번에 사용한 물건.

PlayCanvas란

이른바 VueJS

OnenUI 소개

봐라!

PlayCanvas에서의 작업

라이브러리 준비

※ 플레이캔버스 규격으로는 URL에서 파일을 직접 추가할 수 없기 때문에 먼저 떨어져서 올려야 하는데... 방법이 있다면 알려주세요!

VueJS

OnnsenUI의 JS 및 CSS

https://unpkg.com/onsenui/js/onsenui.min.js
https://unpkg.com/onsenui/css/onsenui.css
https://unpkg.com/onsenui/css/onsen-css-components.min.css

VueOnsenUI

PlayCanvas에 추가된 항목

OnnsenUI 의존 관계를 해결하기 위해

https://cdnjs.cloudflare.com/ajax/libs/setImmediate/1.0.5/setImmediate.js
필요하다

HTML 준비 표시

JavaScript 파일 준비 & Enity 등록 & CSS 파일 및 HTML 파일 연결

HTML 표시를 위한 JavaScript 파일 준비(이번에는 ui.js)
ui.js

var Ui = pc.createScript('ui');

Ui.attributes.add('css1', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('css2', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});

// initialize code called once per entity
Ui.prototype.initialize = function() {
    // create STYLE element
    var style1 = document.createElement('style');
    var style2 = document.createElement('style');

    // append to head
    document.head.appendChild(style1);
    style1.innerHTML = this.css1.resource || '';
    document.head.appendChild(style2);
    style2.innerHTML = this.css2.resource || '';

    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';

    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.div);

    new Vue({
        el: '#app',
        template: '#main',
        data: function() {
            return {
                title: 'My app'
            };
        }
    });
};

// update code called every frame
Ui.prototype.update = function(dt) {
};

// swap method called for script hot-reloading
// inherit your script state here
// Ui.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

HTML 표시를 위한 JavaScript 파일 준비(이번에는 ui.js)
VuePage.html

<template id="main">
  <v-ons-page style="width: 500px; height: 500px;">
    <v-ons-toolbar>
      <div class="center">{{ title }}</div>
      <div class="right">
        <v-ons-toolbar-button>
          <v-ons-icon icon="ion-navicon, material: md-menu"></v-ons-icon>
        </v-ons-toolbar-button>
      </div>
    </v-ons-toolbar>

    <p style="text-align: center">
      <v-ons-button @click="$ons.notification.alert('Hello World!')">
        Click me!
      </v-ons-button>
    </p>
  </v-ons-page>
</template>

<div id="app"></div>

Enity 제작 ui.js를script로 등록
ui.CSS 및 HTML(onsen-css-components.min.css,onsenui.min.css,VuePage.})을 js의 특집과 연결

Scripts 읽기 순서

setImmediate.js
onsenui.js
vue.js
vue-onsenui.js
ui.js
순차
※ 로딩 처리 관계로 온센ui.js에서 사용하는 라이브러리 setImmedate에서 오류가 발생했습니다. 따라서 setImmeditate만 사용합니다.js를 읽는 것을 피합니다.하지만 실제로는 온세이.js 코드 아래에 있습니다.js 부분이 있어서 편집할 때 제일 먼저 가져오면 움직일 수 있어요.

결실

이번에 만든 플레이캔버스 프로젝트의 장소입니다.