MonochromSoft

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

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

デフォルトでは画像拡大時にぼかしが入るので、これを無効化します。（参考：[[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にするとぼけなくなったので、あまり元の画像が小さすぎると上記の設定をしていてもぼけてしまうのかもしれません。

MonochromSoft

ユーザ用ツール

サイト用ツール

ページ用ツール