Skip to content

WebGL+enchant.jsでモグラ叩き!ゲームをつくる!(221行)

さてさて、つい一昨日発表されたばかりのgl.enchant.js。9leapにはさっそくいくつか投稿されているようだ。

僕、shi3zもさっそく挑戦してみたぞ!

さてさて、今回つくるのは、お決まりのモグラ叩きゲームだ。

モグラ叩きはクラスベースのゲームのサンプルとして非常にカンタンなので気に入ってる。これがズバリ3Dになっただけ。

幸い、ドロイドちゃんのモデルデータ(ショーヤマ先生渾身の作)も同梱されているから、ドロイドちゃんを虐めるゲームはすぐに開発できる。

さてさて、実際のコードだが、今回も221行とenchant.jsらしい短さに収まってる。

ふつう、ゲームライブラリは3Dを扱い始めたあたりから大混乱するので、それに比べると驚異的なコンパクトさだと言える。そして実際に創って思ったのは、「これすげえ!2Dとおなじ感覚で3Dゲームが創れる!」ってこと。

enchant.jsで既に2Dゲームが創れる人はほとんど同じ感覚で3Dゲームを創ることが出来る。ほとんど悩むということがないのだ(いや、まああるけど)。

3Dプログラミングはマジで奥が深いので、生のWebGLはなかなか恐くて触れなかったという人も、enchant.jsがあればアラ不思議。1時間もすれば思い通りに3D物体を動かしていることだろう(たぶん)。

