【Nuxt】new PIXI.Container()で生成した要素の位置を動的に変える

PIXI.Container()で生成した要素の位置を動的に変えるときの方法です。

API自体はこちらに用意されていて、基本はそこにアクセスして値を書き換えれば大丈夫かと思います。
位置を制御するため、x,yの値にアクセスすることができます。

// コンテナを生成
const sampleContainer = new PIXI.Container()

// コンテナを生成
sampleContainer.y = 0 （任意の値）

これを、new PIXI.Application() で生成したcanvasに追加することで表示されるかと思います。

ボタンをクリックしたら、上記で生成したコンテナの位置を変更する場合を考えてみます。

methodでボタンのクリックイベントを設定し、それに応じてsampleContainerの値を書き換えます。

<button v-on:click="UpDown(50)">+</button>

で、このときコンポーネントのscript内で定義されたmethodから、別で生成されたcanvasの値を直接参照できないので、コンテナ生成時にいったんdataに格納しておくとよさそうです。

data() {
    return {
      sampleCanvas: null
    }
  }

このあと、コンテナ生成時にそれをdataに格納します。

      // コンテナを生成
      const sampleContainer = new PIXI.Container()
      // dataに格納
      thiss.sampleCanvas = sampleContainer

すると、methodからdataを参照すればいいので、動的に値を書き換えることができるようになります。

methods: {
 UpDown(value) {
      // 位置を調整する
      this.PosY += value

      // 再設定
      this.sampleCanvas.y = this.PosY
 }
}

shimotsu tech