Atlas.jsブログ

Webブラウザで動作する、教育用JavaScriptゲームエンジン、Atlas.jsに関する知識共有ブログです。

選択されているタグ : Atlasエディタ

タグを絞り込む : OGS

Atlas.jsの機能〜当たり判定〜


こんにちは。moltomheadです。はりきってやっていきましょう。
今回は当たり判定についてです。Atlas.jsには当たり判定を確認するメソッドが3つあります。それがwithin、intersect、hitTestです。1つずつ確認していきましょう。

within

withinはオブジェクトと、他のオブジェクトを見て、自分が指定した半径以内にオブジェクトがあればtrueを、そうでなければfalseを返します。

obj.within(anotherObj,range);//objがanotherobjから半径range以内にあった場合trueを、そうでない場合falseを返す

intersect

withinでは別のオブジェクトとの当たり判定をとりますが、intersectは座標の絶対値からの当たり判定をとります。ここで注意して欲しいのはsetPositionで指定するx座標,y座標は表示するオブジェクトの左上の座標であるということです。なので、intersectの座標を指定する場合はオブジェクトの半径分ずらす必要があります。

obj.intersect(x,y);//objの半径が座標x,yにあった場合trueを、そうでない場合falseを返す

hitTest

hitTestはwithinと似ていますが、少し違います。withinでは半径を指定していたのに対し、hitTestではその必要がありません。hitTestでは引数に入れたオブジェクトの半径が当たり判定を決める際の半径になります。なので、単にオブジェクトとオブジェクトが当たったらという判定ではこちらのほうが便利です。

obj.hitTest(anotherObj);//objがanotherobjからanotherObjの半径以内にあった場合trueを、そうでない場合falseを返す

remove

removeはその名の通りオブジェクトを消すメソッドです。先ほどの当たり判定と組み合わせることで、シューティングゲームなどに使うことができそうです。

obj.remove();//objを消す

上の3つを組み合わせたサンプルです。
ボールの当たり判定のサンプル
今回のサンプルを発展させて自分だけのシューティングゲームを作ってみるのはいかがでしょうか?


Atlas.jsの機能〜拡大・回転・and・loop〜

こんにちは。moltomheadです。前回に引き続きAtlas.jsの機能について紹介していきたいと思います。今回もオブジェクトの拡大・回転をついてやっていきますが、前回とは別の記述の方法でやってみたいと思います。

scale

前回はscaleByを使って一定フレームで拡大するという使い方をしましたが、ただ最初から拡大だけしたいという場合はscaleメソッドを使います。もしくはscaleX、scaleYというプロパティを使います。使い方は単純で、それぞれ拡大したい倍率を指定するだけです。

var text = new Text();//Shapeクラス、Spriteクラス、Textクラスなどが対応している。
text.scale(x,y);//縦にx倍、横にy倍拡大する。
text.scaleX = x;//縦にx倍する。
text.scaleY = y;//横にy倍する。

rot・rotateBy

前回は説明していなかったのですがサンプルの方でrotateByを使っていたのでなんとなくわかると思います。rotとrotateByはそれぞれオブジェクトを回転させるプロパティ・メソッドです。違いはscale、scaleByの違いと同様にrotは最初からオブジェクトを回転させて、rotateByは一定フレームでオブジェクトを回転をさせることができます。記述方法は以下のとおりです。

var text = new Text();//Shapeクラス、Spriteクラス、Textクラスなどが対応している。
text.rot = Math.PI;//Math.PI = 180度
text.rotateBy(Math.PI*11,30);//30フレームの間にMath.PI*11度回転させる。

回転量を示すときはMath.PI、つまりπをつかいます。1回転は360度なので、1回転させたかったらMath.PI*2を入れてください。

and・loop

Atlas.jsではメソッドを数珠つなぎに記述することが可能です(メソッドチェーンといいます)。例えば、text.moveTo(100,100,60).moveTo(200,200,60);書くと、textをx:100,y:100へ60フレームで移動させてから、x:200,y:200へ60フレームで移動させるという意味になります。この時、普通は前のメソッドの処理を行ってから次のメソッドの処理を行うのですが、メソッドとメソッドの間にandを入れることでこれらのメソッドを同時に行うことができます。また、loopメソッドは処理の最後に入れることで、チェーンしたメソッドを繰り返すことができます。記述方法はこのとおりです。

var text = new Text();//Shapeクラス、Spriteクラス、Textクラスなどが対応している。
text.moveTo(100,100,60).and().rotateBy(Math.PI*2,60);//60フレームでx:100,y:100へ移動すると同時に、60フレームで1回転する。
text.moveTo(100,100,60).moveTo(200,200,60).loop();//60フレームでx:100,y:100へ移動してからx:200,y:200へ移動させる。これを繰り返す。

以上の機能を踏まえて作ったサンプルです。
rot・rotateBy・scale・and・loopのサンプル
andとloopは自分で確認してみてください。とても面白いですよ。


