chongdashu

This looks like a typo, which would cause an error else (this.cursors.down.isDown) { this.player.body.acceleration.setTo(0, 0); }If you change the else to an else if, things should work. Here's a fiddle: http://jsfiddle.net/chongdashu/mq8bg9sf/2/ Also, on a related note, this needs to be fixed too: if (this.player.y > this.game.height) player.y = 0; // needs to be this.player.yOtherwise, an error will occur when the player hits the bottom of the screen.

Have you tried the Page Visibility API? More specifically, listening for the "visibilitychange" event? //startSimulation and pauseSimulation defined elsewherefunction handleVisibilityChange() { if (document.hidden) { pauseSimulation(); } else { startSimulation(); }}document.addEventListener("visibilitychange", handleVisibilityChange, false);Source

I suppose what you're saying is whether it would be better to use an atlas frame-based animation vs a particle emitter. For example, maybe for something like a puff of smoke you might consider a 10-frame animation of a growing ball of smoke particles vs. actually spawning 10 growing balls of smoke? Disclaimer: Just my thoughts, not 100% sure if it's true. If this is what you mean, the frame-based animation will probably be a little bit faster compared to the particle system (blitzing sequences of images vs computing positions and updating them). However, the particle-based system will give more flexibility in terms of how the puffs of smoke can move (and react with the environment). And if your smoke particles are all from the same texture (or part of a texture), I doubt you will find a big discrepancy in the performance if your particle count is low.

