ユーザ用ツール

サイト用ツール


phinajs:disable_image_smoothing

拡大したドット絵がぼけるのを防ぐ

デフォルトでは画像拡大時にぼかしが入るので、これを無効化します。(参考:phina.jsのゲーム制作にあたって工夫したところと、JavaScript入門者が陥ったつまづきポイントについて。 - Qiita

座標を整数にする

Math.round()等を使用して、画像の座標は整数になるようにします。

imageSmoothingEnabledにfalseを設定する

とりあえずsceneのinitで以下の処理を入れてみました。

this.canvas.imageSmoothingEnabled = false;

image-rendering CSS プロパティでぼかしを入れないように設定する

image-rendering CSS プロパティでぼかしを入れないように設定します。(参考:image-rendering - CSS | MDN

img[src$=".gif"], img[src$=".png"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (非標準の名前) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (非標準プロパティ) */
}

スクリーンのサイズはある程度大きいサイズにしておく

最初スクリーンのサイズを240×160にしていたのですが、なぜか拡大するとドットがぼけていました。

480×320にするとぼけなくなったので、あまり元の画像が小さすぎると上記の設定をしていてもぼけてしまうのかもしれません。

phinajs/disable_image_smoothing.txt · 最終更新: 2017/11/11 23:25 by kaneda