Search the Community

I have image in pixijs app. I need to hide it then show it with door open like effect (as seen in attached picture) var pixiapp; var pixiloader = PIXI.Loader.shared; initpixiapp(); function initpixiapp() { pixiapp = new PIXI.Application({ width: 1280, height: 720 }); document.getElementById('canvas-container').appendChild(pixiapp.view); pixiloader.add('images/img1.png').load(handleimagesload); } function handleimagesload() { var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture); pixiapp.stage.addChild(img1); // here will the the code to hide and show image in door open effect // var ticker = new PIXI.Ticker(); // ticker.add(() => { // // }) //ticker.start() }

Hello! I am using the following code (which is a simplified snippet in order to make it more readable): which is a simplified snippet in order to make it more readable var player; var box_tnt; function create (){ this.physics.add.collider(player, box_tnt, hitTnt, null, this); } //the function hitTnt stop the game because the player died function hitTnt (player, boxes){ this.physics.pause(); player.setTint(0xff0000); player.anims.play('default'); gameOver = true; textGameOver.setText('GAME OVER'); } Actual comportment: when the player hit the bomb: player die; end of the game Desired comportment: when the player hit the bomb: the bomb wait 3 secondes and then explode ! If the player is too close he die. But I stuggle a lot to use a timer even after reading a lot of example in the forum I am a newbie concerning Phaser so I didn't succeed to it so far. Any help would be appreciated, thank you in advance!

In my game, I want to show on the UI when a power up is unavailable due to a cooldown. I figured the easiest way to do this is to change the button of the power up for the duration of the cooldown. Now I have this working but only for one of the buttons. It seems that the timed event is conflicting with other functions. function sendUnit1(stu_button) { stu_button.frame = 3; game.time.events.add(time, function(){stu_button.frame = 0}, stu_button); } function sendUnit2(fac_button) { fac_button.frame = 3; game.time.events.add(time, function(){fac_button.frame = 1}, fac_button); } This is the code I have without unrelated things surrounding. How can I make the frame update for each button? EDIT: So it turns out that without even worrying about the time event, the button frame won't change in the second function but does for the first function. Why is that?

I am trying to add a simple countdown timer to a Phaser game. When the timer ends I want the game to restart. After adding the timer code there are no errors in the console but I can't get the timer to appear on the screen. Where I am going wrong please? I am new to Phaser and am still learning Javascript - any help would be greatly appreciated! Please see my code below (for clarity, I have only pasted the relevant code, not the whole thing). Thanks for any help in advance. PlayState = {}; PlayState.init = function () { //.... }; PlayState.preload = function () { //.... }; PlayState.create = function () { //TIMER CODE: this.timeInSeconds = 120; this.timeText = this.game.add.text(this.game.world.centerX, this.game.world.centerY, "0:00",{font: '15px Arial', fill: '#FFFFFF', align: 'center'}); this.timeText.anchor.set(0.5, 0.5); this.timer = this.game.time.events.loop(Phaser.Timer.SECOND, this.updateTimer, this); }; PlayState.update = function () { //..... }; PlayState.updateTimer = function() { this.timeInSeconds--; var minutes = Math.floor(this.timeInSeconds / 60); var seconds = this.timeInSeconds - (minutes * 60); var timeString = this.addZeros(minutes) + ":" + this.addZeros(seconds); this.timeText.text = timeString; if (this.timeInSeconds == 0) { this.game.state.restart(); } }; //add leading zeros to any number less than 10 //for example turn 1 to 01 PlayState.addZeros = function(num) { if (num < 10) { num = "0" + num; } return num; }; window.onload = function () { let game = new Phaser.Game(1280, 800, Phaser.CANVAS, 'game'); game.state.add('play', PlayState); game.state.start('play'); };

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; }

