卒業研究

あけましておめでとうございます。 期間が空きまして、気付いたら2026年になってしまいました。 Stage05のイベント内容に加え、作品としての落としどころの構想と模索を行っていました。 さて、Stage05のイベント内容から見ていきましょう。 とはいえ、Stage05は最後のイベントへの導入なので簡単に紹介するに留めます。 始まり： クリア後： 紫色のモアイを倒した後、全ての敵が消えて道が開けるようにしました。 セリフが表示されている間、主人公の偽物がどうしても消えないというバグ(？)が残りましたが、セリフが終わったらちゃんと消えるので妥協とします。 続けて最後のエリア(Stage00)の紹介に入ります。 Stage05を抜けると辺りを花に囲まれた1本の枯れ木があるエリアに遷移します。 枯れ木に近づくと最後のセリフイベントが始まり、何かを思い出したような台詞を言い残してタイトル画面に戻ります。 これまでのステージは簡素なデザインをしていましたが、最後のステージは敵がいないのでその分見栄えを少しアップデートしました。Stage01~05も手の込んだステージにしたかったのですが、様々な懸念から断念しました。 前回の投稿から幾つか細かい修正を行いましたが、細かすぎるのと数が多くて自分でも把握しきれていないので省かせていただきます。 差し当たって、ゲーム制作に関する投稿は今回で最後となる見込みです。 やっぱりどうしても紹介したい内容、ゲーム進行に関わる大きな変更点があれば別途紹介します。 という訳で今回はこんな感じで終わります。 長いようで短かった制作ですが、おそらく次回でラストとなります。 よろしければ最後までお付き合いくださいませ。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

まずはStage03、04のイベント内容です。 前回同様、プログラム自体はほぼ変わらないので幾つかのシーンのみの簡単な紹介となります。 Stage04に関しては敵を倒す必要がない(というか倒せない)ので、 ある地点まで進むことが出来たらイベントが発生するようになっています。 Stage03: Stage04: 抜粋ですがこんな感じです。 また、前回までは複数回敵に触れられると画面にGAME OVERと表示されて、ゲーム自体が終了してしまう仕様でしたが、全体的な難易度も鑑みて、それを無くしてステージ自体を再読み込みしてリセットする仕様に変更しました。変更に伴い、Stage01でプレイヤーがやられると、死んだ時用のセリフが出るようにもしました。欲を言えばステージ全体でプレイヤーが初めて倒された時にのみ出るセリフにしたかったのですが、ステージ毎に別でhtmlファイルを使っているので、その情報を同期させることが難しかったです。 挙動としてはこんな感じです。 Stage01の仕様を実現させるために、Stage01はStage01.html、Stage01(revived).html、Stage01(revived2).htmlの３つのhtmlファイルを使っています。Stage01.htmlでプレイヤーが倒されるとStage01(revived).htmlに飛び、セリフイベントが発生します。ここで更にプレイヤーが倒されてしまった場合の為に、セリフも全く無く独立して循環するStage01(revived2).htmlに飛ぶようになっています。 こんな感じで、初めてプレイヤーが倒された時のみ出るセリフイベントを作っています。確実にもっと良いやり方があるのだろうと思いますが、試行錯誤の結果なのでご容赦を。 今回はここまで。 前回の投稿から少し期間は空いてしまいましたが、Stage3・4のイベント内容と全体的な仕様の見直しに時間がかかってしまいました。 次回はいよいよ最後のステージと物語的帰着までを作っていきます。期限も残りあと僅かなので悔いの残らぬよう、満足する所まで持っていけるよう最後まで作っていきます。 それではお疲れさまでしたー。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+C...

 という訳で今回はStage02のイベント内容の紹介です。 と言っても、基本的なプログラムは前回と同じで内容だけが変わっています。 なので、簡単な紹介のみとしたいと思います。 前回同様、ステージに入って一歩進むとイベントが始まり、プレイヤーと敵は動けなくなります。セリフを最後まで進めると自動でイベントが終わり、敵もプレイヤーも動けるようになります。 欲を言うと、もっと演出を加えたイベントの始め方をしたいのですが、いつかの宿題とします。 こちらも前回同様、全ての敵を倒すと次のイベントが始まり、会話を最後まで進めるとイベントが終わり、次のステージへ進めるようになります。 ここで、プレイヤーはある程度の操作に慣れてくるはずなので、これ以降難易度が上がっていきます。 プログラムの内容は前回とほぼ同じなので省略します。 という訳で、短いですが今回は終わります。 次回はStage03のイベント内容についてですが、特にStage01及び02とセリフ以外は殆ど変わらないのでStage03は今回よりも更に簡単な紹介に抑えて、Stage04もまとめて紹介しようかなと思っています。 安定の予定は未定という事で... お疲れさまでしたー 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

