卒業研究

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の難易度調整です。 作成した当初から難しすぎるかもしれないと思っていましたが、やっぱり難しい。 なので改善案を考えました。 モアイからの攻撃力が無くなる代わりに一度でも触れると定位置にプレイヤーが戻されるという仕様です。下の様に、プレイヤーが線を越えると丸の位置にチェックポイ...

  前回の宣言通り、Stage05を制作しました。 最後のステージにしては淡泊ですが、新たに紫色のモアイと主人公と全く同じ見た目の敵 が出てくるので、とりわけ異質なステージとなっています。 灰色、赤モアイは前ステージ同様倒すことが出来ず、明らかにボス的な見た目の主人公の偽物(？)も倒すことが出来ず、横にいる紫色のモアイが唯一倒すことが出来ます。紫モアイは10回叩く必要があり、他の敵をよけながらの攻撃になるのでそこそこ難しいです。 ストーリー的には、この紫モアイを倒すことによって森から出ることができて、結末に向かうようにしようと考えています。その辺のフラグ処理は未だ手を付けていませんが、ステージがある程度完成したので、これから一気に物語としての肉付けを行っていきます。 ちなみにこの主人公の偽物ですが、プレイヤー同様にコマ送りのアニメーションで動くようにしてあります。 少し紹介します。 新たにPlayer_Copyクラスを用意して、プレイヤーと同様に"animFrame"をアニメ用に使い、プレイヤーと同じアニメーションを動かす為に使っていたpaint()の内容をそのまま使っています。 前回あまり理解せず動かしていた為に、余計なエラーと何回も戦う羽目になりました。 という感じで今回は終わりたいと思います。 次回は自分の為の整理整頓も兼ねて、これから行っていきたいことや悩んでいること等を話す回にしようかなと思っています。(予定は未定) それではまた次回、お疲れさまでした。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

前回でも触れていた、主人公の見た目をコマ送りで再生するプログラムが完成しましたので紹介します。といっても、その殆どはchatgpt大先生によるものですが、望むものを出力するのもかなり早くなり、成長を実感した瞬間でもありました。 分かりにくいですが、歩行アニメーションの様子を貼っておきます。 若干の違和感は残りますが、及第点といったところでしょう。 プログラムの内容を簡単に解説します。 まず、player関数にアニメーションフレーム用のメソッドを置いておき、63行目で移動中かどうかを判定し、動いているならアニメーションフレームに１を足して、70行目で4フレームごとに2枚の画像を切り替えるようにしています。それらを74～77行目で当てはめています。 プログラムの内容はこんな感じです。前回の研究ノートでやりたくても出来なかった部分だったので、内容自体は簡単でも達成感は凄かったです。 という訳で今回はこんな感じで終わろうと思います。 次回の更新内容が未定という大きな問題はありますが、とりあえず滞っているStage5の制作に取り掛かろうとは思っています。 以上、お疲れさまでしたー。 追記：コマ送りアニメーションの動きが見辛かったので、setIntervalの値を30から40に上げて動きを少しゆっくりにしました。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/