WebGL + three.js + Web Audio API – ゲーム作り(3)

公開:2013-10-06 10:35
更新:2020-02-15 04:37
カテゴリ:シューティングゲーム,webgl,three.js,web audio api,javascript,html5,audio,ゲーム,web 2d shooting game,ゲーム製作

何とかゲームの体裁に

なんとかゲームとしてプレイできるようになった。まだギャラガもどきの状態のままであるが、自機をバックショットできるようにしてみたり敵を背後に配置してみたりしている。xキーでバックショットできる。

ギャラガ的な面クリアタイプのシューティングゲームを作るのはパソコンを触り始めたころからの夢であったので、その夢がもうすぐかなえられようとしている。

最初に作ろうとしたのはMZ-700のころで、80×50ドットのキャラクタ・グラフィックで何とかしようと四苦八苦していた。ハードは簡素だったんだけれどもやっぱりBASICではDEFINT A-Zしても遅かったし、機械語で組むとしても当時アセンブラがなくてニーモニックをハンドアセンブルしモニタプログラムで打ち込みをしなければならず、ちょっとしたことをするにも非常に面倒だった。アセンブラとかも確かシャープから販売されていたと思うんだけど非常に高価で手が出なかった。あとは数学的な知識に乏しかったから、なかなか思うような動きを作れなかったのもある。そうしているうちに途中で嫌になり放棄してしまったのである。でも古旗さんとかはそういう面倒くささを乗り越えて何作もすごいゲームを完成させている。なのでやれる人がやればMZ-700でもすごいことができるのだが、ヘタレな私にはできなかった。。今はすぐに成果物を得ることができる開発環境を無料で手に入れることができる時代となり、そのおかげで私のようなヘタレでも何とか1つのゲームを1から完成させることができそうになってきたのである。

ブラウザって本当に多機能だ。特に開発向けの機能がすごい。ブレークポイントや変数のウォッチ、ステップ実行などデバッガとして一通りの機能が備わっている。少し書いては実行し、その時の変数の内容なんかもすぐに見れるのでデバッグもストレスなくできる。この手軽さはやっぱりスクリプト言語ならではのものだろうね。私にはとてもフィットしている。でもC++のパフォーマンスの高さはやっぱり魅力的で、これが一段落したらC++で書き直してみたいと思っていたりする。

ここまでのまとめ

ここでちょっといままで行ったことをまとめておく。

WebGL+three.jsで2D

画面を見ていただくと3Dらしいのは最初の作者ロゴ表示くらいなものであとは2Dしているのはご理解いただけると思う。この程度ならcanvasでも十分にできるのだけれども、やりたいのはスプライトとかテキスト表示くらいなので、3Dエンジンベースで作ってもそんなに手間がかからないし、HWアクセラレーションがかかるのでそうしている。IEなどではcanvasでもアクセラレーションがかかるようだが。Chromeでもフラグで有効にできるのだったっけかな? Z座標によるスプライトの優先表示とか、拡大縮小とかは3Dエンジンベースだと楽に表現できる。WebGLだけだと初期化や表示させるまででお腹いっぱいになりそうなので、three.jsで端折っている。これは高レベル3DAPIが持っている一般的な機能はほとんど持っている。例えばシーン管理とかメッシュとかジオメトリとかである。その気になればシェーダーも書くことができる。私はそこまでやっていないけども。

レトロな感じというか、私の表現の稚拙さを隠すためにあえて解像度を粗くしている。横480px×縦640pxのcanvasに横240ドット×縦320ドットのグラフィクスを描くようにカメラの視点を工夫している。どうするかというと視野角を90度にしてカメラの位置を(0,0,120×アスペクト比)にしているだけである。こうするとz座標が0のとき、x,y座標がcanvas上の2×2ピクセルに対応する。こうしておけば2D的な考えで画面配置を考えることができるようになる。シーン中の画面の重ね合わせはz座標でコントロールする。ただthree.jsだとz座標は0.1刻みっぽいんだよね。それ以下の少数を指定しても0と同じになってしまうようである。2Dっぽいけども3Dなので、例えばバックの星の流れのように奥行のある表現もできる。

画面のピクセル感を出すためアンチエイリアスは極力OFFにしている。よって画面はピクセル・ピクセルしている。なのでくっきりしている。シェーダーで工夫すればCRT風のピクセル表現もできたり、RFコンバーターを使ってアナログTVに映したような表現もできるかもしれないね。

アーケードゲーム風のテキスト表示はcanvasに書いたのちそれをテクスチャとして表示している。直接描画することもできるけれどcanvasを使うと楽なのでそうしている。昔のPCのテキストVRAM(PCG?)をまねて作っている。

スプライトは1枚のスプライト=1メッシュとして定義している。スプライトのサイズはどうにでもできるが今のところ16×16ドットのキャラクターのみとなっている。16×16ドットを単位として任意の大きさのビットマップを分割してスプライト番号で表示できるようにしている。これはテクスチャのuv座標を工夫することで実現している。

Web Audioを利用した波形メモリシンセ

BGMや効果音はナムコの4ビット波形メモリ音源を参考にして作っている。今のところ12音同時発音可能で、MML風の簡易シーケンサーを使いBGMや効果音の作成ができる。波形には疑似ノイズ波形を含んでおり、自機の爆発音に使っているが、LPFを通して高域をカットして「らしい」音になるようにしている。ゲーム中に出る音はすべてリアルタイムで波形合成して出している。波形メモリによってはループのつなぎ目でプチっているが今のところそのまま放置している。