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

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

==== 座標を整数にする ====

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


==== imageSmoothingEnabledにfalseを設定する ====

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

<code>
this.canvas.imageSmoothingEnabled = false;
</code>

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

image-rendering CSS プロパティでぼかしを入れないように設定します。（参考：[[https://developer.mozilla.org/ja/docs/Web/CSS/image-rendering|image-rendering - CSS | MDN]]）

<code>
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 (非標準プロパティ) */
}
</code>

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

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

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