One page timer configuration, and scale animation

[TTn6]

Is it possible to make a timer for a game, that when it comes to the end, stops or destroys itself, gameover, etc. takes the user to a regular html page completely outside of the game.  
I'm thinking of a 1 page, 1 level game. starts automatically, runs for about a minute, then game is over, timer stops, and then forwards or transfers the person playing the game (or user) completely out of the game and onto a plain html page (completely outside or seperate from the game.
Is that possible and what would something like that look like codewise?  No scoring transfer, or anything else, just transfering the user to a different page.  This would be using the latest version of Phaser.


Also, I was looking for a good example of scaling a group in an animation (growing or expanding to a certain size and then shrinking back down to it's original size), and then repeating that over and over throughout the game.  No random numbers at all.

The closest I could find was a Phaser example having the phaser logo fade in (alpha) like below.

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

function preload() {

    game.load.image('space', 'assets/misc/starfield.png', 138, 15);
    game.load.image('logo', 'assets/sprites/phaser2.png');
    
}

function create() {

    game.add.tileSprite(0, 0, 800, 600, 'space');

    var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');

    sprite.anchor.setTo(0.5, 0.5);
    sprite.alpha = 0;

    game.add.tween(sprite).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);

}


So my question is, how would you make the phaser logo expand and contract over and over; say from the lower left-hand cornier of the screen instead of the center of the screen???

[mattstyles]

In your game initialisation code:

setTimeout( function() {  window.location.href = '/mypage.html' }, 1000 * 60 )

This is the simplest way.

 

To create a timer you can just set up a ticker using `setInterval` or `requestAnimationFrame` (use the animation frame method) and keep counting. I often wrap a timer with an event emitter and have it emit ticks, have something listening to those events, count up deltas if you need better frequency, and change the page location when you've hit your exit conditions.

 

Simples.

[TTn6]

Thanks,

Are you the only one who answers these questions in this section (2D)???

You mention 'an event emitter and have it emit ticks'  so if you wanted it to have beeps or clicks associated with the passing time, how would you attach an audio file to that?

 

The second question, I have a game with all the sprites having exact positions (but still rotating, scaling, etc., so I need to figure out how to get around all the random X and Y's in the examples, i.e.

    var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');

    game.add.tween(sprite).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);  

I'm talking Phaser/javascript here.

[mattstyles]

An event emitter can be used to implement a pub/sub pattern (some resources for you, Addy's book on general patterns is superb), I use a couple of wrappers but you'd basically just need an event emitter implementation (I normally use this one, but the stock one from node is great, although this one specifically targets browsers—not that it matters for an event emitter).

 

A simple naive implementation of a game tick would look something like:

var events = new EventEmitter()var TICK = 1000 / 60setInterval( function() {  events.emit( 'tick', TICK )}, TICK )// Object constructorvar MyObj = function() {  events.on( 'tick', this.onTick )  this.elapsed = 0  this.audio = new MySuperAudioObject()}MyObj.prototype.onTick = function( delta ) {  // Delta is the time between ticks, do stuff with it here  elapsed += delta  if ( elapsed > 1000 ) {    this.audio.play()    elapsed = 0  }}var myObj = new MyObj()

Note that doing your timing with a setInterval is sub-optimal, there are better ways, try to use requestAnimationFrame, many wrappers will come with fallbacks for platforms that do not support it.

 

In this example I could have instantiated `MyObj` and placed its `onTick` directly into my `setInterval` but the idea is that you decouple the object from the timing code using the emitter (pub/sub pattern). This makes structuring your code slightly more robust (note that there may potentially be timing issues further down the line but the solution to that is far more involved and most of the time this way is fine, infact, I'd say most apps you see will be written like this, not to say that is the best way of course). You get the advantage of being able to subscribe (using `on` or `addEventListener`) or unsubscribe (using `off` or `removeEventListener`), and yes, this is identical to how you manage DOM events.

 

Pub/sub is widely used in JS programming and there are a couple of variants. 

 

 

What are you finding random about the X's and Y's?

 

I dont know Phaser very well but I can take a pretty good guess at what the sample code you posted does!

[TTn6]

Hi,

Thanks for the info on the timer.

As far as the scaling problem, part of my problem is currently having to deal with too many programming languages at the same time.  For example, back in cocos2d-x (which was c++ I think), you had things like this:

 

     // reverse a sequence, spawn or action
    mySprite->runAction(mySpawn->reverse());

    auto scaleBy = ScaleBy::create(2.0f, 2.0f);

    auto sequence = Sequence::create(moveBy, delay, scaleBy, delaySequence, nullptr);

 

The closest thng I could find in Phaser was in the previous post example, but like I tried to explain, that's not what I was after and all the uses of Random-generated positions (many, many examples of that) are throwing me off.

I need an example of a sprite or a group with fixed positions that starts out and stays in a fixed position throughut the whole game, but scales up and then back down, and repeats over and over to the end of the game.  Same thing applies to fade in/fade out (alpha) over and over , or rotates over and over.  I'm confused about, I guess the use of the 'animation manager' class in phaser.

[mattstyles]

It is common in animation libraries to be able to specify a duration and a repeat for you animation, most would not repeat but it fairly common to see `{ repeat: infinite }` or something similar.

 

I'd look at applying a tween to your sprite that loops forever.

 

I'm not sure but does Phaser use GSAP's tween library? If so I think the syntax is exactly to use `repeat`, some info maybe here. I'd guess it one of those parameters from your code example earlier, the Phaser docs will confirm it.