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

企画書に近いゲームを作る

ゲーム外進行系

モジュールの仕様について 自分の作ったスタート、曲選択のモジュールは基本的には、引数はいらず、曲選択のシーンから曲情報を渡し、難易度シーンからは曲情報と難易度情報を渡す仕様になっている。ただ統合した時、他のモジュールで、キーボードの設定が邪魔をして、曲と難易度を決め、ゲームをプレイし、もう一回曲選択に戻る時に上手くいかなかったため、シーンごとに番号を決めてその番号ならシーンを画面に表示するといった仕様にしたため、曲選択・難易度シーンで、その番号を引数として受け取るようにしている。

簡易企画書について作成するものの方向性について大体決めれたと思う。

企画書でゲームの大まかな部分は決めれたと思う。HTMLとJavascriptを使う際Emacsを使ってもできることが分かった。ターミナルで「firefox HTML」のようにするとできる。

先生とTAとの確認でまだまだわかりづらいところがあることが分かった。大体の方向性は決まっているので、自分たちの考えていることをしっかりと書き起こす必要があることが分かった。enchant.jsの使いかたは第4回を参照にするとよい。Atomというエディタを使う際第4回のインストールするとよいもののインストールも忘れずに。

大体のモジュールを分けることが出来た。

自分のモジュールの係が決まった。画面遷移系の関数、曲データと難易度データの格納及びリターンの関数を目標に作る予定である。

班長が来なくなったことによりモジュールの再分配が行われた。javascriptとHTMLの作り方がわからないので、調べながらモジュールの作成を試みているがまだまだ完成には程遠い感じがする。

画面の遷移はjavascriptのwindow.open関数を使えば出来そうなのでそれを使おうと考えている。ただ、タイトル画面からの遷移を考えているいるのだが、新しいウィンドウで開くので、タイトル画面のウィンドウが残ってしまうのでそれを消したいのだけど、firefoxでは消せないので、違う関数を探したりしている。中間発表には間に合わなそうである。

他の班は結構形になっていて、頑張ろうと思った。班で新しくモジュールを分けた。自分はタイトル画面と曲選択画面の担当になった。他の班の人と比べるとやはり、ちゃんとHTMLやjavascriptに関して知らないことが多そうだと思ったので、再度勉強をしなくてはと考えている。

タイトル画面に動きを加えようとcssとかウェブの背景の動作について調べてみたがよくわからなかった。サンプルコードを使って動作するかどうかを確かめても思うように動作しなかったり行き詰まりを感じている状況である。もっと基礎的なところから勉強しないとダメなのだと分かった。

タイトル画面に動作を加えることは諦めて、JSファイルによってしっかり遷移の動作をするのかを調べていた。ウェブで探しても思ったようなものが無いことがしばしば在り、進歩があまりなかったが、それでもｊｓファイルでの画像の表示はdocument.writeを使えば良いことが分かったので、良かったと思う。次の回では進歩が見られるようにしたい。

タイトル画面については、今までのを使うことにした。曲選択の画面の作成に移った。cssを使って画面を２分割し、かつその分割した片方の画面だけを動かそうとした時に、split-box　right/left-boxを使うと画面を２分割できることが分かったので、良かった。これなら思ったような動きが出来そうだ。しかし、cssにキーボードによる動きが調べている限りでは出来そうではなく、クリックでの動きしか出来そうにない。もう少し調べてやる必要が出てきた。 キーボードの動きができればこのままできるので、頑張って調べて行きたい。

cssでのキーボードの操作についていくら調べても出てこないので、cssではなくenchant.jsで曲選択画面を作ることにした。enchant.jsについてはまだ授業で聞いたことしか知らず、また時間が経っていたからできるような気がしないので、まず調べることからすることにした。ドットインストールでenchant.jsについて調べたが、とても分かり易く、１２本の動画で軽くenchant.jsを使えるようになった。初めは、くまで色々と動作できるようになり、そこから少しずつプログラムを変えて曲選択の画面を作ろうと思う。

曲選択の雛形は出来たので、それをcssと組み合わせれば、考えていた通りの動きが出来そうだと試してみたが、うまく行かなかった。cssとenchantの読み込みの順序が関係しているのは明白だったが、htmlの読み込みの順序を変えても出来なかったので、もしかしたらenchantとそのとき使っていたcssの相性が悪かったのだと思う。どうすればいいのかわからなくなった。このままでは、完成させることが出来そうにない。

色々と試している時に、sceneを使ってできるようにしたいとゆう提案があり、シーンについて調べてみて、シーンを使えば思ったような動作ができると思い、試してみたらうまく言った。画像の切り替えによって画面の分割をできているように見せれるので、これなら思ったような動きになったので、良かった。core.keybindとaddEventListenerのenterframeを使ってエンターキーを使ったシーンの切り替えを行うことが出来た。これでうまく動作したので、良かった。唯、addEventListernerのイベントがenterframeだとエンターキーを長押しすると一気に画面が切り替わるので、そこを修正する為にフレーム数を下げて、軽く押せばできるようになったので、とりあえずはこのままで行きたいを思う。

仕様と統合の関係上、自分が使っていたフレームでは、出来ないことが判明。今まで、フレーム数を１５でやっていたが、フレームは最低３０でやるとのこと。 これだとエンターキーを本当に一瞬で押さなければ、思ったような動きにならないので、enterframeを使えない様になった。addEventListenerのabuttondownを使うことにした。このとき、enterframeを使った書き方でやるとうまくいかなかったので、ここでとても手間取りました。abuttondownを使う際は、core.addEventListenerやscene.addEventListenerの様に書き方を変えないと行けないので、注意が必要になります。またenterframeを使っているときは、addEventListenerの中に、if(core.input.a)の様な書き方をしていましたが、これをabuttondownを使うときは、使ってはいけ無いことが分からなかったため、ここで躓いていました。と言うのもif(core.input.a)はaに設定されているキー入力があると、ifの内容を行うと言ったもので、abuttondownもaに設定されているキーが押された時と言う意味で、これらがひとつのaddEventListenerのなかに入っていると、思ったように動きません。なので、使う際は、気をつけなければなりません。またこのabuttondownやif(core.input.a)のようなものを使う際にはcore.keybindを使ってキーとアルファベットをを結び付けなければならないのですが、他のモジュールの中にも使っている人がいる場合は、その使うキーかアルファベットがかぶっていないかを確認しないと統合するときに、思ったような動きをしないようになります。この使う変数とかは、事前に話し合っていなければならないので、注意が必要になります。また統合をするにあたり、欲しい引数や渡す変数の形なども話し合わないといけないのが統合をするときに分かったので、良かったです。モジュールごとのつながりが少ないほうが良いというのがここから分かったような気がします。色々と学ぶことが出来たので、良かったです。