■ はじめに
前回、マップを拡大(16×16 → 32×32)にしたところ、ここまで使ってきたアスキーマップでは、かなり見づらくなってしまいました。
この改善のため、エージェントを動かすための論理マップと、GIFアニメのための表示マップに分けたいと思います。
今回は、表示マップの部分を変えていきます。
先ず、表示を変えるとして、
①どういうフォーマットをとるか？
②何を表示するか
ということを決める必要があります。
①についてば、これまでも言っていましたが、
GIFアニメを考えています。
本当は、mp4の方が圧縮率がいいのですが、扱いがむずかしいので最終的な出力にして、デバッグはgifファイルにします。
gifファイルの圧縮率の悪さは、表示をエージェントの周囲だけの表示だけにして対策します。
こうすることで描画を、32×32マップ全体ではなくエージェント周辺の7×7 マスだけにし、
・表示が見やすくなる
・GIFのサイズを小さくできる
というメリットを狙います。
■GIFアニメを作るために
表示用GIFアニメを作る方法は、
①オリジナルマップの任意の点(point_X)から周りのマップ(7×7)を作成
②point_Xの周りに人がいる場合
・未確認：ボヤケた人を表示
・確 認：くっきりとした人を表示
③point_Xにエージェントを表示
となり、これに向けてpngファイルを作っていきます。
この様な目的に使えるアプリはイロイロあるとは思いますが、2コマ漫画でIbispaintXを使っているので、これを使っていきます。
道・歩道や信号などは、ibisPaintXに使える画像があったので、それを使いました。
人やエージェントの絵は流石にないので、ChatGPTさんで元絵を作って縮小をかけています。
全部ChatGPTさんで済めば楽なのですが、ChatGPTさんは、1024×1024以下に出来なかったのでibisPaintXとの共同作業です。
ついでですか、ボヤケた人の表示はフィルタ処理のガウスぼかしを使いました。
■結果：
今回作ったアスキーマップの要素と、
そのPNGファイル対応は、次の通りになります。
【基本要素】
・道：◆
road.png
・横断歩道：＃
crosswalk.png
・歩道：・
sidewalk.png
・建物：■
building.png
【配送関係】
・配送所：受
delivery_center.png
・ポイントＡ：Ａ
point_A.png
・ポイントＢ：Ｂ
point_B.png
・ポイントＣ：Ｃ
point_C.png
【信号 方向と色】
信号は①と②の2つがあり、それぞれ赤信号、
黄信号、青信号を持つ。
・信号①：赤信号
signal_1_red.png
・信号①：黄信号
signal_1_yellow.png
・信号①：青信号
signal_1_blue.png
・信号②：赤信号
signal_2_red.png
・信号②：黄信号
signal_2_yellow.png
・信号②：青信号
signal_2_blue.png
【エージェント 方向】
エージェントは、東西南北の方向を持つ
・東向きエージェント
robot_E.png
・西向きエージェント
robot_W.png
・南向きエージェント
robot_S.png
・北向きエージェント
robot_N.png
【人 発見済】
人はエージェントに見つけられているか、いないかで○と◎の状態があるため、２つのpngファイルがある
・○：ボヤケた人影
A_blurry_person.png
・◎：くっきりした人
A_person.png
【表示安定】
マップサイズを超える、又は、負になるrow,colが表示部にある場合、
nothing.png を用いる
以上を、Google driveにdelivery_pngフォルダを作って上のファイルを入れておきます。
エージェント周囲マップを作るとき、Google Colabからアクセスします。
■ 今回の学び:
今回の学びは、「餅は餅屋」ですかね。
今回のpngファイルもpythonで縮小かけて勉強もするとか考えたんですけど、アプリを使うのが便利すぎて、
「勉強は、またでいいか」
と言う気分になってしまいました。
世の中には、ドット絵専用のアプリもありますのでそちらを試したい方はGoogle playとかでドット絵を調べると山のように出てきます。
■まとめ
今回は、表示用pngファイルを作ってみました。
これを、7×7個並べて表示用マップにすれば、表示部完成です。
これまでアスキーマップを動作制御と表示に使っていたので切り分けが大変です。
次回で表示用マップを作り、余力があったら、マップ分離にトライしたいと思います。
あ、今回バイブコーディングさえしてませんね。
まぁ、いいか。