[ Starling Framework ] オブジェクトの表示 – MovieClip –

前回の記事で、Imageクラスを使用して画像を表示することが出来ました。

今回は、アニメーションロジックの実装を行ってみたいと思います。

使用するクラスは,MovieClipです。
Flash開発経験者の方なら一度は聞いたことのある名前だと思います。
ActionScriptと同じように、starlingにもMovieClipが用意されており、テクスチャからオブジェクトを生成することが出来ます。
それではさっそく、MovieClipの使用方法に入りたいと思います。

先ほども述べましたが、MovieClipオブジェクトの生成にはテクスチャを使用します。
複数のテクスチャで次々と表示を切り替えることで、パラパラ漫画のようなコマアニメを実現します。
その為、MovieClipオブジェクトを生成するためには、まず初めにテクスチャの用意から始まります。

テクスチャアトラスから、使用するテクスチャを取得してVectorに格納します。

//テクスチャアトラスを生成
var sampleTexture:Texture　 = Texture.fromBitmap( new SampleBitmap() );
var sampleXML:XML　 = XML( new SampleXML() );
var textureAtlas:TextureAtlas = new TextureAtlas( sampleTexture, sampleXML );

//"movie"の識別子を持つテクスチャを全て取得してVectorに格納
var frames:Vector.<Texture> = textureAtlas.getTextures("movie");
　　　　

テクスチャアトラスから、個々のテクスチャを取得するには前回の記事でご紹介したとおりgetTexture関数を使用します。
今回使用している getTextures関数は引数に指定した識別子を持つテクスチャを全て取得することができ、戻り値はTexture型が格納されたVectorとなります。

上記は”movie”の識別子を持ったテクスチャを全て取得しています。

使用したリソースです。

<?xml version="1.0" encoding="UTF-8"?>
<TextureAtlas imagePath="sample.png">
    <SubTexture name="movie01" x="168" y="2" width="70" height="64" frameX="-38" frameY="-45" frameWidth="150" frameHeight="150"/>
    <SubTexture name="movie02" x="240" y="2" width="68" height="62" frameX="-39" frameY="-39" frameWidth="150" frameHeight="150"/>
    <SubTexture name="movie03" x="2" y="2" width="80" height="70" frameX="-38" frameY="-32" frameWidth="150" frameHeight="150"/>
    <SubTexture name="movie04" x="84" y="2" width="82" height="64" frameX="-31" frameY="-42" frameWidth="150" frameHeight="150"/>
</TextureAtlas>

xmlファイルの内容から気づいた方もいると思いますが、name属性は”movie”(識別子) + 連番となっております。
このようにテクスチャアトラスから、関連する全てのテクスチャを一度に取得したい場合は、name属性に同じ識別子を持たせ、その識別子を引数にgetTextures関数を使用することによって簡単に行うことが出来ます。

もちろん、個々に生成したテクスチャを一つずつVectorに格納する方法でも問題ございません。

//テクスチャを生成
var texture01:Texture = Texture.fromBitmap( new Movie01() );
var texture02:Texture = Texture.fromBitmap( new Movie02() );
var texture03:Texture = Texture.fromBitmap( new Movie03() );
var texture04:Texture = Texture.fromBitmap( new Movie04() );
	
//Vectorを生成
var frames:Vector.<Texture> = new Vector.<Texture>();
//テクスチャを追加する
frames.push( texture01, texture02, texture03, texture04 );
　　　　

テクスチャの用意が出来たので、MovieClipオブジェクトを生成します。

//オブジェクトを生成
var movieClip:MovieClip = new MovieClip( frames );

//追加
addChild( movieClip );
　　　　

MovieClipオブジェクトの生成が終わりました。　とても簡単ですね！
ですが、これだけではアニメーション再生は行われません。

アニメーションを再生させる為には、生成したMovieClipオブジェクトを juggler に追加する必要があります。

//jugglerに追加
Starling.juggler.add( movieClip );
　　　　

jugglerは「IAnimatableインターフェースを実装したクラスのオブジェクト」を管理するクラスです。
jugglerクラスに追加されたオブジェクトの時間が進む事により、結果としてアニメーション再生が行われます。

ここまでが、MovieClipオブジェクトを使用する上での必要最低限な実装となります。

MovieClipはfpsを設定することにより、表示切替速度を調整することが出来ます。

//オブジェクト生成時に設定
var movieClip:MovieClip = new MovieClip( frames, 24 );

//プロパティによる設定
movieClip.fps = 24;
　　　　

MovieClipオブジェクト生成後のフレーム(テクスチャ)の追加です。
フレームの追加は、「0 ～ 設定されているフレームの最大値」の範囲で指定します。
下記のように4枚のテクスチャが設定されている場合に、「6フレーム目に追加」と指定をするとエラーとなります。

