2025年度 電子情報通信課程 計算機実習II

講義に関して,ちょびっとコメント

口頭でお伝えします.

RPG風の画面を作ってみよう

素材について

いらすとやさんをもとに作成した素材は,以下の通りです.

  • ( chap6-mapfield.png )
  • ( chap6-mapgoal.png )
  • ( chap6-mapkey.png )
  • ( chap6-mapman.png )
  • ( chap6-mapwall.png )

名前をつけて保存して下さい.

地図データの作成

地図のデータを内部で用意する必要があります.

二次元配列を用いて,map_data[y][x]に数字で情報を保管します.

 ※実際に用意するのは課題10-3の部分です.

ジャンケンゲームと同様,情報を数字にします.ここでは以下のようにします.

  • 0 ... 道
  • 1 ... 岩
  • 2 ... ゴール
  • 3 ... 鍵

これらの値を扱う場合,ジャンケンの時のように変数名に置き換えても良いのですが, 二次元配列をそのまま地図に見立てた方がメンテナンスがし易くなりますので, ここでは数字のママの方が便利です.

 ※昔のフォントや画像はドットで描いており,16x16とか32x32でした. 色も8色とか16色しかなかったため,同様に配列変数に格納する形でドット絵の情報を扱っていました. 慣れてくると,その16x16の数字の並びを見ただけで,絵が浮かび上がって見えてきたものです.

課題 10-1

教科書§6-1,pp.172-173「ウィンドウを作成する」のchap6.py を入力して実行しましょう.

マップの画像の読み込み

実際に地図をコードで書きましょう.教科書p.175「マップデータを用意する」を読み,chap6.py を更新しましょう.

地図に用いる画像を準備します.今まで画像データは1ファイル=1変数で対応させていました. 今回は変数を配列変数として扱います.

画像の生データが0から3の数字ですので,その数字をそのまま利用して画像表示を行うことができます.

images[0] → 道,images[1] → 岩,images[2] → ゴール,images[3] → 鍵 となります.

ついでに主人公の画像も読み込んでおきましょう.そのため,4が主人公の番号となります.

課題 10-2

教科書pp.173-175「マップに表示する画像を読み込む」を読み,p.174のchap6.py に従って更新しましょう.

マップの設定

画面に表示する画像の準備ができたので,その配置情報であるマップ( 地図 )を作成しましょう.

2次元マップなので,xとyの2重ループが必要です( yが外側でxを内側に使うことが多い ).

単なる配列変数だけを用意すると,地図のサイズが分からないので,その情報を変数として残しましょう. 地図を描くときのループに必要となります.

課題 10-3

教科書pp.175-177「マップデータを用意する」等を読み, p.175とp.176に従ってchap6.py を更新しましょう.

主人公の設定

次は主人公を配置しましょう.

主人公の座標を扱う変数を用意し,地図を書いた後にその座標に主人公の画像を貼り付けます.

※今回はこのような描き方で問題はありませんが,スクロール型のRPGなどを作るときにこの方法を使うと, 主人公の座標は「地図の情報を描いた後に主人公の画像で上書きする」という二度書きをしてしまうため, そのまま表示すると主人公付近の画像がちらつく原因になります.

※実際のゲームでは,画面用のメモリを2つ用意し,表示用と描画用に分け, 描画用メモリは作業中には表示しないことで,ちらつきを回避します

課題 10-4

教科書pp.177-178「マップ上に主人公を表示する」を読み,chap6.py を更新しましょう.マップ上に主人公が表示されましたか?

ボタンの設定

主人公を動かすためのボタンを設置しましょう.

4方向への移動が必要ですので,4つのボタン( 「↑」,「→」,「↓」,「←」 )を用意します.

ボタンの設置そのものは,三回目「テキストボックス,ボタンの追加」 で行っていますので,忘れた人は復習して下さい.

ボタンを配置し,押されたときの関数を用意しましょう.

すでに配置した画像の場所を変える( 移動する )には,coords関数を用います.

課題 10-5

教科書pp.179-182( 上の続き )を読み,chap6.py を更新しましょう. ボタンを押して主人公が動きましたか?全部のボタンを押して意図通りに動くか確認しましょう.

この段階では障害物をチェックしていないので岩の上でも画面の外でも移動できてしまいます.これを以下のように確認します.

  • 10-5-1) 主人公を画面の外へ移動させてみましょう.四方向,試してみて,動作結果を報告しなさい.

    ※どんな描画になったか?エラーは出た?等

  • 10-5-2) 10-5-1)で主人公が画面外に出た時,プログラム内部で座標の値はどうなるかを説明しなさい.

移動範囲の制限

課題10-5にも書きましたが,今のままでは移動先の状態チェック( 障害物/壁の有無 )をしていません. 移動時に「そこに移動できるかどうか」をチェックして,問題ないときだけ移動( 値を変更 )する必要があります.

状態チェックは四方向全てに必要ですが,全方向について同じコードを書くのは効率悪いですね. チェック用の関数を用意してそれを呼び出す形を取りましょう.

チェックの内容は,移動先が「マップの範囲内か否か」と「岩か否か」ですね.

 ※アイデアの一つとして,マップの外枠を岩で囲んでしまえば,マップ範囲チェックを省略して岩チェックだけで済みます.ただし,マップデザインの段階で万が一岩の切れ目が存在すれば,即バグになります.

課題 10-6

教科書§6-2,pp.183-185「移動範囲を制限する」を読み,chap6.py を更新しましょう.障害物の扱いは大丈夫でしょうか.

その上で,以下の課題に取り組みなさい.

  • 10-6-1) このチェック方式を応用し,「岩の画像だけど通ることができる場所を1箇所」作ります. これにはどうすればよいかを説明しなさい.必要ならソースコードを提示して構いません. ※ただし座標値で判定するのは禁止します.
  • 10-6-2) その逆のパターンで「道の画像だけど通ることができない場所を1箇所」作ります. どうすればよいかを考えて説明しなさい.必要ならソースコードを提示して構いません. ※ただし座標値で判定するのは禁止します.

★ヒント★「岩/道の画像はそのままで状態異常のマス=隠し通路/隠し壁を作る」と考えましょう.

本日の課題

提出が必要な課題は課題10-5,10-6です.

課題10-1,10-2,10-3,10-4 は必ず入力・実行してください.

  • 課題をmanabaのレポート欄「第10回課題」に提出して下さい.
  • 直接書き込む「オンライン入力方式」です.
  • 冒頭には「誰へ」「学籍・氏名」「挨拶一言」「要約:どの課題に答えたか」を文章として書きます.
  • 実習時間内に終わらなかった場合,締切は「次回の実習開始( 金曜 9:15 )まで」です.
※注意※

◎しっかり課題文を読み,「何をどう答えるべきか」を把握して下さい.

◎manaba入力画面には時間制限があります.いったんPCのエディタでテキストファイルを作成してから,それをコピーするようにしてください.その際のファイル名は自由ですがわかりやすいものを.特にプログラムのソースファイルと混同しないように注意しましょう.

◎実行画面,ソースコード,エラーメッセージ等は"----"や"====="等の境界線を入れて「ここから」「ここまで」を明確にして下さい.

◎ひとまとまりの回答の前後には空行を入れて読みやすくして下さい.びっしり書かれているとチェック/評価の際の間違いの原因になります.

◎提出前にもう一度,冷静に読み直して下さい.細かい部分でも訂正があれば手をかけて下さい.