はい、暑いです。なつやすみのなかにいます。
さて、WWA Wingが公開されて3ヶ月くらい経ちました。WWAユーザーが少しでも増えたらいいなと思っています。
ところで、私のMacBook Pro、Retinaディスプレイ付きということで高解像度です。そう、高解像度。写真が綺麗に見れるし、何よりも作業領域が大きくて捗ります。
そんなMacBook Proですが、WWA Wingでプレイすると画面がぼやけるんですね。
このスクリーンショットのサイズは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は手段すら無いようです。
今は高解像度の時代ですし、画像も40ピクセルのようなサイズは時代遅れかもしれませんね。今までドットバイドットのWWAが昔のゲームの仲間入りとは、複雑な気分だ。そんなことで、1マスの大きさを広げて高解像度に対応できないかな。Javaとの互換性を打ち切ることに予想は付くかもしれないが。
- 2015年8月20日追記
- Internet Explorerで効かないことがわかり、それに関する追記をしました
- Internet Explorerのスペルを訂正しました