Atlas.jsブログ

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

Atlas.jsの機能〜スプライト〜


こんにちは。moltomheadです。
今回はスプライトの機能について説明していきます。スプライトとは画面内で画像を操作できるオブジェクトのことです。Atlasエディタの下の欄にある「素材提供」の中の戦闘機がスプライトに入ります。これを操作してみましょう。

Spriteクラス

スプライトを利用したい場合はSpriteクラスを使います。基本的なことはCircleクラスやBoxクラスと変わりませんが、Spriteクラスの特徴として、画像を利用すること、frameプロパティが存在することです。画像を利用するのは当たり前ですが、frameプロパティについてはゲームなどを作る場合に重要なのでよく確認しておいてください。なお、frameプロパティについてはこの記事を見ていただけるとよくわかると思います。
村人を作ろう
また、同様にanimateメソッドの使い方を解説しているので、こちらの記事ではanimteメソッドについては割愛させていただきます。

下準備

一個ずつやっていきましょう。まずは使いたい画像の読み込みをします。ロードをする場合はgame.load()を使います。この時、指定した画像のパスに名前をつけることができます。

game.load(["./images/char.png","image"]);//指定した画像のパスをimageという名前にして読み込む

後は読み込んだ画像を使ってスプライトを作りましょう。設定できるプロパティは以下のとおりです。

var sprite = new Sprite("image",x,y);//縦:x、横:yの大きさで画像imageを切り取る
sprite.rot = Math.PI;//spriteの回転量
sprite.frame = 3; //スプライト番号の指定
sprite.alpha = 0.5 //スプライトのアルファ値(透明度)の設定

setImage

Spriteクラスでは、表示している画像を別の画像に切り換える機能があります。それがsetImageメソッドです。

sprite.setImage("image2",a,b);//今の画像を新しくimage2に切り換えて縦:a、横:bの大きさにimage2を切り取る
/*もしくは*/
sprite.setImage("image2",x,y);//今の画像を新しくimage2に切り替え
sprite.setISpriteSize(a,b);//切り取りサイズを縦:a、横:bに変更

この時、座標やオブジェクトの回転量、フレーム番号などは保存されたままであることに注意してください。
利用方法の例としては、スプライトが弾にあたった時、爆発させたい時に有効です。新しく爆発用のスプライトを用意しなくてもsetImageを使うだけで爆発を表現できます。

スプライトを使ったサンプルを用意しました。
スプライトのサンプル
サンプルではアイテムをとったら戦闘機の画像を切り替えています。戦闘機がパワーアップするようなイメージです。


blog comments powered by Disqus

エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本