キャラクターを1枚絵で用意する

なぜ要るか

3章まででゲームは遊べています。数字だけの画面でも、ちゃんと勝ったり負けたりします。

ここからは見た目です。理由は単純で、キャラがいると相手が「誰か」になるからです。数字と勝負しているのと、忍者と勝負しているのでは、遊んだ後の記憶が違います。

そして絵は、1枚あれば足ります。 立ち絵1枚でゲームは変わります。何十枚も用意する話ではありません。

使う道具: Codex の画像生成、sprite-transparency

AIプロンプト

この術の作業をAIへ任せるときは、これをそのまま貼ってください。

見本ゲーム三つの的の、手合わせ相手として使う、ちびキャラの少女忍者の1枚絵。
夜の里を守る口寄せ使い。藍色のショートボブに紙のお守りの髪飾り、
白と藍の忍装束に金色の帯、手に小さな巻物。アニメ調。

正面向き、全身、持ち物は巻物だけ（刀や手裏剣は持たせない）
flat solid #ff00ff background, no gradient, no shadow, no glow, no outline
clean bold outlines, flat cel shading, chunky shapes, no fine loose hair strands, no thin lines
髪は太い塊として描く。細い毛束や後れ毛を描かない
被写体はキャンバスの縁に接しない
サイズ 1024x1024、文字は入れない

保存先: koyori-magenta.png

冒頭の3行はこよりの設定なので、自分の意味表から引いた設定に置き換えてください。

キャラは世界観から作ります

「絵が描けない」「キャラを考えられない」で止まる人が多いところです。どちらも要りません。 絵はAIが描きます。そして設定は、2-6の意味表がもう書いてくれています。

このゲームの対戦相手はこよりという少女忍者です。設定は意味表から引きました。

キャラを考える時間は、ほぼゼロでした。2-6で世界観を先に作ったのは、ここで効かせるためです。 白紙から「どんな見た目にしよう」と悩む代わりに、表から引くだけで決まります。

既存のキャラを借りる道もあります

IPとは、そのキャラや作品にひもづく権利のことです。使ってよい範囲は権利を持つ側が決めていて、それを公開しているIPもあります。

オリジナルを立てたくない場合は、許されているIPを借りる道があります。たとえば CryptoNinja は、二次創作・商用が歓迎されているIPで、42人分の設定と公式イラストが公開されています。「この絵のキャラで」と参照画像をAIに渡せば、造形も安定します。

ただし借りる場合は、そのIPの公式ガイドラインを必ず見てください。 「使っていいか」に答えられない素材は、9-3で書くとおり、人に見せられません。オリジナルで作る場合も、生成AIサービス側の利用規約（作った絵を商用に使えるか）の確認は同じく必要です。

ゲームに使う絵は「素材」として頼む

ここが普通の画像生成と違うところです。きれいな絵ではなく、ゲームに置ける絵を頼みます。

違いはこの4点です。

いちばん効くのは背景の指定です。ここだけは先に決めてください。あとで直すのが一番面倒な部分だからです。

背景は「透過」で作ります

背景の決め方には2つの道があります。

道Aは最短です。ゲームの背景が #101820 なら絵の背景もその色にすれば、置くだけで溶けます。切り抜き作業がゼロで済みます。

でも、これは後で必ず詰まります。 背景を変えた瞬間に、キャラの周りに四角い枠が出ます。夜の場面から昼の場面へ移せない。別のゲームへ持っていけない。その1色専用の絵になります。

だから道Bを推します。 透過しておけば、どんな背景の上でも置けます。工程が1つ増えるだけです。

そして、濃い色を背景にして作ると透過が難しくなります。 黒っぽい背景は、キャラの黒い髪や黒い装束と見分けが付きません。抜こうとすると髪まで一緒に消えます。

透過のやり方 ── クロマキー

映画やテレビの合成と同じ考え方です。「絶対に被写体に含まれない色」で背景を塗って、あとでその色を抜く。 その色をキー色と呼びます。

1. キー色を選ぶ

