Small guide / Game UI

SVG・PNGと
9スライスの選び方

画面部品は、見た目の好みだけでなく、実際に表示するサイズと拡大の方法を決めて選びます。

そのまま置くならPNG

透過PNGは、背景のないアイコンやボタンの画像として使えます。喫茶色UIの小物は128pxと256pxの2サイズ。大きく拡大しすぎると輪郭がぼやけるため、画面で必要な大きさに近いものを選びます。

SVGには図形の線や塗りが記録されています。対応するベクター編集ソフトで色や形を変更し、必要な大きさのPNGへ書き出せます。ゲームエンジンでSVGを直接扱えるかは、使用する環境の案内を確認してください。

パネルを横長に引き延ばすと、角も一緒に伸びます。9スライスは四隅と辺と中央に分けて扱い、四隅を保ったまま中央などを伸ばすための方法です。GodotのNinePatchRectは、そのための余白を上下左右に指定できます。

喫茶色UIのasset_manifest.jsonには、左・上・右・下の余白を1x画像のピクセルで記録しています。2x画像を使う場合は余白値も2倍にします。PNGをtextureへ指定し、patch_margin_left/top/right/bottomへ値を入れるのが設定の一例です。

本素材の実エンジンへの取り込みは未確認です。画像部品のセットで、ゲームの所持品・売買処理や完成プリセットは含みません。無料サンプルで形式と見え方を先にご確認ください。

24アイコン＋16部品、3配色。透過PNGと編集用SVG、余白の記録を収録しています。画像素材の商品で、完成したゲームUIや機能のセットではありません。

収録内容・価格・利用条件の最新の記載は、リンク先の商品ページをご確認ください。