preload : function () { this.game.load("background", "res/background.png"); this.game.load("character", "res/character.png"); } create : function () { // create layers this.backgroundLayer = this.game.add.group(); this.spriteLayer = this.game.add.group(); // add stuff to layers var bg = this.backgroundLayer.create(this.game.with/2, this.game.height/2, "background"); var sprite1 = this.spriteLayer.create(0, 0, "character"); var sprite2 = this.spriteLayer.create(10, 0, "character"); var sprite3 = this.spriteLayer.create(20, 0, "character"); }

The easiest way to do that would be to continually append a viewport's width-worth of content at the end of the level each time the player traverses through it. * - - - * - - - * - - - *| | | || P | | |* - - - * - - - * - - - ** - - - * - - - * - - - *| | | || P | | |* - - - * - - - * - - - ** - - - * - - - * - - - *| | | || |P | |* - - - * - - - * - - - * * - - - * - - - * - - - * | | | | | P | | | * - - - * - - - * - - - * | ^ | _ _ _ _ _ _ _ _ _ _ _ _ _|

loadUpdate, not update.

0xFFFFFF should reset it back to normal.

Could be the fact that their sprite is green. The tint is additive, and would end up making the entire sprite dark. @jmp909, could you try with a greenish sprite?

Well, you sort of answered it yourself As jmp909 stated correctly above, this would refer to the state object. I agree that Phaser dynamically linking the core references in the Phaser.Game object to the Phaser.State object can throw some people off. But as jmp909 above again remarks, it does have benefits. For me, I prefer to explicitly reference the loader from the game object (e.g., this.game.load) as opposed to through the state object (e.g., this.load) because it helps me to be explicit where all the core modules are coming from.

There are many ways to do it, and if you post what your code is like currently, we'll be able to give more direct advice. But you could simply do something with a timer, or a countdown: var lastClickTime = game.time.elapsed;// ... awesome code herebutton = game.add.button(0, 0, 'button', onClick, this);// ... more awesome code hereonClick : function(e) { var clickElapsedTime = game.time.elapsed - lastClickTime if (clickElapsedTime >= 1000) { // if at least one second has passed, perform action doSomethingAwesome(); lastClickTime = game.time.elapsed; } }

There is the Phaser.TweeManager that I believe is what you're looking for. I'm really sorry, but I'm still not entirely clear what you're trying to achieve based on your explanation, so I might be wrong. But if you are initiating 4 or 16, perhaps you could do something like: for (var i=0; i < 4; i++) { var tween = destroyMe.game.add.tween(destroyMe.scale).to({ x: 0.1, y: 0.1}, 100 + i*100, Phaser.Easing.Back.Out, true, 100); tween.onComplete.add(function (obj, tween, destroyMe) { destroyMe.destroy(); }, this, null, destroyMe);} Wouldn't that achieve what you want - which is to stagger the tweens?

@drhayes and @jmp909 have both suggested better alternatives to the way that you are currently handling this. You might want to consider them after getting it to work! Anyway, there are two problems in your code. Problem 1 Your variable i is never decrementing below 3. Try putting a console.log(i); after if (i > 0) in fireBullet(). You will see that it never drops.So let's take a look at where i is ever modified. Since it's not being modified in fireBullet()'s loop, it has to be in the update() of your Sprite.There is a check for if (game.time.now > delay) { i = 3; } so it's likely in here.You will realize that if you put a console.log(delay), that delay is always zero!That's because delay is initialized to zero. And since game.time.now is always > delay, it's always going to set i=3. No other pieces of code is going to runSo what you need to do is to set the value of delay if you enter that block, so that you will not always be in it. Setting it to delay = game.time.now + 2000; works.Problem 2 Now, if you run it, you will notice that firing never restarts again.This is because of the code if (i==0){ delay = game.time.now + 2000; }So what happens when i==0? It just keeps setting the delay later and later and later by executing the code above.And since game.time.now is always < delay, i will never get set to 3.So what you need to do is to set the value of i to some other value apart from zero or three. Putting i=-1; in there works. Hope it helps! And hope this breakdown of steps undertaken helps point to ways to narrow down problems for future issues! For reference, here is the fixed create() code that you need: var bullets;var bullet;var shoot;var sprite;var bulletTimer = 0;var i = 3;var delay = 0;function create() { sprite = game.add.sprite(100, 200, 'phaser'); sprite.anchor.setTo(0.5, 0.5); sprite.update = function() { if (i==0){ delay = game.time.now + 2000; i = -1; // Problem 2: without this, delay is always > this.game.time.now, and i would always == 0 } if (game.time.now > delay) { i = 3; delay = game.time.now + 2000; // Problem 1: without this, i is always == 3. } } bullets = game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(200, 'bullet'); bullets.setAll('anchor.x', 0.5); bullets.setAll('anchor.y', 1); bullets.setAll('outOfBoundsKill', true); bullets.setAll('checkWorldBounds', true); bullets.forEach(function(enemy){ enemy.body.setSize(15, 70); }); shoot = game.input.keyboard.addKey(Phaser.Keyboard.Z);}function fireBullet() { var BULLET_SPEED = 600; var BULLET_SPACING = 10; if(i>0) { console.log(i); if (game.time.now > bulletTimer) { bullet = bullets.getFirstExists(false); if (bullet) { bullet.reset(sprite.x, sprite.y); bullet.body.velocity.x = BULLET_SPEED; bulletTimer = game.time.now + BULLET_SPACING; } i--; } }}

Aha! Nice find, @jmp909. Didn't think that Phaser had a pixelPerfect thingum! Thanks too!

Disclaimer: This is just going off what I saw in the docs. I've not done this before What you need to do is first define the polygonal shape. Since you have a trapezoid, it'll probably be something like; // (0, 0)// * // | *// | * (10, 4)// | |// | * (10, 8)// | * // *// (0, 12)var vertices = [ 0, 0, 10, 4, 10, 8, 0, 12];var polygon = new Polygon(vertices);var sprite = this.game.add.sprite(0, 0, "button");sprite.hitArea = polygon;I didn't go into too many details - I'm not sure whether the polygon is in local space or in world space (I suspect local space). But this should be what you need to get started. You'll need to adjust accordingly depending whether your anchor is in the center, etc. The above is assuming the anchor is in the top-left corner.

No, it's important to differentiate between class and object. Do not worry about the language for now, because classes and objects are an abstract concept that other programming languages either support natively or can be implemented. An object is an instance of a class: Think of a class as like a definition (e.g., schematic or a blue print.) It represents an abstract concept. Hence in my example: the Soldier class is a definition to represent a soldier.the definition is that a soldier has both a height and a weightAn object is a concrete instantiation of the class. The objects in my example were mySoldier and yourSoldier. Each object has its own height and weight. The Soldier class has no height and weight because it's not "physically" present. It's just a definition. So the correct way to put it is: "it instantiates an object of a class and points to the object in a variable." There are two problems in this statement. First is the word, "copy," and the second is the notion of "original object." What is the original object? I suspect that what you really mean is the class. A copy in the context of this would be doing something like: // This is my first physical soldier.var soldier1 = new Soldier();soldier1.height = 75;soldier1.weight = 50;// This is my second physical soldier.var soldier2 = new Soldier();soldier2.height = 80;soldier2.weight = 80;// This is NOT A COPY. It is still my first soldier.// the variable soldier3 just points to the first soldiervar soldier3 = soldier1;// This is a COPY of the first soldier.var soldier4 = new Soldier();soldier4.height = soldier1.height;soldier4.weight = soldier1.weight;Above, at the end of the execution, there are only three soldiers, not four. There are four variables, but one of the variable (soldier3). soldier3 is pointing to the same soldier as soldier1.soldier4 is pointing to a different soldier, who has the same properties as the soldier pointed to by soldier1 and soldier3 Yes, there is no class keyword. Javascript does have ways to representing a class and an object. Remember, classes and objects are both conceptual things. BasicGame.Boot is a class (even though it's implemented using a function in Javascript). new BasicGame.Boot() is an object. Well, BootGame is a class. It is a class that is the definition of a Phaser.State object. It's just represented as a class. No apologies necessary! These are great questions. Unfortunately, as I've said -- Javascript probably is not the best language to begin understanding OOP concepts because it does not transparently make classes and objects clear. I would say it would be better to take a look at a language like Python or C# to learn these concepts. Once you have done so, you will understand how Javascript actually implements classes using functions and dictionaries. I wouldn't recommend studying advanced JS to understand OOP, because it really isn't the best tool to understand the concepts. Advanced JS will really be telling you how to create classes using some Javascript gymnastics -- but not teach you the concepts, which are probably what you are seeking here. Not sure what this = platformGame means really. Are you saying that the this variable will be pointing to the game? If so, no -- the this keyword will be pointing to the nameless class that you're defining (called an anonymous class). Rather it should be: platformGame.state.add("Boot", function(platformGame){ this.game = platformGame this.create = function(){}; this.update = function(){};});