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

前回の記事で、Quadクラスを使用して矩形のオブジェクトを表示することが出来ました。
今回は、画像を表示する方法をご紹介します。

使用するクラスはImageクラスで、Textureのデータを元にオブジェクトを生成します。
Textureが読み込めるフォーマットは「PNG」「JPEG」「JPEG-XR」「ATF」の４種類となります。
主に使用されるフォーマットは「PNG」「ATF」のどちらかになると思いますので、今後の記事では先に述べた２種類のフォーマットを使用する方法でご紹介させていただきます。

Textureは「埋め込みファイル」もしくは「外部取得ファイル」からデータを読み込むことができ、今回は「埋め込みファイル」を使用します。
「外部取得」での方法は違う機会にご紹介させていただきます。

//PNGファイルを埋め込む
[Embed(source = "sample.png")]
private static const SampleBitmap:Class;

//ATFファイルを埋め込む
[Embed(source = "sample.atf", mimeType="application/octet-stream")]
private static const SampleAtf:Class;
　　　　

データを読み込むときに使用する関数は「PNG」「ATF」でそれぞれ下記の通りです。

/**
 * PNG
 */
//埋め込みファイルからビットマップを生成
var bitmap:Bitmap = new SampleBitmap();

//テクスチャを生成
var texture:Texture = Texture.fromBitmap( bitmap );       

/**
 * ATF
 */
//埋め込みファイルからバイナリデータを生成
var data:ByteArray = new SampleAtf();

//テクスチャを生成
var texture:Texture = Texture.fromAtfData( data);       
　　　　

starlingではテクスチャアトラス形式のファイルからもテクスチャを生成することが出来ます。

//テクスチャアトラスファイルを埋め込む
[Embed(source = "sample.png")]
private static const SampleBitmap:Class;

[Embed(source = "sample.xml", mimeType="application/octet-stream")]
private static const SampleXML:Class;




//埋め込みPNGファイルからテクスチャを読み込む
var sampleTexture:Texture = Texture.fromBitmap( new SampleBitmap() );

//埋め込みXMLファイルからデータ情報を読み込む
var sampleXML:XML = XML( new SampleXML() );

//テクスチャとXMLからテクスチャアトラスを生成する
var textureAtlas:TextureAtlas = new TextureAtlas( sampleTexture, sampleXML );
　　　　

テクスチャアトラスから使用したい画像を取り出すには、getTexture関数を使用します。
getTexture関数は引数に、XMLファイルに定義されているname属性を指定します。

下記は、XMLファイルのname属性に”square”と定義されているテクスチャを取得する例です。

//テクスチャアトラスから"square"というname属性のテクスチャを取得
var squareTexture:Texture = textureAtlas.getTexture( "square" );
　　　　

Textureオブジェクトの生成が終わったら、Imageオブジェクトの生成です。

//Imageオブジェクトの生成
var image:Image = new Image( texture );

//追加
addChild( image );
　　　　

ImageはQuad同様、DisplayObjectのサブクラスとなっているため、
x/yプロパティで座標の変更や、pivotX/pivotYでのアンカーポイント(※3)の変更をすることもできます。
※3.前回の記事を参考にして下さい。

Image/Texture/TextureAtlasのご紹介が終わったところで、本記事は終了となります。

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

【テクスチャを表示するサンプル】

import starling.display.Sprite;
import starling.events.Event;

import starling.textures.Texture;
import starling.textures.TextureAtlas;
import starling.display.Image;

internal class StarlinTestMain extends Sprite
{
	//各種ファイルの埋め込み
	[Embed(source = "bg.png")]
	private static const BgBitmap: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 texture:Texture　 = Texture.fromBitmap( new BgBitmap() );
		
		//テクスチャからImageオブジェクトを生成
		var bg:Image = new Image( texture );
		
		//追加
		this.addChild( bg );
		
		
		//埋め込みファイルからテクスチャアトラスを生成
		var sampleTexture:Texture　 = Texture.fromBitmap( new SampleBitmap() );
		var sampleXML:XML　 = XML( new SampleXML() );
		var textureAtlas:TextureAtlas = new TextureAtlas( sampleTexture, sampleXML );
		
		//テクスチャアトラスから"square"のname属性を持つテクスチャを取得
		var squareTexture:Texture = textureAtlas.getTexture( "square" );
		
		//テクスチャからImageオブジェクトを生成
		var square:Image = new Image( squareTexture );
		
		//座標を指定
		square.x = stage.width * 0.5;
		square.y = stage.height * 0.5;
		
		//アンカーポイントを指定
		square.pivotX = square.width * 0.5;
		square.pivotY = square.height * 0.5;		
		
		//追加
		this.addChild( square );			
    }
}
　　　　

【使用リソース】
bg.png

sample.png

sample.xml

<TextureAtlas imagePath="sample.png">

<SubTexture frameHeight="150" frameWidth="150" frameY="-30" frameX="-28" height="88" width="90" y="2" x="2" name="circle"/>

<SubTexture frameHeight="150" frameWidth="150" frameY="-33" frameX="-26" height="80" width="84" y="2" x="94" name="square"/>

<SubTexture frameHeight="150" frameWidth="150" frameY="-30" frameX="-24" height="74" width="96" y="92" x="2" name="triangle"/>

</TextureAtlas>
　　　　

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