More than 3 years have passed since last update.

PlayCanvasAdvent Calendar 2020

@yushimatenjinin

PlayCanvas運営事務局

PlayCanvasとmithril.jsでいい感じに素早くCSSフレームワークと連携する。

Last updated at 2020-12-02Posted at 2020-12-02

PlayCanvas Editorを使って、UIをどんな感じにするか？は結構悩むと思いますが、
そこに対して最近自分が使い始めた構成がこちらになります。

Mithril.js
軽量なJavaScriptのフレームワークです。
https://mithril-ja.js.org/
Tailwind.css
https://tailwindcss.com/

新規プロジェクトにCSSとHTMLを埋め込みます。

1. mithril.jsをCDNから読み込みます。

SETTINGS　→　EXTERNAL SCRIPTにmithril.jsの値を設定します。

https://unpkg.com/mithril/mithril.js

2. CSSとHTMLを埋め込む元となるスクリプト(`ui.js`)を追加します。


/*jshint esversion: 6, asi: true, laxbreak: true*/

class UI extends pc.ScriptType{
    initialize(){
        this.insertHTML();
        this.insertCSS();
            this.app.on("render", this.render, this)
        this.app.on("clear", this.clear, this)
    }
    
    insertHTML(){
      const body = document.getElementsByTagName("body")[0];
      this.rootElement = document.createElement("div")
      this.rootElement.setAttribute("id", this.rootElementId)
      body.insertAdjacentElement("afterbegin",this.rootElement);   
    }
    
    insertCSS(){
       const head = document.getElementsByTagName("head")[0];
       for(let  asset of this.css){
       if(!asset && !asset.resource) return
       const style = `<style>${asset && asset.resource}</style>`;
       head.insertAdjacentHTML("afterbegin", style);
       }
    }
    render(component){
        m.render(this.rootElement, component)
    }
    clear(){
        m.render(this.rootElement, null)
    }
}

pc.registerScript(UI)
UI.attributes.add("rootElementId", {type: "string", default: "root",})
UI.attributes.add("css", {type: "asset",assetType: "css",title: "CSS Asset",array:true});

3. RootエンティティにUi.jsを追加します

4. `style.css`を追加します

Ui.jsのスクリプト属性にstyle.cssを追加します。

style.css

#root {
    position:absolute;
    background: #fff;
    z-index: 1;
}

.main{
    width: 100vw;
    height: 100vh;
}

5. ボタンコンポーネントを追加します。

クリックをしたらモーダルを表示するためのボタンを追加します。

2D Screen
Button Elementの２つを追加します。

6. クリックしたらモダルが表示される仕組みを追加します

追加したボタンに、modal.jsを追加します。

modal.js

/*jshint esversion: 6, asi: true, laxbreak: true*/
class Modal extends  pc.ScriptType {
  initialize(){
      this.hideElement = {onclick: ()=> {this.hide()}}
      this.entity.element.on(pc.EVENT_MOUSEDOWN, this.show, this)
      this.entity.element.on(pc.EVENT_TOUCHSTART,this.show, this)
  }
  
  show(){
      const component = m('div', { class: 'main', ...this.hideElement}, [
        m('div', { class: 'title' }, 'HTML+ CSSのサンプルです'),
        m('div', { class: 'content' }, 'テストテストテストテスト')
      ])
      this.app.fire("render", component)
  }
  
  hide(){
      this.app.fire("clear")
  }
}

pc.registerScript(Modal)

componentについて

componentはHTMLをコンバーターで変換したものになります。
https://arthurclemens.github.io/mithril-template-converter/index.html

起動する

起動すると、HTMLが標示されていることが分かります。
次に、tailwind.cssを使ったデザインを追加します。

tailwind.cssとPlayCanvasを連携する

1. tailwind.cssをダウンロード

tailwindの公式サイトにアクセスします。
https://tailwindcss.com/

公式サイトから、tailwindのCSSをダウンロードします。
https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css

2. tailwind.cssをPlayCanvasにアップロードして、`Ui.js`のスクリプト属性に追加します。

CSSをエディターにドラッグアンドドロップし、PlayCanvasにアップロード
CSS Assetにtailwindを追加します。

3. tailwindのサンプルをPlayCanvasに追加

