ActionScript 3: Tiles på den nemme måde

Nogen gange har man brug for at tile (gentage det samme stykke grafik mange gange) for eksempelvis at fylde en baggrund ud.
En oplagt måde er at lave et loop, som kopierer og placerer det stykke grafik der skal tiles, men der findes en meget, meget nemmere måde, nemlig funktionen beginBitmapFill.

Først skal vi bruge det stykke grafik som skal tiles, så i dette eksempel har jeg importeret en png ind i mit library og efterfølgende sat den til at blive eksporteret til ActionScript som klassen Tile:

ActionScript 3 Tile

Og herefter er det såre simpelt:

var tile:BitmapData = new Tile(0, 0);
var background:Sprite = new Sprite();
background.graphics.beginBitmapFill(tile, null, true, false);
background.graphics.drawRect(0, 0, 500, 500);
background.graphics.endFill();
addChild(background);

Voila, en baggrund på 500×500 pixels.

En ting der er værd at bemærke er, at hvis man har brug for efterfølgende at ændre størrelsen på baggrunden, så er det ikke nok bare at sætte en ny højde og bredde, da det vil strække tilen, fremfor at kopiere den.

I stedet skal man bruge graphics.clear() og tegne et nyt område:

background.graphics.clear()
background.graphics.beginBitmapFill(tile, null, true, false);
background.graphics.drawRect(0, 0, 2000, 2000);
background.graphics.endFill();

Dynamisk load
I det første eksempel har jeg brugt et stykke grafik fra mit library, men det kan naturligvis også gøres med en jpg eller lignende som man loader dynamisk:

var url:String = "tile.jpg";
var loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, tileLoadComplete);
loader.load(new URLRequest(url));

function tileLoadComplete(_e:Event):void {
	var tile:Bitmap = Bitmap(_e.target.loader.content);
	var background:Sprite = new Sprite();
	background.graphics.beginBitmapFill(tile.bitmapData, null, true, false);
	background.graphics.drawRect(0, 0, 500, 500);
	background.graphics.endFill();
	addChild(background);
}

Så nu er der ingen undskyld for ikke at tile på livet løs, men please, ingen hjerter eller killinger!



Del:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg

Skriv en kommentar