「シューティング」ゲームが完成しました!

3年ほど前にプログラミングの学習に挫折して、2回目のプログラミングへのチャレンジで、「シューティングゲームを作ってみたい」と思い、ここ1か月ほど作成に取り組んでいたのですが、やっと完成にたどり着くことができました。

最後に作成に取り組んだ「当たり判定処理」がかなり難関だったのですが、友人にアドバイスをもらいながら、1日ごとに少しずつ作成を進めていきました。

「当たり判定」の抜け穴とは?

最後に、「難しい処理」だとは知っていたのですが、「当たり判定」の実装に取り組んでいきました。

「敵とミサイル」が当たった時の判定処理を作っていったのですが、どうやって作ればいいのか初めは全然わからなかったので、いろいろと調べていきました。

「円」で判定すると良いと聞いて、その中で必要なのが、「座標値」を元にした計算処理です。

「ミサイルの中心点」と「敵の中心点」から、その間の距離を計算し判定するという方法だったのですが、プログラムで行おうとするとかなりハードルが上がってしまい、なかなか思った結果が出ず、最初はほとんど前に進みませんでした。

見た目的にあきらかに当たっていないのに、敵が消滅したり、敵がワープしたりとか、変な現象がたくさん出てきて「当たり判定」以外の問題もたくさん出てきました。

「1つだけしかないと思っていた問題が、後からたくさん出てくるパターン」ってプログラミングをしていると、わりと頻繁に遭遇します。

今回の「シューティング」ゲーム作成では、調べている時間の方が圧倒的に多く、プログラミングをしているというよりはほとんど勉強の時間でした。

厳密な判定処理は今の自分のスキルレベルでは難しかったので、最終的には、かなり「甘い当たり判定」になっています。

グラフィックの「稚拙さ」の改善

一番最初に作成した「ロケット」がかなり「稚拙」なイラストだったので、ここも何とか最後に改善していきました。

と言っても、デザインはセンスも経験も全く無いので、ここも勉強しながら「自機イラスト」の作成に取り組んでいきました。

「背景」についても最初は「真っ黒」な背景だったのですが、「宇宙だからって真っ黒ってのいうのは味気ないよね~」って指摘を受けたので、宇宙観のあるイラストに差し替えました。

ゲームは、「デザインはあまりゲームの楽しさには影響しない」と思っていたのですが、「ゲームに対するデザインの影響力」はかなり大きいことがわかりました。

自機のイラストを変更しただけでもかなり印象が変わります。

あと、スコアの表示についても「フレームデザイン」を取り入れることで、よりゲームっぽいデザインになりました。

一番初めのデザインは、下図のようなもので、「子供のお絵かき」みたいなデザインでした。

デザイン改善前_シューティングゲーム

デザインの改善を試みたものが、下図のものですが、印象がかなり違いますね。

「自機のデザイン」と「背景」を変えただけなのですが、それとなくシューティングゲームっぽいデザインになっています。

デザイン改善後_シューティングゲーム

ということで、プログラミングに加えて「デザイン」も今後の学習対象に加わることになりました。

学校での「美術」の成績は5段階評価で「2」とかだったので、もしかしたら、プログラミングよりデザインの方が習得が大変なのかもしれません(^^;)

「コンピュータグラフィックス」は2D以外にも3Dの描画技術も、今後3Dアプリを作るためには必要なスキルとなりそうです。

シューティングゲームの「3Dプログラミング」

この先の展望として「シューティングゲームの3D化」を考えているのですが、いろいろと調べていると、なかなか難しそうな内容がたくさん見つかりました。

まず、Javascriptで3Dを描くためには「WEB GL」と呼ばれる技術が必要とのこと。

でも、この技術がかなり難しくて、サンプルプログラムを読んでも、まったく理解ができませんでした。

さらにいろいろと調べていくと、「WEB GL」を利用するためには「Three.js」というものがあるらしく、これを利用していくのがスタンダードになりつつあるみたいです。

プログラムの内容は「WEB GL」ほどではないですが、自分で書くにはまだまだスキル不足です。

インターネット上にはさまざまな「Three.js」を元にしたプログラムが公開されているので、これらを読んでいくことでもかなり勉強になりそうです。

「衝突判定」なども2Dよりかなり難しそうなので、「ゲームエンジン」「物理エンジン」のようなソフトウェアを利用した方が良いのかもしれません。

「2D」と「3D」の違いについても学んでいかないといけないので、まだまだたくさん勉強しないといけないことがあります。

今回作成した「シューティングゲーム」は、下記リンクからプレイできますので、ぜひ遊んでみてください(^^)

→「シューティングゲーム」

→「シューティングゲームのプログラム(ソースコード)」

これからもいろいろなプログラムの作成にチャレンジしていきたいと思いますので、作成できたものはどんどん公開していきたいと思います。

→「Twitter:@satoru78888」

→「YouTube:サトルチャンネル」

HOMEへ