• Content Count

  • Joined

  • Last visited

  1. frost-byte

    Boiler Plate Grunt for Self Hosting

    On a whim I decided to try using webpack instead of grunt. After a lot of tinkering around, including some refactoring of my code to ES6, I'm able to generate a bundle/dist that works. The only thing that remains is figuring out how/if I should bother bundling the assets in the data folder. (Even without that, I"m working on adjusting the webpack config to properly copy the assets)
  2. frost-byte

    Boiler Plate Grunt for Self Hosting

    I've created my own variation of the Space Invaders game, but I started with the boiler plate repo on github. I've updated from melonjs 6.0 to 6.3. I'm having an issue with the output of the "grunt" command. Unfortunately the bundling of melon and my game source files will not run. When execution reaches game.onload(), the console throws an error saying that game is undefined. Everything works if I just copy my javascript files over and adjust the index.html to load them, instead of the js/app.min.js My question is, what is the proper way to bundle all the project now, so that I don't have this issue? (Incidentally I was also seeing an error about drawShape, a function I'm not even using, and that went away if I just used the unbundled and unminified melon.js) <script type="text/javascript"> me.device.onReady(function onReady() { game.onload(); }); </script>
  3. frost-byte

    Keyboard Input not Working in Chrome

    You are correct, just before reading your post I went and disabled my plugins and I can indeed confirm that the Evernote plugin is causing the issue. Here's a link to the game, still a work in progress: Xinvaders I have a few other different issues that I'll post in another thread.
  4. frost-byte

    Keyboard Input not Working in Chrome

    I'm using melon 6.3.0 and I'm self hosting my game. If I run the game via Firefox, it works just fine. (I've also tested MS Edge and the latest version of Opera, they also work) However, when using chrome, the keyboard input acts as though it is 'stuck'. If I push one of the keys I have bound for movement to the left (A or the left arrow), the game behaves as though the key is still pressed even after it has been released. This makes it impossible to move to the right, as the game no longer seems to respond to pressing D or the Right arrow key. However, I can still press the spacebar and the player shoots.
  5. frost-byte

    Modified Space Invaders, Container Collision for 'Walls'

    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;
  6. 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 = - 140; console.log("Creating Left Wall"); this.leftWall = new game.Wall( 160, wallY, game.collisionTypes.LEFT_WALL ); this.leftWall.createWall();, 2); console.log("Creating Middle Wall"); this.middleWall = new game.Wall( / 2 - 16, wallY, game.collisionTypes.MIDDLE_WALL ); this.middleWall.createWall();, 2); console.log("Creating Right Wall"); this.rightWall = new game.Wall( - 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) {; game.playScreen.enemyManager.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.LEFT_WALL) {; game.playScreen.leftWall.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.MIDDLE_WALL) {; game.playScreen.middleWall.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.RIGHT_WALL) {; game.playScreen.rightWall.removeChild(other); return false; } }