以前作ったターンバトル風のIllustratorスクリプトを、生成AIで改造しました。

元のスクリプトは、「たたかう」「にげる」を選ぶだけのシンプルな戦闘画面です。

今回はそこに、ドット絵風のマップ移動、地形ごとの通行判定、ランダムエンカウント、戦闘後にマップへ戻る処理を追加しました。

もちろん、一度の指示で完成したわけではありません。

通れないはずの山に入れたり、戦闘後にUIが戻らなかったり、ドキュメントを閉じたあとにエラーが出たり。

実際に動かして確認しながら、生成AIへ修正指示を出して、少しずつ形にしていきました。

この記事では、改造前後で何が変わったのか。
どこでつまずき、どう直していったのかをまとめます。

ーProfileー
Illustrator歴15年以上のデザイナー。
本ブログでは、Illustratorスクリプトの活用や、DTP作業を楽にする業務効率化の方法を発信しています。
生成AIを使ったIllustratorスクリプトの作り方については、
[スクリプトを生成AIで作る方法]もあわせてご覧ください。

改造前と改造後の違いをすぐ見たい方は、下記からスクリプトをダウンロードできます。

ZIPファイルには、改造前の戦闘スクリプトと、生成AIで改造したマップ移動付きスクリプトを入れています。

改造前は、戦闘画面だけのシンプルな作りです。

改造後は、マップ移動、ランダムエンカウント、戦闘画面への切り替えまで追加しています。

スクリプトは、新規ドキュメントを作成して動きます。

実行前には、作業中のIllustratorデータを保存してください。
念のため、ほかの作業データは閉じてから試すのがおすすめです。

ほかのIllustratorスクリプトも試したい方は、
無料で使えるIllustratorスクリプト一覧 も確認できます。

項目	内容
対応アプリ	Adobe Illustrator
動作確認バージョン	Illustrator CC 2024
対応OS	Mac / Windows
配布形式	ZIP
収録ファイル	改造前.jsx / 改造後.jsx
注意点	古いIllustratorバージョンでは未確認

スクリプトが実行できない場合は、
Illustratorスクリプトが動かないときの確認方法 も参考にしてください。

ここからは、改造前と改造後で何が変わったのかを見ていきます。

改造前は戦闘だけ

改造前のスクリプトは、戦闘画面だけで完結する作りでした。

画面にモンスターを表示し、こちらのHPと敵のHPを見ながら、「たたかう」「にげる」を選びます。

Illustrator上で図形やテキストを動かし、ゲームっぽい画面を作る練習としては十分でした。

ただ、ゲームの流れとして見ると、まだ戦闘だけです。

• マップを歩く。
• 敵と出会う。
• 戦闘が終わったら元の場所へ戻る。

こうした動きは入っていません。

あくまで、戦闘部分だけを切り出したスクリプトでした。

改造後はマップ付き

改造後は、戦闘だけではなく、マップ移動から戦闘までつながる形に変えました。

ドット絵風のマップを作り、主人公を上下左右に動かせるようにしています。

さらに、草原や森を歩くと、ランダムで敵が出ます。

敵と遭遇したら戦闘画面へ切り替わり、戦闘が終わるとマップへ戻る流れです。

項目	改造前	改造後
画面	戦闘画面のみ	マップ画面＋戦闘画面
操作	たたかう・にげる	移動＋戦闘
ゲーム性	戦闘だけ	探索・遭遇・戦闘
AIで追加した部分	なし	マップ移動・通行判定・復帰処理

こうして比べると、生成AIで追加したのは見た目だけではありません。

「戦闘だけのスクリプト」を、マップから戦闘へつながる流れに作り替えた。
ここが一番大きな違いです。

マップ移動のプロンプト

最初に作ったのは、主人公がマップ上を移動する仕組みです。

改造前のスクリプトには、戦闘画面しかありません。

そこで生成AIに、Illustrator上にドット絵風のマップを描き、主人公を上下左右に動かせるように依頼しました。

実際には、次のように指示しています。

Illustrator上で、ドット絵風のRPGマップを作成し、主人公を上下左右に移動できるスクリプトを作成してください。
水、山、城には入れないようにし、草原、森、道は通れるようにしてください。

