Atlas.jsブログ

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

Atlas.jsの隠れ機能紹介isQueEmpty


こんにちは。今回はAtlas.jsの隠れ機能、isQueEmptyについて紹介したいと思います。
かなり使える機能だと思うのでみなさん是非使ってみてください。

Queとは

あなたはレジの店員だと思ってください。
この場合、レジに並ぶお客さんを1つの仕事だと見なすことができます。
そして、目の前のお客さんのレジを終了すると、次に並んできたお客さんが現れて、またレジをしなければいけません。
つまり、予約されている仕事を次々と対処していくのがキューだと思ってください。

isQueEmptyとは

現在スプライトに対して、moveBy ScaleBy animate rotateByなどのアニメーションが予約されているかを取得するメソッドです。
予約されているならtrueされていなければfalseを返します。

それで、なにができるの?

ではこの機能がナニがうれしいのでしょう。
つまり、アニメーションが終わってないスプライトには
〜の処理をしないなどのルールをスプライトに付加できるのです。
RPGなどで、十字キーで動かしたスプライトは一回その方向に移動しきらなければ、
十字キーで再度方向を入力しても動かないはずです。
そういうイメージです。
下のコードと、実行結果をみてみれば、僕の言いたいことがわかるはずです。
実行結果
http://atlas-editor.ap01.aws.af.cm/user/steelydylan/538e56e08997a4664d000027

Atlas();
window.onload = function(){
	var game = new App();
  	game.load(["http://res.cloudinary.com/dx1fyzpwl/image/upload/v1401836944/bw89mebzebv1gszjbxfx.png","sprite"]);
	game.setQuality(500,500);
	game.setSize(500,500);
	game.centerize();
	game.setColor("black");
	var sprite = new Sprite("sprite",32,32);
  sprite.keyDown = function(key){
    if(this.isQueEmpty()){
    	if(key.right){
      		this.moveBy(100,0,30).and().animate([6,7,8],5);
        }else if(key.left){
          	this.moveBy(-100,0,30).and().animate([3,4,5],5);
        }else if(key.up){
          	this.moveBy(0,-100,30).and().animate([9,10,11],5);
        }else if(key.down){
          	this.moveBy(0,100,30).and().animate([0,1,2],5);
        }
    }
  }
  sprite.setPosition(100,100);
	game.addChild(sprite);
	game.start();
};


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の豊富な機能を紹介していきたいと思います。ありがとうございました。


プログラミング基礎 ~ for 文~

こんにちは しぉみんです。やはりネタと時間が無いので簡単なプログラミング基礎について
解説します。今日は, for 文について勉強したいと思います。

for 文は while 文と同じ繰り返し処理を行う文です。
実は while 文でかける処理は for 文でも書くことができます。

実際の for 文の構造です。

var Goukei = 0;
var i;
 
for(i = 1; i <= 10; ++i){
Goukei = Goukei + i;
}

//結果
55

これは while 文で同じような処理が書くことができます。

var Goukei = 0; 
var i = 1;           
 
while(i <= 10){    
Goukei = Goukei + i;  
i++;
}
 
//結果
55

どちらも1から10をたすプログラムです。
for 文の構造はこのようになっています。

for(初期設定; 条件式; 更新文){
    条件が成立している間実行する文;
}

while 文ではループが成立するときの条件しか書くことができませんでした。
しかし for 文では初期設定と条件式と更新文が一気にかけてしまいます。
このおかげでずいぶんとソースコードがわかりやすくなっています。
for 文を使うときはループ回数が決まっている時に主に使用し,
while 文はループ回数が決まっていない時に使用するのが良いです。
このように場合によってうまく使い分けるとわかりやすいソースコードがかけます。
では, 今日はこれまでにします。


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


こんにちは。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生成
みなさんが新しいアイディアで面白いゲームが作れることを楽しみにしています。


エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本