Search the Community

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

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?

Hi guys. I am posting on this forum because I am working on a uni project which consist in creating an HTML5/JS game. I've already created quite a little game using Phaser which looks like the image i've uploaded in this post. So every time the player collect all of the honey jars, the game restarts automatically. No menus yet, something simple and effective. I would like to add a gametime timing functionality that would time how long it takes the player to kill all of the honey jars. Once the game restarts, the timer would have to be saved and stored in a JS global variable that I could use to display the best scores on my webpage and then starts again from 0. I've already tried some old methods that I found on this forum but nothing worked the way I wanted. Could you guys help me? Cheers.

Hi everyone, I'm going to play an animation on the web (desktop/mobile) using Pixi/Phaser. The performance varies from device to device. My problem is that I want the animation to be played in a fixed duration even if I have to skip some intermediate frames. To make it clear, suppose that I have a sound file with 2 minute duration and I want my animation to be played exactly at the same time to stay synchronized with sound. How can I achieve that on all devices (I assume skipping frames as a compensation for synchronization). Any ideas are welcome.

Can anyone show me the way to draw graphic circle timing? please gimme some code or fiddler for demonstration. Thanks you in advance !

Do you want custom FPS with smooth animations? I have made a method that makes this possible. The first 1-3 seconds may be buggy, but after that it works smooth. The update() method is called (custom FPS) times per second. The draw() method is called how many times the browser refreshes per second. Here's the code: (mainCanvas is a canvas with the size 800,600) window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ) { window.setTimeout(callback, Math.floor(1000 / 60)); };function step(){ for (var i = 0; i < updates.length; i++) { if (updates[i] == tick) { utick++; update(); } } tick++; var cursec = (new Date()).getSeconds(); if (cursec != prevsec) { prevsec = cursec; frametime = tick; tick = 0; uframetime = utick; utick = 0; updates = []; for (var i = 0; i < fps; i++) { var uind = Math.ceil(frametime / fps * i); if (uind >= frametime) { uind = frametime - 1; } updates[i] = uind; } } draw(); requestAnimFrame(step);}function update(){}function draw(){ ctx.clearRect(0, 0, 799, 599); ctx.fillText(uframetime.toString(), 10, 20);}var mainCanvas = document.getElementById("mainCanvas");var ctx = mainCanvas.getContext("2d");var fps = 30;var prevsec = (new Date()).getSeconds();var tick = 0;var frametime = 0;var utick = 0;var uframetime = 0;var updates = [];ctx.font="20px Georgia";step();

Hi all! Our latest games is coming this week, Homerun Champion! Homerun Champion is a simple timing based games, about batting stand off between two baseball team to see which one can score the most homerun! For this games, rather than monster, rocket, or robot, we actually looking for alternative inspiration in real life (in this case, sport/baseball). We want to know what is the most interesting/fun aspect of baseball, and we found that it's either the batting or running part. To keep this games small in scope, we decide to focus on the batting battle and build a game around it Link: http://j.mp/homerunchampion Hope you enjoy it! Do let me know if you have problem or feedback!