2024 ソフトウェア設計及び演習用の班Wiki

第1回は、班決めとソフトウェアの方向性を決めた。ソフトウェアはゲームであり、内容は2人で協力するゲームと暫定的に決まった。これから、さらに具体的な内容を決める必要があるため、班員の人とうまくコミュニケーションをとっていきたい。

授業の前半はHTMLの基礎を学び、GitLabの設定を行なった。後半では制作するゲームの具体的な内容についてグループで話し合った。ゲームのおおまかな流れが決まったため、次回はゲームの詳細について決定したい。

javascriptの基礎を学んだ。その後、班員同士でと「モノと操作」の洗い出しを行った。必要なモノを洗い出すために、製作予定のミニーゲームについて案を出し合った。班wikiに、モノと操作を書き込んだ。授業外の時間にプログラミングの勉強などを進めたい。

javascript応用編の授業を受けた。第3回で行ったモノと操作の洗い出しをさらに具体的にした。ミニゲームを10個ほど作る必要があるため、前回出し合ったミニゲーム案を、班員それぞれでゲームの仕様を考えた。私は一つしかゲームを考えていなかったため、新しいゲームを考えておく。

HTMLのスタイルを決めるCSSやGitLabの使い方、モジュール分けの説明を受けた。班活動では主にモジュール分けを行った。モジュール分けは誰も正解が分からないため、難儀した。しかし、意見を出し合って大まかなモジュール分けと担当を決めれたので、これから細かく内容を決めていきたい。

授業の前半ではenchant.jsの説明と、モジュール分けについて説明を受けた。後半のグループ活動では、前回決めたモジュール分担ごとにプロトタイプ作成を行った。他のhtmlファイルからミニゲームのhtmlファイルへ遷移し、ミニゲームが終了した後に元のhtmlファイルに戻るプログラムができた。

javascriptのデバッグ方法について授業を受けた。デバッグにはコンソールを用いて変数や配列の値を確認する、プログラムを途中まで実行するなどの方法があった。グループ活動ではそれぞれプロトタイプ作成を行った。私は、木こりのミニゲームのプロトタイプ作成をした。動きがない状態のゲーム画面ができたため、これから動きをつけていく。

中間発表に向けて、それぞれプロトタイプ作成を行った。プレーヤーなどのオブジェクトをクラスで定義した方が良いことを知り、JavaScriptのクラスについて調べた。分からない文法が多くあったため、授業外の時間に文法の学習をしていきたい。

中間発表が行われた。他の班の作品はDBを使っていたり、Googleアカウントからアプリにログインする機能や、自分の声の高さを解析する機能、個性のあるゲームなどがあり刺激になった。中間発表後、Gitlabのタグについて説明を受けた。班活動では、BGM、SEの自動再生について話し合った。htmlファイルを一つだけにする場合、使用するJSのライブラリを統一した方がいいと思い、enchant.jsについて調べた。

技術的内容では、Node.jsの特徴や使い方、WebSocketを用いた通信について授業を受けた。今回の主な目的は、再びモジュール分けを見直すことであった。班活動では、enchant.jsを使って、ゲームを作り直すことに決定した。私は今回までに、p5.jsで作っていたミニゲームモジュールをenchant.jsで書き換え、一つのhtmlファイルで動くゲームの簡単な大枠(start画面とminigame画面、result画面のみ）を作成した。採用はされなかったが、班の方針を決める材料になった。プログラムの構成はネットの記事に加え、23年12班のソースを参考にした。

モジュールの実装や単体でのテストについて授業を受けた。モジュール単体でテストをせずに統合をすると、バグの切り分けが難しくなるため単体テストは必須である。グループ活動ではそれぞれモジュール作成を行った。私は新しいミニゲームを作り始めた。実装できるか不安であるため、授業時間外でいろいろ調べたい。次回は仮統合を行うため、木こりのプログラムを統合用に書き換えてくる。

グループ開発ではそれぞれ、統合の準備をしてから仮統合を行った。内容の変更点はあるけれど、中間発表の状態から音がついたような状態となった。私は現在のミニゲームのキャラクターをスプライトシートで動かし、スコア設定について考えるなどの課題がある。また、新しいミニゲームについても開発を進める。

グループメンバーそれぞれで開発を行った。私は新しいミニゲームを引き続きコーディングした。マップにアイテムを追加したけれど、それを消す処理を実装することができなかった。7/21に統合を行うため、それまでに実装したい。

統合を行った。「きこる」では、キャラクターをスプライトシートで表示することで、動きをつけた。「まりお」では、先週できなかった処理を実装し、他にも様々な調整、SE,BGM実装,マップ作成（2つ)を行ってきた。第10回までに作ったゲームの大枠を使って、統合前に単体テストを行った。そのため、統合はスムーズにできた。

