WebGL + three.js をいじる

公開:2013-09-10 21:47
更新:2020-02-15 04:37
カテゴリ:three.js,javascript,webgl,html5,ゲーム製作

縦画面シューティングを作り始める

WebGL + three.jsを使用して縦画面のシューティングゲームを作ってみようといじり始めたが中身のアイデアが浮かばない。。頭に浮かぶのはギャラガやギャプラス、ギャラクシアンのプレイ画面である。この3つのゲームはそれこそ死ぬほどやったので強烈に脳内に刻み込まれている。縦型シューティングというキーワードをインプットすると脳からの出力はそれしか出てこないのである。50円プレイができるゲーセンでどれほどお世話になったことか。。ギャラガは無限プレイパターンがあったので数時間プレイすることもままあったりしたのである。いやでもギャプラスのほうが好きだな。プレイ回数としてはギャプラスのほうが多いかな。ギャラクシアンは下手でゲーセンではもっぱら人のプレイを観ていることが多かったように記憶している。家でX1用とかはよくプレイした。ギャラガもX1でよくやったかな。PC用としてよくできていた。

ギャラクシアン・ギャラガ・ギャプラスの3作で感心するのは敵の動きである。なめらかに動き、一定時間整列して待機し、攻撃してくるのだがその軌跡がリアルな感じがする。特にギャラガの敵が攻撃したときに待機ポジションに戻るときとか、出現時に隊列を組んでその後それぞれの待機ポジションに移るときのばらける動きとか、そういうのがすごくいい動きしているなと思うのである。数学的な動きというか。これをなんとかPC上に再現したいと子供のころから思い続けて30年くらいたってしまった。。。

おそらく浮動小数が当たり前な現代ではこの動きはいともたやすく表現できるのはないかと思うのだが。こういう動きを見るとスプラインやベジェとかそんな曲線たちを想像するのだが、ギャラガが現役であった時代はそんな演算をまともにしていたらゲームにならないと思うのでやっぱりデータ配列+補完とかでやっていたのかなあと想像している。

作者画面の作成

three.jsのデモを見てこれなら私の作りたいレトロなゲームならいとも簡単にできるのでは。。と思いいじり始めたがやはり簡単とは言っても3Dのライブラリ。用語が難しいのは言わずもがな。でもDirectX11をちょっとくらいはいじっているので何となくはわかる。あとはスクリプトならではの「ちょっと作っては試しに動かす」サイクルの容易さ。やっぱりこの手軽さは私にあっていると思う。あとは最後まで作り続ける持続性(根性)があれば完璧だが、目下のところこれが一番高い壁となっている。

今のところゲームのスタート時に表示されるベンダー名のようなものをthree.jsを使って作成・表示してみている。ちょっとthree.jsのパーティクルシステムが面白いのでちょっと使ってみた。

これはPNGファイルをcanvas経由でピクセルデータとして1点1点読み込み、パーティクル化してアニメーションしてみたものである。この手法は結構使えそうな気もしていて、キャラクターをパーティクルで動かして何か面白い表現ができないかなと考えている。ドットはわざと粗く表示している。画面サイズは480×640だけれども、1パーティクル=2×2として画面表示し、ドット感を出している。この大きいピクセルを使ったキャラクター表示でレトロな感じを醸し出そうとしている。