Sign in to follow this  
Massemassimo

Rendering Order

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.