この段階では、見た目の細かさよりも「歩けること」を優先しました。

ボタンを押したら1マス動くか。
通れる場所と通れない場所を分けられるか。

まずは、そこを確認しています。

通行判定を修正

マップ移動ができても、最初から思い通りには動きませんでした。

• 森は通れるようにしたい。
• 山は通れないようにしたい。
• 右側の山も通れないようにしたい。
• 下側の草原は通れるようにしたい。

実際に動かしてみると、地形ごとの移動可否を何度も直す必要がありました。

ここは、生成AIにかなり具体的に伝えた方が直しやすかった部分です。

「なんとなく移動がおかしい」では、修正内容がぼやけます。

それよりも、

「この場所は通れる」
「ここは通れない」

というように、場所ごとに分けて伝える方がスムーズでした。

ランダムエンカウントを追加

マップを歩けるようになったら、次は敵との遭遇を追加しました。

最初は、敵が出たらアラートで「モンスターがあらわれた！」と表示するだけにしています。

いきなり戦闘画面へつなげると、どこで不具合が出たのか分かりにくくなるからです。

まずは、移動中にエンカウント判定が動くかを確認しました。

生成AIには、次のように指示しています。

主人公が1マス移動するたびに、一定確率で敵と遭遇する処理を追加してください。
草原は18%、森は25%、道は6%のように、地形ごとにエンカウント率を変えてください。

草原、森、道で確率を変えると、少しゲームらしい動きになります。

ここまでで、マップを歩いて敵と出会うところまでは形になりました。

次は、このエンカウントを改造前の戦闘スクリプトにつなげます。

戦闘スクリプトを統合

マップ上で敵と遭遇できるようになったので、次は戦闘画面へつなげました。

ここで使ったのが、改造前に作っていたターンバトル風スクリプトです。

もともとは、戦闘画面だけで完結する内容でした。

今回はそれを、マップ移動スクリプトの中に組み込みました。

生成AIには、次のように指示しています。

エンカウントが発生したら、別で作成した戦闘スクリプトを起動するようにしてください。
戦闘画面では「たたかう」「にげる」を選べるようにし、戦闘中はマップ移動UIを操作できないようにしてください。

この修正で、マップを歩いて敵と遭遇し、戦闘画面へ切り替わる流れができました。

ただ、画面を切り替えるだけなら、まだそこまで難しくありません。

大変だったのは、戦闘が終わったあとに、元のマップへ安全に戻す処理でした。

戦闘後にマップへ戻す

戦闘には、いくつかの終わり方があります。

• 敵を倒して勝つ場合。
• 「にげる」が成功する場合。
• HPが0になってゲームオーバーになる場合

この3つを同じように処理すると、動きがおかしくなります。

そこで、終わり方ごとに処理を分けました。

勝利したときは、戦闘終了メッセージを表示します。

そのあと「マップに戻る」ボタンを出し、戦闘ドキュメントを閉じます。

逃走に成功したときも、戦闘画面を閉じてマップへ戻します。

ゲームオーバーの場合は、戦闘ドキュメントとマップドキュメントの両方を閉じる流れにしました。

この部分は、次のように指示しています。

戦闘終了後に、マップ画面へ戻れるように修正してください。
敵を倒した場合と逃走成功時は、戦闘ドキュメントを閉じて、元のマップドキュメントをアクティブに戻してください。

ここで気をつけたのは、マップ上の主人公の位置を残すことです。

戦闘が終わるたびに最初からやり直しになると、ゲームの流れが切れてしまいます。

マップへ戻ったあとも、続きから動かせるようにする必要がありました。

there is no documentを修正

戦闘後の処理では、何度かエラーも出ました。

特に困ったのが、ゲームオーバー時の there is no document というエラーです。

原因は、ドキュメントを閉じたあとに、まだ処理が続いていたことでした。

たとえば、閉じたあとのドキュメントに対して app.redraw() が走る。
または、すでに存在しないオブジェクトを操作しようとする。

こうなると、Illustrator側でエラーになります。

このときは、エラー内容をそのまま生成AIに伝えました。

