投稿

コマ送りで主人公を動かす

イメージ
前回でも触れていた、主人公の見た目をコマ送りで再生するプログラムが完成しましたので紹介します。といっても、その殆どはchatgpt大先生によるものですが、望むものを出力するのもかなり早くなり、成長を実感した瞬間でもありました。 分かりにくいですが、歩行アニメーションの様子を貼っておきます。 若干の違和感は残りますが、及第点といったところでしょう。 プログラムの内容を簡単に解説します。 まず、player関数にアニメーションフレーム用のメソッドを置いておき、63行目で移動中かどうかを判定し、動いているならアニメーションフレームに1を足して、70行目で4フレームごとに2枚の画像を切り替えるようにしています。それらを74~77行目で当てはめています。 プログラムの内容はこんな感じです。前回の研究ノートでやりたくても出来なかった部分だったので、内容自体は簡単でも達成感は凄かったです。 という訳で今回はこんな感じで終わろうと思います。 次回の更新内容が未定という大きな問題はありますが、とりあえず滞っている最後のステージ制作に取り掛かろうとは思っています。 以上、お疲れさまでしたー。 参考文献 田中賢一郎『ゲームで学ぶ 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/

Stage04

イメージ
 4つ目のマップとなる"Stage04"を作りました。 画像だと伝わりにくいですが、三色のモアイが上下に動いています。 通常色のモアイはとても遅く、たまに上下に動く程度です。青色のモアイは割と早く上下ランダムに動き続けています。両方動きの幅は1マスずつになっています。 赤色のモアイは岩にぶつかると方向転換するようになっているので、上下を行ったり来たりしています。 このモアイ達は、プレイヤーの攻撃が当たったか等の判定に使っている"attackcheck関数"は適用されておらず、プレイヤーはモアイを倒すこともノックバックさせることもできません。なのでプレイヤーは上手くモアイの網をかいくぐって進むしかありません。 それさえできれば次に進めます。シンプルですね。 赤いモアイのせいで正直かなり難しいマップになってしまったので、変更を加える可能性がかなり高いです。簡単にやり直せるストーリーイベントや、モアイから受けるダメージを無くして入り口に戻される仕様にするなど、今後の展開とも相談しながら、なにか策は打ちたいですね。 余談気味ですが、ここまで敵MOBの数が多いと、モアイや主人公の位置や体力を置くだけでもとても大変でした。以下に該当するコードを貼っておきます。 殆ど末尾の数字しか変わっていないのでAIなどを上手く使えばもっと効率的に行えていたのかと若干後悔しています。しかし、AIの使いどころを考えさせられる良い学びにもなったので、今後に繋げていこうと思っています。 少々長くなりましたが、今回はここら辺で終わろうと思います。 お疲れさまでした。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく!』インプレス, 2022 年 素材: ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

前作と繋げる

イメージ
今回は"Stage04"の紹介の予定でしたが、予定は未定という事で... 前作のオリジナルプログラムの終わりと今作を始まりを繋げたので紹介します。 といっても、前作の終わり方が洞窟の外に出てループする形だったので、 そのまま今作の森に繋げた感じです。 作業内容としては今作のhtmlファイルに飛ぶようにしただけですが、今後の展開やストーリーの根幹にも関わると思うので、重要な作業だったと思っています。 今回の作業では特にイベントは追加していませんが、「来た道が塞がってる...」というような台詞が自然かなとは考えています。 短いですが今回はこんな感じで終わろうと思います。 お疲れさまでした。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく!』インプレス, 2022 年 素材: ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

Stage03

イメージ
  予定通り今回はStage03の紹介をしていきます。 "Stage01"で登場したまねき猫が内側両サイドに2体、"Stage02"で登場した金&銀の女神像が外側に一体ずつ配置してあります。また、"Stage01"及び"Stage02"に登場していた時よりも少しだけ体力とスピードが上がっており、難易度も上がっています。 4体を倒すと、真っ直ぐ正面の木が消えて道が開き、"Stage04"に進みます。 本来このステージは"Stage04"とする予定でしたが、元々制作していた"Stage03"の制作が難航してしまったことと、想定していた難易度を遥かに超えてしまい、このステージを取り急ぎ制作し"Stage03"としました。 さて、短いですが今回はこんな感じで紹介は以上となります。 "Stage04"の制作はもう殆ど終わっているのですが、やはりもう少し難易度を下げるべきが未だに検討中です。 "Stage05"については特定の条件さえ気付けば簡単にクリアできるような仕様にしようと考えているのですが、面白いアイデアが思い付かず少し困っています... 取り敢えず、あまり無茶苦茶なことはせず、ストーリー性や世界観を壊さない程度のギミックボス的なものを目指します。 次回はStage04の紹介になると思います。お疲れさまでした。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく!』インプレス, 2022 年 素材: ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

Stage02

イメージ
  久しぶりです... 前回の研究ノートでの失敗を学ばず、 初回から相当な期間が空いてしまいました。 この期間に今後の構成諸々をある程度決め、制作自体もある程度進んだのでこれから数回に分けて更新していこうと思います。 こまめに更新する癖をそろそろつけたいところです。 はじめに今回作成したstage02を紹介します。 ステージに入ると金色の女神像と銀色の女神像が現れます。 (若干潰れていますが気にしないで下さい) 金色は移動が遅い代わりに、前回登場した招き猫の2倍の体力があります。 銀色は移動がとても速い代わりに、攻撃2回分の体力しかありません。 金色は丁寧にやれば簡単に倒せますが、あまりもたもたしていると銀色の女神像に轢かれてしまいます。 上手く2体を倒すとまっすぐ先の木が消えStage03に進むことができます。 プレイヤーが動ける範囲も前回より小さくして難易度を上げています。 このままステージ毎に難易度を上げていってしまうと最終的に鬼畜ゲームになり果てそうなので、工夫が必要な要素を取り入れて全体のバランスを調整していこうと思っています。 また、現状ではプレイヤーが移動しても正面を向いたままなので、前回作成した移動した方向にプレイヤーが向くプログラムをそのまま使いたいのですが、何故か上手くいかないので後回しにします。 プレイヤーの攻撃手段もいずれ拡張したいですねー ということで今回はこんなところで終わりにしたいと思います。 次回はstage03について取り上げる予定です。予定は未定(定期) 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく!』インプレス, 2022 年 素材: ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

はじめに

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