frost-byte Posted January 28, 2019 Share Posted January 28, 2019 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; } } Quote Link to comment Share on other sites More sharing options...
frost-byte Posted January 28, 2019 Author Share Posted January 28, 2019 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; Quote Link to comment Share on other sites More sharing options...
obiot Posted January 29, 2019 Share Posted January 29, 2019 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.