Modalコンポーネントのサンプルにアクセスをします。
https://tailwindui.com/components/application-ui/overlays/modals

Codeの内容をコンバーターでMithril.jsの形式に変換します。
https://arthurclemens.github.io/mithril-template-converter/index.html

TailwindのCSSをモーダルのサンプル適用した新しいmodal.jsはこちらになります。

modal.js

/*jshint esversion: 6, asi: true, laxbreak: true*/
class Modal extends pc.ScriptType {
  initialize() {
    this.hideElement = {
      onclick: () => {
        this.hide()
      },
    }
    this.entity.element.on(pc.EVENT_MOUSEDOWN, this.show, this)
    this.entity.element.on(pc.EVENT_TOUCHSTART, this.show, this)
  }
  show() {
    const component = m("div", {
      class: "fixed z-10 inset-0 overflow-y-auto"
    }, m("div", {
      class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0",
    }, [
      m("div", {
        class: "fixed inset-0 transition-opacity",
        "aria-hidden": "true",
      }, m("div", {
        class: "absolute inset-0 bg-gray-500 opacity-75"
      })),
      m("span", {
        class: "hidden sm:inline-block sm:align-middle sm:h-screen",
        "aria-hidden": "true",
      }, m.trust("&#8203;")),
      m("div", {
        class: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full",
        role: "dialog",
        "aria-modal": "true",
        "aria-labelledby": "modal-headline",
      }, [
        m("div", {
          class: "bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
        }, m("div", {
          class: "sm:flex sm:items-start"
        }, [
          m("div", {
            class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10",
          }, m("svg", {
            class: "h-6 w-6 text-red-600",
            xmlns: "http://www.w3.org/2000/svg",
            fill: "none",
            viewBox: "0 0 24 24",
            stroke: "currentColor",
            "aria-hidden": "true",
          }, m("path", {
            "stroke-linecap": "round",
            "stroke-linejoin": "round",
            "stroke-width": "2",
            d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
          }))),
          m("div", {
            class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"
          }, [
            m("h3", {
              class: "text-lg leading-6 font-medium text-gray-900",
              id: "modal-headline",
            }, " Deactivate account "),
            m("div", {
              class: "mt-2"
            }, m("p", {
              class: "text-sm text-gray-500"
            }, " Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone. ")),
          ]),
        ])),
        m("div", {
          class: "bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse",
        }, [
          m("button", {
            class: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm",
            type: "button",
            ...this.hideElement // 追加
          }, " Deactivate "),
          m("button", {
            class: "mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm",
            type: "button",
            ...this.hideElement // 追加
          }, " Cancel "),
        ]),
      ]),
    ]))
    this.app.fire("render", component)
  }
  hide() {
    this.app.fire("clear")
  }
}
pc.registerScript(Modal)

ボタンにモダルを閉じるスクリプトを追加します。

button要素をクリックしたら閉じるスクリプトを追加します。

modal.js

m("button", {"class":"w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm","type":"button",
...this.hideElement // スクリプトを追加
}, " Deactivate "),

m("button", {"class":"mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm","type":"button",
...this.hideElement // スクリプトを追加

}, " Cancel ")

起動する

これでPlayCanvas EditorとCSS + HTMLを連携させることが出来ました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

PlayCanvasとmithril.jsでいい感じに素早くCSSフレームワークと連携する。

1. mithril.jsをCDNから読み込みます。

2. CSSとHTMLを埋め込む元となるスクリプト(ui.js)を追加します。

3. RootエンティティにUi.jsを追加します

4. style.cssを追加します

5. ボタンコンポーネントを追加します。

6. クリックしたらモダルが表示される仕組みを追加します

componentについて

起動する

tailwind.cssとPlayCanvasを連携する

1. tailwind.cssをダウンロード

2. tailwind.cssをPlayCanvasにアップロードして、Ui.jsのスクリプト属性に追加します。

3. tailwindのサンプルをPlayCanvasに追加

ボタンにモダルを閉じるスクリプトを追加します。

起動する

2. CSSとHTMLを埋め込む元となるスクリプト(`ui.js`)を追加します。

4. `style.css`を追加します

2. tailwind.cssをPlayCanvasにアップロードして、`Ui.js`のスクリプト属性に追加します。