つい出来心で……

はじめに

本稿は javascript を用いて[ シューティングゲーム的な何か ]を作ろうという試みについて解説した連載の、おまけテキストです。

書いてる人

書いてる人はdoxasという人です。
こんな企画もやってますので、少しでも javascript でシューティングゲームを作成することに興味がわいたら、ぜひ参加してください。待ってますよ！！

また、今回紹介するおまけについては中身を解説しませんので、知りたい人は個別に、気軽に質問してください。

3D化する魔法をかけましょ

今回はあくまでも、おまけです。
中身でなにをやってるのかは、先述の通り解説しません。

前回の、最終回に付属したサンプルにいくつか簡単な修正を加えるだけで、なぜか描画結果が 3D によるレンダリング(WebGL)になるという謎技術をお届けします。

まず、index.html からは追加でふたつ、新たにライブラリを読み込むようにします。

index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="common.js"></script>
        <script src="character.js"></script>
        <script src="boss.js"></script>
        <script src="minMatrixb.js"></script>
        <script src="wgldCanvas2D.js"></script>
        <script src="main.js"></script>

        <style>canvas {border: 1px solid gray;}</style>
    </head>
    <body>
        <canvas id="screen"></canvas>
        <p id="info"></p>
    </body>
</html>

minMatrixb.js は、著者のサイトで配布している完全フリーライセンスの行列演算などを補助するライブラリです。wgld.org 内からダウンロードすることができます。
その下、wgldCanvas2D.js は今回の謎技術を支える 即席の ライブラリなので、リファレンスはどこにもありませんが、要は canvas 周りのメソッド名をそのまま使えるようにしつつ、実際には裏で 怪しい黒魔術 を使うためのライブラリです。

main.js 修正個所

修正する箇所は多くありません。

canvas2d のコンテキストを初期化しているところを、以下のように修正します。

main.js

// 2dコンテキスト
// ctx = screenCanvas.getContext('2d'); ← もともとはこうなってる
ctx = new WC2D(screenCanvas);

上記の一行を修正したら、あとはもともとctx.arcとなっていた部分、これはいくつかあると思いますが、その周辺をちょっとだけ変更します。
具体的には、arcメソッドが呼ばれるよりも前に、かならずfillStyleプロパティに値を設定するようにするだけです。
もともとの canvas2d の仕組みでは、本連載内でも解説したように、まずパスを設定して、色を設定して、まとめて描画、という流れでしたが、黒魔術を使う場合には先に色の指定をしてからarcを呼ぶようにします。

ドローコールを追加する

それと、黒魔術を使ったレンダリングを行うために、再帰する直前のあたりにドローコールのためのメソッドを呼び出す箇所を追記します。

main.js

// 追記
ctx.draw();

// フラグにより再帰呼び出し
if(run){setTimeout(arguments.callee, fps);}

これだけです。修正個所はそんなに多くないですね。
簡単ですね。
これで、前回までのシューティングゲームがなぜか 3D になります。不思議ですね。

注意点とサンプル

今回の wgldCanvas2D.js ですが、汎用的なつくりにはなってません。
ライセンスはもちろんフリーですが、即席で作ったものなので参考にする程度にしておいてください。

あと、中身を見て理解するにはある程度 WebGL や OpenGL などの 3D のプログラミングに関する理解も必要だと思います。知りたい人は、調べるなり著者あてに問い合わせるなりしてみてください。

質問は随時受け付け中です！

オンラインサンプル.11は実際にこの謎の技術を体感できるサンプルです。WebGL 対応ブラウザで動作させることができると思います。

※Chrome for Android でも動いてました。

[連載] javascriptで作るシューティングゲーム的な何か(おまけ)