Atlas.jsの機能〜scaleBy・moveBy・moveTo〜


こんにちは。moltomheadです。今まで、ゲームの作り方をひと通り話してきましたが、Atlas.jsには、まだ紹介しきれていない機能が多くあります。そこで、今日からはAtlas.jsの機能を少しずつですが紹介していきたいと思います。まずはscaleBy、moveBy、moveToについてです。
scaleByはオブジェクトの拡大、moveBy、moveToは座標の移動を行うことができます。scaleBy、moveBy、moveToは次のように書きます。

var obj = new Shape();//Shapeクラス、Spriteクラス、Textクラスなどが対応している
obj.scaleBy(a,b,t);//objをt/60秒までに縦ににa倍、横にb倍する。
obj.moveBy(x,y,t);//objをtフレームで相対値で、x方向にx、y方向にy移動する。
obj.moveTo(x,y,t);//objをtフレームで絶対値で、x方向にx、y方向にy移動する。

それぞれ最後の引数に入るtはその処理を行うまでの時間です。tフレームで、つまりt/60秒までにその処理を実行します。また、注意して欲しいのはmoveByとmoveToです。moveByでは現在の座標から相対的に移動を行いますが、moveToでは絶対的に移動を行います。なのでmoveByで上・左方向に移動させたい場合はマイナスの値を指定してください。
scaleBy、moveBy、moveToを使ったサンプルです。確認してみてください。
scaleBy・moveBy・moveToサンプル
今後ともAtlas.jsの豊富な機能を紹介していきたいと思います。ありがとうございました。


ブロック崩しを作ってみよう〜クラスのまとめ・今まで作ったものを合わせてみよう〜


こんにちは。moltomheadです。前回までで、ボール、バー、ブロックの作成を行いました。あとはこれらをあわせるだけです。しかし、前回のblogでせっかくクラスを使った書き方を覚えたので、一旦ボールとバーをクラスに書きなおしてみます。では早速やっていきましょう。
クラスを新しく作る場合は、Atlas.createClassを使うんでしたね。

/*ボールのクラス*/
Ball = Atlas.createClass(Atlas.Shape.Circle,{
  		initialize: function(col,radius){
     		this.inherit(col,radius);
          	 this.setPosition(250,200);
      		this.dirX = game.getRand(3,4);
      		this.dirY = game.getRand(4,6);
     	}, 
     	enterFrame: function(){
     		this.x += this.dirX;
    		this.y += this.dirY;
    		if(this.x > 480 || this.x < 0)
    			this.dirX = -this.dirX;
              if(this.y > 480){
                 this.dirX = 0;
              	this.dirY = 0;
                 game.addChild(gameover);
              }
              if(this.y < 40)
                   this.dirY = -this.dirY;
          	 if(this.hitTest(bar))//バーに当たった時の処理
         	   	 this.dirY = -this.dirY;
               
    	}	
  	});

/*バーのクラス*/
 	 Bar = Atlas.createClass(Atlas.Shape.Box, {
  		initialize: function(col,numx,numy){
     		this.inherit(col,numx,numy);
      		this.setPosition(250,400);
     	},
    	 keyDown: function(key){
       		if(key.right){
         		if(this.x < 400)
      				this.x+=20;
       		}
       		if(key.left){
         		if(this.x > 0)
      				this.x-=20;
       }
     	}
  	});

前回のblogの内容を見ている方にとってはすぐに出来ると思います。今まで書いてきたenterFrameやkeyDownをクラス内に記述するだけです。ただし、ボールはバーとの当たり判定が追加されているためそれを忘れないようにしましょう。ボールがバーをすり抜けてしまいます。初期化処理などの記述はBlockクラスを参考にしてみてください。
ブロック崩しを作ってみよう〜ブロックを作ってみよう〜
ボールとバーを作るときは、Atlas.jsの提供しているクラス(CIrecleクラスとBoxクラス)からオブジェクトを生成して、メソッドやプロパティを付与する、つまり一旦工場から製品を作ってからそれに操作や製品の持つデータをつけていくような形でした。しかし、新しくクラス(BallクラスやBarクラス)を作ると、製品が作られた時点で操作や製品のデータが設定されているようになります。これにより、製品を作るたびに設定をする必要がなくなり、無駄なコードを書かなくても良くなります。それはBlockクラスを作った時に感じられたと思います。また、新しく作ったクラスを元にまた新しくクラスを作ることも可能です。今回はやりませんが興味のある方はぜひやってみてください。
これでブロック崩しのほとんどが完成しました。あとはそれぞれパワーアップアイテムを作ってみたり、クリアやゲームオーバー、制限時間を表示してみたりと自分の好きなように作ってみてください。うまくできなかった人もサンプルを貼りますのでこれを改造して遊んでみてください。
ブロック崩しclass生成
みなさんが新しいアイディアで面白いゲームが作れることを楽しみにしています。


