アイコンを作る

2023年5月8日 19:59

作ってみたものの。

UIとアイコン

ゲームに限らず、現在の道具には何かしらのアイコンや絵がついていて、道具の使い方や機能のヒントをユーザに示しています。
制作中のゲームでも、メニューや操作のアイコンを表示することにしました。

作ってみた

キャラ絵をStable Diffusionに「発注」したように、私には絵を描く能力はありません。なのでアイコンのデザインもStable Diffusionで作りました。
当初はアイコンを切り抜いて完成品にしようと思ったのですが、最終的にはStable Diffusionの役割はデザインの原案作りとなりました。
原案を作ってもらった後、ピックアップした原案を基にベクタ画像としてアイコンを作成しました。

Stable Diffusionに原案を作ってもらう

作ってほしい画像のプロンプトを書いて、Stable Diffusionの自作GUIで画像生成を回しました。依存していたライブラリの仕様が変わったので、依存性を解決したりしました。
モデルはSD2.1モデルを使い、768x768サイズで画像を生成しました。UIアイコンのプロンプトは、アイコンの意味よりもアイコンを表すような具体的な物品を指定した方が、出来も良く選びやすかったです。例えば、「秘書」のアイコンを作る場合は、秘書から連想して「蝶ネクタイ（bow tie）とスーツ」を指定しました。

(official:1.5) UI symbolized pictogram of business application, 100 pixel square size,
secretary, bow tie and suit,
gentle impression, background color is pale white, primary color is yellowgreen, secondary color is scarlet, low contrast, fractal, round, luminescent

Negative prompt: worst ugly normal quality, low resolution, text, username, number, font, painting, sharp angle form, intricated texture, low brightness, black, gray, dark color

Steps: 20, Sampler: DPM++ 2M, CFG scale: 7.0, Seed: 2429840554165871, Size: 768x768

UIアイコンのイメージについて、意図的に「業務用アプリ」を指定しています。これは作成中のゲームのイメージ自体が「業務用ソフトウェア」を想定しているためです。そのわりにfractalとか指定してますが…

出来上がった画像は以下のような感じです。キャラ絵のときと同様にある程度試行をかけることにしました。1枚に結構な数のアイコンが入ってくるので、画像の枚数自体はキャラ絵のとき（ひとり約100枚）よりも少なくて済みました。

アイコン数種類の原案を作ってみると、当初指定したアイコンとは別のもので使えそうな場合が結構ありました。なので、アイコンごとにプロンプトを変えるものの、アイコンの候補を一通り出し切ってから全体的に原案をピックアップすることにしました。現時点で31種類のアイコンの候補を作りました。

原案のピックアップの一部。蝶ネクタイ（秘書）の横にある青いアイコンは「攻撃」のアイコン候補からもってきた。スーツの首元っぽい感じが良さげ

なお原案を集めたものの違和感がある場合は、自分で原案を考えたりもしています。Stable Diffusionから原案の反例をもらったような感じになりました。

ベクタ画像を手打ちする

アイコンを透過させて使うのと、記号的なデザインのアイコンにしたかったので、アイコンはベクタ画像で作ることにしました。ベクタ画像のデータ作成は手動です。SVGを手打ちしました。

こんな感じのアイコンを作ったりしました。

線の長さや位置は数学的な比率を使って決めました。細長い比率を使うことが多く、青銅比が活躍しました。曲線の始点・終点・制御点などのパラメータはひたすら電卓で計算しました。

SVGからPNGに変換するのは、ColabのノートブックでCairoSVGを呼び出しました。

ただしCairoSVGではマスク処理の実装が弱く、特に輝度値ベースのマスクを使うことが出来ません。（自由な形に切り抜く際や半透明にしたい場合は、マスク領域を輝度値、要はグレースケールで描画できるほうが便利）
そのため、マスクを使いたい場合はアイコン画像と別にマスク画像のPNGファイルをCairoSVGで生成し、Kritaでアイコン画像とマスク画像を合成して透過PNGを作成しました。ちなみにマスク画像の黒は真っ黒ですが、アイコン画像の黒は少しだけ青灰色に寄った黒です。

作ってみたはよいが

現時点までに作ったアイコンを使ってみました。右側のシーンと真ん中のユニット情報周りのアイコンを差し替えました。

ユニット一覧からユニット情報を表示したところ。アイコンにはツールチップを追加（後述）

どうも分かりづらい。アイコンのデザインではない部分で、意味が伝わる気がしないです。特に中央の能力値のいくつかは、どうアイコンを頑張っても意味は伝わらないのでは。

考察

「意味が伝わる気がしない」というもやもやした気分の正体を考察しました。文章を書いてみたのですがただ長くなっただけなので結論だけ書きます。
・アイコン表示のような文字を使わない手段での意味の伝達は、ユーザが知らない概念を伝えることには向いていない。特に制作中のゲームの場合、新奇な、というよりは奇妙な概念がいくつもあるため、アイコン表示は本質的に向いていない。
・ゲーム内世界に固有の概念の意味を説明するのは文字でも難しい。翻訳の難しさと同じ。造語を作る場合でも、音の転記ではなくユーザが知っている単語列を使って作るようにしないと類推ができない。

能力値の意味については、そもそもユーザが知らないゲームシステムの部分については、アイコンを頑張ってもゲーム上の意味をユーザが想起することはできません。これが一連の考察の結論です。
あと、漢字は造語を作る時に便利だと思いました。表音文字より省スペースで意味を伝えられます。

参考にした記事だけ列挙しておきます。

アイコンにテプラを貼る

全般的に、文字による意味の伝達は画像よりもはるかに強力だ、ということを知りました。まさに文字は人類にとっての叡智。
というわけで、アイコンに「テプラを貼る」、つまりアイコンに文字を添えることにします。この場合はアイコンは装飾と同等になります。なぜなら文字を添えた場合、意味を伝える機能はもはやアイコンではなく文字が担うことになるためです。
とは言えテプラを貼りっぱなしでも表示の邪魔なので、ツールチップをホバー表示することにしました。

Unityでツールチップを表示

ツールチップの表示方法は分かってしまえば難しくはありませんでした。UIコンポーネントの場合はIPointerEnterHandlerとIPointerExitHandlerを継承してイベントハンドラを実装します（インターフェースだけど良い表現が思いつかない）。これが一番手軽でした。

反応させたいイベントが増えた場合は、EventTriggerコンポーネントを使ってスクリプトから対象イベントとハンドラを登録するのが良さそうです。
ちなみにOnMouseEnter, OnMouseExitの実装による方法は、Colliderを使う時に採る方法、つまりUGUIを使わないときの方法です。

ツールチップの大きさと位置は要検討です。文字数とUIに重なる具合を加減して決めようと思います。

スマホの場合はホバーイベントが使えないのですが、本GUIの場合はメニューのボタンのタップは選択の役割だけを持ち、決定は別のボタンで行います。選択するためのGUI要素は別にあるので、メニューのボタンを直接タップすることをあまり想定していません。
…さて、決定ボタンはどこでしょう？

次にやる事

そろそろトラックパッド風の選択GUIを実装しないといけないです。

この記事が気に入ったらサポートをしてみませんか？