PixiJSのTiling Spriteの描画がうまくいかないので試行錯誤したよ

「みんなでつくるダンジョン」ではPixiJSを活用してWebGLな描画をしています。ただいまパフォーマンスチューニングをしており、この一環として画像を並べて表示するための処理を、指定したテクスチャを繰り返し表示することができるTilingSpriteに置き換えることにしました。

TilingSpriteのデモはこんなかんじ。 https://pixijs.io/examples/#/basics/tiling-sprite.js

しかし、以下の画像のように黄色いブロックのつなぎ目がちゃんと表示されたり、ふちの描画がうまくいかなかったりします。どうやら黄色いブロックを移動すると、期待する通りに描画されたりされなかったりするようです。

左：ちゃんと表示されている様子　右：ふちの描画がうまくいっていない様子

この黄色いチップは、以下の画像のように1枚の大きなテクスチャ画像の一部です。

マップチップ画像

黄色いブロックを描画するときは画像の一部分を切り出して表示しています。プログラムの雰囲気は以下のような感じ。

import * as PIXI from 'pixi.js';

let chipTextureCanvas;   // テクスチャ画像が描画されたキャンバス
let texture = PIXI.Texture.fromCanvas(chipTextureCanvas, pixi.SCALE_MODES.NEAREST);
// 黄色いブロックは x=64, y=64の位置から幅と高さ32pxを切り出した部分
texture.frame = new PIXI.Rectangle(64, 96, 32, 32);

// 描画処理に続く....

この画像が大きいと、先ほどのような不具合が出るらしいということがわかりました。つまり、TilingSpriteを使うときはテクスチャ画像の大きさに対して切り出す画像は小さくないほうが良さそうなのかな、という雰囲気です。 （おそらく大きい画像から小さい画像を切り出すと、テクスチャをスプライトに貼り付ける際のUV座標の小数点処理で誤差が出てしまうということなのかなぁ）

みんなでつくるダンジョンでは、Canvasをつかって画像を切り出して黄色いブロックの画像を作り、テクスチャとして登録し、描画のときにはテクスチャを切り出さずに表示する処理（さきほどの texture.frame を設定せずテクスチャを目いっぱい使う ）にしたところ、ふちの描画で問題が起こることは無くなったかも？（まだ様子を見つつですが）という感じです。

このように「みんなでつくるダンジョン」の開発は現在、細かいところを調整したりする作業をしております。 ではでは～。