ブロック崩しを作ってみよう〜ブロックを作ってみよう〜

こんにちは。moltomheadです。前回はバーの作成をしました。ということは残っているのはブロックの作成ですね。今日はブロックの作成について解説したいと思います。
今回のブロックは、ボールやバーと違って複数置くことになります。そしてそれぞれのブロックにはボールが当たった時に消えるように処理をしないといけません。それをブロックごとに一個づつ判定・処理を書いていくなんてとても面倒ですよね。実はそんなことをしなくても一回書くだけで済む方法があります。それはクラスです。OGSでもう聞いたことのある人はいると思いますが、クラスとはデータ(プロパティ)や操作(メソッド)をまとめたひな形です。例えば車の工場(クラス)があったとしたら、車の情報である色というデータや、走るという操作を指定することで、その能力を持つ車を作ることができます。前回のブログでこんなコードを見た方もいると思います。

var bar = new Shape.Box("black",100,10);
var ball = new Shape.Circle("white",10);

このnewの後に続くものがクラスです。Atlas.jsではBoxクラスやCircleクラスなどを提供し、色だったり、どういう風に動かすかを設定することができます。では、今回のようにAtlas.jsが提供しているクラスに自分が使いたい機能がなかった場合どうすればいいでしょう?そうです。なければ作ればいいんです。Atlas.jsでは既存のクラスから新しいクラスを作る機能を提供しています。では実際にボールが当たったら、消えるように動作するBlockクラスを作ってみましょう。Atlas.jsでは新しくクラスを作る場合、Atlas.createClassを使います。下のコードを参考にしてみてください。

/*ブロックのクラス*/
  	Block = Atlas.createClass(Atlas.Shape.Box,{//このクラスをBlockという名前にする
     	initialize: function(col,numx,numy,coordinatex,coordinatey){//初期化処理
         	this.inherit(col,numx,numy);//元になるクラスの引数を利用できる
          	this.setPosition(coordinatex,coordinatey);//表示位置の設定
          	this.collided = false;//ボールと初めて当たったかの判定
         },
         enterFrame: function(){//ループ処理
         	if(ball.hitTest(this)){//ボールがブロックに当たったか
              	 if(this.collided == false)//初めてボールと当たったら
                       ball.speedY = -ball.speedY;//ボールを移動方向を反転
         		this.remove();//ブロックを消す。(消してもボールと当たる判定は残る)
              	 this.collided = true;//ボールに当たったためtrueに
        	}
         }
                            
   	});

前回と比べて大分難しくなったと思いますから一から順番に説明していきます。まず先ほど言ったAtlas.createClassでは元となるクラス、追加する機能の順番に書いていきます。Atlas.Shape.Boxが元のクラス、その後に続く{}で囲まれているのが追加する機能です。今回作るのはブロックのクラスなので、Boxクラスを使ってクラスを作っていきます。ボールの場合はCircleクラスを使いましょう。
まず最初にクラスを作る場合、初期化処理をしなければなりません。それがinitializeメソッドです。initializeメソッドではクラスがもつ位置や色の情報などを指定することができます。また、独自にプロパティを指定することもできます。上の例ではthis.colliedがそれにあたります。this.inheritでは元になるクラスの引数をそのまま利用することができます。ここは難しいと思うので、とりあえず上の例のように書いてみてください。引数などがわからないという方は前回のブログを見てみてください。プログラミングの基礎的な解説〜関数〜
初期化処理が終わったらあとはボールに当たった場合の処理を書いていきます。これはボール作成の時にやったenterFrameの処理に似ていますね。ブロック崩しを作ってみよう〜ボールを作る〜
このようにenterFrameはクラス内でも利用することができます。enterFrame内ではボールが当たったら、消えるような処理をしています。ボールの方もブロックと当たった場合、反射するように処理をしています。ただし、ブロックは消すことはできますが、ボールと当たる判定が残ってしまうので、上では、this.collided = false;を使ってボールがブロックと初めて当たった場合はtrueにし、それ以降ボールが反射しないようにしています。
これで、ブロックの衝突判定を設定することが出来ました。ただ、クラスを書いただけで画面に表示できるわけではありません。実際に画面に表示させたい場合はループ処理などを使って何回もaddChildをする必要があります。

for(var i=1;i<=6;i++){//ループ処理
      	for(var j=1;j<=4;j++){
             	block = new Block("red",70,30,70*i-30,30*j+50);//位置、大きさ、色の指定
                game.addChild(block);//画面に表示
        }
 }

このようにループしながら、表示する位置をずらすことで、何個もブロックを並べることができます。そして実際にボールと組み合わせたサンプルがこれです。
ボールに当たったブロックが消えるサンプル
どうですか?ボールでブロックを消せるようになればあと一歩でブロック崩しの完成です。頑張りましょう。
今回はここまでです。ありがとうございました。


エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本