From what I can understand there is only one global 'timer' in phaser. This has presented a problem for my game which involves several one-shot timers for the intro. I would like to iterate over a block of text with a timer, based on the one I found in the examples for multi-timer. Then I would like to spawn additional one-shot timers for objects. The problem is, having timers outside of functions appears to be impossible. Meaning timers can only modify and existing timer within a function. The end result is tons of nested timers launching timers and duplicating content, which is a mess. What I would like is: 1) First timer controls the text 2) Second timer controls the images 3) Additional images/text controlled by specific timers. 4) Destroy all timers and blank the canvas, begin the game. Here's what I have so far, which duplicates each function so much it causes my alpha background to turn into a solid! Source: https://pastebin.com/raw/hjMVfVBt Clearly I am lacking an understanding of phaser timer logic, so I've resorted to posting here in hopes someone understands. I've already researched the API and the forums, still don't get it...

Hello, I know Phaser has built in timer. I assume it's designed to support game pause. Could anyone share idea, how game pause should be implemented? Lets assume I used only Phaser's timer class. Is there any way to stop them all and later resume them all? Of course I can do it manually for each timer, but what if later I will add some more or I miss some? It's better to have some kind of global pause for all timers =) Thanks in advance

Hi All, I've seen discussions about the use of timers for control of timed repetition, and examples that use Phaser.time as well as others that use the setInterval mechanism. My question is - is there a best practice recommendation on which way is better? In my situation, I require the use of intervals in order to move a character sprite along a predefined path (generated by A*). There appear to be a number of different ways to do this, and the interpolation function popped up during my research as well. I'm keen to find out the trade offs and decision making involved by folks, and whether there is a recognised or standard best way to do it. Kind Regards, Andrew.

I'm currently making my first ever game and am fairly new to coding so I apologize if this code doesn't make much sense. In my game the player sprite changes with the collection of various items. When a certain item is collected I want it so that the score increases when the player is in a certain zone and decreases when the player is out of that zone all while the player sprite is that specific model, and then I want the score to decrease if the player is in that zone while the sprite model isn't correct. (Sorry if that doesn't make sense!) Here is what I have so far: //in the update function: game.physics.arcade.overlap(player, laneC, laneCScoreModifier, null, this); //outside update function: function laneCScoreModifier (player, lane) { if (player.key == 'heroc') { timer = setInterval(plusScore, 1000); if (! game.physics.arcade.overlap(player, laneC)){ clearInterval(timer); } } else { timer = setInterval(minusScore, 1000); if (player.key == 'heroc') { clearInterval(timer); timer = setInterval(plusScore, 1000); if (!game.physics.arcade.overlap(player, laneC)){ clearInterval(timer); } } } } function plusScore(){ score++; } function minusScore(){ score--; } So my first guess is the '!' modifier isn't doing anything there. When I run the game once the player enters the zone while not having the correct sprite the timer never stops, even if they leave. Anyone have any idea how I should approach this? Any help will be greatly appreciated!

Third time from me today :D, So I want to spawn these customers at random millisecs every loop... The problem is that when the first number is generated it uses it(this specific number) for every loop after that? Any ideas? this is how I'm trying to do it, but I guess there is a better solution... I can't create a variable, since the same thing is going to happen: game.time.events.loop(Math.floor((Math.random() * 10)*1000), this.createCustomer, this);

Greetings, Quick question: How do I dynamically update the arguments of this loop from the update function to reflect the actual coordinates of the pointer? (This loop is found in the create() function) Game.mouseTimer = game.time.events.loop( 100, Client.sendMousePos, Client.class, game.input.mousePointer.x, game.input.mousePointer.y ); I have already attempted several techniques, such as including this code snippet in the update function; However, it throws an Uncaught TypeError: Cannot set property '0' of undefined error. Game.mouseTimer.args[0] = game.input.mousePointer.x; Game.mouseTimer.args[1] = game.input.mousePointer.y; To go around the error, I tried to manually initialize the Game.mouseTimer.args array before the loop. This did indeed avoid the error; However, it only updated the arguments once. Thanks.

