Jump to content

Modified Space Invaders, Container Collision for 'Walls'


Recommended Posts

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(
    me.game.world.addChild(this.leftWall, 2);

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

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

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.createdWall = true;
    onActivateEvent: function () {
    onDeactivateEvent: function () {
    removeChildNow: function (child) {
        this._super(me.Container, "removeChildNow", [child]);
    update: function (dt) {
        this._super(me.Container, "update", [dt]);

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) {
        return false;
    if (other.body.collisionType === game.collisionTypes.LEFT_WALL) {
        return false;
    if (other.body.collisionType === game.collisionTypes.MIDDLE_WALL) {
        return false;
    if (other.body.collisionType === game.collisionTypes.RIGHT_WALL) {
        return false;



Link to comment
Share on other sites

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.

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...