HEIF (.heic) という画像ファイル形式が存在するのを知った
iOS エンジニアの人たちにとっては当たり前なのかもしれないんですけど最近知りました。
Apple 製のデバイスで HEIF／HEVC メディアを扱う - Apple サポート
ここにある通り、 iOS 11 以降では、カメラで撮った写真の保存形式が
HEIF というファイル形式（拡張子は .heic ）になっているそうです。
設定画面から保存フォーマットを『互換性優先』にすれば、
今まで通りの JPEG でも保存できるそうですが、おそらく HEIF がデフォルトなんじゃないかなと思います。
さて、これで困るのがWebエンジニアです。
ユーザーからしてみればどう見ても画像ファイルなわけなので、
ウェブサイトに画像添付フォームがあれば HEIF 形式の画像を添付するのですが、
困ったことにウェブブラウザ側は HEIF 形式の画像を表示できません。
2019年12月現在、HEIF に対応しているブラウザはありません。
https://caniuse.com/#feat=heif
じゃあどうするか、と考えていくうちに、
ImageMagick で JPEG に変換してサイトで表示をおこなう、という方法が浮かびました。
Rails なら rmagick や minimagick を使うわけですね。
しかし Ubuntu の apt からデフォルトで入る ImageMagick は HEIF に対応していません。
これでは HEIF から JPEG への変換がおこなえません。
というわけで作りました。
HEIC/HEIF 対応した ImageMagick をインストールできる Dockerfile です。
これを参考にお使いの Dockerfile に組み込んでいただけたらいいのでは、と思います。
作成にあたっては、
- Ubuntu18.04でHEIC形式の画像ファイルをJPG、PNG形式に変換するための手順
- 5 minutes to Install Imagemagick with HEIC support on Ubuntu 18.04 DigitalOcean
を参考にしました。ありがとうございました。
Unityでピクセルフォントをぼやけさせずに表示したい！
Pixel Art Park 6 お疲れさまでした！
デジゲー博に引き続き、『エイプリルルーム』というゲームの展示をさせていただきました。
私がプログラムとサウンドを担当しています。
【こやまBOX お知らせ】
— こやまなつみ (@doteduke) November 23, 2019
お待たせしました、 #PixelArtParkお品書き です！
いよいよ明日が #PixelArtPark ！
私こやまは、こやまBOXというサークルでお待ちしてます！
新作アドベンチャー「 #エイプリルルーム 」、気合入れて作ってますので、ぜひ遊びに来てくださいね！
スペース：2階体育館 C-35 pic.twitter.com/Zn9cMGabUT
これはドット絵のゲームですので、テキストもドット絵に合うよう描画させたいところですが、
ふつうにフォントを使うとこのようになってしまいます。
なんだかボケていますね。
この記事の手順を踏むと、以下のようにきれいに描画されます。
この記事は 『Fix Blurry Pixel Art Style Fonts in Unity | Ryan Nielson』 を元に書いています。
また、フォントは PixelMplus12 を用いて説明していきます。（再配布OKなのがありがたいですね！）
1. フォントの設定をする
Unity にインポートしている PixelMplus12 を見ると、最初はこのような設定になっています。
これを以下のように変更しました。
1-1. Font Size
まず Font Size を 12 にします。
この値は元となるフォントによって異なります。
このあとでフォントの文字をまとめた画像を生成するのですが、その画像を作る際のフォントサイズがこれです。
PixelMplus12 はフォントサイズ 12 のとき一番きれいに描かれるように作られているので、今回はこの値を 12 にしています。
（なので、PixelMplus10 を元にする場合であれば、ここの値は 10 にします）
1-2. Rendering Mode
Rendering Mode は Hinted Raster にします。
アンチエイリアス処理がおこなわれなくなります。
1-3. Character
英数字のみを使うなら他のでもいいのですが、今回は日本語も表示したいので、
Character は Unicode を選びます。
2. Editable Copy の作成
1. の設定を終わらせて「Apply」を押したなら、
Editable Copy を作成します。
右上の歯車アイコンを押し、『Create Editable Copy』を選択します。
これを押すと、フォントを元に画像ファイルを作り出します。
処理にはけっこう時間がかかりますので、気を長くしてお待ち下さい。
辛抱強く待つと、元のフォントファイルとは別にファイルが3つ作られます。
下3つがそうです。
わかりにくいので名前を変更します。
この中の下から2番目、黒い長方形みたいなやつを編集します。
（フォントデータを元に作られたスプライトセットです）
初期はこのようになっています。
こう変えました。
Filter Mode を Point (no filter) に変えたのがポイントです。
ドット絵ゲームを作るときは、画像をインポートするたびに
- Pixels Per Unit をゲームで決めてるサイズに（今作ってるゲームだと 1 に）変更
- Pivot を Top Left に変更 *1
- Filter Mode は Point (no filter)
- Compression を None に
をやっていると思いますが、そのうちの一点ですね。
Pixels Per Unit も念のため変えていますが、ここにおいては特に影響ないようです。
3. Text UI に反映
あとは簡単で、 2. の工程で作られたフォントファイルを反映します。
これで、最初にご紹介した通りの、ぼやけていない文字が出来上がったかと思います。
4. おまけ：フォントサイズを変えたい
ゲームの都合上、異なるフォントサイズを用いたいとしましょう。例えば 16px。
Font Size を 16 に変更するとこのようになります。
当然ぼやけてはいないのですが、
ピクセルパーフェクトでない（背景素材とピクセルがずれている）ことがわかると思います。
整数倍（12px, 24px, 36px, 48px, ...）以外のフォントサイズを指定すると、このようなことが起きてしまいます。
これを避けるには、再び 1. , 2. の工程を踏む必要があります。
1-1. で Font Size を 12 にして作りましたが、今度は 16 にしてもうひとつ作り直すのです。
結果、このようにピクセルパーフェクトになりました。
……が、フォントの形としてはやや崩れてしまいました。
どちらが良いかは、フォントのきれいさを取るか、ピクセルパーフェクトにこだわるかで変わってくると思います。
幸い、 PixelMplus12 にはサイズ違いの PixelMplus10 もいますので、両方使えば、
それぞれの整数倍の 10, 12, 20, 24, 30, 36, 40, ... のフォントサイズであれば
フォントの形もピクセルパーフェクトも保ったままテキストを描くことが出来ます。（上記例の 16 は無理ですね）
おわり
改めて、この記事のもととなった『Fix Blurry Pixel Art Style Fonts in Unity | Ryan Nielson』に感謝をお伝えします。ありがとうございます。
日本語情報が少ないためか、同じ問題にあたっている方がいらしたので、本記事を書いてみました。
説明に使った Unity プロジェクトファイルは、以下からダウンロードできますので、
もう少し詳細を見てみたい！ という方はご活用ください。
ワンライナーで openssl によるオレオレ証明書（自己署名証明書）の作成
いつも忘れるのでメモ
openssl genrsa 2048 > server.key && openssl req -new -key server.key -subj "/C=JP/ST=Tokyo" -out server.csr && openssl x509 -days 3650 -req -signkey server.key -in server.csr -out server.crt
これでOK