I want to count down the time in second. eg: 01.30 then time start to count down from 01:29,01:28,01:27 etc... till the end. What method should I use? Please give me the example.

I am using a custom timer to display the remaining time in the game. In the Timer class I have a function to create a timer, and attach a tick function as its parameter. The timer is currently not working and I can't monitor the changes in the ticks. I put a console.log(myTime) inside the timerTick but nothing shows up. constructor(options) { this.totalTime = options.seconds; this.game = options.game; this.onComplete = options.onComplete; const key = options.key || 'timer'; } reset() { if (this.timer) { this.timer.stop(); } this.hasFinished = false; this.timer = this.game.time.create(); this.timer.repeat(Phaser.Timer.SECONDS, this.totalTime, this.timerTick.bind(this), this); this.timer.onComplete.addOnce(() => { this.hasFinished = true; if (this.onComplete) { this.onComplete(); } }); } remainingTime() { return this.totalTime - this.timer.seconds; } timerTick() { const myTime = this.remainingTime(); console.log(myTime); }

Hello guys I'm working on a javascript game, some times I need to call a function 2, 3 or X seconds after an action, the question is. What is better in performance, create multiple setTimeout() or use the main loop to evaluate a function queue? thanks

I've implemented `Timer` class for high accuracy timing (for example for update logic/game-loop, sending ping each 15 seconds by WebRTC etc.) setTimeout/setInterval fires once per second when tab is inactive, so how to gain accuracy timing? We could set up `setTimeout/setInterval` in WebWorker, because in WebWorkers when tab is inactive, `setTimeout/setInterval` still fires with it's own interval/delay. We could then send message `postmessage/onmessage` from WebWorker to Main Thread on each `setTimeout/setInterval` fire calls as a tick. For some time this idea was working and was brilliant, but when I'm looking now (latest chrome version) this isn't working anymore because of `postmessage`, now `postmessage` delivers event with delay when tab is inactive.. Looks like Chrome Dev Team noticed this feautre, and they've fixed it.. but it wasn't a bug? gaah.. or maybe I have something wrong in the code: https://jsfiddle.net/mfzmotb1/16/ Timer = function Timer(callback, interval) { var id = Timer.prototype.__idCounter++; Timer.prototype.__hash[id] = callback; this.started = false; this.package = JSON.stringify({ id: id, interval: interval }); } Timer.prototype.__workerScript = function() { var __hash = {}; onmessage = function(ev) { var data = JSON.parse(ev.data); if ( __hash[data.id] === undefined ) { __hash[data.id] = { id: data.id, lastTime: performance.now(), interval: data.interval, step: 0 } } else delete __hash[data.id]; } function loop(start) { if ( !start ) for ( var id in __hash ) step(__hash[id]); setTimeout(loop, 0); } loop(true); function step(unit) { while ( performance.now() - unit.lastTime >= unit.interval ) { unit.lastTime += unit.interval; unit.step++; var now = Date.now(); console.log("ww", unit.step, "-", now/1000); postMessage(JSON.stringify({id: unit.id, time: now, step: unit.step})); } } } Timer.prototype.__idCounter = 0; Timer.prototype.__hash = {}; Timer.prototype.__worker = new Worker(URL.createObjectURL(new Blob(['('+Timer.prototype.__workerScript.toString()+')()'], {type: 'application/javascript'}))); Timer.prototype.__worker.onmessage = function(ev) { var data = JSON.parse(ev.data); Timer.prototype.__hash[data.id](data.time, data.step); } Timer.prototype.start = function(){ if ( !this.started ) { Timer.prototype.__worker.postMessage(this.package); this.started = true; } } Timer.prototype.stop = function(){ if ( this.started ) { Timer.prototype.__worker.postMessage(this.package); this.started = false; } } var timer = new Timer(function(wwTime, step) { var now = Date.now(); console.log("m_", step, "-", wwTime/1000, now/1000, (now-wwTime)/1000); }, 100); console.log("starting in 2sec, so you have time to switch tabs"); setTimeout(function() { timer.start(); }, 2000); Basically this code produce new class called `Timer`, there is WebWorker based on one function body `Timer.prototype.__workerScript` <- this fn's body happens in WebWorker. One WebWorker handles all instances of Timer, each instance is for one timer. Any ideas how to fix it? Here goes output: Some tips: ww - console.log called from webworker m_ - console.log called from main thread 1,2,3 - number of timer step Tab Active: starting in 2sec ww 1 - 1485111848.697 //webworker tick time in seconds m_ 1 - 1485111848.697 1485111848.707 0.01 //webworker tick time, main thread tick time, diff ww 2 - 1485111848.798 m_ 2 - 1485111848.798 1485111848.799 0.001 ww 3 - 1485111848.898 m_ 3 - 1485111848.898 1485111848.898 0 ... Tab Inactive: starting in 2sec ww 1 - 1485110821.95 //webworker tick time in seconds ww 2 - 1485110822.049 ww 3 - 1485110822.149 m_ 1 - 1485110821.95 1485110822.169 0.219 //webworker tick time, main thread tick time, diff m_ 2 - 1485110822.049 1485110822.17 0.121 m_ 3 - 1485110822.149 1485110822.171 0.022 ... Do you know any ideas for measuring time for html5 gaming without throttle?

