layer-game-ui

Layer Game UI

概要

ゲーム UI には、イラストにはない役割が 2 つあります。サイズ変更に対応することと、小さいサイズでも判読できることです。ある幅では適切に見えても、別の幅ではにじむボタンは不具合です。512px では判読できても、64px では形が崩れてしまうアイコンも不具合です。どちらも生成前に、プロンプトの指示と設定する出力フィールドによって決まります。

Layer は execute_forge の nine_slice を使ってサイズ変更の問題に対処します。実行後、各軸の中央を横切る無地の帯を見つけ、端と中央をタイル化し、ファイルに 9 スライスのインセットを記録します。その後、export_ui_kit が、エンジンで描画するファイル形式で各要素を書き出します。生成の仕組み、利用料金の確認、ポーリングは layer が担当し、プロンプトの作成は layer-image が担当します。

ここで名前を挙げた関連スキルが利用可能なスキルに見つからない場合は、ユーザーにインストールを依頼してください（npx skills add layerai/skills --skill <name>）。無人で処理を続ける場合は、ツールスキーマに基づいて進め、不足しているスキルがあることを明示してください。

クイックリファレンス

必要なもの	使用方法
ボタン、パネル、フレーム、タブ、ツールチップ	nine_slice: true を指定して execute_forge を実行
サイズ変更しないもの	nine_slice を省略
承認済み UI と一致させる要素	承認済みファイルを reference_image に指定し、image_editing 対応モデルに絞り込む
同じキャンバスサイズのアイコン	canvas: "FIXED"、width、height、padding を指定して output_fit を使用
透明な余白の削除	output_fit.trim: true
角丸のカードやバッジプレート	全面塗りつぶしで不透明な画像を生成し、その後 output_fit.corner_radius を指定
透明なアイコン	remove_background: true（独立した実行として課金されるため、見積もりにも含めてください）
サイズ変更可能な要素のエンジンへの取り込み	engine に UNITY、GODOT、CSS、または JSON を指定して export_ui_kit を使用

サイズ変更可能な要素

9 スライス要素は 9 つのパーツで構成されます。拡大縮小しない四隅、一方向に沿って繰り返される 4 つの辺、縦横両方向に繰り返される中央です。画像がそのように分割できるよう、プロンプトで指示する必要があります。

• 装飾は四隅だけに配置します。 フィリグリー、リベット、宝石、面取りは四隅に配置します。
• 中央は無地または均一なテクスチャにします。 木目、羊皮紙、ヘアライン仕上げの金属はきれいにタイル化できますが、中央に配置したエンブレム、紋章、ラベルはできません。中央にエンブレムがある画像ではインセットが付与されず、インセットのない要素は UI キットに含められません。
• 背景色は単色にします。 透明な背景を指定すると、モデルはチェック柄をピクセルに描き込みます。代わりに、要素と対照的な単色を指定してください。
• テキストは入れません。 ラベルはエンジン側で設定し、どの幅でも要素の上に重ねます。

次のような言葉でプロンプトに指示します。「四隅のみに金色のフィリグリーをあしらった、華麗なファンタジー風ボタンフレーム。中央は無地の濃い色の革で、辺は均一で直線。背景は単色のマゼンタで、テキストなし」

アイコン、ポートレート、ロゴ、固定サイズのバッジなど、サイズ変更しないものには nine_slice を指定しないでください。

アイコンとセット

プロンプトには目標ピクセルサイズを指定し、最小サイズに合わせてデザインします。64pxで見栄えが悪いアイコンを修正するには、要素を減らして線を太くします。拡大処理を改善するのではありません。

セットに統一感を持たせるには共通のルールが必要なので、すべてのプロンプトに線の太さ、角の半径、遠近感（フラット、アイソメトリック、またはわずかな三分の四視点）、カラーパレット、光の方向、アイコンをプレート上に置くか、何もない状態で配置するかを指定します。セットの拡張は生成ではなく編集の作業です。承認済みのアイコンを2つか3つ reference_image として添付し、capabilities: {image_editing: true} で絞り込んだモデルを使うと、提示した見た目を再現できます。style_reference が伝えるのは見た目だけなので、共通のルールがぶれてしまいます。

1サイズで納品する場合は、canvas: "FIXED"、目標の width と height、固定の padding を指定した output_fit を使うと、すべてのアイコンで枠と余白が統一されます。最初に透明な余白を取り除くには trim: true を指定します。カードやシンボルプレートの角丸は、透明な背景の角丸カードを求めるのではなく、全体が塗りつぶされ、角が直角の画像を生成してから corner_radius で付けます。

納品

export_ui_kit は決定論的なファイル操作であり、Creative Units は消費しません。最大128個の file_ids を受け取り、それぞれに9スライスのインセットを持たせます。キットに記載する順に並べると、インポート手順と各要素のインセットを記載した README 付きの zip へのダウンロードリンクが返されます。

engine	zip の内容
UNITY	1つのアトラスと、9スライスの境界でスプライトを切り出す .meta
GODOT	1つのアトラスと、テーマおよび NinePatchRect 用の各要素の StyleBoxTexture .tres
CSS	要素ごとに1つの画像と、それぞれに border-image ルールを記載したスタイルシート
JSON	1つのアトラスと、各フレームの境界を含む TexturePacker JSON（ハッシュ）

Unity、Godot、CSSでは、端と中央が継ぎ目なく繰り返されます。PixiJS と Phaser では JSON の読み込み時に引き伸ばされるため、これらのエンジンを使うユーザーには、テクスチャが非常に細かい中央部分は大きなサイズでぼやける一方、シンプルな中央部分はきれいに表示されると伝えてください。

作成例

「Godot で作るダークファンタジーRPG向けのUIキットです。すでに承認済みのインベントリパネルに合わせた、プライマリボタン、セカンダリボタン、ダイアログパネル、ツールチップ用フレームを作ります。」

1. 承認済みのパネルにはすでに file_id があるため、アップロードは不要です。
2. filter.use_case: "text_to_image" と filter.capabilities: {image_editing: true} を指定して list_base_models を実行します。最初の結果を選び、get_base_model を実行します。
3. それぞれ nine_slice: true を指定し、承認済みのパネルを reference_image として使い、共通のルールと要素名を含むプロンプトで4回実行します。「プライマリボタン。横長。ダークアイアンのフレーム。銀の透かし模様は四隅のみ。中央は無地のダークレザー。縁は均一で直線的。マゼンタ一色の背景。文字なし。」
4. これらの入力で estimate_forge_price を1回実行して価格を4倍し、20 CUs を超える金額を指定します。実行したら、poll_interval_seconds 間隔で get_forge_run をポーリングします。
5. 各要素につき出力を1つ選びます。エンブレムや煩雑な中央部分が生成されたものにはインセットが付きません。その場合は、中央をよりシンプルにして再実行します。
6. engine: "GODOT" と4つの file_ids を指定して export_ui_kit を実行します。リンクと README に記載されたインセットを渡します。

よくある間違い

• 9スライス要素に透明な背景を求めて、チェック柄をそのまま納品する。
• ボタンの中央に紋章やラベルを置き、インセットを付けられなくする。
• アイコン、ポートレートなどの固定サイズのアートに nine_slice を指定する。
• 目標サイズではなく、フル解像度でアイコンの見栄えを判断する。
• 承認済みセットの追加に、image_editing モデルでの reference_image ではなく style_reference を使う。
• ボタンの文字をアートに焼き込む。
• 透明背景の角丸カードを求めるのではなく、corner_radius で角を丸める。