PIXI.js (v5) でRetina対応

カテゴリ フロントエンド

タグ

PIXI.js (v5) にて画像をキレイに描画するための手順をまとめた。

Retina対応方法

PIXI.Application の初期化時に resolution を設定

script.ts

const app = new PIXI.Application({
  // width: window.innerWidth,
  // height: window.innerHeight,
  // antialias: true,
  // transparent: true,
  resolution: window.devicePixelRatio,
})

window.devicePixelRatio は現在のディスプレイにおけるCSS解像度と物理解像度の比を返してくれる。Retina環境では CSS 1px が物理解像度 2px に相当するため、2 が返却される。※1

resolutionwindow.devicePixelRatio を設定することで、出力される canvas のサイズ(メモリ上における実際のサイズ)がディスプレイの解像度に応じて拡大されるようになる。

そしてこの拡大された canvas をCSSで縮小して表示すればキレイに表示されるというわけ。

通常の倍のサイズ (x2) の画像を用意して調節する

倍のサイズの画像を読み込み、スプライトの scale を 0.5 に設定して縮小する。

const { loader } = app

loader.add('images/image.jpg')
loader.load(setup)

function setup(loader: PIXI.loaders.Loader, resources: any) {
  const { stage } = app
  console.log(resources['images/image.jpg'])
  const image = new PIXI.Sprite(resources['images/image.jpg'].texture)
  image.scale.set(0.5) // 画像を縮小する
  stage.addChild(image)
}

フィルタの解像度を合わせる

今回のサンプルでは利用していないが、画像にフィルタを適用する場合、フィルタの解像度も合わせておく必要がある。

script.ts

PIXI.settings.FILTER_RESOLUTION = window.devicePixelRatio

まとめ

全体をふまえると、以下のようになった。

index.html

<link rel="stylesheet" href="style.css">
<div class="container"></div>
<script src="script.ts"></script>

style.css

.container, .container > canvas {
  width: 1000px;
}

script.ts

import * as PIXI from 'pixi.js'

PIXI.settings.FILTER_RESOLUTION = window.devicePixelRatio

const app = new PIXI.Application({
  width: 1000,
  height: 500,
  resolution: window.devicePixelRatio,
})

document.querySelector('.container').appendChild(app.view)

const { loader } = app

loader.add('images/image.jpg')
loader.load(setup)

function setup(loader: PIXI.loaders.Loader, resources: any) {
  const { stage } = app
  console.log(resources['images/image.jpg'])
  const image = new PIXI.Sprite(resources['images/image.jpg'].texture)
  image.scale.set(0.5)
  stage.addChild(image)
}