前回は、Feathersのsliderクラスについてご紹介いたしました。
今回は、FeathersのTiledImageクラスをご紹介したいと思います。
ゲームなどを作るときに大きい背景ではなく、同じ画像を繰り返し表示するような
ケースがあると思います。
そんな場合にこちらの、TiledImageクラスを使用すると簡単に画像の繰り返し表示が行えます。
こちらの使用方法について説明していきます。
まず、インスタンスを定義し、生成します。
この際、コンストラクタの引数には、Textureクラスのインスタンスを指定します。
var tileImage:TiledImage; //タイルの表示サンプル tileTexture = Texture.fromBitmap( new tileData()); //Textureデータの生成 tileImage = new TiledImage(tileTexture); //TiledImageの生成
次に表示サイズを指定します。
tileImage.setSize(900,700); //表示サイズの指定
次に平滑化の設定を行います。
この平滑化とは、画像を拡大、縮小した際に画像の見た目が荒くなる場合に、
見た目を滑らかにしてくれる機能となります。
今回は画像の拡大、縮小は行いませんので、なしを指定します。
設定値については、以下になり、バイリニアフィルタリング、トライリニアフィルタリングは、
画像を平滑化する手法です。
TextureSmoothing.NONE ：なし
TextureSmoothing.BILINEAR ：バイリニアフィルタリング
TextureSmoothing.TRILINEAR ：トライリニア・フィルタリング(バイリニアフィルタリングより高性能な手法)
＜バイリニアフィルタリングとトライリニア・フィルタリングについて＞
どちらも3Dに使用されるものとなりますが、
バイリニアフィルタリングはピクセルに最も近い4つのテクセル（3次元コンピュータグラフィックスに貼り付ける画像の画素のこと）
を使用し、4つのテクセルの色の距離、拡大率を考慮した計算を行い、最終的なテクセルを導きだす手法です。
トライリニアフィルタリングについては、バイリニアフィルタリング手法に対して更に奥行きを考慮した
テクセルを導き出す手法となりますので、バイリニアフィルタリングより高性能な手法となります。
詳しくは下記のサイトを参照願います。
＜参考サイト＞
http://www.4gamer.net/specials/3de/nv_at/nv_at01.html
平滑化の設定の記述は、以下になります。
tileImage.smoothing = TextureSmoothing.NONE; //平滑化の設定
このTextureSmoothingを使用する場合は、以下をインポートしてください。
import starling.textures.TextureSmoothing;
最後に、貼り付け終わりとなります。
addChild(tileImage);
簡単なご紹介となりましたが、以上で本記事は終了となります。
最後まで御覧いただきありがとうございました。
TiledImageのサンプルコード
(下記の画像をTiledImageでリピートさせて、Tweenでスクロールさせています。）
import starling.core.Starling;
import starling.display.Image;
import starling.display.Sprite;
import starling.events.Touch;
import starling.events.TouchPhase;
import starling.events.TouchEvent;
import starling.textures.Texture;
import starling.events.Event;
//feathersのタイルイメージ
import feathers.display.TiledImage;
import starling.textures.TextureSmoothing;
import starling.animation.Tween;
import starling.core.Starling;
internal class StarlinTestMain extends Sprite
{
//各種ファイルの埋め込み
[Embed(source = "tiledata.png")]
private static const tileData:Class;
private var tileTexture:Texture; //TiledImageクラスに貼り付けるTexture定義
private var tileImage:TiledImage; //TiledImageクラスの定義
private var tileImageTween:Tween;
public function StarlinTestMain()
{
addEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);
}
private function addStage(e:starling.events.Event):void
{
removeEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);
tileTexture = Texture.fromBitmap( new tileData()); //Textureデータの生成
tileImage = new TiledImage(tileTexture); //TiledImageの生成
tileImage.setSize(900,700); //表示サイズの指定
tileImage.smoothing = TextureSmoothing.NONE; //平滑化
backgroundRepeat();
addChild(tileImage);
}
/**
* 背景のスクロール関数.
*/
private function backgroundRepeat(){
tileImage.x = 0;
tileImage.y = 0;
if(tileImageTween != null){
Starling.juggler.remove(tileImageTween);
}
var tileWidth:int = 1000;
var tileHeight:int = 800 ;
tileImageTween = new Tween( tileImage , 2 )
tileImageTween.moveTo( -100, -100 );
tileImageTween.onComplete = backgroundRepeat;
Starling.juggler.add(tileImageTween);
}
}
＜次回の更新について＞
次回は、FeathersのScrollTextクラスについてご紹介します。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。