ここを間違えると、キャラの一部が一緒に消えます。

こよりは藍と白と金なので、緑でもマゼンタでも抜けます。この講座ではマゼンタで作りました。迷ったら「キャラに絶対含まれない蛍光色」を選んでください。

2. キー色の背景で生成する

cd my-first-game
codex exec "見本ゲーム三つの的の、手合わせ相手として使う、ちびキャラの少女忍者の1枚絵。
夜の里を守る口寄せ使い。藍色のショートボブに紙のお守りの髪飾り、
白と藍の忍装束に金色の帯、手に小さな巻物。アニメ調。

正面向き、全身、持ち物は巻物だけ（刀や手裏剣は持たせない）
flat solid #ff00ff background, no gradient, no shadow, no glow, no outline
clean bold outlines, flat cel shading, chunky shapes, no fine loose hair strands, no thin lines
髪は太い塊として描く。細い毛束や後れ毛を描かない
被写体はキャンバスの縁に接しない
サイズ 1024x1024、文字は入れない

保存先: koyori-magenta.png"

うまくいけば、いまいるフォルダに koyori-magenta.png ができます。開くと、マゼンタ一色の背景にキャラが立っているはずです。その背景を次の手順で抜きます。

冒頭の3行は、2-6の意味表をそのまま文にしたものです。長いですが、どの行にも理由があります。

• no gradient, no shadow, no glow: 背景にグラデーションや影が入ると、単色でなくなって抜けません
• chunky shapes, no fine loose hair strands: 細い毛束は、背景色と混ざった中間色で描かれます。抜いたあとキー色がうっすら残る原因の第1位です。太い塊で描かせれば起きません
• 持ち物は巻物だけ: 小物は形が崩れやすく、増やすほど縁も汚れます。世界観に効く1つだけに絞ります
• 縁に接しない: 端に接していると、切り出しと縁の検査ができません

3. キー色を抜く

ここで自作しないでください。 ImageMagick の -transparent のような単純な色置換だと、輪郭にキー色の縁が残ります。縮小するとキー色が復活することもあります。

出来合いの処理を使います。僕は透過処理をひとまとめにした道具を使っていて、やることは1行です。

python3 keyout.py --input koyori-magenta.png --out char.png --max-height 512

--input が元にする絵、--out が書き出し先の名前、--max-height が高さの上限です。実行すると、背景が透明になった char.png が新しくできます。元の koyori-magenta.png はそのまま残るので、失敗しても作り直せます。

やっていることは4つです。この4つが入っていない処理は使わないでください。

--max-height 512 は事前縮小です。px（ピクセル）は絵を作っている点の数を数える単位で、512pxなら縦に512個の点が並ぶ大きさになります。画面での表示が240pxなら、その2倍くらいまで先に縮めておきます。表示のときに大きく縮めると輪郭がガビガビになるためです。

抜く前と後がこれです。

右の市松模様が「透明」を表す模様です。この状態になっていれば、どんな背景の上にも置けます。

4. 抜けたか確認する

目で見て「抜けた」で終わらせないでください。白い背景と黒い背景の両方に置いて確認します。

• 白の上 → キー色や灰色の縁が残っていないか
• 黒の上 → キャラの周りがにじんでいないか

僕は数値でも確認しています。残っているキー色の画素（絵を作っている点1つ）の数、半透明になっている割合、細い線の割合。この3つが基準内なら合格にしています。

片方の背景でしか確認しないと見落とします。 白では見えない縁が、黒では光って見えることがあります。

やってみる

1. キャラの設定を3行で書く

   2-6の意味表から引いて、見た目・小道具・色を3行にまとめます。上のコマンドの冒頭3行がその形です。表に無い要素を足したくなったら、まず意味表に戻ってください。

2. キー色の背景で生成する

   上のコマンドをそのまま使ってください。

3. キー色を抜く

   python3 keyout.py --input koyori-magenta.png --out char.png --max-height 512
   

4. できた絵を見る

   透過したものがこれです。

   

   この絵は背景が透明なので、この記事の紙の色がそのまま透けています。 それが透過できている証拠です。

