Tiles on the display list?

#1

Is there a way to add Tiles to the display list? Or at least layer them above (or below) text fields and other bitmaps?

#2

I think it should work like that:

addChild(textfield);
addChild(tilemap);
addChild(textfield2);

You can use a new layer of Tiles using an other Tilemap (there will be one more drawcall)
addChild(tilemap2);

If you want to mix Tiles and textfields with one drawcall, you will have to create textfields with Tilemap.

#3

Yeah, I created individual textfields as I “cut” a new tile from the set and added to the map. Here’s the result: http://www.roomrecess.com/Haxe/SolarSequence/index.html

I can’t get the text fields to match the layers of the individual planets.

        planetSet = new Tileset(Assets.getBitmapData("img/SheetPlanets.png"));
	planetMap = new Tilemap(stage.stageWidth, stage.stageHeight, planetSet);
	addChild(planetMap);
	var c:Int = 0;
	var p:Int = 0;
	var h:Int = 0;
	while (c < 12) {
		var pTileInfo:Int = planetSet.addRect(new Rectangle(p, h, 125, 125));
		var pTile:Tile = new Tile(pTileInfo);
		planetMap.addTile(pTile);
		planet.push(pTile);
		planet[c].x = p;
		planet[c].y = h;
		var colPH:Bitmap = new Bitmap(pixel);
		col.push(colPH);
		col[c].width = 125;
		col[c].height = 125;
		col[c].x = planet[c].x;
		col[c].y = planet[c].y;
		col[c].alpha = 0;
		addChild(col[c]);
		var eventPH:TextField = new TextField();
		event.push(eventPH);
		event[c].multiline = true;
		event[c].wordWrap = true;
		eventFormat.leading = -5;
		TextFieldSetup(event[c], 95, col[c].x + 12, col[c].y + 18, "event text testing how this looks", true, eventFormat);
		addChild(event[c]);
		c++;
		p += 125;
		if (p == 750) { 
			p = 0;
			h += 125;
		}
	}

*Disclaimer: (It’s a kids game.) LOL

#4

There is also addChildAt() method at DisplayObjectContainer to force “depth” positioning. You can specify the position with integer value: lower values are at “bottom”.

#5

The problem I’m having is the my Tile array (planet[0], planet[1], etc.) is not considered part of the display list. I get this error: openfl.display.Tile should be openfl.display.DisplayObject

#6

Yeah, Tiles are not DisplayObject, they are not ment to work like this. They are rendered on their Tilemap, and the Tilemap is descendant class of DisplayObject, and you are adding it with:

addChild(planetMap);

now you just need to:

 planetMap.addTile(planet[c]);

(if planet[c] is of Tile type indeed)

#7

I did that, and it worked great. But I still don’t understand how to manipulate the index (or layering) of the planets and textfields. Basically, when the user clicks on a planet. I need the planet and it’s corresponding text to come to the front. Do I simply need to get rid of the map and add the planet assets individually as Bitmaps? Thanks for your help!

#8

I think there is couple of ways for doing this. I would suggest implementing a “planes” concept if you need to bring some things to the front like you describe. So for eg. you could create 2 containers - “front” and “bottom” - and swap your items between them as needed. And indeed, if you don’t plan to heavy load on planets animations with hight FPS etc. than maybe you don’t have to use Tilemap at all, and just display a Bitmap (which is DisplayObject so you can position it easier).

#9

Great advice. Yeah, I’m a lot more comfortable working with Bitmaps. I just use Tilemaps/Sets when I have 10+ bitmaps to add to the game. Easier loading at runtime. Thanks for your time!

#10

Another option is to write your text to a BitmapData (use bitmapData.draw) and then handle your textFields as tiles as well :slight_smile:

#11

Thanks a lot. Is there a different class I should be using to split up Spritesheets?

#12

You mean to extract separate pictures from 1 bigger bitmap? For that you can use BitmapData methods like copyPixels, merge or even applyFilter, colorTransform or copyChannel to do some fancy effects.