Modified Space Invaders, Container Collision for 'Walls'

[frost-byte]

I've taken the SpaceInvaders example project and extended it - added different enemy types with animations, a different player, also with animations.
I'm in the process of adding the three 'walls' or 'barriers' that were in the original game.

I've set up each wall as a separate instance of a class that extends me.Container.  Each container holds 4 rows of 12 images in a grid, similar to how the enemies
are stored in a container with a grid.

Currently all the walls are rendering properly, but it seems like the quad for each wall is offset to the midpoint of the wall (along the x axis).
So when I fire, into visually what appears to be empty space, I'm actually hitting and removing a piece of the wall.
See the attached gif to get an idea of what the issue is, I have debugging enabled so that you can see the boundaries for each piece of the wall and the walls themselves.
The left edge of the collision quad for the wall container seems to be placed horizontally in the middle of the wall, instead of at the left edge.

Am I missing something - a parameter for defining the left of the quad?

Here's a snippet from play.js, the ScreenObject.

onResetEvent: function() {

    ...
    var wallY = me.game.viewport.height - 140;
    console.log("Creating Left Wall");
    this.leftWall = new game.Wall(
       160,
       wallY,
       game.collisionTypes.LEFT_WALL
    );
    this.leftWall.createWall();
    me.game.world.addChild(this.leftWall, 2);

    console.log("Creating Middle Wall");
    this.middleWall = new game.Wall(
       me.game.viewport.width / 2 - 16,
       wallY,
       game.collisionTypes.MIDDLE_WALL
    );
    this.middleWall.createWall();
    me.game.world.addChild(this.middleWall, 2);

    console.log("Creating Right Wall");
    this.rightWall = new game.Wall(
        me.game.viewport.width - 192,
        wallY,
        game.collisionTypes.RIGHT_WALL
    );
...
}

Here's the code for the Wall 'class':

game.Wall = me.Container.extend({
    init: function (left, top, collisionType) {
        // A Wall is composed of three sections, each representing
        // a different character.
        this.PREFIXES = ["wall_L_","wall_M_","wall_R_"];

        // Each Character, or wall section, is cut up into a grid of
        // four rows and columns.
        this.COLS = 4;
        this.ROWS = 4;
        this.PIECE_WIDTH = 16;
        this.PIECE_HEIGHT = 16;

        // The width of an entire row (and the container itself), the width of each piece (cell)
        // or column in a wall section * the number of columns per wall section
        // * the number of wall sections
        this.wallWidth = this.PIECE_WIDTH * this.COLS * this.PREFIXES.length;
        this.wallHeight = this.PIECE_HEIGHT * this.ROWS;
        this._super(me.Container, "init", [left, top, this.wallWidth, this.wallHeight]);
        this.vel = 0;
        this.collisionType = collisionType;
    },
    createWall: function () {
        // generate the entire wall, left to right, section by section, column by column
        for (var j = 0; j < this.ROWS; j++) {
            for (var c = 0; c < this.PREFIXES.length; c++ ) {
                for (var i = 0; i < this.COLS; i++) {
                    // The name of the image
                    var wallPiece = this.PREFIXES[c] + j + i;
                    // The x and y coords for the wall piece
                    var x = c * this.COLS * this.PIECE_WIDTH + i * this.PIECE_WIDTH;
                    var y = j * this.PIECE_HEIGHT;

                    // Add the piece as a child of the wall container.
                    this.addChild(me.pool.pull("wall_piece", x, y, wallPiece, this.collisionType));
                    console.log("wall.createWall: (" + x + ", " + y + "); img: " + wallPiece);
                }
            }
        }
        this.updateChildBounds();
        this.createdWall = true;
    },
    onActivateEvent: function () {
    },
    onDeactivateEvent: function () {
    },
    removeChildNow: function (child) {
        this._super(me.Container, "removeChildNow", [child]);
        this.updateChildBounds();
    },
    update: function (dt) {
        this._super(me.Container, "update", [dt]);
        this.updateChildBounds();
    }
});

and, the onCollision method from laser.js (i've defined custom collision types)
 

onCollision: function (res, other) {
    if (other.body.collisionType === me.collision.types.ENEMY_OBJECT) {
        me.game.world.removeChild(this);
        game.playScreen.enemyManager.removeChild(other);
        return false;
    }
    if (other.body.collisionType === game.collisionTypes.LEFT_WALL) {
        me.game.world.removeChild(this);
        game.playScreen.leftWall.removeChild(other);
        return false;
    }
    if (other.body.collisionType === game.collisionTypes.MIDDLE_WALL) {
        me.game.world.removeChild(this);
        game.playScreen.middleWall.removeChild(other);
        return false;
    }
    if (other.body.collisionType === game.collisionTypes.RIGHT_WALL) {
        me.game.world.removeChild(this);
        game.playScreen.rightWall.removeChild(other);
        return false;
    }
}

 

[frost-byte]

I was able to fix this by specifying the anchor point for the wall to be 0.0, 0.0 in the init method for the Wall class, after calling the super's init.

this.anchorPoint.x = 0.0;
this.anchorPoint.y = 0.0;

 

[obiot]

Yeah, anchor point is still an issue sometimes. We are trying to move away from the current messy entity implementation and favor the addition of a physic body to “standard” renderable. In the mean time using top-left coordinates as the anchor does indeed help.