ゲームの基本的な動作やエフェクトなどのソースコードを検索可能な「Game Mechanic Explorer」

「ゲーム開発初心者のために何かできないか」と思っていたゲーム開発者のジョン・ワトソンさんが、ゲーム開発フレームワークの「Phaser」を使いJavaScriptでゲーム開発に役立ちそうな動きやアルゴリズム、エフェクトを作成し、ソースコード付きで「Game Mechanic Explorer」にて無料公開しています。歩行やジャンプといったゲームの基本的な動きから、追跡型ミサイルや光源による影など、さまざまな動作は、ソースコードが分からなくても操作するだけでも楽しい気分になれます。

Game Mechanic Explorer
http://gamemechanicexplorer.com

ゲームの基本的な動作やエフェクトを確認するには、上記URLを開いて、画面左側にある「Choose」の横にある下向き三角をクリックします。クリックすると「Walking and jumping」「Bullets」「Spaceship motion」「Following」「Homing missiles」「Raycasting」「Lighting effects」「Easing functions」という7つの動きやエフェクトが表示されるので、確認したいものをクリック。最初は「Walking and jumping」を見てみます。

画面左側に「Basic walking」や「Jumping」など合計6種類の動作が表示されました。動作の種類が表示されている右側にあるゲーム画面で、実際に操作して動作を確認することができます。

ゲーム画面の真下には、表示している動作のソースコードが公開されていて、誰でも無料で使用可能です。

ワトソンさんが公開中の動作やエフェクトをいくつか実際に試してみました。まずは「Basic walking」から。Basic walkingが実際にどのような動きをするのかは下記のムービーから確認できます。

「Basic walking」 - YouTube


Basic walkingはキーボードの矢印を使って、白い四角形のキャラクターを左右に動かせるという、基本中の基本の動きです。

また、Basic walkingの左右の方向転換時に慣性の力が加わった「With drag」というものもあり、下記のムービーから確認できます。

「With drag」 - YouTube


左右に動きながらジャンプをできる「Jumping」は以下のムービーから確認可能です。

「Jumping」 - YouTube


Jumpingでは左右に動かしながら上向き矢印を押すと、ジャンプできます。

キャラクターの動きだけではなく、ミサイルの動作も公開されています。「Single shot」は、ミサイルが画面を直線の弾道で飛んでいきます。

「Single shot」 - YouTube


画面左側に表示されているミサイルにカーソルを合わせてクリックすると、ミサイルを1発ずつ発射できます。

ミサイルだけではなく、弧を描いて着弾する砲台「Artillery」もあり、下記のムービーから確認可能。

「Artillery」 - YouTube


左下に表示されている砲弾は、カーソルの場所に向きを自動で変更。また、発射後の放物線も描かれています。砲弾を発射するにはカーソルを合わせてクリックするだけです。

地面に着弾すると、砲弾は爆発するというエフェクト付き。

動作のジャンル「Spaceship motion」にある「Basic movement」は画面に表示された宇宙船をキーボードの矢印で操作可能です。上向き矢印を押すと、エンジンが点火され任意の方向に進みます。「Spaceship motion Basic movement」がどのような動きかは、下記のムービーを見るとわかります。

「Spaceship motion Basic movement」 - YouTube


宇宙船を左右に向かせて、上向き矢印で発射。ただし、重力は加味されていないので、落ちることはありません。

上記の「Basic movement」に重力の概念を加えたのが「Spaceship motion With gravity」で、実際に操作している様子は下記のムービーから確認可能。

「Spaceship motion With gravity」 - YouTube


「Basic movement」と違って重力があるので、何もしないと地面に向かって下がっていきます。

地面に付きそうなところで、エンジンを点火すると、宇宙船はゆっくり上昇。

宇宙船を左右に飛ばすと、重力の影響を受けているので、まっすぐ横には飛びません。

単体のオブジェクトがカーソルに向かって自動で追跡してくるのが「Single follower」です。どのような動きで追いかけてくるのかは、下記のムービーを見るとわかります。

「Single follower」 - YouTube


マウスのカーソルを直線の動きで追いかけてきます。

「Single follower」とは違い、複数のオブジェクトが追いかけてくるのが「Multiple followers」です。

「Multiple followers」 - YouTube


10個のオブジェクトが列を作り、方向転換の際には弧を描いてカーソルを追跡してきます。

「Single follower」のオブジェクトがミサイルになったのが「Basic missile」で、下記のムービーから確認可能です。

「Basic missile」 - YouTube


「Single follower」と同じように、ミサイルがカーソルを追いかけてきます。ただし、カーソルにぶつかっても爆発しません。

「Basic missile」のミサイルが複数に増えたのが「Multiple missiles」です。

「Multiple missiles」 - YouTube


一度に3つのミサイルがカーソルめがけて飛んで来ます。

ミサイルに当たると爆発が起こり、すぐさま新しいミサイルが追跡開始。

「Shadows」は動く光源による影を作るエフェクトで、下記のムービーから確認可能です。

「Shadows」 - YouTube


光源を左右に動かすと、影の形が変化します。

暗い画面にカーソルを合わせると、一定の範囲を照らせるのが「Flashlight」です。

「Flashlight」 - YouTube


カーソルを動かすことで、光を当てる場所を移動させられるというわけ。

また、ライトの外周がぼやっとしたエフェクトになっている「With soft edge」というものもありました。

公開されている動作やエフェクトは高いレベルで最適化されていませんが、ワトソンさんによると、「明確な表現」というコンセプトで作成しており、ゲーム開発を始めたばかりの人に使って欲しいとのことです。