WEB上でドット絵を拡大表示する

この記事は 2020年2月3日に最終更新されています。

dogcow
設定なし
dogcow
設定あり



サンプルはAppleのマスコット、Dogcow の Clarus君です。Moof!


ドット絵を拡大表示したい…ただそれだけのことなのに、このページを書き始めたとき(2013年)には確実な方法がありませんでした。

しかし、2020年 2月 3日現在、方法は統一目前です。近いうちに統一されるでしょう。

このページが役割を終えるのであれば、とても喜ばしいことです。


目次

設定方法

CSSJavascript

CSS の記述方法について

optimizeSpeedoptimize-contrastcrisp-edgesそして姿を消したpixelated復活

JavaScript について

設置方法技術解説ライセンス


設定方法

方法は「統一目前」と書きましたが、2020年 2月 3日現在、諸般の事情でまだ統一できていないブラウザがあります。

IE 、Edge 、FireFox です。


IE は、Microsoft が「使うべきではない」と呼び掛けているのに、いまだに使い続ける人がいます。すでに開発は停止しているため、今後もドット絵表示の統一方法に対応することはないでしょう。

Edge と FireFox は、おのおの違う理由で対応が遅れていますが、そう遠くないうちに対応されると思います。詳細を知りたい方には、後程記しておきます。


CSS

まずは、ドット絵をくっきり表示させるための CSS です。

ただし、この設定は HTML5+CSS3 の標準ではありません。


2020年 2月 3日現在、標準を定める「勧告」の一歩手前、「勧告候補」にはなっています。

歴史的経緯を見るとこれで決定だとは思うのですが、標準でないことには留意してください。


img {
  -ms-interpolation-mode: nearest-neighbor;   // IE
  image-rendering: crisp-edges;          // FireFox
  image-rendering: pixelated;            // 勧告候補の指定
}

IE なんてもう面倒見なくていいじゃん…と思う人は、1行目は不要です。

でも、国内シェアいまだに 10% 以上ありますし、たった一行なので書いとけば安全です。


また、image-rendering: pixelated は、最後に書く必要があります。以下の理由によります。


1) CSS では、後で書いたものが、前に書いたものを上書きしますが、ブラウザが「理解できない」場合は無視されます。

2) 勧告候補では、crisp-edges と pixelated には、それぞれ別の拡大方法が指定されており、「ドット絵を拡大する」目的では、pixelated を指定する必要があります。

3) 現在のところ、FireFox は pixelated に対応しておらず、crisp-edges の指定で、勧告候補の pixelated 相当の動作をします。


つまり、上の順に書いておけば「現在の FireFox では crisp-edges、それ以外では pixelated」の指定になります。

将来的に FireFox が pixelated に対応しても、正しく動作します。


Javascript

Edge は、2020年 2月 3日現在、全世界で新バージョンへの自動アップデートが行われています。

新バージョンでは、上記 CSS で対応できています。


ただし、日本国内では 4月まで自動アップデートが行われず、旧 Edge を使い続ける人もいます。

(お粗末な「電子政府」政策に、マイクロソフトが対応を余儀なくされたためです)


4月になれば自動アップデートでみんな対応するんだから、旧 Edge なんて無視する、というのがお勧めですが、以下の Javascript で旧 Edge だけ対応することも可能です。


<script type="text/javascript"><!--
if(navigator.userAgent.indexOf("Edge")>0)
$(window).load(function(w,h,c,x,y){w="width";h="height";
$("img")
.map(function(v,d){c=$("<canvas>")[0];x=c[w]=d[w];y=c[h]=d[h];
v=c.getContext("2d");
v.imageSmoothingEnabled=v.msImageSmoothingEnabled=0;v.drawImage(d,0,0,x,y);
$(c).replaceAll(d)})})
--></script>



CSS も Javascript も、ここに示したコードではすべての画像を対象にしています。

前提として、これらの画像は「引き伸ばされている」必要があります。

CSS や img の width や height で、元画像より大きなサイズを指定しておくのです。


そのうえで、上記の CSS や Javascript を使用してください。

CSS は 先頭の img を、javascript は中央あたりの $("img") を書き変えれば、特定の class を持つ img のみを対象にできます。


CSS の記述方法について

ネット上を調べると、「ドット絵を綺麗に拡大する」方法について、さまざまな…全く異なる…情報が見つかります。

ドット絵を綺麗に拡大する(長いので、以下「ドット絵の拡大」と書きます)方法は、CSS3 の策定中にコロコロと変更され…「時期尚早」と判断され、CSS4 に先送り。CSS3 からは一旦削除されました。

これが、情報が書かれた時期によって、内容があまりにも違う原因です。


CSS3 はまだ勧告に至っていません。つまり、「標準」ではないのです。

一度は標準にしようとして…つまり、その可能性を見せてから削除されたため、その後の対応がブラウザごとに異なりました。


削除されたのだから、仕様を入れなかったもの(旧 Edge)、削除前の「最後の」勧告候補の仕様を実装するもの(FireFox)、削除後に「草稿」で復活した仕様を入れるもの(Safari / Chrome)。

誰が悪いわけではありませんが、非常に混乱する状況になったのです。


2019年10月10日、「削除」されてから7年半の時を経て、ついに新しい勧告候補が公開されました。

このバージョンでは、草稿にあったドット絵表示方法が取り入れられています。つまり、まだ「正式」ではないものの、混乱した状況が統一に向かうことになります。


以下、この段階に至るまでの、長い歴史話を記すことにしましょう。

今となっては、もう読む必要もないと思いますが、記録としては面白いと思いますので。

optimizeSpeed

最初に、CSS3 の策定方法について書いておきます。


CSS3 は現在も策定中であり、決定はされていません。

策定中の最新版は、Editor's Draft として公開されています。

これは Draft、つまり提案に過ぎないため、公式な記録すら残っていません。常に最新版公開のみです。


策定中のバージョンは、ある程度まとまると「勧告候補」として公開されます。こちらは記録が残ります。

最初の勧告候補の日付は、2009年7月。

このバージョンでは、ドット絵の拡大の指定方法は盛り込まれていませんでした。


しかしどうやら、その後の Draft でドット絵の拡大について議論があったようです。

記録に残っていないため詳細がわからないのですが、ここで image-rendering プロパティが導入され、設定値として optimizeSpeed と optimizeQuality 、そして auto の3つの値が定められた様子です。


optimizeSpeed は速度優先。ドット間の補間などを行わず、ドットが目立つ方法を意味します。

optimizeQuality は品質優先。ドット間の補間を行い、ドットがぼやけるようにします。

auto は、状況に応じてブラウザが調整する、と言う意味です。


これ、Draft で提案されただけの模様で、その次の勧告候補では「optimeizeSpeed と optimizeQuality は非推奨」と明記されました。この2つの値はエラーにはしないが、auto と同じ扱いとなるよう求めています。

ネット上には、optimizeSpeed を指定することでドット絵を拡大できる、としているページもあるのですが、すでに非推奨の値ですので動作しないことになります。


次ページ: optimize-contrast


1 2 3 次ページ

(ページ作成 2013-06-09)
(最終更新 2020-02-03)
第3版 …他の版 初版 2版

戻る
トップページへ

-- share --

60016

-- follow --




- Reverse Link -