Aokashi Room

作った作品の紹介やレビュー、トラブルシューティングとか色々

くっきりしたWWA Wingが欲しい

はい、暑いです。なつやすみのなかにいます。

さて、WWA Wingが公開されて3ヶ月くらい経ちました。WWAユーザーが少しでも増えたらいいなと思っています。

ところで、私のMacBook ProRetinaディスプレイ付きということで高解像度です。そう、高解像度。写真が綺麗に見れるし、何よりも作業領域が大きくて捗ります。

そんなMacBook Proですが、WWA Wingでプレイすると画面がぼやけるんですね。

f:id:aokashi:20160505131502p:plain

このスクリーンショットのサイズは1120×880です。作業領域が大きくて捗る(特別なソフト無しで1680×1050まで拡大できます)と言うのにスケーリング解像度を狭いデフォルト(1280×800)にしているというツッコミはなしで。

考えると、4ドットを1ドットとして扱っているのですが、ぼやけるのはドット絵としてちょっと残念な気がします。

解決法

実はこれ、CSSで解決できます。

.wwa-size-box{
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
}

wwa.cssに追加します。念入りの検証を行っていないことを理解してご利用ください。あくまで参考ということで。

Can I use...によるとすべてのブラウザーに対応したまとまった値はなく、ブラウザーごとに記述するCSSを追加しなくてはなりません*1。私のウェブサイトAokashi Homeも、フレキシブルボックスを使う際にSafari向きにベンダープレフィックスを付けています。割りと面倒です。

検証によると、Windowsに付属しているInternet Explorer、Micosoft Edgeには(私は)検証していませんが対応していないようです。Internet Explorerはimg要素しか有効にならず、Micosoft Edgeは手段すら無いようです。

f:id:aokashi:20160505131506p:plain

今は高解像度の時代ですし、画像も40ピクセルのようなサイズは時代遅れかもしれませんね。今までドットバイドットのWWAが昔のゲームの仲間入りとは、複雑な気分だ。そんなことで、1マスの大きさを広げて高解像度に対応できないかな。Javaとの互換性を打ち切ることに予想は付くかもしれないが。

*1:ベンダープレフィックスというものです