More than 5 years have passed since last update.

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

Last updated at 2015-05-01Posted at 2014-07-21

#つい出来心で……#

##はじめに##
本稿は 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 でも動いてました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up