投稿

Stage03及び04のイベント内容と変更点諸々

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

Stage02のイベント内容

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

Stage01のイベントの内容

イメージ
前回宣言した通り、今回は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からリセットするか、死んだ後もストーリーの一環として分岐させるかで悩んでいます。例えば、「最初と同じ場所に戻されている...」という風なセリフを吐かせて、御都合的に戻った訳ではなくそういう仕組みなのだとプレイヤーに理解させる為の演出を取り入れるかという事です。ゲームとしての完成度を上げる為には、絶対的に後者の方が良いはずと思いますが、未だプログラミング初心者の私は、フラグ管理が煩雑になってしまうのではないかと邪推してしまっているため、二の足要素と化しています。とりあえず、初めはリセットされて戻るだけの仕様にしておいて、時間がありそうならその仕様を取り入れようかとも 思っています。 その後はゲーム全体の完成度という面でやりたいことを幾つか行っていきます。 1つ目としては、敵MOBの歩行アニメーションの追加です。元々何故やっていなかったのか疑問ですが、ただ忘れていたのとそもそも歩行アニメーション用の画像がある奴限定なので、後回しにしていたというのが本音です。 しかし、見た目も変わらずただランダムに動いてる様子は違和感でしかないので、できれば改良したい部分です。 2つ目は、今作から導入した歩行アニメーションを前作にも取り入れることです。 ゲームとしては完全に繋がっているのに操作感が急に変わり、プレイヤーを混乱させてしまうのでできれば改善したい部分の1つです。 3つ目はStage04の難易度調整です。 作成した当初から難しすぎるかもしれないと思っていましたが、やっぱり難しい。 なので改善案を考えました。 モアイからの攻撃力が無くなる代わりに一度でも触れると定位置にプレイヤーが戻されるという仕様です。下の様に、プレイヤーが線を越えると丸の位置にチェックポイ...

Stage05

イメージ
  前回の宣言通り、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行目で移動中かどうかを判定し、動いているならアニメーションフレームに1を足して、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/