/**
 * MovieClipオブジェクトが保持しているVectorをtexturesとすると
 * ４枚のテクスチャを持っているMovieClipは次のようになる
 *
 * textures[ 0 ]：1フレーム目
 * textures[ 1 ]：2フレーム目
 * textures[ 2 ]：3フレーム目
 * textures[ 3 ]：4フレーム目
 */

//最後尾に新しいテクスチャを追加する
movieClip.addFrameAt( 4, texture );

//間のフレームに新しいテクスチャを追加。
//1を指定しているため、もともと1～3に設定されていた
//テクスチャのインデックスは1ずつ後ろにずれることになる
movieClip.addFrameAt( 1, texture );

//設定されているフレーム最大値以上を指定(エラー)
movieClip.addFrameAt( 5, texture );
　　　　

フレームの削除も同じように行うことが出来ます。

//間のフレームを削除。
//2を指定しているため、もともと2～3に設定されていた
//テクスチャのインデックスは1ずつ前にずれることになる
movieClip.removeFrameAt( 2 );
　　　　

追加や削除ではなく、指定したフレームのテクスチャを再設定したい場合の処理です。

//3フレーム目のテクスチャを再設定
//もともと3フレーム目に表示されていたテクスチャを
//新たに指定したテクスチャに差し変えるため、フレーム数の変化はない
movieClip.setFrameTexture( 2, texture );
　　　　

フレーム個別に再生時間を設定することも出来ます。

//3フレーム目の再生時間を1秒に設定
movieClip.setFrameDuration( 2, 1 );
　　　　

指定したフレームの再生時間を取得することも出来ます。

//2フレーム目の再生時間を取得。
//戻り値はNumber型
movieClip.getFrameDuration( 1 );
　　　　

MovieClipクラスがもつ関数をいろいろと挙げさせていただきましたが
以上で、MovieClipによるアニメーションロジックのご紹介は終了となります。

最後まで御覧いただきありがとうございました。

今回のソースコード

import starling.core.Starling;
import starling.display.Sprite;
import starling.textures.Texture;
import starling.textures.TextureAtlas;
import starling.events.Event;
import starling.display.MovieClip;

internal class StarlinTestMain extends Sprite
{
	//各種ファイルの埋め込み
    [Embed(source = "movie01.png")]
    private static const Movie01:Class;
    
	[Embed(source = "movie02.png")]
    private static const Movie02:Class;
    
	[Embed(source = "movie03.png")]
    private static const Movie03:Class;
    
	[Embed(source = "movie04.png")]
    private static const Movie04:Class;
    
    [Embed(source = "sample.png")]
    private static const SampleBitmap:Class;
	
    [Embed(source = "sample.xml", mimeType="application/octet-stream")]
    private static const SampleXML:Class;
     
    
	public function StarlinTestMain()
    {
        addEventListener(Event.ADDED_TO_STAGE, addStage);
    }
 
    private function addStage(e:Event):void
    {
        removeEventListener(Event.ADDED_TO_STAGE, addStage);
         
         
        //埋め込みファイルからテクスチャアトラスを生成
        var sampleTexture:Texture　 = Texture.fromBitmap( new SampleBitmap() );
        var sampleXML:XML　 = XML( new SampleXML() );
        var textureAtlas:TextureAtlas = new TextureAtlas( sampleTexture, sampleXML );
        
		//name属性が"movie"のテクスチャを全て取得してVectorに格納
		var frames01:Vector.<Texture> = textureAtlas.getTextures("movie");
		//Vectorに格納したテクスチャでMovieClipを生成
		var movieClip:starling.display.MovieClip = new starling.display.MovieClip( frames01, 2 );	
		//座標を指定
        movieClip.x = 100;
        movieClip.y = 150;
        //追加
		addChild( movieClip );
		//jugglerに追加して再生を開始
        Starling.juggler.add( movieClip );
		//3フレーム目の再生時間を2秒に設定
		movieClip.setFrameDuration(2, 2);

		
		
		//個別でテクスチャを生成
		var texture01:Texture = Texture.fromBitmap( new Movie01() );
		var texture02:Texture = Texture.fromBitmap( new Movie02() );
		var texture03:Texture = Texture.fromBitmap( new Movie03() );
		var texture04:Texture = Texture.fromBitmap( new Movie04() );
	
		//Vectorを生成して、テクスチャを格納
		var frames02:Vector.<Texture> = new Vector.<Texture>();
		frames02.push( texture01, texture02, texture03, texture04 );
		
		//MovieClipを生成
		var movieClip02:MovieClip = new MovieClip( frames02 );
		//プロパティでfpsを設定
		movieClip02.fps = 8;
		//jugglerに追加して再生を開始
		Starling.juggler.add( movieClip02 );	
		//座標を指定
        movieClip02.x = 300;
        movieClip02.y = 150;
        //追加
        this.addChild( movieClip02 );
    }
}
　　　　

＜次回の更新について＞
次回は、Tweenを使用したアニメーションについてご紹介します。