2024年度 電子情報通信課程 計算機実習II
講義に関して，ちょびっとコメント
今日の説明動画
本日の説明は，6本の動画に分かれています．それぞれ視聴して，理解ができたら次に進むようにして下さい．
動画の長さは次の通りです．自分のペースで進めながらも，1コマで終わるように頑張ってください．
- 計算機実習2／計算機基礎実習2-10回目ex10-1 - 04分56秒
- 計算機実習2／計算機基礎実習2-10回目ex10-2 - 02分25秒
- 計算機実習2／計算機基礎実習2-10回目ex10-3 - 02分44秒
- 計算機実習2／計算機基礎実習2-10回目ex10-4 - 02分21秒
- 計算機実習2／計算機基礎実習2-10回目ex10-5 - 02分41秒
- 計算機実習2／計算機基礎実習2-10回目ex10-6 - 05分26秒 計 20分33秒
レポートの採点状況は，こちらです．
RPG風の画面を作ってみよう
素材について
いらすとやさんをもとに作成した素材は，
，
，
，
，
です．名前をつけて保存して下さい．
地図データの作成
地図のデータを内部で用意する必要があります．
二次元配列を用いて，map_data[y][x]に数字で情報を保管します．
※実際に用意するのは課題10-3の部分です．
ジャンケンゲームと同様，情報を数字にします．ここでは，0 ... 道，1 ... 岩，2 ... ゴール，3 ... 鍵 です．
ジャンケンの時のように変数名に置き換えても良いのですが，二次元配列をそのまま地図に見立てた方がメンテナンスがし易くなりますので，ここでは数字のママの方が便利です．
※昔のフォントや画像はドットで描いており，16x16とか32x32でした．
色も8色とか16色しかなかったため，同様に配列変数に格納する形でドット絵の情報を扱っていました．慣れてくると，その16x16の数字の並びを見ただけで，絵が浮かび上がって見えてきたものです．
課題 10-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を更新しましょう．ボタンを押したら主人公が動きましたか？
- 全部のボタンを押して，正しく動いているか確認しましょう．
- ※今は障害物のチェックをしていませんので，岩に乗ることができます．また，画面の外にも移動できてしまいます．
- 主人公を画面の外へ移動させてみましょう．四方向，試してみて，どのようになったか（どんな描画になったか，それともエラーが出るのか）を報告して下さい．
- 4. の時に内部的にはどのように扱われているのか（つまり，座標の変数の値はどうなっているのか）を説明して下さい．
移動範囲の制限
課題10-5にも書きましたが，今のままでは移動先のチェックをしていません．
移動時に「移動できるかどうか」をチェックして，問題ないときだけ値を変更する必要があります．
四方向全てにおいてチェックが必要ですが，それぞれでチェックのプログラムを書くのではなく，チェック用の関数を用意してそれを呼び出す形を取ります．
その際に，範囲内か否かのチェックだけでなく，移動先が岩か否かのチェックも行うことで，画面外だけでなく岩への乗り上げも防ぐことができます．
※マップの外枠を岩で囲むことで，移動範囲内のチェックを省略することもできます．ただし，万が一岩の切れ目が存在すると，大変なことが起こります．
課題 10-6
- 教科書pp.183-185を読み，chap6.pyを更新しましょう．障害物の扱いは大丈夫でしょうか．
- このチェック方式を工夫すると「岩の画像だけど通ることができる場所」というのも作ることができます．そのようにするにはどうしたらよいか考えて説明しなさい．
- また，その逆のパターンとして「道の画像だけど通ることができない場所」というのも作ることができます．そのようにするにはどうしたらよいか考えて説明しなさい．
- なお，上記2つは，「新たにそういう変な状態のマス」を作ることを考えて下さい。つまり，現在の「岩」とか「道」はそのままにした上で，隠し通路／隠し壁を作るという感じです．
今日の課題
上記の課題10-1，10-2，10-3，10-4，10-5，10-6です．
提出が必要なのは，10-5の「範囲外の動作確認」と，10-6の「通れる岩」「透明な岩」の課題です．
課題はメールで提出して下さい．
件名はreport10，アドレスはcom02@elec.ryukoku.ac.jp です．
締切は，「翌週水曜日が終わるまで（今回は12月4日中の提出がセーフ）」です．
※動画は2020年度に撮影したので日付が異なっています．ご注意を！
いらすとやさんをもとに作成した素材は，
，
，
，
，
です．名前をつけて保存して下さい．
地図のデータを内部で用意する必要があります．
二次元配列を用いて，map_data[y][x]に数字で情報を保管します．
※実際に用意するのは課題10-3の部分です．
ジャンケンゲームと同様，情報を数字にします．ここでは，0 ... 道，1 ... 岩，2 ... ゴール，3 ... 鍵 です．
ジャンケンの時のように変数名に置き換えても良いのですが，二次元配列をそのまま地図に見立てた方がメンテナンスがし易くなりますので，ここでは数字のママの方が便利です．
※昔のフォントや画像はドットで描いており，16x16とか32x32でした． 色も8色とか16色しかなかったため，同様に配列変数に格納する形でドット絵の情報を扱っていました．慣れてくると，その16x16の数字の並びを見ただけで，絵が浮かび上がって見えてきたものです．
課題 10-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を更新しましょう．ボタンを押したら主人公が動きましたか？
- 全部のボタンを押して，正しく動いているか確認しましょう．
- ※今は障害物のチェックをしていませんので，岩に乗ることができます．また，画面の外にも移動できてしまいます．
- 主人公を画面の外へ移動させてみましょう．四方向，試してみて，どのようになったか（どんな描画になったか，それともエラーが出るのか）を報告して下さい．
- 4. の時に内部的にはどのように扱われているのか（つまり，座標の変数の値はどうなっているのか）を説明して下さい．
課題10-5にも書きましたが，今のままでは移動先のチェックをしていません．
移動時に「移動できるかどうか」をチェックして，問題ないときだけ値を変更する必要があります．
四方向全てにおいてチェックが必要ですが，それぞれでチェックのプログラムを書くのではなく，チェック用の関数を用意してそれを呼び出す形を取ります．
その際に，範囲内か否かのチェックだけでなく，移動先が岩か否かのチェックも行うことで，画面外だけでなく岩への乗り上げも防ぐことができます．
※マップの外枠を岩で囲むことで，移動範囲内のチェックを省略することもできます．ただし，万が一岩の切れ目が存在すると，大変なことが起こります．
課題 10-6
- 教科書pp.183-185を読み，chap6.pyを更新しましょう．障害物の扱いは大丈夫でしょうか．
- このチェック方式を工夫すると「岩の画像だけど通ることができる場所」というのも作ることができます．そのようにするにはどうしたらよいか考えて説明しなさい．
- また，その逆のパターンとして「道の画像だけど通ることができない場所」というのも作ることができます．そのようにするにはどうしたらよいか考えて説明しなさい．
- なお，上記2つは，「新たにそういう変な状態のマス」を作ることを考えて下さい。つまり，現在の「岩」とか「道」はそのままにした上で，隠し通路／隠し壁を作るという感じです．
上記の課題10-1，10-2，10-3，10-4，10-5，10-6です．
提出が必要なのは，10-5の「範囲外の動作確認」と，10-6の「通れる岩」「透明な岩」の課題です．
課題はメールで提出して下さい．
件名はreport10，アドレスはcom02@elec.ryukoku.ac.jp です．
締切は，「翌週水曜日が終わるまで（今回は12月4日中の提出がセーフ）」です．
※動画は2020年度に撮影したので日付が異なっています．ご注意を！