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

 主人公が上下左右に動いても正面を向いたままだったので、
移動方向に合わせて主人公の見た目が変わるプログラムを追加しました。





前作でも導入していましたが、歩行用のプログラムが少し違ったので若干苦労しました。内容自体はシンプルで、元々"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/




コメント

コメントを投稿

このブログの人気の投稿

今後やりたいこと、懸念点など

イメージ
という訳で整理整頓回です。長くなりますがご容赦ください。 まず、次回から行っていくことを話していきます。 前回でも触れましたが、ステージが完成したので主人公のステージ毎のセリフ、そのフラグ付けを行っていきます。その際にストーリーに関わる考察要素や、物語的終着点などを考えながら作業を進めていきます。 その後、プレイヤーが死んだ時に出る"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/
続きを読む