Stage01では、Stage01に入った時のイベントと招き猫を倒した時の二つが動きます。 まずはイベントの条件付けを置いているtick処理の部分から見ていきます。 入った時のイベントを"firstEvent"と名付け、主人公がタイルの６に位置し、 firstEventが未だ動いていないfalseの状態の時に、最初のイベントが起こります。 倒したときのイベントを"defeatEvent"と名付け、招き猫のlifeが0且つdefeatEventが未だ動いていない状態の時、このイベントが起こります。 またtick処理の内容上、イベントが上書きされてしまうので都度returnを入れて防いでいます。同時に、イベントをtickから外すことでイベント中にプレイヤーと敵の動きを止めて、イベントが起こったことをプレイヤーに知らせています。 次にeventpaintの内容ですが、グローバル変数にdialogueStepを0として置き、 eventpaint内での進行度を管理するのに使っています。 このイベントでは"handleDialogue(e)"を使って、スペースキーを押すと数値が足されて次のセリフに進むようになっていますが、最初のセリフは自動で始まるようにしたかったのでその中には入れていません。セリフを表示している枠などは"SetContext"関数内で、背景を灰色、文字を白色にして、位置に関しては手入力で地道に調整しています。（この作業どうにかならないものか...）右下に表示している"Skip"の文字は別で"SkipContext"関数を使って表示しています。 これ以降もセリフは続きますが、長くなってしまうので割愛します。以上が簡単な解説です。 これ以降のステージでも同じ様な手順で進めていきます。 という訳で今回はこんな感じで終わります。 裏話をすると、最初のイベント中に「主人公を後ろに向かせて道が塞がっていることを確認する演出」と「最初はほぼ強制的にダメージを喰らい、戦わなくちゃいけないことを示唆する演習」を取り入れようとしていましたが、無事断念しまして今の形に落ち着いた所存です。物語的な導線はほぼ皆無ですが、謎めいた感じは前作も同じなので雰囲気は守れてい...

前回宣言した通り、今回はStage01で発生するイベントの紹介をしていきます。 Stage01のおさらいですが、プレイヤーがStage01に入ると目の前に招き猫の様な物が動いています。 そこから1歩進むことでイベントが始まります。 イベントが始まると、招き猫の動きが止まり、プレイヤーも操作することが出来なくなります。 スペースキーを押すことでセリフが進み、本作の重要部分であるアクション要素、攻撃によって倒すという流れを作っています。 5つ目のセリフを終えると自動でイベントが終わり、招き猫が動き出してプレイヤーも動けるようになります。 招き猫にツルハシを3回当てると奥の道が開き、自動で次のイベントが始まり、これを終えると次のマップ"Stage02"に行くことが出来ます。 画像だけで少し長くなってしまったので今回はここまで。次回、コードの方を解説していきたいと思います。今回のイベントを作るだけでも、多くの失敗と妥協を重ねたのでその点も含めて話せたらなと思っています。 という訳で次回は「Stage01のイベント（コード解説編）」です。 お疲れさまでした。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

という訳で整理整頓回です。長くなりますがご容赦ください。 まず、次回から行っていくことを話していきます。 前回でも触れましたが、ステージが完成したので主人公のステージ毎のセリフ、そのフラグ付けを行っていきます。その際にストーリーに関わる考察要素や、物語的終着点などを考えながら作業を進めていきます。 その後、プレイヤーが死んだ時に出る"GAME OVER"という表記を無くして、Stage01に戻る仕様に変更します。（難しすぎたら調整するかもです） その際の懸念点として、フラグ等のゲームの状態をStage01からリセットするか、死んだ後もストーリーの一環として分岐させるかで悩んでいます。例えば、「最初と同じ場所に戻されている...」という風なセリフを吐かせて、御都合的に戻った訳ではなくそういう仕組みなのだとプレイヤーに理解させる為の演出を取り入れるかという事です。ゲームとしての完成度を上げる為には、絶対的に後者の方が良いはずと思いますが、未だプログラミング初心者の私は、フラグ管理が煩雑になってしまうのではないかと邪推してしまっているため、二の足要素と化しています。とりあえず、初めはリセットされて戻るだけの仕様にしておいて、時間がありそうならその仕様を取り入れようかとも 思っています。 その後はゲーム全体の完成度という面でやりたいことを幾つか行っていきます。 １つ目としては、敵MOBの歩行アニメーションの追加です。元々何故やっていなかったのか疑問ですが、ただ忘れていたのとそもそも歩行アニメーション用の画像がある奴限定なので、後回しにしていたというのが本音です。 しかし、見た目も変わらずただランダムに動いてる様子は違和感でしかないので、できれば改良したい部分です。 ２つ目は、今作から導入した歩行アニメーションを前作にも取り入れることです。 ゲームとしては完全に繋がっているのに操作感が急に変わり、プレイヤーを混乱させてしまうのでできれば改善したい部分の1つです。 ３つ目はStage04の難易度調整です。 作成した当初から難しすぎるかもしれないと思っていましたが、やっぱり難しい。 なので改善案を考えました。 モアイからの攻撃力が無くなる代わりに一度でも触れると定位置にプレイヤーが戻されるという仕様です。下の様に、プレイヤーが線を越えると丸の位置にチェックポイ...