Edited at

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

More than 3 years have passed since last update.


つい出来心で……


はじめに

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

javascriptで作るシューティングゲーム的な何か(1)

javascriptで作るシューティングゲーム的な何か(2)

javascriptで作るシューティングゲーム的な何か(3)

javascriptで作るシューティングゲーム的な何か(4)

javascriptで作るシューティングゲーム的な何か(5)

javascriptで作るシューティングゲーム的な何か(6)

javascriptで作るシューティングゲーム的な何か(7)

javascriptで作るシューティングゲーム的な何か(8)

javascriptで作るシューティングゲーム的な何か(9)

javascriptで作るシューティングゲーム的な何か(最終回)


書いてる人

書いてる人はdoxasという人です。

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

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


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

今回はあくまでも、おまけです。

中身でなにをやってるのかは、先述の通り解説しません。

sample_012.jpg

前回の、最終回に付属したサンプルにいくつか簡単な修正を加えるだけで、なぜか描画結果が 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 でも動いてました。