Search the Community

Hello, I am making a simple game using pixijs and have problem that animation stops when I hide the browser window and after showing the window the animation continutes from where it stopped. I simply need to keep animation going even in background. I use "app.ticker.add(loop);" and "loop" is a function where all the animation happens. Thank you

Is there a simple way to show fps in PIXI.js?

I have animation this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('man', { start: 1, end: 3 }), frameRate: 10, repeat: -1 }); and when i press left key, i play it if (cursors.left.isDown) { player.setVelocityX(-160); player.anims.play('left', true); } I understand that repeat param is responsible for looping animation, but i tried 0, 1, false, -1 and the animation still loops. I didn't find any DOC with all objects and there parameters, so i'm asking here

tl;dr Pause, sleep, resume and wake make for a confusing api initially. Also a master pause (logic and audio) would be handy ( I might have missed this though.) After a longish break of game dev I wanted to take a look at Phaser 3. Loving it so far, (Phaser has come such a long way) but I find the pausing/resuming the entire game(logic, animation, sounds) a little confusing. I'm making a master Pause/Play switch. After game.loop.pause() didn't have the desired effect I've switched to game.loop.sleep and awake(). But I'm unsure if this is the intended use for them. Looking forward to the release of this bad boy, continue doing awesome work. Cheers

I'm working on a game with seamless background music and figured I'd share my findings to help others. I'm just using Phaser's standard sound.play('', 0, 1, true) code to play loops. (Have since discovered I can also use sound.loopFull()). I didn't want to mess with outside solutions like seamlessLoop.js, which I'm not sure would work across all browsers anyway. Here's the run down on the file formats: OGG - Good for seamless loops in Firefox and Chrome. M4A - Good for seamless loops in iOS. When I first posted this I thought that I was stuck using the Apple Lossless codec (lossless = huge file sizes) because when I used any other M4A generating codec the resulting audio had blank space added at both ends. I wound up using the fre:ac open source audio converter which adds information for gapless playback according to its developer, who was extremely responsive and helpful (Thanks Robert!). Sure enough, the audio played seamlessly on my iPad with much smaller files. MP3 - Not good for seamless loops, but needed for IE. Even if your MP3 has no silence on either end, when the sound is done playing there will be a small audio gap before it loops. There are some techniques like the ones here that seem promising, so if I can overcome this issue I will post the code. Good for all other use cases because all browsers support it and it has the smallest file size of the three formats when exported with reasonable quality settings. So here's what I'm using to load my seamless loop audio. M4A is in a separate conditional because when I put it as the first option Firefox would load it instead of falling back to OGG and not play the sound. I'm loading all my other sounds as MP3s (in a different code block - not shown) to keep my total file size as low as possible. // load seamless intro audio loadLoop('musicIntro', 'intro_music_loop'); function loadLoop(key, file) { if (game.device.iOS || game.device.macOS) { game.load.audio(key, ['sounds/' + file + '.m4a']); } else { // Firefox and Chrome will use OGG // IE11 will fall back to MP3, which will have a small gap at the end before replaying game.load.audio(key, ['sounds/' + file + '.ogg', 'sounds/' + file + '.mp3']); } } Hope someone finds this helpful

