Rendering Order

[Massemassimo]

Hey, I am trying to reorder my objects but I am having a hard time (I am a very inexperienced programmer in general).

So... Not sure if the following is important, but I will very briefly explain what I want to do and how I am trying to do it, maybe you can turn this into a lesson while (hopefully) answering the main question.

 

What I want to do:

• Draw a map consisting of hexagonal tiles (extending sprites)
• Show some data about each tile when being hovered (text should be on or close to the tile)

How I go about it:

• create an overlay object controlling the info
• create a map object which in return creates the tile objects
• listen to hover events on each tile (did this with this.events.onInputOver.add(this.hoverOver, this); and if (this.input.checkPointerOver(this.game.input.mousePointer, false)) { this.hoverOver(); }, seems to do the same)
• call a function of the overlay object called "drawTileCoords(this)" in the "this.hoverOver". function of the tile objects

Now hovering over the tiles works just fine (I also do "this.tint = 0xBADA55;" in thisHover(), which does tint the hovered tile).

Also having the overlay.drawTileCoords(tile: Tile) function write stuff about the received tile pointer (like tile.position.x) to the console is no problem.

 In the constructor of the overlay object I set

var style = { font: "12px Arial", fill: "#000000", align: "center" };this.textQ = this.game.add.text(0, 0, "a", style);this.textR = this.game.add.text(0, 0, "b", style);

which should work just fine, right? In the drawTileCoords function I do this:

this.textQ.position.set(tile.center.x - 30, tile.center.y + 30);this.textR.position.set(tile.center.x + 30, tile.center.y + 30);this.textQ.setText("q:" + tile.coords.x);this.textR.setText("r:" + tile.coords.y);

and the text changes (checked with console.log(this.textQ.text);) but I never see the text being rendered.

 

Now I believe this is because I create the overlay object first and then the map object (which then creates the tile objects), leading to the tiles being rendered after/over the overlay. 

 

This is part of my main Phaser.State's create function :

this.overlay = new Overlay(this.game);this.map = new Map(this.overlay, this.game, 52, 64, 20, 10);

So my questions are:

• Am I right with this assumtion?
• If I am in fact right, what can I do about it? How do I get the overlay to render after the map?
• If I am not right, what is going on?
• Also, is this the normal way of having objects talk to each other or would you do it completely different? I really do not know what I am doing, only learning from examples and as I go.

[valueerror]

initialise groups for everything you want to display.. make sure those groups are in the right displayorder and add everything to those groups according to their wanted z value..

besides.. you can always use bringToTop() whch will bring the object to the top within its displaygroup eg. the group on top of the others whithin the parent group (or world)

[Massemassimo]

Ok this worked!

 

I had tried it before starting this post, but ran into troubles since I just tried to add the overlay object and the map object as a whole to their groups, which threw a runtime error since

A Group is a container for display objects including Sprites and Images. (Phaser docs -> group), and the overlay and the map object are no display objects.

 

The way I do it though feels a little clunky to say the least, could anybody elaborate on if you would've structured your code differently?

 

As an example, at the moment I pass the following stuff to my map object on creation:

constructor(overlay: Overlay, game: Phaser.Game, grp: Phaser.Group, tileHeight: number, tileWidth: number, tilesX: number, tilesY: number)

The overlay pointer gets passed to each tile which takes args like so

constructor(overlay: Overlay, game: Phaser.Game, x: number, y: number, key: any, coords: Phaser.Point)

and calls the overlays function drawTileCoors like so

this.overlay.drawTileCoords(this);

drawTileCoords looks like this:

drawTileCoords(tile: Curious.Tile) {                      this.textQ.position.set(tile.center.x - 30, tile.center.y + 30);            this.textR.position.set(tile.center.x + 30, tile.center.y + 30);            this.textQ.setText("q:" + tile.coords.x);            this.textR.setText("r:" + tile.coords.y);        }

the textQ and textR objects are Phaser.Text objects created in the overlay constructor and added to the overlay group passed to the overlay object as an arg on creation / initialization (?term?).

Is this clunky or what? Sure feels like it.

[Massemassimo]

No general programming advice?

[Massemassimo]

Ok seems I get no general coding advice. If somebody can point me to a video or tutorial on how to code in a clever fashion, I would be very thankful.

 

Anyways, closing this since the correct answer was given earlier.