5. 気になるところを直させる

   1回で気に入るとは限りません。捨てずに直します。

   codex exec "koyori-magenta.png の目をもう少し大きくして、koyori-magenta.png を上書きして。"
   

   直したらもう一度抜き直します。 抜いたあとの char.png を直すのではなく、キー色背景の元データを直すのが順番です。

6. ゲームのフォルダに置いて保存する

   char.png が index.html と同じフォルダにあることを確かめてください。同じ場所に無いと、次の術で絵を表示できません。 置き場所を確かめたら記録に残します。

   git add .
   git commit -m "対戦相手のキャラクターの絵を用意した"
   git push
   

1ファイル構成が崩れます（想定どおり）

3-2で「1ファイルで完結させる」と決めました。ここで画像が増えるので、ファイルは2つになります。

index.html
char.png

これは想定どおりです。3-2でこう書きました。

絵を入れたくなったら4章で扱います。そのときは画像ファイルが増えますが、
遊べる形を崩さない範囲で足します。

大事なのは、まだサーバーが要らないことです。index.html と char.png を同じフォルダに置いてダブルクリックすれば動きます。人に渡すときは2つ送ればいい、それだけの違いです。

つまずきどころ

輪郭にキー色の縁が残る

抜き方が単純すぎます。-transparent のような色置換1発では必ず残ります。soft-matte と despill が入った処理を使ってください。

それでも残る場合は、輪郭を1px内側へ削る指定（--edge-contract 1）を足します。

キャラの一部が一緒に消えた

キー色がキャラに含まれています。キー色を変えて作り直すのが最善です。 緑の衣装ならマゼンタ、という具合に。抜き方の調整で粘るより速いです。

キャラ全体がうっすらキー色っぽい

生成の段階で混ざっています。細い毛束が原因のことが多いです。プロンプトに「太い塊で描く」「細い毛束を描かない」を入れて作り直してください。

背景をグレーや白で作ってしまった

無彩色の背景は普通のやり方では抜けません。キャラの影や白い小物と区別が付かないためです。

救済する手はありますが、作り直した方が速いです。 これは僕も一度やって、余計な手間を1時間払いました。

顔が斜めを向いてしまった

「正面向き」を強めに書いてください。それでも斜めになるなら「真正面、カメラを見ている」と書き足します。向きは画面に並べるときに効くので、ここは妥協しない方が楽です。

思ったキャラと違う

参照画像を渡していないか、参照が弱いです。公式イラストを渡して「参照の造形と配色を変えない」と書き添えてください。

上手い絵にならない

上手い絵は要りません。画面に置ける絵が要ります。判定は「ゲームに置いて浮かないか」だけです。

Windows の場合

codex exec の使い方は同じです。コマンド内の引用符は半角にしてください。

透過処理は Python なので、Windows でも同じコマンドで動きます。python3 が無い場合は python に読み替えてください。

Claude Code で進めたい場合

画像生成は付いていないので、絵の工程だけは別の道具になります。Nano Banana などの画像生成サービスで作って、koyori-magenta.png としてフォルダに置けば、以降は同じように進められます。

大事なのはファイル名と置き場所だけです。作り方は問いません。

会員の方へ

上で使った透過処理の道具（キー色の自動推定・soft-matte・despill・アルファブリード・数値検証をひとまとめにしたもの）は、成果物置き場から受け取れます。

自分で書くと、縁の色残りとキー色の復活で必ず一度は転びます。そこは僕が転んだ分を使ってください。

次の一歩

できた絵を、いちどゲームの画面と並べて見てください。 まだ組み込まなくて構いません。index.html を開いて、隣に char.png を開くだけです。

浮いていなければ合格です。次の術から、この絵を動かしていきます！

ここまでの三つの的

この講座は、見本ゲーム「三つの的」を術ごとにすこしずつ育てながら進みます。下にあるのはこの術を終えた時点の実物です。そのまま遊べます。

別の画面でこのゲームを開く