Layer Z-Ordering

TehT

  • *
  • Posts: 32
Working on a card based game, but I am having some difficulty getting the card Z order to change at all..
As they say, a picture is worth a thousand words.

The top number is Z-Order within the layer, the second is Layer ID.
As you can see, they are on the same layer, but the order is completely off.

I try to use the block "Move [self] [to the top] within the layer and the numbers change, but the order does not.
Any ideas?



TehT

  • *
  • Posts: 32
Oh, I just realized why this isn't working properly, These are made using DRAW, they are not sprites.
Slightly modifying the question, how can i arrange the Z-Order of drawn objects?
Even if i were to replace the drawings with images I still need to draw text on there and I presume that will have the same issue. Each square is drawn by its own separate sprite.

yoplalala

  • *
  • Posts: 1610
If I remember well if you draw on a actor,  and you change the z-order the orderof the drawing will change as well, but I'm not 100 percent sure.
But you can also use the image api, you can draw on image instances and you can change the z_order of these image instances.

TehT

  • *
  • Posts: 32
That seems to be the issue, It appears to layer them in the order of creation, and the Z layer of each individual sprite does not seem to have any effect.

I guess I could change how they are being drawn to using a list, but I'd rather not if there's a way to kick the Z buffer thing so it works properly.

TehT

  • *
  • Posts: 32
Further testing seems to indicate that the draw order is the same as the order the sprite was created in.
Is there any way to change this somehow? I tried changing the "drawing" to a scene behavior drawing from a sorted list but this did not give the result I needed.

http://www.stencyl.com/game/play/31152

Here's my current work in progress that illustrates my issue
Press 'Enter' to stack or line up the cards, drag them with the mouse to see them change Z-order (top number)
The mouse will always grab from the first drawn, bottom card instead of the 'top' and lower cards will not overlap later cards regardless of their current Z-order

yoplalala

  • *
  • Posts: 1610
That seems to be the issue, It appears to layer them in the order of creation, and the Z layer of each individual sprite does not seem to have any effect.

I guess I could change how they are being drawn to using a list, but I'd rather not if there's a way to kick the Z buffer thing so it works properly.

How are you changing your z-order ? I don't think "move self up in the layer" reallay works

Here's a global custom block I'm using to move the z-index inf front .
Global Custom blocks are cool because you can use them anywhere.


Basically what it does, it moves the z-index of the actor you want to move to the last one. But it also moves all the z-indexes  of the other actors. Like this you don't have actors which have the same z-index.

TehT

  • *
  • Posts: 32
Thanks for the tip, tho unfortunately it does not seem to solve my issue.
I can see the Z index changing on each of the card sprites, but the drawing does not change.
Is this just a limitation of how the drawing function in Stencyl works?

yoplalala

  • *
  • Posts: 1610
I forgot  it was made with draw ... I nearly never use draw.  And you can't draw lines on the with the image api :(

 " tried changing the "drawing" to a scene behavior drawing from a sorted list ". 
How did you do this ? Maybe you could post your project.

"The mouse will always grab from the first drawn, bottom card instead of the 'top' and lower cards will not overlap later cards regardless of their current Z-order"
I have a solution for this :)

TehT

  • *
  • Posts: 32
I reckon i could change the cards to sprites, but would i not run into the same issue with the text?
Any ideas how i could possibly solve that?
I'd love to see your solution for picking up the topmost card if you don't mind, I have a solution for this in mind but I haven't actually made it yet sooo..

yoplalala

  • *
  • Posts: 1610
No you won't run in the same issues because you can draw text on image instances and if you attach the images instances to actors, their z-order will stick to z-order of the actors.

Ok my solution  is

# When you click you add all the clicked actors to a list, then you will select which actor you choose
When mouse is pressed
set clickedActors to create new list
for every actor on the screen
    if mouse is down over actor on screen
          addd actor on screen to clicked Actors
#To leave the time for all the clicked actors to be in the list
do after 0.1 second
       trigger event selectDraggedActor

# This event enables you to choose the actor with the highest z-index, and then set the variable draggedActor to it
Event selectDraggedActor
repeat number of items in clickedActors -1   
      if z-index  of get item 0 from clickedActors =< z-index  of get item 1 from clickedActors
             remove item 0 fromlist
      else
              remove item 1 fromlis
set draggedActor to get item 0 from clickedActors


Then you can do your own drag behavior or modify the existing one.
Basically
when you release the mouse it will clear the value of draggedActor
when you move the mouse, the x and y of the dragged actor will follow the mouse

TehT

  • *
  • Posts: 32
That worked great! Thanks for the tip!
I've spent some time reworking the game to use actual sprites instead of using the DRAW function.
Unfortunately, as soon as i try to add text i run into the same problem.
The text is all drawn on top of everything, if i try to use the Draw Image for Actor block, that issue is resolved we're back to the same issue as before with them not respecting the Z-Layer order.

Will I need to use the Image API for this? and if so, is there a more in-depth instruction than the official one? it's a bit fuzzy around the edges. 

yoplalala

  • *
  • Posts: 1610
Yes I think you will need the image api.
So for this do an actor behaviour you will attach.
You will need to create
  - an image attribute image .  You'll set this image attribute to a blan image the width and size of self.  You will draw text on the image as you wish
  - an image instance attribute  imageInstance. b You'll set it to the instance of the image created before. You'll attach the imageInstance to your actor and tada ! it works :)

Now do you wish your text attributes to change during the game ?

TehT

  • *
  • Posts: 32
Potentially changing the text would be handy.
From the looks of it I will require a full copy of the image per card type, correct? I can't draw on an instance, so if i want two cards with different text, that will require two images. Should i plan any upper limit to how many different images I can make?

yoplalala

  • *
  • Posts: 1610
No I don't think you need to plan an upper limit. I have used this system, and my game I have some parts with more than 30 labels and still 60fps. So I don't think you need to be worry:) . I think it's less intensive than drawing text on the screen, I don't have any proof, but I feel it's the case :).

Here's a version I'm using to draw labels easily (it 's not finished yet, didn't pu all the options). As you can see it's quite complex but it's still super fast.
It's quite complex because I did some system with centering, colour filling, and specially I wanted my text to have the same size event If I grew the actor ( image instances grow with the actor they're attached to) if I wanted to.


But basically the idea is to have the behaviour that creates the image and image instance in a separate event. Like this when you change the text ( I use actor values) , you just have to trigger the event for the actor afterwards.  And don't forget the remove the image instance from the parent at the beggining of the event.

TehT

  • *
  • Posts: 32
That's brilliant! Everything seems to work exactly as I need it to, thanks bunches!
I'm currently trying to extend this a bit by adding a separate picture to the image, 
but I seem to be having some issues with the Image From File: block.  I have the image in the extras folder as indicated but It doesn't want to work. For the cards I used the Image From Actor block as a workaround but I'd rather get the from file one to work. I've looked around but most of the stuff I find seems to be pre-3.3

Checked the logs, and I am getting an error message:
Code: [Select]
[Flash] lime.Assets#getImage(303): [Assets] There is no Image asset with an ID of "assets/data/icons.png"

Edit: Derp, apparently this is EXTREMELY case sensitive, issue resolved tho! :D

« Last Edit: June 14, 2015, 11:15:08 am by TehT »