Search the Community

Something where I'm not (yet? ?) comfortable in programming logic is these callbacks things. So I see in the texture constructor that the onLoad function sent us a callback... how can I use this thing to manipulate the texture object just after its creation? I've started a playground here: http://www.babylonjs-playground.com/#K8AGLY > how can I access to the texture to sets its name, for example, or even better, to apply it on the material only when the onload is called? Thanks!

Probably more of an issue with my js knowledge but how can I pass a parameter, for example here one of the sprites? (edited version of the lab, https://labs.phaser.io/edit.html?src=src\time\timer event.js ) function update() { atlasFrame.rotation += 0.01; singleImage.rotation += 0.01; let timedEvent = this.time.delayedCall(3000, stopRotation, [], this); } function stopRotation(spriteName){ let spriteNamehere = spriteName; window[spriteNamehere].rotation=0; }

Hi, I'm a relative noob to javascript and Phaser, and I'm having an issue coding my first proper game. I'm using Phaser version 2.6.2 and the latest version of Chrome browser. I'm asking the user a basic maths question, but when I draw the buttons for the user to click they appear but aren't clickable. Here is the console error: And here is the code I believe to be causing the error: game.add.button(50, 250 + i * 75, "buttons", this.checkAnswer).frame = i; And there is also this bit of code to draw the button mask: this.buttonMask = game.add.graphics(50, 250); this.buttonMask.beginFill(0xffffff); this.buttonMask.drawRect(0, 0, 400, 200); this.buttonMask.endFill(); numberTimer.mask = this.buttonMask; Any help would be appreciated, if you need any extra information to help me I'll gladly provide it. Been staring at this problem for over a week and I just can't figure out what's wrong, I hope it's something simple I'm doing wrong. Thanks

Good morning guys! I've created a class to manage my sliders in Phaser 2.6.2 with Typescript. I create an object slider like this in file a.ts: let slider = new Slider(game, x, y, width, height, mycallback); mycallback is like that: export function mycallback(value: number): void { usedvalue = value; } My slider class is like that: export class Slider extends Phaser.Group { protected value : number; constructor ( game : Phaser.Game, x : number, y : number, width : number, height : number, onClickCallback : Function ) { super(game); console.log(this); } setParameter(sender) { this.value = sender.width - sender.x; console.log(sender); console.log(this); this.onClickCallback(this.value); sender.onClickCallback(this.value); } } Ok, now both this.onClickCallback(this.value); and sender.onClickCallback(this.value); return an error "onClickCallback is not a function". The first console.log(this), the one inside the constructror, give me the right log writing Slider and all his values. The second console.log(this) and console.log(sender), the ones in setParameter, return me game. What is my error? How can I resolve this?

Helpp Me I want te execute my callback function only 1 time. But it won't

hi, i have two object hero and enemy. My hero is an array with 3 player. when my hero collide with the enemy i would invoke the function : "hero.explode". My snippet is below. the problem is with the function createBodyCallback, i have two problem. the function this.hero.explode works before the collision...and my hero don't touch the enemy....why ? i cant access the body2.otherfunction() because the callback is in fact this.hero.player.body.otherfunction so i have an error. could you help me for these 2 points ? thanks. character = function(){ game.physics.startSystem(Phaser.Physics.P2JS); game.world.setBounds(-1000,-1000,40000,40000) Phaser.Sprite.call(this,game,640,h+500,'rect') this.flag_mouse=false this.flag_show_button=true //cible this.cible=game.add.sprite(w2,300,'cible') this.cible.anchor.setTo(.5,.5) game.physics.p2.enable(this.cible) this.cible.body.static=true this.cible.scale.setTo(1.5,1.5) this.player={} for (var i = 0; i < 3; i++){ this.player[i]=game.add.sprite(640,1980+i*500,'rect') game.physics.p2.enable(this.player[i]) this.player[i].body.setCircle(20) } } character.prototype = Object.create(Phaser.Sprite.prototype) character.prototype.constructor = character character.prototype.explode=function(body1,body2){ body2.sprite.alpha=0 body2.otherfunction() } character.prototype.otherfunction=function(){ console.log("explode") } this.hero=new character() //far for (var i = 0; i < 3; i++){ this.enemy.body.createBodyCallback(this.hero.player[i],this.hero.explode,this) }

Hi all, currently I got problem that I have a websocket thread to communicate with the server. and the game object is also start in the process, the situation is like this. when I got the response: A from the server, I will change the game to a new state by game.state.start('NEW STATE'); and then I will get the response: B, C from server, then I need to run some functions defined in the new state, like this game.state.callbackContext.function_in_new_state(); but it is not working, then I loged the state game.state.current I found that the current state is still the OLD ONE. I know the state change need some time, BUT is PHASER provide any callback method when the current state changed to another one, thx everyone.

Hey guys, I got a weird behavior from using the callback method on group.onDestroy: this.playerCar = 'car1'; this.enemyCar = 'car2'; this.optionsGroup.onDestroy.add(this.currentTrack.createCars, this, 0, this.playerCar, this.enemyCar);

Hey guys, I got a weird behavior from using the callback method on group.onDestroy: this.playerCar = 'car1'; this.enemyCar = 'car2'; this.optionsGroup.onDestroy.add(this.currentTrack.createCars, this, 0, this.playerCar, this.enemyCar); and what I get on the other side instead of 'car1' and 'car2', is: [object, object] and true. I even tried using: this.currentTrack.createCars.bind(this), but it does not help Does anyone know why? Phaser version 2.6.2

Hi guys, So I am trying to develop and learn Phaser for educational game purposes. I have explored adding sprites/images to make a game, but now i am trying to use the Tiled program to build game levels. Can anyone tell me the best way to change/modify the player when it is touching/overlapping certain tiles? Currently I am using a single layer Tiled.json file. Trying to make a slippery/acceleration boost surface. I can change the player speed, but I can't reset it back after they leave the tiles. At the moment I am setting the collision by - map.setTileIndexCallback([95], this.slippery, this); calling a function slippery that sets my variable - playerSpeed = 500; then I need a way to set it back to slow again. Is there a leave tile function/callback? Another issue with doing it my way is that it overwrites the - map.setCollisionBetween(1,146); and the player falls through the tile. So I have had to make an invisible tile above the surface that I want to make slippery to make it work. If I am going about this all wrong please let me know.

hi, I can access to this.timer_text in the bottom of my function. Can you help me ? ////////////////////////////////////////////////////////////////////////////////////////// //huds.js Timer = function(game,Group){ var timer_value="40" this.Group=Group this.timer_text = game.add.bitmapText(w2,h2,'lucky',timer_value, w*.15) this.flag = true game.time.events.loop(Phaser.Timer.SECOND, updateCounter,this) function updateCounter() { if (this.flag){ if (timer_value == 0) { } else { timer_value-- } this.timer_text.setText(timer_value) } } //modif anchors this.timer_text.anchor.x=.5 this.timer_text.anchor.y=.4 this.angle_array=[2820,2920,2740,2850,2760,1700,2800,2910,2020,2930] this.angular = this.angle_array[Math.floor(game.rnd.between(1,this.angle_array.length-1))]; Phaser.Sprite.call(this,game,w2,h2,'roll_turn') this.anchor.x=.5 this.anchor.y=.5 //cache au debut this.visible=false this.alpha=0 //ajout aux groupes this.Group.add(this.timer_text) this.Group.add(this) } Timer.prototype = Object.create(Phaser.Sprite.prototype) Timer.prototype.constructor = Timer Timer.prototype.turn_chooce = function() { this.visible=true this.tween_main=game.add.tween(this).to({alpha:1},900,Phaser.Easing.Linear.None,true,0) this.tween=game.add.tween(this).to({angle:this.angular},1000,Phaser.Easing.Circular.Out,true,1000) this.tween.onComplete.add(move_timer,this) /////////////////////////////////////////////////////////////////////// //////////////HERE MY ERROR I CAN ACCESS TO THIS.TIMER_TEXT > UNDEFINED function move_timer(){ this.flag=true this.timer_text.visible=true var tween00=game.add.tween(this.Group).to({x:0,y:h2-150},300,Phaser.Easing.Linear.None,true) tween00.onComplete.add(next_tw,this) } function next_tw(){ background.flag_close=true } }

Hello, I am trying to make a small basketball free-throw game similar to the emoji basketball game on Facebook. I was following along with an example from Phaser (World Bounds Event) to try to respawn the ball when it hit the edge of the screen. I've tried to implement that below (see code) but the respawn function never fires. Does anyone know what I'm doing wrong? Envirolympics.TestGame = function (game) { //Variables this.score = null; this.scoreText = null; this.ball = null; this.net = null; this.leftMarker = null; this.rightMarker = null; this.launched = false; this.lastPointerPos = null; //Constants this.GRAVITY = 980; this.SHOOT_FORCE = 850; this.EDGE_CUSHION = 10; }; Envirolympics.TestGame.prototype = { create : function () { //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, 100, 'net'); this.net.anchor.setTo(0.5); //Add hoop children markers this.leftMarker = this.net.addChild(this.game.make.sprite(-50, 40, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker = this.net.addChild(this.game.make.sprite(50, 40, 'marker')); this.rightMarker.anchor.setTo(0.5); //Load ball sprite this.ball = this.game.add.sprite(this.game.world.centerX, this.game.world.height - 100, 'ball'); this.ball.anchor.setTo(0.5); //Setting up the physics environment this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.physics.arcade.gravity.y = this.GRAVITY; //Setting up the ball physics this.game.physics.arcade.enable(this.ball); this.ball.body.bounce.setTo(0.35); this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; this.ball.body.collideWorldBounds = true; this.ball.body.onWorldBounds = new Phaser.Signal(); this.ball.body.onWorldBounds.add(this.respawn, this); //Enable input this.ball.inputEnabled = true; this.game.input.onDown.add(this.track, this); this.game.input.onUp.add(this.launch, this); //Initialize this.score = 0; this.scoreText = this.game.add.bitmapText(10, 10, 'pixel', this.score, 36); this.lastPointerPos = new Phaser.Point(0, 0); //For mobile Phaser.Canvas.setTouchAction(this.game.canvas, "auto"); this.game.input.touch.preventDefault = false; }, update : function () { //TO DO: //detect collision with net markers //determine if scored //respawn }, track : function () { //Update the last finger position this.lastPointerPos.x = this.input.x; this.lastPointerPos.y = this.input.y; //Set the ball physics to be still this.launched = true; this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; }, launch : function () { if (this.launched) { this.launched = false; this.ball.body.moves = true; this.ball.body.allowGravity = true; //Get the direction of finger swipe, normalize it, and apply a scalar to the velocity of the ball var direction = new Phaser.Point(this.input.x - this.lastPointerPos.x, this.input.y - this.lastPointerPos.y); direction.x = this.game.math.snapTo(direction.x, 5); direction.y = this.game.math.snapTo(direction.y, 5); Phaser.Point.normalize(direction, direction); if (direction.y < 0) { this.ball.body.velocity.setTo(direction.x * this.SHOOT_FORCE, direction.y * this.SHOOT_FORCE); } } }, respawn : function () { console.log("Does this function even run?"); //Set the ball physics to be still again this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; //Spawn the ball in a new, random location var ballSpawnX = this.game.rnd.integerInRange(this.ball.width + this.EDGE_CUSHION, this.world.width - this.EDGE_CUSHION); ballSpawnX = this.game.math.snapTo(ballSpawnX, 10); //Make sure the ball is in the boundary we set if (ballSpawnX < this.ball.width + this.EDGE_CUSHION) { ballSpawnX = this.ball.width + this.EDGE_CUSHION; } else if (ballSpawnX > this.world.width - this.EDGE_CUSHION) { ballSpawnX = this.world.width - this.EDGE_CUSHION; } this.ball.x = ballSpawnX; } };

I'm having a hard time triggering onDestroy for my FreezeEffect object. I've essentially set up an object that destroys itself after a few seconds. I've tested and confirmed that "destroyObject" is being called. But sometimes the game ends, the state transitions in the middle of the FreezeEffect, and the "onDestroy" method is never called. I was under the assumption that calling state.start('newState') destroys the Phaser objects in the previous state. Is that not true? Example code: // Freeze Effect FreezeEffect = function (game) { ... constructor code ... ... create tween to fade freeze effect ... // Call function to destroy the freeze effect when the tween finishes tween.onComplete.add(this.destroyObject, this); // Slow down time game.time.slowMotion = 2.0; }; FreezeEffect.prototype = Object.create(Phaser.Group.prototype); FreezeEffect.prototype.constructor = FreezeEffect; FreezeEffect.prototype.destroyObject = function() { // Put time at normal speed this.game.time.slowMotion = 1.0; this.parentGroup.destroy(true, false); this.freezeSFX.destroy(); // Destroy the object and free memory this.destroy(true, false); }; FreezeEffect.prototype.onDestroy = function() { // Put time at normal speed this.game.time.slowMotion = 1.0; }

The following can be used to add a callback to input events, but from my understanding the callback will be run when any mousePointer, pointer1, pointer2, etc. are pressed down. this.input.onDown.add(function (pointer) { // code here }, this); Is there a way to add callbacks to specific inputs? I have tried this.input.mousePointer.onDown.add(function () { // code here } but this gives an error.

I'm making a menu and decided to use onDownCallback. The options are text objects(game.add.text(....)). The selected option should become active. But it works only once and for the first chosen option - up or down. Then nothing happens. BUT the debugger goes in the called functions everytime I press 'up' or 'down'. create() { down.onDown.add(optionB, this); up.onDown.add(optionA, this);}function optionA() { optionAText.fill = activeFill;} function optionB() { optionBText.fill = activeFill;}Edit: actually, everything works but the text color(fill) does not update. Another thing I tried: update() { if (this.game.input.keyboard.lastKey == down) { optionA.fill = deactiveFill; optionB.fill = activeFill; } else if (this.game.input.keyboard.lastKey == up) { optionA.fill = activeFill; optionB.fill = deactiveFill; }}I don't know why but this makes both options change color. If I press 'down', both are activeColor, if I press 'up', both get deactiveColor. ... Great! I have other ideas how to do what I want but I'd like to know what's wrong with the upper 2.

Hello, I'm using Phaser with the Box2d Plugin. I'm having some issues with contact callbacks. I have a "wallContactCallback" to trigger when a body collides with any wall. This works correctly with any game that does not have a scrollable camera view. However, as soon as I set up a camera view, the callback is no longer triggered. Even though my bodies still collide with the walls, the callback still does not trigger. Has anybody seen an issue like this before? Any tips are appreciated. Thanks.

Is there a collide=false callback? I want function A to fire upon collision and function B to fire if there is no collision; similar to jQuery.ajax success and error callbacks. I want to play my sprite's walk animation on collide=true and it's jump animation on collision=false.

Hi, how do you handle events and/or callbacks? How do you handle interactions like mouse events, events bubbling, listeners etc? And what do you think are the best libraries or native functions to handle all this? Personally I am an event guy but I am open to other options too, if necessary, just let me know what is best for you and what you use.

Hey! I'm wondering how I could implement a sound when a coin is picked up by the player. I've got that part working, but the idea is: right after the sound finished playing when the player and the coin overlap, a pause screen should overlay the game. So here the game is paused, and now the sound only plays for like a millisecond and then immediately switches to the pause screen. I've searched for timers, but I can't figure out how to implement a timer on an overlap, AND play the sound AND show the pause screen. Actually what I'm looking for is a solution to execute 2 callback functions in the overlap. This is my overlap function in the update, where only the pause screen gets shown (this.vow1): game.physics.arcade.overlap(player, coin1, this.vow1, null, this);I've tried making a function for the music to play: playCoinMusic: function () { music = game.add.audio('coinmusic'); music.play();},I could add the playCoinMusic function to the overlap, but then the pausescreen (this.vow1) wouldn't get executed... Like this:game.physics.arcade.overlap(player, coin1, this.playCoinMusic, null, this);Any ideas? Thanks in advance!

Hi, I'm looking for a best way to load several textures while displaying the progress to the user. Until now I've found the Tools.LoadImage method which works well and even cares for IndexedDB. However this method returns an Image object, and I didn't found a way to create a texture from an Image. Texture constructor receives the Url of an image and not an Image object. In addition, this method (Tools.LoadImage) provides just OnLoad callback and I want the OnProgress. I've also looked at FilesInput class, but it appears that this class is used for Drag&Drop files loading and I can't use it for my own purposes. Any suggestions? I'm sure that I'm missing something, certainly there is a simple way to do it.

Hi all, I'm having an issue where I want to just sense for a collision once and then deactivate one of the physics bodies. But for the life of me, sometimes the collision fires twice or more times, despite my using clearCollision(). Here's what I have: First I set up a collision between the 'iceCube' and the 'basket': iceCube.body.collides(basketCollisionGroup, iceCubeCollision, this);Next, my callback function looks like this: function iceCubeCollision(body1, body2){ console.log("Ice cube collision") body1.clearCollision(true); body1.clearShapes(); console.log ("collision cleared?") ...}Does anyone have any advice? Maybe I'm missing something simple like just checking for a 'collision begin' phase? Any help is appreciated - Nick

Hi there, I'm trying to do something which I think should be rather simple but I don't seem to be able to achieve it. When a button is clicked, I'm trying to pass a parameter to the button callback function, however if I pass anything to the function and console.log it out, it's always the clicked button. Is there a way to pass a parameter other than the button to the button callback? Thanks! Martin

until the 2 days ago player.body.createGroupCallback(enemyCG, playerDie, this);worked .. also all other forms of collision callbacks worked (body callback, collides, etc) the bodies collide but the callback is never fired.. didn't change a thing.. just phaser 1.2 to 2.0 i read the docs and it seems i've done everything right

I'm having issues with the callback passed in to the onDown. For some reason when I try to play an animation from within the callback the animation won't play at all. What's strange is the animation will play fine in my key detection in the "update" function. My code is this: Player = function(game) { this.game = game; this.sprite = null; this.cursors = null;};Player.prototype ={ preload: function() { this.game.load.spritesheet('grandpa', 'assets/grandpa.png', 64, 117); }, create: function() { this.sprite = game.add.sprite(2 * 64, 8 * 64, 'grandpa'); // animations this.sprite.animations.add('left', [7,6,5,4], 7, true); this.sprite.animations.add('right', [0,1,2,3], 7, true); this.sprite.animations.add('up', [8,9,10,11], 7, true); this.sprite.animations.add('down', [0,1,2,3], 7, true); this.sprite.animations.add('beer', [0,12,13,0], 7, true); this.cursors = this.game.input.keyboard.createCursorKeys(); var beerButton = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); beerButton.onDown.add(beerDrink, this); function beerDrink() { console.log('beer!'); this.sprite.animations.play('beer'); } }}

I'm trying to make a game which is basically a grid where the player moves across. When the player moves on certain squares the first panel of a dialog tree will be presented: Some text, an image and some choices. The dialog trees I want to be able to make in JSON. For the choices there is a text and an action to be taken on that choice. I made the choices using Phaser.button, which has callback:Function as a parameter. Things I want to be able to do are fx. modify player health, spawn enemy, modify energy, so all kinds of stuff. I don't really have a clue how to do this in phaser. I understand that i need some reference to the gamedata, but how to run a method like game.player.modifyhealth(-10) from something like this {callback:"game.player.modifyhealth",mod:-10} when i press a certain button? So what do i pass to Phaser.button as callback?