🎨
PixiJSでy軸の原点を画面左下にしたい時のコード
PixiJSも通常のCanvasと同様、原点は描画エリアの左上になります。
y軸は画面下に行けば行くほど、正に増大していきます。
この状態では実装する画面をイメージしづらいため、原点を描画エリア左下に移動させたいと思います。
左が通常の状態。これを右の状態にしたい。
PixiJSでy軸の原点を画面左下にするサンプルコード
以下がサンプルコード（TypeScript）です。
pixi.jsはver.6.3.2を使っています。
コチラの記事を参考にしました。
import * as PIXI from 'pixi.js'
window.onload = () => {
PIXI.utils.skipHello()
// canvasのラッパー要素
const wrapper = document.getElementById('js-canvas_wrapper') as HTMLElement
// 画面解像度の比率
const pixelRatio = window.devicePixelRatio || 1
// PixiJSアプリ
const app = new PIXI.Application({
antialias: true,
autoDensity: true,
resolution: pixelRatio / 1,
height: window.innerHeight,
width: window.innerWidth
})
// コンテナを用意
const container = new PIXI.Container()
// コンテナをy軸反転
container.position.y = app.renderer.height / app.renderer.resolution // … ①
container.scale.y = -1 // … ①
// リサイズ時の処理
const observer = new ResizeObserver(() => {
// canvas等をリサイズ
app.view.style.height = `${wrapper.clientHeight}px`
app.view.style.width = `${wrapper.clientWidth}px`
app.view.height = wrapper.clientHeight * pixelRatio
app.view.width = wrapper.clientWidth * pixelRatio
app.renderer.resize(
app.view.width / pixelRatio,
app.view.height / pixelRatio
)
// コンテナのy軸を反転
container.position.y = app.renderer.height / app.renderer.resolution // … ②
container.scale.y = -1 // … ②
})
observer.observe(wrapper)
// サンプル: 画像
const bunnyTexture = PIXI.Texture.from('/path/to/image/bunny.png')
bunnyTexture.rotate = 8 // … ③
const bunnySprite = new PIXI.Sprite(bunnyTexture)
bunnySprite.anchor.set(0.5)
bunnySprite.x = 400
bunnySprite.y = 400
container.addChild(bunnySprite)
// サンプル: 図形
const graphics = new PIXI.Graphics()
graphics.beginFill(0xff3300)
graphics.lineStyle(4, 0xffd900, 1)
graphics.moveTo(0, 0) // … ④
graphics.lineTo(350, 350)
graphics.lineTo(100, 400)
graphics.lineTo(50, 350)
graphics.closePath()
graphics.endFill()
container.addChild(graphics)
// canvasをラッパー要素へセット
wrapper.appendChild(app.view)
// コンテナをstageに追加
app.stage.addChild(container)
}
やっている事は以下の通りです。
特に大切なのが、ソースコード上のコメントの①/②/③ですね。
- PIXI.Containerのインスタンスを生成。このインスタンスの中に描画する要素を入れていきます。
- 1.で作成したコンテナを反転します。（①）
- リサイズ時にもコンテナが反転されるよう処理を実装します。（②）
- 参考記事にあるコメントにならい、実装しています。
- テクスチャを反転します。（③）
- テクスチャの反転を忘れてしまうと、すべて逆さになってしまうので注意しましょう。
- テクスチャではなく、スプライトへの反転でもOKです。（
bunnySprite.angle = 180としても同じ結果になります。）
サンプルコードの描画結果
画面左下を原点として描画できるようになりましたので、サンプルコードの④にあるように(0, 0)と指定すれば、画面左下から図形の描画が始まります。
Discussion