デモ版もプレイ可能な three.js を利用した全方位シューティングゲーム作成のチュートリアル記事

doxas : 2018-06-06 13:04:30

ブログ記事ではゲーム作成のヒントに言及

今回ご紹介するのは、three.js を使って WebGL 製のゲームを作成するためのトピックを紹介するブログ記事と、実際にプレイ可能なデモ版シューティングゲームです。

WebGL はゲーム作成にももちろん利用できますが、実際にゲームを作るにあたってどのような知識や技術、リソースなどが必要なのか、想像が難しいひともいるでしょう。

今回のブログ記事では、それほど深く詳細まで言及しているわけではありませんが、ざっと全体を俯瞰するような感じでゲーム作成のためのノウハウが公開されています。

デモ版はエフェクトもなかなかド派手で面白い

今回のブログ記事は全編英語ですが、あまり事細かく技術のことについて触れているわけではないので、キーワードを拾って読んでいけばそれほど読み解くのは難しくないと思います。

それでも、ゲームを作るということがいかに大変な作業なのかが、このブログ記事を読むとなんとなく想像できるのではないでしょうか。

テクスチャや 3D モデルデータの準備、地形の生成方法やシェーダについてなど、かなりの範囲を浅く広く扱っています。

記事の中ほどには、デモや Github で公開されているソースコードへのリンクが置かれています。

一緒に動画も置かれているので、自分でプレイすることができなくても、その雰囲気を感じることはできると思います。もちろん、デモ版のシューティングゲームを実際にプレイすることも可能なので、時間に余裕のあるひとはチャレンジしてみてもいいかもしれません。

ゲームの内容としては、自機ドローンを操作して敵のドローンを撃墜するというスタンダードなシューティングゲームです。

緑色のラインで描かれるスコープの模様が雰囲気を感じさせる、なかなか本格的な感じの仕上がりです。

ゲームでは敵が自分を攻撃してくることはなく、本当にデモ版という感じです。

WASD キーを使って自機を操作しつつ、マウスボタンでショットを発射しながら敵機を撃墜していきます。

太陽の方に自機が向いているときにのみ描画されるレンズフレアの演出があったり、敵機を撃墜した際の爆発演出があったり……

結構演出面もしっかりと作られています。

公開されているブログ記事でも言及されているのですが、ゲームを作成する、というテーマは非常に大きくて、それを実現するためには様々なジャンルの技術やスキルを組み合わせる必要があります。

CG をレンダリングするためのシェーダなどの技術だけでなく、敵機を操作するための bot 操作のプログラムを書く必要があったり、テクスチャやモデルデータといったリソースの準備が必要であったり、実際にゲームを配信するとなれば AWS などの外部サービス、バックエンドの実装技術など、本当にありとあらゆる方面の技術を組み合わせる必要があります。

なかなかひとりきりですべてをカバーするのは大変ですが、今回のブログ記事やデモ版を見ながら、ゲーム作成について思いを巡らせてみるのもいいかもしれません。

気になる方はチェックしてみてください。

リンク:

Game Development with three.js on the modern web 🚀🎆

blaze33/droneWorld: A 3D world map and a three.js playground

share

follow us in feedly

search

search

sponsor

social