Skip to content
This repository has been archived by the owner on Nov 14, 2023. It is now read-only.

ActorContainer.setZOrder #42

Closed
douglasquade opened this issue Feb 22, 2012 · 5 comments
Closed

ActorContainer.setZOrder #42

douglasquade opened this issue Feb 22, 2012 · 5 comments

Comments

@douglasquade
Copy link

I am trying to set a different z-index value for an ActionContainer contained inside an ActionContainer
but it doesn't work.

Maybe because it setZOrder can be applied only to an Actor contained inside an ActorContainer?

@hyperandroid
Copy link
Owner

Nope. You can call setZOrder on any ActorContainer despite its nesting
level.
It should work properly.
If you can, post an example please.

-ibon

El 22 de febrero de 2012 21:23, Sergio Rey Calvete <
reply@reply.github.com

escribi:

I am trying to set a different z-index value for an ActionContainer
contained inside an ActionContainer
but it doesn't work.

Maybe because it setZOrder can be applied only to an Actor contained
inside an ActorContainer?


Reply to this email directly or view it on GitHub:
#42

@douglasquade
Copy link
Author

In this example, I am trying to create five ActorContainers. Each of them
containing 2 cells (ActorContainers) and this cells will contain Actor's.

While I create the 5 ActorContainers, I use the same loop to
create 2 cells (ActorContainers) inside each of the 5 ActorContainers,
using "createCells(...)" to return an array with 2 cells.

The problem is that only the first two cells are over the first ActorContainer,
then the other cells are drawn under the other 4 ActorContainers with
incorrect values for Y position and z-index.

That's why I suspect there is any z-index problem

    for(var element = 0; element < 5; element++) {

               var slotElement = new CAAT.ActorContainer();

        slotElement.setBounds(
                this.container.x,
                nextSlotY,
                defaultImageWidth,
                defaultImageHeight
                )
            .setFillStyle("#fbff87")
            .setBackgroundImage(
                    director.getImage(slotElementBackground)
                    );

        slotElement.setId("slot_element_" + element);

        // Create 2 cells at nextSlotY position
        var cells = this.createCells(2, nextSlotY);

        // Add cells to slot element
        slotElement.addChild(cells[0].container); // Left cell
        slotElement.addChild(cells[1].container); // Right cell     


        // Add slot element to panel
        this.addSlotElement(slotElement);                           

        // Calculate Y position for next slot element
        nextSlotY += defaultImageHeight + this.SLOT_PADDING;
    }

@hyperandroid
Copy link
Owner

Actors position are always local related to its parent.
I don't see the createCells method post it if you can.
In the other hand, you can set CAAT.DEBUG=1 before building your director
and enable bounding rects to see where actors and their children lie
visually.

regards,
-ibon

El 22 de febrero de 2012 21:46, Sergio Rey Calvete <
reply@reply.github.com

escribi:

In this example, I try to create five ActorContainers. Each of them
containing 2 cells (ActorContainers) and this cells will contain Actor's.

While I create the 5 ActorContainers, I use the same loop to
create 2 cells (ActorContainers) inside each of the 5 ActorContainers,
using "createCells(...)" to return an array with 2 cells.

The problem is that only the first two cells are over the first
ActorContainer,
then the other cells are drawn under the other 4 ActorContainers with an
incorrect Y position.

That's why I suspect there is any z-index problem

// Create five ActorContainers
for(var element = 0; element < 5; element++) {

                  var slotElement = new CAAT.ActorContainer();

                   slotElement.setBounds(
                                   this.container.x,
                                   nextSlotY,
                                   defaultImageWidth,
                                   defaultImageHeight
                                   )
                           .setFillStyle("#fbff87")
                           .setBackgroundImage(

director.getImage(slotElementBackground)
);

                   slotElement.setId("slot_element_" + element);

                   // Create 2 cells at nextSlotY position
                   var cells = this.createCells(2, nextSlotY);

                   // Add cells to slot element
                   slotElement.addChild(cells[0].container); // Left

cell
slotElement.addChild(cells[1].container); // Right
cell

                   // Add slot element to panel
                   this.addSlotElement(slotElement);

                   // Calculate Y position for next slot element
                   nextSlotY += defaultImageHeight + this.SLOT_PADDING;
            }

Reply to this email directly or view it on GitHub:
#42 (comment)

@douglasquade
Copy link
Author

This is the "createCells()" method:

this.createCells = function(numberOfCells, slotElementYPosition) {

    // Array containing cells
    var cells = [];

    // Create slots containing cards inside each slot element
    // p.e.: land element has 2 slots containing 2 cards each slot
    var nextCellXPosition = 1;

    for(var slotCell = 0; slotCell < 2; slotCell++) {

        var cell = new Slot(2); // 2 cards per cells

        cell.container.setBounds(nextCellXPosition, 
                                slotElementYPosition, 
                                50, 
                                70)
            .setFillStyle("#aabb00");

        // Calculate x position for the cell placed
        // to the right side
        nextCellXPosition += cell.container.width + this.CELL_PADDING;

        cells.push(cell);
    }   

    return cells;
}

@hyperandroid
Copy link
Owner

As i suspected your createCells method accumulates Y position.
Every container creates a new coordinate system starting at 0,0 on its top
left corner.
So make your createCells method to lay the cells out relating to 0,0 on its
container, and not on incremental Y position.
call this.createCells( 2, constant_y ) and not this.createCells( 2,
nextSlotY ).

-ibon

El 22 de febrero de 2012 22:08, Sergio Rey Calvete <
reply@reply.github.com

escribi:

This is the "createCells()" method:

   this.createCells = function(numberOfCells, slotElementYPosition) {

           // Array containing cells
           var cells = [];

           // Create slots containing cards inside each slot element
           // p.e.: land element has 2 slots containing 2 cards each

slot
var nextCellXPosition = 1;

           for(var slotCell = 0; slotCell < 2; slotCell++) {

                   var cell = new Slot(2); // 2 cards per cells

                   cell.container.setBounds(nextCellXPosition,

slotElementYPosition,
50,
70)
.setFillStyle("#aabb00");

                   // Calculate x position for the cell placed
                   // to the right side
                   nextCellXPosition += cell.container.width +

this.CELL_PADDING;

                   cells.push(cell);
           }

           return cells;
    }

Reply to this email directly or view it on GitHub:
#42 (comment)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants