Vue.jsでPixi.jsを仮想DOM風に扱うためにvue-pixi-rendererを使用した

WEB制作
Vue.jsでPixi.jsを仮想DOM風に扱うためにvue-pixi-rendererを使用した

Vue.jsでPixi.jsを仮想DOM風に扱う場合、Granipouss/vue-pixiが主流（？）だったとは思うのですが、しばらく更新されておらず、Pixi.js v5に未対応な様子だったのでvue-pixi-rendererを使用してみました。

基本的な使用方法やREADEMEに情報がなくて探すのに困った情報などを備忘録として残しておきます。

※vue-pixi-rendererには、バグなどが多く含まれていると思いますので使用するのは自己責任でお願いします。

目次

インストール

$ npm install -save vue-pixi-renderer

初期設定

import Vue from 'vue';
import VuePixiRenderer from 'vue-pixi-renderer';

Vue.use(VuePIXIRenderer);

Vueテンプレート サンプル

<template>
    <vroot>
        <container :x=100 :y=100 :anchor='{x: 0.5, y: 0.5}'></container>
        <vtext :style='{fill: '#ffffff', fontSize:'17px'}'>foo</vtext>
        <sprite>/assets/images/sample.png</sprite>
    </vroot>
</template>

表示範囲に合わせて自動拡大縮小

<zone :x=100 :y=100 :width=80 :height=25>
    <vtext class="status" :fit="{zone:'parent', ratio:[minRatio,maxRatio], type:'center'}">foo</vtext>
</zone>

PIXI.Applicationの取得

PIXI.Applicationは、vrootの$data.appに格納されています。

<template>
    <vroot ref="canvas"></vroot>
</template>

<script>
export default {
    methods: {
        get_pixi_application: function () {
            return this.$refs.canvas.$data.app;
        },
    }
};
</script>

canvas要素の操作

センタリングなど、canvas要素を編集したい場合には、$elを用いて直接操作する必要があります。

<template>
    <vroot ref="canvas"></vroot>
</template>

<script>
export default {
    methods: {
        get_canvas: function () {
            return this.$refs.canvas.$el.querySelector('canvas');
        },
    }
};
</script>

PIXI Application Options

PIXI Applicationのオプションは、<vroot>の属性で指定することができます。

<vroot :preserveDrawingBuffer="true"></vroot>

PixiJS API Documentation

イベント

大抵のイベントは動作すると思います。（未確認）

<sprite @mousedown="onMousedown">/assets/images/sample.png</sprite>

PixiJS API Documentation

余談

Vue.jsのライブラリって簡体字のものが多いよね。

参考サイト

voderl/vue-pixi-renderer: 使用vue的结构来渲染pixi页面。