【Unity】Androidのアダプティブアイコンを設定しよう!

君なら出来るアダプティブアイコン Unity
スポンサーリンク

Unityで出力するとAndroidのアイコンが微妙な見た目になることがあるのですが
それは「Adaptive Icon」なるものを設定できていなかったためでした。

今回は備忘録として設定方法などをお伝えしたいと思います。

はじめに

UnityでAndroid向けにビルドするとこんなアイコンになっていることがありませんか?

Androidのなんか微妙なアイコン

自分がまさにそうです!
なんか見た目が微妙ですよね…
安っぽいというか、洗練されていない感じ

そうなんです、これデフォルトのアイコンを設定するだけだと、反映されないようだったので今回対応してみました。

そして本記事ではそのアダプティブアイコンの対応方法についてお伝えしていきたいと思います。

 

アイコンの設定方法

対応する方法は非常に簡単でまずはProjectSettingsを下記の手順で開きます。

メニュー→Edit→Project Settings…

ウィンドウが開くとこんな画面になるので

アダプティブアイコン設定場所

  1. Project Settings ウィンドウを選択
  2. 「Player」をクリック
  3. 「Android」のアイコンをクリック
  4. Icon→Adaptive Iconsを確認

となります。

そして設定する項目は
「hdpi(432 x 432)」のアイコンを設定します。

どうやら一番解像度が大きいものを設定するだけで全部動くようです。

簡単ですね!でも「Background」と「Foreground」という項目がありますね…

 

背景とロゴを分けて設定

アダプティブアイコンでは背景(Background)と前面(Foreground、ロゴなど)を分けて設定する必要があります。

背景部分とロゴ部分を分けることによってシステム側のアニメーションが見えるようにできたり、さまざまなシーンで綺麗に見せることができるみたいですね。

なるほど!アニメーションするにしても開発者が実装するより
システム側でやってもらえる方が楽ですもんね

 

アイコンを分離する

前面と背面を設定する必要があるということは…
現在登録しているアイコンのテクスチャを背景とロゴ部分で分離する必要があります!

なんと!めんどくさくなりそうな予感…!

はい、人によってはPhotoshopなどのレイヤーを備えたものでデータ管理していない方もいると思うのでその点は少し手間がかかるかもしれません。

 

対応事例:「妖怪剣劇アクション 妖言」

こちらのアプリでひとまず対応を入れてみました。

 

現在のAndroidのアイコン

Androidのアイコンはこのようになっていました。

Android妖言の元アイコン

改めてみても微妙ですね〜
ではこれを改善していきましょう!

 

 

アイコンはUnity内で撮影している

実はアイコンはUnity内で作っていました。

妖言のアイコンなこんな方法で撮影

こんな感じでシーンに配置してそれを下記スクリーンショットを撮影するプラグインを使って適当に作っていました…

こちらのプラグインでは入力された解像度でシーンを画像として保存するプラグインです。

 

アイコンを設定する

ひとまずこちらを使ってロゴと背景を切り分けて画像を撮影しました。
その時に解像度は「hdpi(432 x 432)」となります。

このサイズ一つあれば良いです!

 

ロゴ部分は透明画像にする必要がある

背面用の画像にロゴを前面に置く形になるので背景を透明にする必要があります。

その場合はPhotoshopやGimpなどを使って色域選択などで透明に抜いていく必要があります。

Photoshopで背景を透明する対応はこちらを参考にしました。

 

そして2枚の画像が完成!

上記のサイトを参考にPhotoshopで画像を抜き出すことができました。

前面(ロゴ)

妖言ロゴ前面

背面

妖言ロゴ背面

うまくいきそう。
よし、実験だ!

 

結果は…

残念ながらうまくいきませんでした!

アイコンがなんか変

侍さん、ギュウギュウですごい狭そう…
文字も見えてないし…

 

アイコン側を小さくする

そしてガイドラインに下記のようにあったので少し小さくしてみます。

アイコンの内側の 72 x 72 dp の部分は、マスクされたビューポート内に表示されます。

108dp → 72dpに縮めないといけないので約60%ぐらいに小さくすると良さそうです。
※72÷108 = 0.66(66%)だとすこーしだけはみ出るので60%まで縮めてアイコンに収まりました

あと侍さんのアイコンが見切れているので縁をぼやかすような
見た目に変更してみました。

こんな感じ。※透過テクスチャなので背景も重ねたものです

最終的なアダプティブアイコン

こんなに小さいとは…驚きですね

 

アイコンはきちんと収まったか

なんとかアイコンがこのように収まりました!

androidでアダプティブアイコン完成

お侍さん、少し浮いてるのは仕方ないとして、以前のアイコンよりも本格的な感じがしますね!美しい!

 

結論「アダプティブアイコンを設定するのは簡単」

若干行き当たりばったりな作業となりましたが、簡単に対応できたのでやはりアダプティブアイコンは設定しておくのは良いのではないかなと感じました。

作業すべき内容としては

  • 前面と背面を2つに分ける
  • 解像度は432×432で用意
  • 前面のロゴは全面表示だった時の60%程度にスケール
  • ロゴだけが浮いても良いようなデザインする(縁をぼやかすなど)

といった感じですね。

アイコンをデザインする時から知っていれば楽に作業できるので
作る時から意識しておくと良さそうですね!

 

活動内容のPR

下記が本サイトでの活動内容となります。
もしご興味がありましたらみていただけると幸いです。

ポイント計算機スクショ1

 

終わりに

いかがでしたでしょうか。

たかがアイコン、さえどアイコン。

少し見た目が変わるだけで開発者の本気さ、プロフェッショナルさが
伝わってくるのだなと感じさせられました。

他のアプリも少しずつアダプティブアイコンを
対応していきたいと思います!

こちらのサイトではゲーム開発、英語学習、フリーランス活動について発信しております。
もしよろしければ画面左下のベルマークから購読していただけますと幸いです。

では本記事はここで終わりたいと思います。
ここまでお読みいただきありがとうございました。

 

コメント

スポンサーリンク
タイトルとURLをコピーしました