Stage01のイベント（コード解説編）

Stage01では、Stage01に入った時のイベントと招き猫を倒した時の二つが動きます。
まずはイベントの条件付けを置いているtick処理の部分から見ていきます。
入った時のイベントを"firstEvent"と名付け、主人公がタイルの６に位置し、
firstEventが未だ動いていないfalseの状態の時に、最初のイベントが起こります。
倒したときのイベントを"defeatEvent"と名付け、招き猫のlifeが0且つdefeatEventが未だ動いていない状態の時、このイベントが起こります。
またtick処理の内容上、イベントが上書きされてしまうので都度returnを入れて防いでいます。同時に、イベントをtickから外すことでイベント中にプレイヤーと敵の動きを止めて、イベントが起こったことをプレイヤーに知らせています。


次にeventpaintの内容ですが、グローバル変数にdialogueStepを0として置き、
eventpaint内での進行度を管理するのに使っています。
このイベントでは"handleDialogue(e)"を使って、スペースキーを押すと数値が足されて次のセリフに進むようになっていますが、最初のセリフは自動で始まるようにしたかったのでその中には入れていません。セリフを表示している枠などは"SetContext"関数内で、背景を灰色、文字を白色にして、位置に関しては手入力で地道に調整しています。（この作業どうにかならないものか...）右下に表示している"Skip"の文字は別で"SkipContext"関数を使って表示しています。これ以降もセリフは続きますが、長くなってしまうので割愛します。以上が簡単な解説です。
これ以降のステージでも同じ様な手順で進めていきます。




という訳で今回はこんな感じで終わります。
裏話をすると、最初のイベント中に「主人公を後ろに向かせて道が塞がっていることを確認する演出」と「最初はほぼ強制的にダメージを喰らい、戦わなくちゃいけないことを示唆する演習」を取り入れようとしていましたが、無事断念しまして今の形に落ち着いた所存です。物語的な導線はほぼ皆無ですが、謎めいた感じは前作も同じなので雰囲気は守れているので良しとします。
余談が長くなってしまいましたが本当に終わります。
次回はStage02のイベント紹介です。
お疲れさまでしたー。


参考文献

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

はじめに

イメージ
  自己紹介 東京経済大学の松井です。 今回から、ゼミの卒業研究として行うオリジナルプログラムの開発日誌をここに公開していきます。 この卒業研究では、 上に添付されているゲームを改造し、オリジナルプログラムを制作することが要件となっています。 そこで私は、前回作成した研究ノートのオリジナルプログラムを移植し、新たなゲーム性と完成度の向上を図っていこうと思います。 追記: あまりにもステージが簡素だったので、申し訳程度に地面を草として、周りを木で囲んで森のような雰囲気にしておきました。 ゲームとして完成させる時に、ここら辺のクオリティも上げたいですね。 前回作成したゲーム画面を一部貼っておきます。 このゲームのプログラムを開発してからかなりの期間が空いてしまっているので、プログラムの中身を殆ど覚えていないのが現状です。 なので、取り敢えずは復習するところから始めようと思っています。 正直、新しく完全に別のゲームにしようか今でも悩んでいますが、変に愛着がわいてしまったので、いける所まで行こうと思います。 移植するにあたっては、前回適当に書いた自分に恨みを持つことが多くなりそうですが、それも良い学習と捉えて取り組んでいこうと思います。 取り敢えず今回はこんな所で終わりたいと思います。 次回、どのようなアクション要素を取り入れるか、ストーリーとどう結びつけるかといった部分を練っていきます。 お疲れさまでした～。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/
続きを読む

主人公に歩行アニメーションを追加する

イメージ
 主人公が上下左右に動いても正面を向いたままだったので、 移動方向に合わせて主人公の見た目が変わるプログラムを追加しました。 前作でも導入していましたが、歩行用のプログラムが少し違ったので若干苦労しました。内容自体はシンプルで、元々"var imgplayer = document.getElementById("imgBoy");"という一つの画像しか描写しないようになっていた為、if文を使って"this.dir ==  -1"の時は"imgBoy_Left"を表示、即ち左に進んだときは左向きの画像を表示しています。 改良前: 改良後: ゲームの完成度という点ではなくてはならない要素だと思うので無事追加できて内心ホッとしています。 時間があれば、コマ送りに主人公が歩いているように見えるようにしたいとも考えています。 しかし、そうなると今回改良したプログラムをまた改良しないといけなそうなので二の足を踏んでしまっています。しばらくはトライしてみますが、期限も迫っているので完成させることを常に念頭に置きつつ進めてまいります。 という訳で今回は以上となります。お疲れさまでした。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/
続きを読む