I have a function (fire_event()) outside update(). Inside this function, I do these things: function fire_event(){ my_flag = false; do_stuff_1(); game.add.tween(sprite).to( { alpha: 1.0 }, Phaser.Timer.HALF, Phaser.Easing.Linear.None, true).onComplete.addOnce(function(){ game.time.events.add(Phaser.Timer.HALF, function(){ do_stuff_2(); game.add.tween(sprite).to( { alpha: 0.0 }, Phaser.Timer.HALF, Phaser.Easing.Linear.None, true).onComplete.addOnce(function(){ my_flag = true; }, this); }, this); }, this); } function update(){ if(my_flag){ do_update_stuff(); } else { //do nothing } } Everything that need to be rendered on function do_stuff_2(), is not rendering... only when the most inner tween finishes things got rendered. Everything go rendered, till the code reaches do_stuff_2(). ------------------------------ Detailed info about do_stuff_2(): underlayer_group.removeAll(); //clear group overlayer_group.removeAll(); //clear group map_name = current_event.target; //thats just a string maps[map_name].setLayers(underlayer_group, overlayer_group); //I'll provide a more details on it, but it basically add new layers to these groups hero.body.x = current_event.x_target * maps[map_name].sprite.tileWidth; //hero is a sprite. Changing it x position hero.body.y = current_event.y_target * maps[map_name].sprite.tileHeight; //hero is a sprite. Changing it y position shadow.x = hero.x; //shadow is a sprite. Changing it x position shadow.y = hero.y; //shadow is a sprite. Changing it y position //reconfig world physics game.physics.p2.resume(); map_collider.body.clearShapes(); map_collider.body.loadPolygon(maps[map_name].key_name, maps[map_name].key_name); mapCollisionGroup = game.physics.p2.createCollisionGroup(); map_collider.body.setCollisionGroup(mapCollisionGroup); map_collider.body.setZeroDamping(); map_collider.body.setZeroRotation(); hero.body.collides(mapCollisionGroup); map_collider.body.collides(heroCollisionGroup); game.physics.p2.updateBoundsCollisionGroup(); Detailed info about setLayers(): setLayers(underlayer_group, overlayer_group){ this.map_sprite = game.add.tilemap(this.key_name); //set map sprite this.map_sprite.addTilesetImage(this.tileset_name, this.key_name); //set tilemap image for(var i = 0; i < layers.length; i++){ var layer = this.map_sprite.createLayer(layers[i].name); //create a layer layer.resizeWorld(); if(layers[i].properties.over != 0) //just test a property to determine which group this layer is going to make part overlayer_group.add(layer); else underlayer_group.add(layer); } } --------------------------------- In short words: do_stuff_2() removes sprites from groups, then add new layers to them, and change some sprites position. The thing is, everything inside do_stuff_2() only happens when the tween under do_stuff_2() finishes. The inner tween makes alpha channel goes from 1 to 0 immediately. Here is a working example: https://jjppof.github.io/goldensun_html5/index The problem happens always in the fade out. Fade in works. To see the problem, just get inside the "inn" house. This part of the code is inside the index.js file at root folder. Line 227, inside teleport() function. QUESTION: Does a time event inside a tween, like the example above, make things do not render excepting when everything is finished? Don`t things get rendered when I nest callbacks?

Hello, I just encountered the following issue. In two different games I am using two ways of updating the game time shown in the UI - a timer and a timed event. I've just discovered that changing the PC's clock by -1 hour (say it's 10:00 AM, I roll it back to 9:00 AM) causes the updating to stop. This issue is not present if I roll the clock forward (from 10:00 AM to 11:00 AM). I found a way around this by using setInterval and clearInterval, but I'd like to know if a Phaser internal fix or workaround exists, or maybe if I need to do something differently. Here is the case when using a timer: private startTimer(): void { this.gameTime = 0; this.timer = this.game.time.create(); this.timer.loop(Phaser.Timer.SECOND, () => { this.updateTime(); }, this); this.timer.start(); }; And here is the case when using a timed event in the second game: this.timeElapsed = 0; this.game.time.events.loop(Phaser.Timer.SECOND, () => { this.updateTimer(); }, this); Both calls are made in the play state's create function. This is on a Windows 10 PC.

Hi, so I am using arcade physics, and when my player sprite collides with my object, I have a timer starting, and during that time I would like to stop player movement (say for 10 seconds if my timer is set to 10 seconds). I can successfully stop the player movement on collision, but when the time stops (aka time runs out) I want the player to resume movement (right now it just stays frozen). I am stopping player movement by setting player.body.velocity = 0; I am checking for collisions in update, and starting the timer on collision with the object. I am using phaser's provided timer.

Hi, I am working on my first Phaser project and can't figure out how I should work this out well. I am build a simple JS game where I have fruits dropping and a player collecting them, whenever I collect a fruit I need it to re-spawn at a random position, which I am achieving well, but then I tried adding a timer event to the fruit, which after 5 sec of the fruit that has spawned, the player will lose the fruit and add to the missed fruit counter. I am using the P2 Physics by the way, below are parts of my code attached. //setting up the fruits fruits = game.add.group(); fruits.enableBody = true; fruits.physicsBodyType = Phaser.Physics.P2JS; //creating the fruit scale, position and anchor fruit = fruits.create(this.rnd.realInRange(50,800), this.rnd.realInRange( 50, 50), 'cherry'); fruit.body.setCircle(30); fruit.scale.setTo(0.1,0.1); fruit.anchor.setTo(0.5, 0.5); fruit.body.data.gravityScale = 2; fruit.game.time.events.add(Phaser.Timer.SECOND * 5, fruitMissed, this.fruit); //set collision group fruit.body.setCollisionGroup(fruitCollisionGroup); // setting to which grps the fruit can collide fruit.body.collides([fruitCollisionGroup, playerCollisionGroup]); fruit.body.collides(rockCollisionGroup, fruitHitRock, this); I am adding a time event to the fruit, which will call the fruitMissed function after 5 sec, which will de-spawn and collect the fruit, add score and will reset the position of the fruit, but whenever I reset the position I want to attach a timer again which I am unable to. Below is the fruitCollected function, where I need to respawn the fruit again. . function fruitCollected (body1, body2) { console.log('Fruit Collected'); body2.reset(this.rnd.realInRange(900, 50), 35); //increase the score score += 50; scoreText.text = 'Score: ' + score; } What are your thoughts on how I should tackle this. Thanks

I have 2 timers in my game - an overall game timer, which I display the value on the screen, and a cooldown timer, for when the player does an action, and they have to wait the cooldown duration until they can do another action. My problem is that when I set the cooldown timer, the display of the overall game timer shows the cooldown timer, just briefly. I set the main timer with: gameTimer = game.time.events.add(Phaser.Timer.SECOND * 90, gameOver, this); I display the main timer duration on the screen with: timerText.setText("Time: " + formatTime(game.time.events.duration)); And I set the cooldown timer with another timer variable: var timer = game.time.events.add(Phaser.Timer.SECOND * 0.2, resetCooldown, this); I don't understand how to display the main game timer always, without the cooldown timer affecting it.

I'm using Phaser v2.6.2 . In my code, I use looping timers created with : this.game.time.create(); The timers callbacks / functions are working as expected on desktop which runs at 16 ms / 60 FPS. The issues appear on mobile which runs at 18 ~ 20 ms / 50 ~ 54 FPS. The timers seem to skip some function calls while looping. I've found a solution to this problem: this.game.forceSingleUpdate = false; Now the timers behave as expected on mobile devices but the overall feel of the game is slow / lag / jagged . So I need to use both timers and : this.game.forceSingleUpdate = true; I'm not able to find a solution to this even though I've spent a few days looking into the Phaser core ( Game.js and Timer.js ). I think I need to find a way to synchronise timers with the logic update.

Hi everyone. I have the looped timer : timer = this.game.time.create(false); timer.loop(Phaser.Timer.SECOND * 3, this.endTimer, this); timer.start(); Everything works good, but i want to play sound every ticked second, how to implement this?

Hello, I have a larger project using P2 physics with many tweens and the game sometimes moves randomly, some objects have some delays etc, even when game runs on almost stable 60fps. I've made a simple example in Phaser 2.4.6: var level = 1; intro = function(game) {}; intro.prototype = { create: function() { this.stage.backgroundColor = "#ffffff"; game.time.events.add(2000, this.spawnWater, this, 4); }, spawnWater: function(amount) { for (var i = 0; i < amount; i++) { var topwater = game.add.sprite(683, 150, 'graphics2', 'static/smth/line.png'); topwater.anchor.setTo(0.5); topwater.scale.setTo(0.2); topwater.scaleTween = game.add.tween(topwater.scale).to({x: 1, y: 1}, 2000, Phaser.Easing.Cubic.In, true, (i*500), -1, false); topwater.positionTween = game.add.tween(topwater.position).to({y: 670}, 2000, Phaser.Easing.Cubic.In, true, (i*500), -1, false); } }, }; What should it do : - after 2 seconds it should spawn 4 lines - each line has 2 tweens, for scale and position. - tweens starts after 0, 500, 1000 and 1500 ms and they are looped infinitely (so they start again from starting values. - there should be line moving from y = 150 to y = 670 every 500 ms How does it work: When reloading the game sometimes the lines are moving correctly (that means every 500ms there is a line), but sometimes after first 4 lines there is longer gap (longer than 500ms) and is messing the way the lines are moving.... What is wrong? EDIT: delay times in tweens were wrong, fixed it from (i+1)*500 to (i*500)

Hello, multiple timers, it is impossible to use in one gamelevel, at the same time? Simple example: I need a timer for the duration of the game (90 seconds). I need a timer for enemies (short intervals / random). I need a timer for rare, larger enemies (long intervals / random). Do not go there with? var mytime1 = .... var mytime2 = .... var mytime3 = .... I need all 3 timer to the same time. I am so far failed. The Phaser example "Multiple Timers" does not help me further (because there are not for me "Multiple Timers" because run consecutively and is just a trick. Or I do not understand the message). Thanks for hints

Hello everyone, I am trying to create a timer that will count down three minutes after the state was started. I am not sure how to make a text that will visualize the timer.(00:00) Can you guys help out?