戦闘終了後またはゲームオーバー後に、「there is no document」というエラーが発生します。
ドキュメントを閉じた後に app.redraw() やオブジェクト操作が走らないように修正してください。

その結果、戦闘終了後の処理を止めるフラグを追加しました。

ゲームオーバー後は、余計な処理が走らないようにガードも入れています。

また、ドキュメントを閉じる処理は関数にまとめました。

こうすることで、勝利、逃走、ゲームオーバーのどの場合でも、処理が重なりにくくなります。

マップから戦闘へ行くより、戦闘後に安全に戻す方が大変でした。

ここまで直して、ようやく

「歩く → 敵に出会う → 戦う → マップに戻る」

という流れになりました。

移動UIの不具合を修正

戦闘画面との連携ができても、まだ問題は残っていました。

特に困ったのが、移動UIの復帰です。

戦闘が終わってマップへ戻っても、移動用のボタンが表示されないことがありました。

そこで、マップドキュメントをアクティブにしてから、UIを戻す処理を追加しました。

ところが、その修正後に、今度は移動UIが二重に表示される問題が出ます。

ここは少しややこしかったです。

最初は、戦闘中にUIを閉じて、戻るときに作り直していました。

ただ、この方法だとタイミングによってUIが2つ出てしまいます。

最終的には、戦闘中はUIを画面外へ退避させる形にしました。

マップへ戻るときに、元の位置へ戻します。

「消して作り直す」より、「一時的に隠して戻す」方が安定しました。

戦闘画面の描画を軽量化

次に気になったのが、戦闘画面の重さです。

戦闘画面を1280×800に合わせたあと、背景を5ptドットで描画すると、表示がかなり重くなりました。

背景だけで、約4万個の四角形を作る計算になります。

見た目は細かくなりますが、Illustrator上では負荷が大きすぎます。

そこで、背景とモンスターでドットサイズを分けました。

var BATTLE_BG_DOT = 10;
var BATTLE_MONSTER_DOT = 5;

背景は10ptで軽く描画します。

モンスターは5ptのままにして、細かさを残しました。

これで、見た目を大きく崩さずに、戦闘画面の表示を少し軽くできました。

長いコードを整理

生成AIで機能を足していくと、コードはどんどん長くなります。

今回も、マップ移動、戦闘、UI、エラー処理を追加していくうちに、かなり読みにくくなりました。

そのため、最後にコード整理も行っています。

具体的には、コメントや空行を減らし、重複していた関数をまとめました。

使っていないモンスター名リストも削除しています。

さらに、色指定はRGBに統一しました。

途中まではCMYKとRGBが混ざっていたため、あとから見返したときに分かりにくかったからです。

最終的には、不要な処理を削りながら、約31.8％コードを減らしました。

作って終わりではなく、動きやすく、読み返しやすい形に整える。

そこまでやって、ようやく完成版に近づきました。

今回は、以前作ったターンバトル風のIllustratorスクリプトを、生成AIで改造した流れを紹介しました。

改造前は、戦闘画面だけのシンプルなスクリプトです。

そこから、マップ移動、通行判定、ランダムエンカウント、戦闘画面への切り替え、戦闘後のマップ復帰まで追加しました。

流れだけ見ると簡単そうに見えます。

でも実際は、一度で完成したわけではありません。

• 通れる地形と通れない地形を直す。
• 戦闘後にUIが戻らない問題を修正する。
• ドキュメントを閉じたあとのエラーを抑える。

動かして確認しながら、何度も生成AIに修正指示を出しました。

今回の改造は、ざっくり分けると次の流れです。

* まず動くものを作る
* エラーを潰す
* 見た目を整える
* 処理を軽くする
* コードを整理する

生成AIは、自作したスクリプトを育てる相棒になります。

ただ、仕事や副業にも使える形にしていくなら、作りたい動きを整理する力や、エラーの原因を伝える力も必要です。

生成AIを独学で使い続けるか、体系的に学ぶか迷っている方は、
生成AIスクールは必要？独学で十分な人・受講を検討すべき人 も参考にしてください。

一人で学んでいて何度もつまずく場合は、学び方や使うツールを見直してみるのも一つの方法です。