ではこの「ドロイド叩き」ゲームの重要な部分から紹介しよう。
まずはenchant.jsプログラマなら御馴染みのgame.onloadの冒頭部分だ。

    game = new Game(320, 320);
    game.fps = 120;
    game.preload('images/pit.png','images/kanban.png','images/droid.dae');
    game.onload = function(){
        scene = new Scene3D(); //3Dシーンを創る
        scene.setDirectionalLight(new DirectionalLight()); //ライトを設定

        camera = new Camera3D(); //カメラを設定
        camera.y=14; //カメラ位置を調整
        camera.z=-8.1;
        camera.upVectorZ=10; //カメラの上方向を調整
        camera.upVectorY=100;
        scene.setCamera(camera); //カメラをセット

3Dシーンの準備はこれだけだ。
Scene3Dをnewして、setDirectionalLightでライト(光源)を設置する。
3Dの世界ではライトがないとなにも見えない。まあこのへんはお決まりのおまじないだと思ってくれればいい。

次にカメラの設定。これが重要だ。

gl.enchant.jsではOpenGLなどで一般的に用いられているのと同じカメラモデルを使っている。

まず、カメラの位置(camera.x,camera.y,camera.z)があり、次にカメラの見る先(camera.centerX,camera.centerY,camera.centerZ)を決める。

これでカメラの方向はだいたい決まるが、カメラの頭の向きがどっちを向いているのかがイマイチきめられない。

そこで、カメラの頭はどっちを向いているか、というのをcamera.upVectorで設定する。

camera.upVectorは複雑なことをしなければ、かなり適当にしておいても大丈夫だ。

基本的にはカメラの位置はcamera.x,camera.y,camera.zで決めるとして、カメラの見る場所(方向)はcamera.centerX,camera.centerY,camera.centerZで決める、と覚えておけばだいたい間違いがない。

さて、次にドロイドがニョキニョキ飛び出す穴を出現させている部分

        var pit = new PlaneXZ(); //XZ平面に平行な板を創る
        pit.scaleX=3.0; //3倍する
        pit.scaleY=3.0;
        pit.scaleZ=3.0;
        var texture = new Texture(game.assets['images/pit.png']); //テクスチャ読み込み
        texture.ambient=[0.8,0.8,0.8,1.0]; //テクスチャのアンビエントを設定
        texture.shiness=1; //テクスチャの輝きを設定
        pit.mesh.texture = texture; //pitにtextureを設定
        pit.y=-1;
        pit.z=-10;
        scene.addChild(pit); //シーンに追加

わりとenchant.jsっぽいが、細かく違うことに気づくと思う。
まず、enchant.jsならSpriteをnewすることが多かったが、ここではPlaneXZをnewしている。PlaneXZはSprite3Dを継承したクラスで、primitives.enchant.jsというプラグインで定義されている。

他にも、SphereやCubeなどがあってカンタンな図形をつくりたいときに便利だ。

さらにテクスチャを読み込んでいる。
読み込んでいるテクスチャ「pit.png」は以下のようなファイルだ。

プレビューで開くと、穴の部分が透過処理されているのがわかる。
実はgl.enchant.jsでは透過処理されたPNGを自動的に透過させる機能がついてる。

だからこれだけで穴の開いた板を表示することができるってわけ。
さて、看板の処理も似たようなもんだからそこは飛ばして、いよいよドロイドちゃんの定義だ。

ドロイドちゃんの定義は、伝統的にenchant.jsのクラス作成機構によって作成されている。

その冒頭部分を紹介しよう。

//ドロイドクラスの定義
Droid = Class.create(Sprite3D,{ //Sprite3Dクラスを継承する
	initialize:function(x,y,z){
		Sprite3D.call(this); //Sprite3Dクラスのコンストラクタ呼び出し
		this.set(game.assets["images/droid.dae"]);//モデルを設定
		this.scaleX=0.3;//大きさを設定
		this.scaleY=0.3;
		this.scaleZ=0.3;
		this.x = x;//場所を設定
		this.y = y;
		this.z = z;
		this.a=0.01;
		this.frame=0;
		this.addEventListener('enterframe',this.tick); //イベントリスナーを定義
		this.addEventListener('touchstart',this.hit); //叩いた場合のイベントリスナーを定義
		this.mode = 2; //ドロイド君の出現モードを待つ、からに設定
		this.nextMode = 0; 
		this.waitFor =  game.rootScene.age+rand(100)+150; 
	},
	tick:function(){ //ドロイド君が出るアニメーションを繰り返す

意外と2Dのenchant.jsと変わらなくて驚かない?
ポイントはもちろんSprite3Dを継承しているということと、2Dのゲームの場合、imageにgame.assetsからグラフィックスデータを代入していたところを、setメソッドを使ってモデルデータを設定しているところ。

あとの処理はイベントリスナーの追加も含めて実は全部2Dと一緒なのだ。

‘enterframe’や’touchstart’といったお馴染みのメソッドが出て来た。

あと、ドロイド君を出したり引っ込めたり、という部分も基本的にはy座標を足したり引いたりしてるだけ。

今回はドロイド君を叩くと、ロケットのように打ち出されることにした。

また、冒頭の部分の演出にはちょっと凝ってる。
せっかく3Dだから、見下ろした画面からカメラを少しずつ手前に持ってきて始まるようになっている。



この冒頭のアニメーションは、単にカメラの注視点(camera.center)を固定したまま、現在位置を移動させることによって行っている。

実際のコードは以下の通り

        game.rootScene.addEventListener('enterframe', function() {
        	if(game.rootScene.age<130){ //スタートしてから130フレーム以内なら
            	    	camera.z+=0.05;  //カメラの位置を移動
            	    	camera.y-=0.1;
        	}
   		game.rootScene.age++;

なんか3Dって難しそうって思ってた人も、「これならなんとかなるかも!?」って思えて来たんじゃないかな?

実際、僕は20年くらいは3Dゲームのプログラミングをしてるけど、こんなにカンタンに書けたのは初めてだった。

このプログラムを書いてる途中で、いくつかバグを見つけて、すぐさまgl.enchant.jsの開発者である高橋諒くんに直してもらった。

なので先日公開したものよりはバグが取れているβ2になった。

やっぱりβテストは大事だね。

でもgl.enchant.jsのバグ取りを含めても、このドロイド叩きゲームが完成するまでにかかった時間は5時間くらい。

次はもっと早くつくれると思う。
ぜひこの週末はgl.enchant.jsにチャレンジしてみて!

今回のソースはここからダウンロードできるぞ!

このエントリーをはてなブックマークに追加
はてなブックマーク - WebGL+enchant.jsでモグラ叩き!ゲームをつくる!(221行)
Post to Google Buzz
Share on GREE

Related posts:

  1. 3D野郎は寄ってたかれ!WebGLでグリグリ遊べるgl.enchant.jsがついにβ公開!
  2. Ruby on enchant.js : Groupクラスの追加
  3. Ruby on enchant.js / RubyでHTML5ゲームを作ってみる
  4. enchant.js + node.jsで作る非同期型ネットゲームのプロトタイプ
  5. たった99行でシューティングゲームを作る方法

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*