最終発表を行った。

• アピールポイント
  　私は、enchant.jsを導入することに貢献した。私たちのグループは中間発表後にゲーム全体をenchant.jsに書き換えた。それは、htmlファイルの遷移とAudio再生に問題があったからである。私は、12班のソースコードやネットで調べたenchant.jsのソースコードを元に、簡単なゲームの大枠を作成した。これによりAudio再生の問題を解決できた。最終的には、大晴班長に問題が解決できることを報告し、大晴班長が書いてきたソースコードを元に班の方針が決定された。私が書いたコードは使われなかったけれど、個人的にミニゲームモジュールの単体テストとして利用できた。中間発表から次の授業までの1週間にサンプルを作成してきたことで、班の方針を早く固めることができたと思う。
• プログラミングで工夫した点
  　ミニゲーム6では、工夫した点が2つある。1つ目は、ゲームに存在する状態を4つに分けたことである。状態は、操作が何もないとき、1pが木を切るのに成功したとき/しなかったとき、2pが木を切るのに成功したとき/しなかったとき。このように状態を分けることで、それぞれの状態が進行しているときは、他の状態に遷移しないようになっている。2つ目は、毛虫をランダムに生成することである。実際には毛虫は生成しておらず、毛虫のクラスから4つのインスタンスを作り、それを使いまわしている。どちらかが木を切るのに成功したとき、一番下にある毛虫を画面の上に移動し、そこで乱数(0か1)を与えることで、毛虫を左右ランダムに設定している。
  　ミニゲーム8では、工夫した点が3つある。1つ目はマップをmap[n][m]の配列で表現したことである。実際のmapを下に示す。このようにmapを定義し、2重のforループでmapの値を一つずつ読んでいく。mapの中の値が0のときは何も行わず、1のときは地面となるblockを配置する。2のときはプレイヤーを配置し、3のときはわんこそばを配置する。配置する位置と、mapの配列内の位置は一致しているため、値を変えるだけで直感的にマップを生成でき、マップサイズも自由である。そのため、マップは2つ作成し、開始時にランダムで選択している。
  
  　2つ目は当たり判定である。主なアルゴリズムは、blockとの当たり判定を、プレイヤーの位置にプレイヤーの現在の速度を足した位置で行うというものである。プレイヤーの座標とblockの座標だけでは、「当たった」ということは判定できるけれど、「どの方向から当たった」かは判定できない。そのため、プレイヤーの位置に現在の速度を足し、現在から少し進んだ位置で当たり判定を行っている。これにより、blockに当たった時、プレイヤーの現在の速度により衝突方向が分かる。
  　3つ目はわんこそばを消去するアルゴリズムである。わんこそばは、ステージのblockを格納している配列とは別に、わんこそばのみの配列を用意している。そして、わんこそばを生成するときに、配列の添え字を初期値としてコンストラクタに加える。わんこそばは、removeChild()によって画面から消すだけでは当たり判定のみがその場に残ってしまう。そのため、配列から.Splice()によって指定した番号のわんこそばを削除する必要がある。ここで、10個のわんこそばを生成した場合に、4番目のわんこそばを消去することを考える。4番目のわんこそばを配列から削除すると、配列の大きさは9となる。しかし削除しただけでは、4番目以降のわんこそばに最初に与えた番号が実際より1大きくなる。そのため、4番目以降のわんこそばの番号をデクリメントした。このように、配列添え字をわんこそばの初期値として与え、場合に応じてその値をデクリメントすることで、配列の大きさが変化してもわんこそばを一つずつ識別できるようにした。

fps:60

• きこる
  • 切るのに成功したとき、加算するスコア：2[間] (スコアはそのままstatus.scoreとして次のシーンに渡している)
  • 入力をしてから次の入力ができるまでの時間：8 or 15フレーム（木を切るのに成功/失敗）
• まりお
  • わんこそば1つ加算するスコア：1[わんこ] (status.scoreは1つのわんこそばで10加算)
  • 箸を添える時間：60フレーム
  • ロード時にマップをランダムで表示（2種類ある）