応用編

応用編としてちょっと進んだ開発の進め方、開発におけるTipsを紹介します。

マップエディタ

マップエディタを使うとスモウルビー甲子園用の対戦マップを自作することができます。AIプログラムを開発するにあたっては、目的に応じた対戦マップを自作することで効率的に動作確認を進めることができます。

マップエディタを利用するには以下のURLにアクセスします。

• https://smalruby-koshien-web.netlab.jp/map_editor.html

アクセスすると上の画面が表示されます。画面左側のパレットから「地形」「アイテム」のパーツをマップ上にドラッグアンドドロップで配置していきます。また、配置したパーツをドラッグアンドドロップで移動することもできます。配置したパーツを削除するには、ドラッグアンドドロップでマップ外に移動します。カーソルが☓印になり選択したパーツが削除されます。

地形・アイテムの配置が完了したら「ダウンロード」ボタンをクリックします。JSON形式の対戦マップをダウンロードすることができます。また、以前に作成した対戦マップを編集したい場合は「読み込み」ボタンをクリックし、JSONファイルを選択します。選択すると、対戦マップの情報がロードされ編集可能となります。

テキストエディタでの編集

スモウルビーでのブロックを使ったプログラムの作成に慣れてきたら、テキストエディタを使ったプログラミングにチャレンジしてみましょう。より複雑で高度なAIプログラムを開発するには、プログラムコードをテキストエディタで編集する方が効率的です。

まずスモウルビーで作成していたプログラムをテキストファイルとして保存します。“スモウルビー甲子園”メニューの”AIに名前をつけて保存”を選択します。

コンピュータ上の任意のフォルダに保存してください。つづいてテキストエディタでこのファイルを編集していきます。

利用するテキストエディタは、OSにプリインストールされているエディタでもその他自分好みのエディタでも構いませんが、ここでは”Visual Studio Code”（以下VSCode）を紹介します。

• Visual Studio Code 公式サイト: https://code.visualstudio.com/

VSCode は世界中で最も使われているテキストエディタのひとつです。Windows/Mac/Linuxに対応しています。標準でRubyプログラムのシンタックスハイライトにも対応していてプログラミング初心者にも使いやすいエディタです。インストール手順等についてはここでは割愛します。

保存した*.rbファイルをVSCodeで開くと以下のように表示されます。

Sprite.new do 以降につづく部分がスモウルビー甲子園のキャラクタを動かすためのロジックになります。Rubyの公式ドキュメントやカスタムブロックを参照しつつ、この部分を編集しし自分独自のロジックを記述してみてください。

ロジックを記述したら、スモウルビー甲子園のゲームプレイヤーで実行し動作を確認してみましょう。

開発者ツール

プログラムの動作状況を確認する方法として、ブラウザの開発者ツールがあります。 例えば、プログラムのロード時や実行時にエラーが発生した場合、ゲーム画面ではエラーが発生したことはわかりますが、エラーの詳細情報は表示されません。そういったときはブラウザの開発者ツールをみることでAIプログラムの動作状況を確認することができます。

例えばGoogle Chromeの場合、以下のショートカットキーで開発者ツールを表示します。

• Windows / Chromebook … Ctrl + Shift + I
• MacOS … Command + Option + I

開発者ツールを開いた状態でスモウルビー甲子園の画面を開くと、コンソールに実行状況が出力されます。

プログラムのロード中または実行中にエラーが発生した場合はここにエラー内容が表示されます。また、プログラム中で標準出力に出力した内容はここに表示されます。ブログラムの動作の確認・デバッグなどに利用できます。

プレイヤーAIの自動ロード

AIプログラムの修正・実行を繰り返していると、毎回CONFIGダイアログで指定する操作が面倒になってきます。 スモウルビー甲子園のゲームプレイヤーは、URLにAIプログラムを指定することで起動時に自動的に指定されたAIプログラムをロードする仕組みがあります。

• https://smalruby-koshien-web.netlab.jp/index.html?player1={{AIプログラムのURL}}

上記のようにplayer1={{AIプログラムのURL}}というパラメータを指定するとプレイヤー1のAIプログラムを指定できます。パラメータ名をplayer2にするとプレイヤー2のAIプログラムを指定できます。{{AIプログラムのURL}}にはhttp://またはhttps://ではじまる*.rbファイルを配信するURL、またはdata:で始まる*.rbファイル自体をBase64エンコードした文字列を指定することができます。http://またはhttps://ではじまるURLを指定する場合、配信サーバ側でクロスオリジンリクエストを許可する設定が必要になります。