Assum we use physic engine like box2d or p2.js. And both graphic and physic updating are aprox 60 fps. What is better? 1. Update gfx position right after physic body moved? GameObject.prototype.integrate = function() { this.body.integrate(); //body has changed his position according to physic simulation this.gfx.x = this.body.x; this.gfx.y = this.body.y; } 2. or in separeted loop? requestAnimFrame(() => { world.eachObject((obj) => { obj.gfx.x = obj.body.x; obj.gfx.y = obj.body.y; }); });

Hello. I am using phaser weapon plugin and want fire in forEach loop: var weapon = game.add.weapon(10, 'bullet'); enemies.forEachAlive(function(enemy){ if(enemy.name == 'p1'){ player.rotation = game.physics.arcade.angleBetween(player, ednemy); weapon.fireAtSprite(enemy); } }); If I have 5 enemies in a row, and only 3 if them have name = p1, after executing this code, player sprite is rotate to the last enemy, but there is only one bullet. What can I do here?

Hello, is there a way to advance a VideoTexture by just 1 frame per RenderLoop? As I understand it now it is time based. This creates the problem that if the frames need to be captured to create an animated sequence, the video keeps advancing in between 2 captured frames.

Hey all! I add a music track that I want to loop using this code: music = new Phaser.Sound(game, "music", 1, true); It loops correctly everywhere except on IE. Has anyone has this issue? Is the work-around to have an event fire on sound complete?

Hello everbody, I am new to this Forum. So please forgive me if I posted in the wrong thread. I am developing an Interactive visual novel made out of videos and video loops. Build up: - play video, go to loop; - choose dialog in loop; - play video, then go to action loop; - play mini game in action loop; - if won, repeat same process in different level, or game over. There are two things that I am struggling with: 1. How do I play an loop, after an video has been played? 2. I want to add an button during the loop, that will switch to an different video, depending on if it has been clicked fast enough in an certain time or not. I would be grateful for tipps. Thank you in advance!

Hey guys... I got yet another one... I am currently using an animation to control a curve... List call that animPosition... I encode root transform positions into the animation and the animation updates the animPosition.xyz from the BabylonAnimationKey... I use this to move the character... works great except my logic for when the animation loops (even with relative cycle mode)... Basically if the animation controlling the animPosition rotates the chaterter 0 to 90 degrees... when the animation loops the values are the same as before it just loops to when replayed it SNAPS back to 0 and goes from 0 to 90... again... What I need is to offset so that when the animation loops a second time this values in the animation 'Contribute' to the move of the character movement so when looping that animation with the sample numbers again a second time will make go from 90 - 180 and so on... so that values coming from the root motion accumulated (I guess): My animation state machine exposes that 'animated animPosition' as rootPosition and calculates the delta from the lastPostion... and it is exposed as: getDeltaPosition... that little bit off delta position is then use to move the character... _chacter.move() really call physicsImposter.setLinearVelocity anyways this is how I am taking the 'delta from the last position and using that as movement: if (this._animator != null) { var deltaTime:number = this.manager.deltaTime; var deltaPosition:BABYLON.Vector3 = this._animator.getDeltaPosition(); var rootPosition:BABYLON.Vector3 = this._animator.getRootPosition(); if (this._character != null) { this._inputVelocity.x = (deltaPosition.x * this.moveSpeed) / deltaTime; this._inputVelocity.y = 0.0; this._inputVelocity.z = (deltaPosition.z * this.moveSpeed) / deltaTime; var jumped:boolean = (this.manager.getKeyInput(this.keyboardJump) || this.manager.getButtonInput(this.buttonJump)); if (jumped === true) this._inputVelocity.y = this.jumpForce; this._character.move(this._inputVelocity, jumped); } } that moves everything great UNTIL the animation loop that resets the main animPosition (that delta is calculated from) to the values in the animation at starting frame... lets say for simple sake that is facing forward with no rotation.. call it 0... when the animation stops its at 90... the loop reset back to zero INSTEAD of continuing to turn to 180 (which is what I want) I know that a mouth full But if can figure this last part out... I will have root motion working for BabylonJS... Note: If anybody wants to help with issue (Animation State) or any of the other small issues I have outstanding... LET ME KNOW... I will send you a copy of the BabylonJS Toolkit Version 3.1 Beta and we can work together... I would love to be able to work with (and actually talk to) someone... We can GOTOMeeting and show each other code pieces and work on it together.... Outstanding Issues: - Animation System (including Blend Trees if can be done in BabylonJS) - Terrain System... Need to be able to use a Texture Atlas in GLSL Shader... right now the only way I know is to use 'fract' call... but that LEAVES EDGE SEEMS - LDR Skyboxes - you can't really use a HDR for the whole sky... (maybe for just HDR reflections which should be a MUCH smaller scaled down version of a full panorama HDR file)... So I created a HDR to LDR Tone Mapping Tool... To use it I need a babylonLDRCubeTexture.ts to be create that work like HDRCubeTexture EXPECT use the ALREDY encoded LDR Tone Mapped pixels as a JPG or PNG. Particle System - Fine tune my ShurikenParticleSystem class I created to give a Shurken time based particle system ike the used in Unity... I got everything going except some 'Update-Over-Time' functionally I need to give additional 'Velocity' to the 'AGED' particle over time... NOT just adjust the 'EMITTER POWER' which starts the particle on it way... but use a curve to control the velocity of the particle over time... I think it uses a property called 'Age' for that... So let say 5 seconds into the particle system playing I was to start giving a velocity that might adjust a partialce that Is going start up... to start going left... But not at the emitter... once the particle has left the emitter and is 5 sec into its life... or what ever the curve is keyed to. Anyways... Let me know if anybody can help with those outstanding issues I need to clear up before release the version 3.1 of the BabylonJS Toolkit

Hi there, I've stumbled across some very weird audio behavior and can't seem to avoid it. I'm trying to loop a marker of my audio file, which works well on itself. Whenever pausing and resuming the audio loop at least once however, as soon as the next loop point is reached it will not stop the currently running audio and play from the marker but just add a new layer of audio that plays from the marker instead, while the old one just continues to play. And it keeps doing that for every loop. //Create { this.sfx_music = this.sound.add("key); this.sfx_music.allowMultiple = false; this.sfx_music.addMarker('turbo', 116.8696, 7.3846, 1, true); this.sfx_music.play('turbo'); } unpauseGame: function() { if(this.game.paused) { this.game.paused = false; this.sfx_music.resume(); } }, pauseGame: function() { this.sfx_music.pause(); this.game.paused = true; } Pausing the game without pausing the music doesn't cause this problem, but It's mandatory for me to pause the music when pausing the game.. Could this be a bug in sound.pause() or sound.resume()? I'm using Chrome but I have the same behavior in firefox as well. Please help! Best Zampano

hi, I would use a special effect with my prototype weapon. this special effect is : some particles when the weapon fire. concern the lines : this.animate_when_fire() game.time.events.loop( this.frequency,this.animate_when_fire,this ) When is use the function animate_when_fire with a loop, after a certain delay my game lag a lot. However i use only 3 particle each time of frequency (+/- 200ms). I use the same process for my other particles and i don't see any lag... what i'm doing wrong ? thanks for the assist _canon = function(delay,posx,posy,speed,frequency,variance,angular,_flag,kill_with_world){ this.delay=delay this.posx=posx this.posy=posy this.speed=speed this.frequency=frequency this.variance=variance this.angular=angular this.kill_with_world=kill_with_world this._flag=_flag this.flag_for_fire=true this._flag=true //canon Phaser.Sprite.call(this,game,this.posx,this.posy,'canon') this.angle=this.angular this.animate_when_fire() game.time.events.loop( this.frequency,this.animate_when_fire,this ) game.physics.arcade.enable(this); this.weapon=game.add.weapon(9,'bullet') if(this.kill_with_world){ this.weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; }else{ for (var i = 0; i < 9; i++) { this.weapon.bulletCollideWorldBounds=true this.weapon.bullets.children[i].body.bounce.setTo(1,1) } } // Because our bullet is drawn facing up, we need to offset its rotation: this.weapon.bulletAngleOffset = 0; // The speed at which the bullet is fired this.weapon.bulletSpeed = this.speed; // Speed-up the rate of fire, allowing them to shoot 1 bullet every 60ms this.weapon.fireRate = this.frequency ; // Add a variance to the bullet angle by +- this value this.weapon.bulletAngleVariance = this.variance; // Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically this.weapon.trackSprite(this,0,0,true); game.time.events.add( this.delay,function(){this._flag=false},this ) } _canon.prototype = Object.create(Phaser.Sprite.prototype) _canon.prototype.constructor = _canon _canon.prototype.update = function(){ if(this._flag==false && this.flag_for_fire){ this.weapon.fire() } } _canon.prototype.fire = function() { this.flag_for_fire=true this.weapon.fireRate = this.frequency ; this.weapon.bulletSpeed = this.speed; this.angle=this.angular this.weapon.bulletAngleVariance = this.variance; } _canon.prototype.animate_when_fire = function() { if(this.visible){ this.particlex = game.add.emitter(this.x+35,this.y) this.particlex.makeParticles("particle_canon") this.particlex.minParticleSpeed.setTo(100,-190) this.particlex.maxParticleSpeed.setTo(500,240) this.particlex.setAlpha(.4, .1) this.particlex.minParticleScale = .4 this.particlex.maxParticleScale = .7 this.particlex.minRotation = 0 this.particlex.maxRotation = 0 this.particlex.on=false this.particlex.start(true,200,null,3) } }

Hey everyone, So Im new to game development, although Im a full stack JS dev for general sites and apps. I started getting into canvas animation and now Im here trying to learn some game animation stuff. My question is this: Do you generally do just about all animation in the game loop with requestAnimationFrame()? Or can you simply have renderer.render(stage) called in the game loop while outside of it you use GSAP or some other tweening mechanic to change the positioning props on objects/sprites? Iv tried it and it works, I just would like to know if its dumb or nonperformant. I also tried using my regular js tweening library to call `renderer.render(stage);` in its update callback and it looks the same (im just doing a simple animation generating snow-like particles that float down). I know that the supported game loop in PIXI has stuff for velocity and whatever but I really like my animation library's (http://animejs.com/) easing and elasticity options. Will calling renderer.render(stage) in the game loop while tweening outside the loop still be 60FPS? Or do I need to be updating in the game loop? If I have to do it in the game loop, does anyone have any tips/references for easing and all of that? Because I dont want to have to write my own easing functions to update in the game loop (and I suspect most people arent), and rather use an animation API for that. Im also brand new to PIXI and maybe it has its own easing and whatever that works inside the game loop. Cheers

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.

Hello, I'm wondering if someone could help me solve this problem I have with 'Groups' in Phaser. So I have a group called 'enemy_wave' and it has 2 sprites attached to it: 'e_blue' and 'e_red'. Now, I want to 'kill' (sprite.kill();) 'e_blue' sprite and 'revive' (sprite.revive();) it later. Everytime I try to do that it also kills 'e_red', no matter how I put it. this.enemy_wave = game.add.group(); this.enemy_wave.enableBody = true; this.enemy_wave.physicsBodyType = Phaser.Physics.ARCADE; for (i = 0; i < system_var.length; i++) { for (j = 0; j < system_var[i].length; j++) { switch(system_var[i][j]){ case 'b': var e_blue = this.enemy_wave.create(40 + 40 * j, 40 + 40 * i, 'enemies'); this.enemy_wave.add(e_blue); break; case 'r': var e_red = this.enemy_wave.create(40 + 40 * j, 40 + 40 * i, 'enemies'); this.enemy_wave.add(e_red); break; } } } This is how I 'kill' sprites: this.enemy_wave.forEachAlive(function (e_blue) { e_blue.kill(); }, this); And this is how I 'revive' sprites: this.enemy_wave.forEachDead(function (e_blue) { e_blue.revive(); }, this); So yeah it doesn't matter if I kill 'e_blue' or 'e_red' because either way it 'kills'/'revives' all sprites attached to this group. How do I go about this? What seems wrong here? ~Thanks!

Hey guys, I have a quick question about 'Groups' as I'm kinda new to this Phaser HTML5 game dev. So my plan is to create multiple groups and have control over each one of them. First thing that came into my mind is to create a 'for loop' and be done with! Problem is that I don't know how to assign different names for a variable (wave).Example: Instead of doing this: this.wave00 = game.add.group(); this.wave00.enableBody = true; this.wave00.physicsBodyType = Phaser.Physics.ARCADE; this.wave01 = game.add.group(); this.wave01.enableBody = true; this.wave01.physicsBodyType = Phaser.Physics.ARCADE; this.wave02 = game.add.group(); this.wave02.enableBody = true; this.wave02.physicsBodyType = Phaser.Physics.ARCADE; I am trying to do this: for(i=0; i<10; i++){ this.['wave'+i] = game.add.group(); this.['wave'+i].enableBody = true; this.['wave'+i].physicsBodyType = Phaser.Physics.ARCADE; } So I'm sure you got the idea but this (['wave'+i]) is the problem. Can someone help me with this? What is the correct way of writing it? I've been searching but maybe I'm not questioning this correctly. Thanks and sorry for the noob question!

Hi Im trying to make a level select buttons so a person can choose which level to play How can I make this.levelButton1,this.levelButton2 etc on the fly ? for (i = 1 ; i < 6; i ++){ this.levelButton = this.add.button(this.levelButtonWidth * (i * 1.8), 100, 'levelButton' + i); this.levelButton.inputEnabled = true; this.levelButton.events.onInputDown.add(function(){ console.log('You Pressed LevelButton' + i); // pass this value to GameState }, this); } I have tried this.levelButton = this.add.button(this.levelButtonWidth * (i * 1.8), 100, 'levelButton' + i); but I keep getting a null reference any help would be appreciated Eric

Hi I have a script that I wish to implement so that if the player hits an enemy 3 times the game restarts, but it constally loops when touching, where am I going wrong ?? create function this.currentHits = 3; this.collisionHasOccurred = false; update function : this.game.physics.arcade.overlap(this.player, this.enemies, this.youLose, null, this); youlose function : youLose : function(player, enemies){ if (!this.collisionHasOccurred) { this.currentHits --; this.collisionHasOccurred = true; } else { this.collisionHasOccurred = false; } console.log(this.currentHits); console.log(this.collisionHasOccurred); if (this.currentHits === 0) { //this.game.state.start('Game'); console.log('GAME OVER'); } }, thanks in advance eric

Hey, I was wondering if anyone knows how to play a MovieClip only once? For a code example, my code is pretty similar to the example below: http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet Animation Thanks!

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?

Hi, friends I'm a game music composer who has been composing music and sfx for game projects for several year. If you need cool music and sfx for your game, take a visit at my collection here http://bit.ly/JKMusicSFX All of My Music and SFX is Royalty Free. You need to buy them at first and then you can use them in all of your commercial projects without any additional fee. If you're interested in hiring me, please check this link http://bit.ly/CustomMusicProject Best, JAK

Hi Sorry if this is in the docs somewhere, but I couldn't find it. Could someone please tell me if Phaser (or possibly Brackets) is deliberately limiting the size of my loops, as I can't seem to get them to work over about 32000 iterations. I did notice that JSbin has something called "loop protection" but offers a code to turn it off. Is there a way to do this in Phaser?

EDIT: It seems to happen only in version 2.4.8. In 2.4.7 works perfectly. I will submit an issue to github. Hi, guys. I'm having a trouble with a background music that plays on my game playState. It works well if the player dies before the audio loops (the audio duration is 21 seconds), but if the player survives more than 21 seconds and the audio loops, I can't stop the music. Instead, when the create function of my playState comes on, it creates another audio and plays simultaneously. I have read many post related to audio here, but can't solve the problem. This is how I do it: Audio preload in load.js: game.load.audio('music', 'assets/background_music.mp3'); And in play.js in the create function: game.music = this.add.audio('music', 0.2, true); game.music.play(); And finally, in the gameOver function: game.music.destroy(); game.state.start('gameOver'); I had tried many approaches described here in the forum, as: Change the this.music variable to game.music, check if the game.music.isPlaying before create, stop it before call destroy, restart, but nothing helps. Thanks for your attention Phaser version 2.4.8