Search the Community

Showing results for tags 'countdown'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 8 results

  1. Hello, I'm making a racing game (at least I'm trying to!) I'm using a setTimeout function to delay the start of the scrolling of the background by 3 seconds which works perfectly! But, what I really need now is to display an image of "3" *pause & fade out*, switch to image of "2" *pause & fade out*, switch to "1" *pause & fade out* then show "Go!" * fade out* I saw something where I set the alpha to 0 and then tween the alpha to 1 like so: game.add.tween(this.countDown).to({alpha: 1}, 1000, Phaser.Easing.Linear.None, true, 0, 1000, false); But this isn't exactly what I'm looking for. I'm not sure what all of these parameters are or how I would switch between the images (using different images or a spritesheet, I'm not sure what's best) to give the desired effect. Can someone please help me? Many thanks, and let me know if you need me to explain this better! Update: I kept hunting around (I apologize for not searching more thoroughly) but, I did come across chaining tweens. I'm trying it out but having some difficulty
  2. Hi everyone, // If I make grammar mistakes, please excuse me. I'm still not fluent in English ahah I'm a beginner on Phaser, had to have a look into that for my courses. I'm now upgrading a basic tutorial and I want to use a timer (a countdown) in that game but it really doesn't work, it only create a black screen. To do this, I followed this tutorial : I tried other, without success. Some were a bit to hard to understand, others were pretty ugly ! So here is the code I used , can you help me ? : var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('star', 'assets/star.png'); // on ajoute un diamant game.load.image('dmd','assets/diamond.png') game.load.spritesheet('dude', 'assets/dude.png', 32, 48); } var player; var platforms; var cursors; var stars; var diamonds; var score = 0; var scoreText; var countdown; function create() { // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game game.add.sprite(0, 0, 'sky'); // The platforms group contains the ground and the 2 ledges we can jump on platforms =; // We will enable physics for any object that is created in this group platforms.enableBody = true; // Here we create the ground. var ground = platforms.create(0, - 64, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); // This stops it from falling away when you jump on it ground.body.immovable = true; // Now let's create two ledges var ledge = platforms.create(400, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-150, 250, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-100, 510, 'ground'); ledge.body.immovable = true; // The player and its settings player = game.add.sprite(32, - 150, 'dude'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.bounce.y = 0.2; player.body.gravity.y = 350; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); // Finally some stars to collect stars =; // We will enable physics for any star that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 10; i++) { // Create a star inside of the 'stars' group var star = stars.create(i * 70, 0, 'star'); // Let gravity do its thing star.body.gravity.y = 15; // This just gives each star a slightly random bounce value star.body.bounce.y = 0.2 + Math.random() * 0.2; } // On ajoute les diamants; diamonds.enableBody=true; // création des diamants dans l'espace de jeu for (var i = 0; i < 3; i++) { var dmd = diamonds.create(i * 70, 0, 'dmd'); dmd.body.gravity.y = 30; dmd.body.bounce.y = 0.1 + Math.random() * 0.2; } countdown.startTime = new Date(); countdown.totalTime = 120; countdown.timeElapsed = 0; countdown.createTimer(); countdown.gameTimer =, function(){ countdown.updateTimer(); }); // The score scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); } function update() { // Collide the player and the stars (et les diamants du coup) with the platforms game.physics.arcade.collide(stars, platforms); game.physics.arcade.collide(diamonds, platforms); game.physics.arcade.collide(player, platforms); // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function game.physics.arcade.overlap(player, stars, collectStar, null, this); // idem pour les diamants game.physics.arcade.overlap(player, diamonds, collectDiamonds, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150;'right'); } else { // Stand still player.animations.stop(); player.frame = 4; } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } function collectStar (player, star) { // Removes the star from the screen star.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } function collectDiamonds (player, dmd) { dmd.kill(); score += 50; scoreText.text = 'Score: ' + score; } function createTimer(){ var countdown = this; countdown.timeLabel =, 100, "00:00", {font: "100px Arial", fill: "#fff"}); countdown.timeLabel.anchor.setTo(0.5, 0); countdown.timeLabel.align = 'center'; } function updateTimer (){ var countdown = this; var currentTime = new Date(); var timeDifference = countdown.startTime.getTime() - currentTime.getTime(); //Time elapsed in seconds countdown.timeElapsed = Math.abs(timeDifference / 1000); //Time remaining in seconds var timeRemaining = countdown.timeElapsed; //Convert seconds into minutes and seconds var minutes = Math.floor(countdown.timeElapsed / 60); var seconds = Math.floor(countdown.timeElapsed) - (60 * minutes); //Display minutes, add a 0 to the start if less than 10 var result = (minutes < 10) ? "0" + minutes : minutes; //Display seconds, add a 0 to the start if less than 10 result += (seconds < 10) ? ":0" + seconds : ":" + seconds; countdown.timeLabel.text = result; if(countdown.timeElapsed >= countdown.totalTime){ // On cherche la fin du timer result = "Rate !"; } }
  3. Making Countdown Timer for game starting

    Hello. I'm newbie to Phaser. I need to create countdown timer for game starting. It should looks like counting from 3 to 1, then the game should be started. I'll be using images as a numbers. i Have the following game state's Boot StartMenu Game GameOver I thought that i need to create state "PreGame", where will be countdown timer code. Is this correct? And help me pls with writing timer using images. Could someone help me with this.
  4. I'm working on a game where the player must complete a level within 30 seconds. If the player succeeds the timer is stopped, a message displays, the next level starts and the timer must be reset to 30 seconds. This all happens within the same Phaser.state. The time display only needs to be updated each second, not in between, so I looked at this example and use a time-object and initialise it with .loop() and then .start() it. When the time runs out or when player wins the timer is stopped with .stop(). The problem is that timer.Start() doesn't seem to work after the timer.Stop() was called. If looked at .pause() and resume() but I think(?) then it can potentially continue mid-second in the next level (time is very important in this game) not sure though.. Here's what I've got so far, I've isolated the code for the clock update in an example test program, see code below. var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); var clocktext; // bitmaptext var clocktimer; // Phaser.timer var clockseconds; // integer // ------------------------------------- // PHASER GAME FUNCTIONS // ------------------------------------- function preload() { game.load.bitmapFont('myfont', 'myfont.png', 'myfont.xml'); }; function create() { // add texts clocktext = game.add.bitmapText(160, 160, 'myfont', '---', 40); game.add.bitmapText(160, 160+80, 'myfont', 'Press R to reset timer', 40); game.add.bitmapText(160, 160+120, 'myfont', 'Press S to stop timer', 40); // timer object, note timer won't start running yet clocktimer = game.time.create(false); clocktimer.loop(Phaser.Timer.SECOND, updateDisplay, this); // handle keyboard keys R and S game.input.keyboard.onDownCallback = HandleKeyDown; clockseconds = 0; } function HandleKeyDown(e) { if (e.keyCode == 82) { initClock() }; // R = reset/init if (e.keyCode == 83) { stopClock() }; // S = stop/pause } function stopClock() { clocktimer.stop(); clocktext.text = "Stop at " + clockseconds + " seconds left"; console.log('stopClock - timer stopped'); } function initClock() { clockseconds = 5+1; // set countdown seconds, +1 because initial display will also decrease with 1 updateDisplay(); // initial display clocktimer.start(); } function updateDisplay() { // count down seconds clockseconds = clockseconds - 1; console.log('updateClock - seconds left: '+clockseconds); // check if time is up if (clockseconds <= 0) { // ohnoes! stopClock(); console.log('updateClock - time is up'); clocktext.text = 'time is up!'; } else { // update display var minutes = Math.floor(clockseconds / 60); var seconds = (clockseconds - minutes * 60); clocktext.text = "time " + (("0"+minutes).substr(-2) + ":" + ("0"+seconds).substr(-2)); }; } btw there's also this thread but that only explains how to start a timer, not how to stop and restart it.
  5. Phaser animate number snippet

    Hello all, I have created a little snippet to animate numbers for scores, countdowns, etc... You can see an example here: And a gist here: I hope you find it useful!
  6. ChangeLog - minification

    Hello, in the next few minutes update will be deployed on the server. It might take up to 10 minutes. With the update following changes will be applied:Project expire countdown added - older projects will start countdown from March 1st. All new projects will expire after 30 days. After project expire - it will be moved to the trash and after 7 more days it will be wiped. export minified version: ME will parse index.html and automatically minify css and js files and will put all files in the one minified file. ME will skip already minified files, e.g. phaser.min.js - check is based on filename - looking for .min.js (min.css) part, also remote files will be skipped ( link starting with http ) remove whitespaces from <head> section in the index html QR codes to exported links added for easier mobile access Another fixes: issues on windows server and source editor fixed grouping selected group issue fixed
  7. Progress Bar class

    Here's a progressbar I created for my projects: Feel free to use it if you need one, I released it under MIT. Not much but I thought to give back to the community
  8. Timer Countdown in Phaser ?

    Hello, I would like to know how hard is it to make an accurate timer count down. For example, count down for 1 minute. I would also need to tell player the time left every second. I have heard that setTimeout may not be accurate. What is the best way to do this?