ActorContainer.setZOrder

[douglasquade]

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]

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: https://github.com/hyperandroid/CAAT/issues/42

[douglasquade]

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]

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: https://github.com/hyperandroid/CAAT/issues/42#issuecomment-4122646

[douglasquade]

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]

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: https://github.com/hyperandroid/CAAT/issues/42#issuecomment-4124295