Live server

プレイヤーAIの自動ロード機能とVSCodeの拡張機能を組み合わせることで、プログラムの編集⇔反映・実行を効率化する方法を紹介します。

編集したファイルをウェブブラウザで閲覧するための拡張機能である「Live server」を利用します。Live serverのインストール方法については以下のページを参照ください。

• https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

空のフォルダを作成し、その中にAIプログラム(*.rb)を配置します。そしてVSCodeの”File”メニューより”Open Folder”を選択し、そのフォルダを開きます。 以下の状態となります（フォルダ名、ファイル名は一例です）。

この状態で、VSCodeの左下に表示された「Go Live」をクリックします。

ブラウザが起動しhttp://127.0.0.1:5500/が表示されます。 これで編集中のファイルを http://127.0.0.1:5500/{{あなたのプログラムファイル名}} としてダウンロードできるようになりました。 以下の例では、http://127.0.0.1:5500/koshien-project.rb というURLで編集中のファイルをダウンロードできます。

次に、クロスオリジンリクエストを許可するようにLiver serverの設定を変更します。クロスオリジンリクエストとはあるWebサービスから別のWebサービスに対してリクエストを送信することを指します。デフォルトではクロスオリジンリクエストはブロックされていますので、スモウルビー甲子園のドメイン(smalruby-koshien-web.netlab.jp)からのアクセスを許可するように設定を変更します。

VSCodeのメニューから [File] → [Preferences] → [Settings] を開きます。右上の 「Open Settings (JSON)」 アイコンをクリックして settings.json を開きます。

settings.json に以下を設定します。既に他の設定がある場合は JSON の末尾に追加します。

{
  "liveServer.settings.Cors": true
  "liveServer.settings.headers": {
    "Access-Control-Allow-Origin": "smalruby-koshien-web.netlab.jp"
  }
}

Live Server を停止し、再び起動します。これでスモウルビー甲子園からLive serverで配信するプログラムを読み込めるようになりました。

前述のプレイヤーAIの自動ロード機能をつかって、player1 に Live serverのURLを指定します。

• https://smalruby-koshien-web.netlab.jp/index.html?player1=http://127.0.0.1:5500/{{あなたのプログラムファイル名}}

{{あなたのプログラムファイル名}}を自身のRubyプログラムファイル名にして、URLにアクセスしてください。 自動的に開発中のプログラムがロードされます。 VSCode上でプログラムを編集した後、ブラウザを再読み込みすることで最新のプログラムをスモウルビー甲子園に読み込ませることができます。

設定ダイアログのリセット

スモウルビー甲子園のゲームプレイヤーは[CONFIG]ボタンで設定した内容を記憶して、次回表示する際のデフォルトとして設定内容を適用します。

しかし、設定内容によっては画面のロードでエラーが発生し、設定ダイアログの表示すらできない状態になることがあります。 設定ダイアログの表示ができなくなってしまった場合は、設定内容の強制リセットを行うことで初期状態に戻すことができます。

強制リセットを行うには clear=force というパラメータをつけてスモウルビー甲子園にアクセスします。

• https://smalruby-koshien-web.netlab.jp/index.html?clear=force

記憶された設定内容が初期状態に戻ります。

攻略法

ここではAIプログラムを改良していくための道筋を紹介します。

1. ルールブックをよく読む

   • スモウルビー甲子園のルールは単純ですが、それぞれの行動がどのくらいの加点・減点になるかを抑えておきます

2. より多くの得点を獲得する方法を考える

   • ゲームの特性上、トレードオフの関係にある行動の中でどれを選択するか考えます
   • 時間をかけてアイテムをとるべきか・早めにゴールに向かうべきか
   • 遠くの高得点アイテムをとるか・近くの小得点アイテムをたくさんとるか
   • 減点アイテムを避けていくべきか・減点アイテムを取りつつ近道するべきか
   • マップ全体の情報取得を優先するべきか・先に動き出すべきか

3. 考えた内容をプログラムとして実装する

4. ゲームで試す

5. 上記2-4を繰り返し、期待した動きになるまでプログラムを改良する

6. 別の対戦マップで試す

   • 対戦マップがかわると期待したとおりにキャラクタが動かないことがあります
   • 対戦マップによっては優先すべき戦略が変わってくることもあります

ここに紹介した以外にも、ダイナマイトの利用方法、相手プレイヤーの動きなどまだまだ考える要素はあります。 是非、より高度なAIプログラムに挑戦してみてください。