やあshi3zだ。

今日発売の週刊アスキーの連載向けゲームは「グランダリウス」というシューティングゲームだ。

これ、実は僕たちが数年前に発売したiOS用のゲームのステージ1を移植したものなんだ。

↓これがもとのバージョン

今回は、グラフィックスをリッチにすると、HTML5/enchant.jsだけでどこまで本格的なゲームが作れるか、というベンチマークの目的で移植してみたんだけど、驚いたのはその生産性。

オリジナルのグランダリウスは、α版ができるまで二週間くらいかかっていたんだけど、今回のHTML5/enchant.js版の開発時間はわずか5時間。

嘘だろって思うだろうけど、念のためメインルーチンのソースコードを比較してみると、もとのObjective-C版が約4万行なのに対し、HTML5/enchant.js版はわずか739行。おおざっぱに言えば約1/50のコードボリュームで済んでることになる。

もちろん、Objective-C版はステージセレクトやオプション画面など、いろいろとゲームそのものとは関係ないコードも多いんだけど、驚きだよね。

Objective-C版では敵の動きデータはソースに含まず、csvファイルを読み込むことで実行される。

HTML5/enchant.js版はこれをJavaScriptのソースに変換して使っているので、これを入れると1300行くらいになる。

美しい敵の動きや出現パターンは全てiOS版と同じものを使っている。

このHTML5/enchant.js版のグランダリウスはソースを公開している。

700行程度のコードだから、ひとつひとつ丁寧に読んでいけば誰でも構造が解るのでご用とお暇のある方はぜひダウンロードして改造に挑戦してみて欲しい。

読めばわかるけど、基本はこないだの99行シューティングと変わらない。

あと、開発期間が短かったので、今回、ホーミングレーザーはだいぶ当たらない飛び方をしている(笑)

まずはそこらへんから弄るといいだろう。

ホーミングレーザーのクラスは以下のような感じ

//Laserクラスの定義
Laser = Class.create(Entity,{
	initialize:function(obj){
		if(LockArray.length<4){
			if(sound)
				game.assets['homing.wav'].play();
			enchant.Entity.call(this); //Spriteクラスのコンストラクタ呼び出し
			this.addEventListener('enterframe',this.tick);
			this.x = player.x;
			this.y = player.y;
			this.v = 5;
			this.width = 1;
			this.height = 1;
			this.scaleX = 1;
			this.scaleY = 1;
			laserCount = 1- laserCount;
			this.r = laserCount* Math.PI;
			this.tgt = obj;
			this.tail = [];
			this.age=0;
			effectLayer.addChild(this);
			this.turnDir=laserCount%2 == 0 ? -1:1;
		}
	},
	tick:function(){
		if(this.age>20){
			this.tgt.unlock();
			this.unlock();
		}
		this.age++;
		//目標点との内積を取る
		var vx= Math.cos(this.r)*this.v;
		var vy= Math.sin(this.r)*this.v;
		var dx = this.tgt.x-this.x;
		var dy = this.tgt.y-this.y;

		this.x = this.x+vx;
		this.y = this.y+vy;
		this.v+=1.5;

		//外積を求める
		var op = vx*dy-dx*vy;
		if(this.age<5){ //このへんが誘導ロジックの部分
			if(op<0)
				this.r-=0.3;
			else
				this.r+=0.3;
		}else{
			if(this.turnDir>0){
				if(op>0)this.r+=0.1;
			}
			else {
				if(op<0)
				this.r-=0.1;
			}
		}
		this.tail.push({x:this.x,y:this.y});
		laserCtx.strokeStyle = "rgba(0, 255, 0,128)";
		laserCtx.beginPath();
		laserCtx.lineWidth=2;
		laserCtx.moveTo(this.tail[0].x,this.tail[0].y);
		for(i=0;i<this.tail.length;i++){
			laserCtx.lineTo(this.tail[i].x,this.tail[i].y);
		}
        laserCtx.stroke();
		if(this.tgt.within(this,this.v*2)){
			var exp = new Explosion(this.tgt.x,this.tgt.y);
			this.tgt.blast();
			this.tgt.unlock();
			game.combo++;
		}
		if(this.tail.length>10)this.tail.shift();
	},
	unlock:function(){
		this.removeEventListener('enterframe',this.tick);
		effectLayer.removeChild(this);
	}
});

誘導ロジックそのものは、イージスコマンドと同じだ。

グラフィックスが奇麗なのはHTML5が透過PNGをサポートしていることに起因する。

美しいアルファブレンディングは昔は非常に高度なプログラミングテクニックが必要だったが、今は何も考えずに使うことが出来る。

HTML5とJavaScriptの実行速度は極限まで高速化されていて、スマートフォンで動作させてもそれほど大きなオーバーヘッドにならない。さすがにiPhone4やGalaxySIIでは普通に遊べる程度(最初iPhone4では厳しいと書いてしまいましたが、確認したら別に問題なく遊べました)。

ネイティブ言語とJavaScriptのこういう差はどんどん縮まって行くことだろう。

無差別級ゲーム開発コンテスト、賞金50万円のかかったOpenLeapの締め切りは今月末までに迫って来ている。いまからでも遅くないからなにかゲームを作ってみないか?

もちろんグランダリウスもソース、素材ともに公開しているのでこれをベースにグラフィックスや出現パターンだけを変えたオリジナルのゲームを作ってもOK。

君のアツい投稿を待ってるぜ!