Unityで出力するとAndroidのアイコンが微妙な見た目になることがあるのですが
それは「Adaptive Icon」なるものを設定できていなかったためでした。
今回は備忘録として設定方法などをお伝えしたいと思います。
はじめに
UnityでAndroid向けにビルドするとこんなアイコンになっていることがありませんか？
自分がまさにそうです！
なんか見た目が微妙ですよね…
安っぽいというか、洗練されていない感じ
そうなんです、これデフォルトのアイコンを設定するだけだと、反映されないようだったので今回対応してみました。
そして本記事ではそのアダプティブアイコンの対応方法についてお伝えしていきたいと思います。
アイコンの設定方法
対応する方法は非常に簡単でまずはProjectSettingsを下記の手順で開きます。
メニュー→Edit→Project Settings…
ウィンドウが開くとこんな画面になるので
となります。
そして設定する項目は
「hdpi(432 x 432)」のアイコンを設定します。
どうやら一番解像度が大きいものを設定するだけで全部動くようです。
簡単ですね！でも「Background」と「Foreground」という項目がありますね…
背景とロゴを分けて設定
アダプティブアイコンでは背景(Background)と前面(Foreground、ロゴなど)を分けて設定する必要があります。
背景部分とロゴ部分を分けることによってシステム側のアニメーションが見えるようにできたり、さまざまなシーンで綺麗に見せることができるみたいですね。
なるほど！アニメーションするにしても開発者が実装するより
システム側でやってもらえる方が楽ですもんね
アイコンを分離する
前面と背面を設定する必要があるということは…
現在登録しているアイコンのテクスチャを背景とロゴ部分で分離する必要があります！
なんと！めんどくさくなりそうな予感…！
はい、人によってはPhotoshopなどのレイヤーを備えたものでデータ管理していない方もいると思うのでその点は少し手間がかかるかもしれません。
対応事例：「妖怪剣劇アクション 妖言」
こちらのアプリでひとまず対応を入れてみました。
現在のAndroidのアイコン
Androidのアイコンはこのようになっていました。
改めてみても微妙ですね〜
ではこれを改善していきましょう！
アイコンはUnity内で撮影している
実はアイコンはUnity内で作っていました。
こんな感じでシーンに配置してそれを下記スクリーンショットを撮影するプラグインを使って適当に作っていました…
こちらのプラグインでは入力された解像度でシーンを画像として保存するプラグインです。
アイコンを設定する
ひとまずこちらを使ってロゴと背景を切り分けて画像を撮影しました。
その時に解像度は「hdpi(432 x 432)」となります。
このサイズ一つあれば良いです！
ロゴ部分は透明画像にする必要がある
背面用の画像にロゴを前面に置く形になるので背景を透明にする必要があります。
その場合はPhotoshopやGimpなどを使って色域選択などで透明に抜いていく必要があります。
Photoshopで背景を透明する対応はこちらを参考にしました。
そして２枚の画像が完成！
上記のサイトを参考にPhotoshopで画像を抜き出すことができました。
前面（ロゴ）
背面
うまくいきそう。
よし、実験だ！
結果は…
残念ながらうまくいきませんでした！
侍さん、ギュウギュウですごい狭そう…
文字も見えてないし…
アイコン側を小さくする
そしてガイドラインに下記のようにあったので少し小さくしてみます。
アイコンの内側の 72 x 72 dp の部分は、マスクされたビューポート内に表示されます。
108dp → 72dpに縮めないといけないので約60%ぐらいに小さくすると良さそうです。
※72÷108 = 0.66(66%)だとすこーしだけはみ出るので60%まで縮めてアイコンに収まりました
あと侍さんのアイコンが見切れているので縁をぼやかすような
見た目に変更してみました。
こんな感じ。※透過テクスチャなので背景も重ねたものです
こんなに小さいとは…驚きですね
アイコンはきちんと収まったか
なんとかアイコンがこのように収まりました！
お侍さん、少し浮いてるのは仕方ないとして、以前のアイコンよりも本格的な感じがしますね！美しい！
結論「アダプティブアイコンを設定するのは簡単」
若干行き当たりばったりな作業となりましたが、簡単に対応できたのでやはりアダプティブアイコンは設定しておくのは良いのではないかなと感じました。
作業すべき内容としては
といった感じですね。
アイコンをデザインする時から知っていれば楽に作業できるので
作る時から意識しておくと良さそうですね！
活動内容のPR
下記が本サイトでの活動内容となります。
もしご興味がありましたらみていただけると幸いです。
終わりに
いかがでしたでしょうか。
たかがアイコン、さえどアイコン。
少し見た目が変わるだけで開発者の本気さ、プロフェッショナルさが
伝わってくるのだなと感じさせられました。
他のアプリも少しずつアダプティブアイコンを
対応していきたいと思います！
こちらのサイトではゲーム開発、英語学習、フリーランス活動について発信しております。
もしよろしければ画面左下のベルマークから購読していただけますと幸いです。
では本記事はここで終わりたいと思います。
ここまでお読みいただきありがとうございました。
コメント