Search the Community

Forewarning: semi-newbie Basically, if the user has the left cursor down and a "token" collides with the lftRect, I want to kill the token. For some reason my kill callback function for the collision is not working (below is relevant code): gumballGoGo.Preloader = function(game){ this.player = null; this.ground = null; //this.tokens = null; this.ready = false; }; var cursors, lftInit, rghtInit, ground, testDrp, sprite, tokens, rect, lftRect, ctrRect, rghtRect, lftToken; var total = 0; function lftHit(lftRect, lftToken) { if ( lftInit == true ){ lftToken.kill() } }; gumballGoGo.Preloader.prototype = { preload: function(){ }, create: function() { // LFT BOX lftRect = this.add.sprite(0, this.world.height - 150, null); this.physics.enable(lftRect, Phaser.Physics.ARCADE); lftRect.body.setSize(100, 100, 0, 0); // CNTR BOX ctrRect = this.add.sprite(100, this.world.height - 150, null); this.physics.enable(ctrRect, Phaser.Physics.ARCADE); ctrRect.body.setSize(100, 100, 0, 0); // RGHT BOX rghtRect = this.add.sprite(200, this.world.height - 150, null); this.physics.enable(rghtRect, Phaser.Physics.ARCADE); rghtRect.body.setSize(100, 100, 0, 0); // INIT TOKEN GROUP tokens = this.add.group(); tokens.enableBody = true; this.physics.arcade.enable(tokens); testDrp = tokens.create(125, -50, 'token'); testDrp.body.gravity.y = 300; // CONTROLS this.cursors = this.input.keyboard.createCursorKeys(); }, update: function() { this.ready = true; if (this.cursors.left.isDown) { lftInit = true; } else if (this.cursors.right.isDown) { rghtInit = true; } else { lftInit, rghtInit = false; } if (total < 20) { tokenSpawn(); } this.physics.arcade.collide(lftRect, lftToken, lftHit, null, this); } }; function tokenSpawn() { lftToken = tokens.create(25, -(Math.random() * 800), 'token'); lftToken.body.gravity.y = 300; total++; } PLEASE HELP! The ultimate goal is to recreate this type of gameplay. One additional note: as of now I am dropping "tokens" using a random spawn loop. I'd rather use a timed patter for the token drop. If you have any advice on that please share as well. Thanks :]

Hi everyone! I need a little help with understanding how to properly set timer functions. I'm new to javascript so I often run into syntax issues. I have a group ("starGroup") containing 10 "star" objects. When a user clicks on one of the group's "star" object, I'm hoping to have it tween before being destroyed. Everything seems to work properly up to the end of the tween, however I am having issues setting star.destroy until after the tween. I read in another post that we could use Phaser's timer for this instance, however my timer functions don't seem to be working. I get a return of: "Uncaught TypeError: Cannot read property 'destroy' of undefined(…)". A little help needed? Many thanks! Here's the code: var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('star', 'assets/images/star.png'); } function create() { //Create random Star group starGroup = game.add.group(); // And add 10 sprites to it for (var i = 0; i < 10; i++) {starGroup.create(game.world.randomX, game.world.randomY, 'star');} // Make them all input enabled starGroup.setAll('inputEnabled', true); starGroup.setAll('input.useHandCursor', true); // Call all in group starGroup.callAll('events.onInputDown.add', 'events.onInputDown', starClick); } function starClick (star) { starRemoveTweenA = game.add.tween(star.scale).to( { x:2, y:2 }, 800, "Elastic.easeOut"); starRemoveTweenB = game.add.tween(star.scale).to( { x:0, y:0 }, 800, "Elastic"); starRemoveTweenA.chain(starRemoveTweenB); starRemoveTweenA.start(); //star.destroy(); //Hiding this to set a timer instead //Setting a timer game.time.events.add(2000, functionDestroy, this); } function functionDestroy (star) { star.destroy(); // This is where the console is reporting an issue } function update() {}

Hello, I'm a complete newbie when comes to javascript, phaser and web game-development, so go easy on me. I've been struggling with the Phaser.Timer object. Basically I'm trying to create a 2D sidescroller where the camera scrolls when the character reaches one of the edges. I've got four rectangles, one for each side. I check rectangle.contains(x, y) for each of the rectangles in the update loop. The xy-coords are the character world-coordinates. When the character hits one of the rectangles I move all of the rectangles to their new xy-coords and then start scrolling the camera by manipulating it's xy-coords. Everything works fine the first time I hit a rectangle. Both the rectangles and the camera moves as I want them to. But when I hit another rectangle the borders move but not the camera. When debugging I notice that it seems to die when reaching this line. self.timer.repeat(self.interval, widthToScroll, self.scrollCameraXForward, self); You can find that same snippet in the included code block below along with the cameramanger prototype where I control the movement of the rectangles and the camera. And please refrain from comments that aren't constructive since I'm new to this and still learning the ropes. 'use strict';NameSpaceBase.CameraManager = function(settings) { this.settings = settings || null; this.collisionManager = this.settings.collisionManager || null; this.game = settings.game || null; this.camera = this.game.camera || null; this.camera.setBoundsToWorld(); this.boundary = 20; this.interval = 1; this.borders = null; this.timer = null; this.eventCompleted = false; this.intersectsBorder = false; this.logger = this.settings.logger || null;}NameSpaceBase.CameraManager.prototype = { initialize: function() { this.camera.roundPx = false; var topRect = new Phaser.Rectangle(0, 0, this.game.width, this.boundary); var rightRect = new Phaser.Rectangle(this.game.width - this.boundary, 0, this.boundary, this.game.height); var bottomRect = new Phaser.Rectangle(0, this.game.height - this.boundary, this.game.width, this.boundary); var leftRect = new Phaser.Rectangle(0, 0, this.boundary, this.game.height); this.borders = { topRect: topRect, leftRect: leftRect, bottomRect: bottomRect, rightRect: rightRect }; this.timer = this.game.time.create(this.game, false); }, /** * Update loop for camera. * Check if player is at edge of screen and move camera accordingly */ update: function(x, y) { if (!this.intersectsBorder) { if (this.borders.topRect.contains(x, y)) { this.scrollTop(); } else if (this.borders.rightRect.contains(x, y)) { this.scrollRight(); } else if (this.borders.bottomRect.contains(x, y)) { this.scrollBottom(); } else if (this.borders.leftRect.contains(x, y)) { this.scrollLeft(); } } }, scrollTop: function() { var self = this; self.scroll(self, 'y', 1); }, scrollRight: function() { var self = this; self.scroll(self, 'x', 1); }, scrollBottom: function() { var self = this; self.scroll(self, 'y', -1); }, scrollLeft: function() { var self = this; self.scroll(self, 'x', -1); }, scroll: function(target, axis, points) { var self = target; var widthToScroll = (self.game.width / 2); self.eventCompleted = false; self.scrollBorders(self, axis, points); self.intersectsBorder = true; self.timer.start(); this.timer.onComplete.add(this.onScrollComplete, this); if (axis === 'x') { if (points > 0) { self.timer.repeat(self.interval, widthToScroll, self.scrollCameraXForward, self); } if (points < 0) { self.timer.repeat(self.interval, widthToScroll, self.scrollCameraXBackward, self); } } if (axis === 'y') { if (points > 0) { self.timer.repeat(self.interval, widthToScroll, self.scrollCameraYForward, self); } if (points < 0) { self.timer.repeat(self.interval, widthToScroll, self.scrollCameraYBackward, self); } } }, scrollBorders: function(target, axis, direction) { var self = target; for (var border in self.borders) { if (direction > 0) { self.borders[border][axis] += (self.game.width / 2); self.logger.log('ScrollBorders - axis: ' + axis + ", direction: " + direction); } if (direction < 0) { self.borders[border][axis] -= (self.game.width / 2); self.logger.log('ScrollBorders - axis: ' + axis + ", direction: " + direction); } } }, scrollCameraXForward: function() { var self = this; if (!self.eventCompleted) { self.logger.log('ScrollCameraXForward'); self.camera.x += 1; } }, scrollCameraXBackward: function() { var self = this; if (!self.eventCompleted) { self.logger.log('ScrollCameraXBackward'); self.camera.x += -1; } }, scrollCameraYForward: function() { var self = this; if (!self.eventCompleted) { self.logger.log('ScrollCameraYForward'); self.camera.y += 1; } }, scrollCameraYBackward: function() { var self = this; if (!self.eventCompleted) { self.logger.log('ScrollCameraYBackward'); self.camera.y += -1; } }, onScrollComplete: function() { var self = this; self.eventCompleted = true; self.intersectsBorder = false; self.logger.log('Scrolling complete'); self.timer.stop(true); }};