Web上でドット絵を拡大表示すると、対策していない限りほぼ100%ボケます。
まず、40x40pxで作成したスライムの画像を原寸大で表示してみます。
次に、imgにwidth=”200″ height=”200″（5倍表示）を指定して表示してみます。
輪郭部分がボケてますね。
現在使われているブラウザのほとんどが、画像を拡大・縮小すると輪郭を滑らかに見せるためにバイリニア法という方式で色を補完してレンダリングします。
普通の画像なら良いんですが、ドット絵に関しては全くメリットがありません。魅力の1つであるｶｸｶｸした輪郭がボケてしまうのは致命的です。
ほとんど使われていないと思いますが、CSSには画像の拡大・縮小時のレンダリング方法を指定するプロパティが存在します。
一応Edge以外の主要ブラウザは下記のコードで全て対応可能です。EdgeなのにEdgeを効かせられないってどういうことなの。恥を知れ。
|
1 2 3 4 5 6 |
img.dot{ image-rendering: pixelated; image-rendering: -webkit-crisp-edges; image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; } |
上記CSSを先程のドット絵に適用すると、輪郭のエッジが保持されたまま拡大されます。
使い道の少ないプロパティですが、ドット絵を作成して自サイトで公開したいって人は覚えておいたほうがいいかも？
ブラウザの対応状況が微妙な現状だと、複数サイズを作っておくのが一番無難ですけどね…
