Atlas.jsブログ

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

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は自分で確認してみてください。とても面白いですよ。


blog comments powered by Disqus

エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本