mcpField
T
threejs-image-generator

threejs-image-generator

github.com/majidmanzarpourクリエイティブ・メディア2.6k2.9k 回インストール4 週間前に更新
リポジトリ

threejs-image-generator について

Three.js ゲーム向けの 2D ビジュアル素材を作成・編集するスキルです。コンセプト、テクスチャ、デカール、背景、UI アートに加え、`threejs-3d-generator` 用の参照画像も用意できます。

主な機能

  1. 01コンセプト画像と参照画像の生成
  2. 02テクスチャとマテリアル参照の作成
  3. 03背景と UI アートの制作
  4. 04既存画像の編集
  5. 05画像から 3D を作るための素材準備

活用シーン

  1. 01キャラクターや乗り物の参照画像作成
  2. 02地形や表面テクスチャのデザイン
  3. 03ゲーム背景や UI アイコンの制作
  4. 04既存画像のスタイル調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/majidmanzarpour/threejs-game-skills --skill threejs-image-generator

インストール後、Claude Code で/threejs-image-generatorを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yamlscripts/generate_image.py

詳細

Three.js 画像ジェネレーター

Three.js ゲーム向けの2Dレイヤーです。コンセプト、テクスチャ、デカール、UI アート、および画像から3Dを生成する threejs-3d-generator に渡すソース画像を扱います。

実際に読み込まれたスキルファイルから <this-skill-dir> を解決します。まずその隣にある兄弟スキルを解決し、その後、ランナーが検出したパスを使用してください。インストール済みのバージョンを混在させたり、特定のホームディレクトリを前提としたりしないでください。

使用する場面

  • 画像から3Dを生成するための参照画像:キャラクター、クリーチャー、建物、船、自動車、武器、小道具、ピックアップアイテム、地形モジュール。
  • テクスチャとマテリアルの参照画像:地形、道路、岩、砂、金属、SFパネル、トリムシート、デカール、危険表示ラベル、標識。
  • 環境用画像:空、背景画像、都市の地平線、星雲、メニュー背景、視差レイヤー。
  • UI アート:ロゴ、勢力マーク、アイコン、アイテムカード、アビリティバッジ、コックピット用デカール、GUIパネル、タイトルアート。
  • 既存画像の編集:スタイルのバリエーション、クリーンアップ、パレットの調整、コンセプトのブラッシュアップ。

生成を含む高品質なグラフィック制作では、CSSを手書きしたり単色で済ませたりせず、価値の高い2D画像を生成してください。プロシージャルアートの明示的な指定や外部サービスの利用制限を尊重してください。ロゴ、空、アイコンを一定数そろえるのではなく、ゲームのデザインに合ったアセットを選んでください。

APIキー

スクリプトは --api-key または GEMINI_API_KEY を読み取ります。キーをスキルファイル、ゲームコード、レポートに記載しないでください。

uv run <this-skill-dir>/scripts/generate_image.py probe   # GEMINI_API_KEY=SET|MISSING

シェルプロファイルでのみ定義されたキーは、プロセス環境変数に存在しない場合があります。通常の確認コマンドで予期せず MISSING と表示された場合は、プロファイルを読み込んで3つすべてのプロバイダーを確認する threejs-game-director/scripts/probe_asset_credentials.sh を使用してください。

コマンド

出力がプロジェクト内に保存されるよう、ゲームプロジェクトのディレクトリから実行してください。

uv run <this-skill-dir>/scripts/generate_image.py \
  --prompt "your image description" --filename assets/concepts/output.png --resolution 2K

uv run <this-skill-dir>/scripts/generate_image.py \
  --input-image assets/concepts/ship.png \
  --prompt "battle-worn red racing livery with clearer material zones" \
  --filename assets/concepts/ship-red-livery.png --resolution 2K

解像度:手早いコンセプト、アイコン、下書きシートには 1K、本番用の参照画像、画像から3Dを生成する際の画像、テクスチャ、背景、UIパネルには 2K(デフォルト)、ヒーロー用スプラッシュアート、高精細テクスチャ参照画像、大型の空画像には 4K を使用します。

プロンプトのパターン

画像から3Dを生成するための参照画像:

[アセット]の、3D生成用のすっきりした参照画像を作成してください。オブジェクトを1つだけ中央に配置し、全体が見えるようにします。明るい無地の背景、判別しやすいシルエット、明確なマテリアルの領域、ゲームに適した[ジャンル/スタイル]にしてください。モーションブラーや、切れている部分、文字は入れないでください。

リグ設定可能なキャラクターまたはクリーチャー:

3Dリギング用に、全身が見える[ Tポーズ/Aポーズ/横向きのクリーチャー]の参照画像を作成してください:[詳細]。左右対称の姿勢で、手、足、四肢が見えるようにします。背景は無地とし、衣装と身体構造の層が判別できるようにしてください。武器を手に融合させないでください。

テクスチャまたはマテリアル:

[表面]の、継ぎ目のないゲーム用テクスチャ参照画像を作成してください。正投影の俯瞰画像とし、PBRに適したアルベド、明確なマテリアルの変化を備えたものにします。遠近法や、強く焼き込まれた影は使わず、[スタイルの詳細]を加えてください。

ロゴ、アイコン、UI アート:

[勢力/アイテム/アビリティ]用の、鮮明なゲームUI [ロゴ/アイコン/バッジ/パネル]を作成してください。透明背景に適したシルエット、小さいサイズでも見やすい高コントラスト、[ジャンルに合わせたスタイル]にします。小さくて読めない文字は入れないでください。

空または背景:

[環境]の、横長のゲーム背景画像を作成してください。奥行きをレイヤーで表現し、地平線を判別しやすくします。[時刻/天候/スタイル]とし、リアルタイムのThree.jsシーンの背景に適したものにしてください。前景に主題を置かないでください。

組み込み

コンセプトと画像から3Dを生成するためのソースは assets/concepts/ に、テクスチャ、デカール、アイコン、GUIのソースは assets/textures/、assets/decals/、または assets/ui/ に保存します。画像から3Dを生成するためのソースは、パスを指定して threejs-3d-generator に渡してください。

PNGを実行時形式に変換する際は、用途に応じて選んでください。アルファチャンネルが必要な場合(UI、アイコン、デカール)はPNGを使用し、より大きな不透明テクスチャには、パイプラインが対応していればJPG/WebP/KTX2を使用します。APIの呼び出しはツールによる処理の一環であり、ゲームコードから呼び出すことはありません。

画像から3Dを生成したり、関連するバリエーションを作成したりするために費用をかける前に、画像を確認してください。ファイルが書き込まれたことだけでなく、ゲーム内で実行時の画像がどのように見えるかも確認します。要件が変更された場合も、既存の有用な画像は保持し、すべてを再生成するのではなくプロジェクトのメモを更新してください。

復旧

連携型ゲームでは、ディレクターの references/asset-recovery.md を使用してください。認証情報がない場合やクレジットが尽きた場合は、正直にローカルで代替できますが、一時的なエラーの場合は代替できません。無効な入力や認証エラーと、サービス障害を区別してください。料金が発生する生成の結果が不確かな場合、むやみに再試行しないでください。既存のファイルを保持し、まずプロバイダーの結果を確認してください。このコマンドには、Tripo のようなタスク再開インターフェースはありません。依存する画像作業のみを保留し、独立したゲーム作業を続けてください。

報告

プロンプトと目的、出力パス、出力をそのまま使用したか、さらに編集したか、threejs-3d-generator に渡したか、また圧縮、UV の割り当て、アルファのクリーンアップ、アトラスのパッキングなど、残っている作業を報告してください。

コメント