Search the Community

Hey guys, So I've just started refactoring my codebase to Phaser 3 today and I've hit a few bumps. Nothing too bad so far, but one I can't get my head around is how to bring sprites/sprite groups to the front of the display in Phaser 3. In Phaser 2 we had game.world.bringToTop(group), but I'm struggling to find the equivalent in Phaser 3. Any help appreciated, nice one thanks. Sam

How can I remove child from a group but I don't want it deleted or killed from stage? I keep all my screen objects in a group called screenObject for fading in. Then I have another group called cardGroup which keeps only the card sprites. I want to remove just two specific card sprites from cardGroup. I do this cardGroup.remove(card1, false); cardGroup.remove(card2, false); But it removes the object from stage as well. What do I do wrong? Or what to do?

I try as best I can to find how I can get the group framequantity but it's been 3 days and I still haven't made it so pls help me! :)

I would like to make a group interactive. The following did not work groupOfZombies.setInteractive(); Then just to add the resulting code to discover which sprite was clicked needs to me access the sprite-key, i have been looking for it but I can't seem to find it (mainly because most code functions using 'this') spriteCat2.setInteractive(); spriteCat2.on('pointerdown', function () { var thisSpriteName = this.key; console.log(thisSpriteName); }); any help would be appreciated!

Hi, I'm new with Phaser, I'm wondering how can I create a group of enemies that appears at the side of the screen in a random Y position between 550px and 745 px, after they appear they need to start to fire to my character Right now I have a function to create the bullets and how they will be fired: createBullets:function(laserToFire,track,offsetX, offsetY, bulletDirection,fireRate,bulletSpeed){ weapon = gameSP.add.weapon(10, laserToFire); weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; weapon.bulletSpeed = bulletSpeed; weapon.fireRate = fireRate; weapon.trackSprite(track, offsetX, offsetY); weapon.fireAngle = bulletDirection;right } So what I'm looking to do is to have each one of my enemies within the group to fire to my character. Thanks in advance.

Hi guys! Main character in my game is this cat: Cat is composed from two parts - the torso and the head - and for each part I want to have physics body enabled, therefore I decided all parts will be inside a group. During the gameplay, I apply certain amount of velocity to the cat torso and cat then should rotate around its own axis, clock-wise and counter clockwise. I chose the approach to apply velocity to the torso and I want to position the head according the torso in the update method. Basically I want to achieve the same behaviour as Sprite.addChild() (add head as a child of a torso), but I want to do it in a group. I imagine basic (pseudo)code should look like this: export class Cat extends Phaser.Group { private _torso: Phaser.Sprite; private _catHead: Phaser.Sprite; private _torsoHeadDistance: number; public constructor(game: Phaser.Game, startPosY: number) { super(game); //torso this._torso = game.add.sprite(game.world.centerX, startPosY, "torso"); this._torso.anchor.setTo(0.5); this._torso.scale.setTo(0.5); //head this._catHead = game.add.sprite(this._torso.x, this._torso.top, "head"); this._catHead.anchor.setTo(0.5, 0.7); this._catHead.scale.setTo(0.3); this.add(this._torso); this.add(this._catHead); game.physics.enable(this._torso, Phaser.Physics.ARCADE); game.physics.enable(this._catHead, Phaser.Physics.ARCADE); //Get the distance between both parts this._torsoHeadDistance = this.game.physics.arcade.distanceBetween(this._torso, this._catHead, true); } //This will be called when player interacts with the game public AddVelocity(angle, speed, angularVel: number) { this._game.physics.arcade.velocityFromAngle(angle, speed, this._torso.body.velocity); this._torso.body.angularVelocity = angularVel; } //Called from update each frame public UpdatePosition(){ //pseudo code this._catHead.position = this._torso.position + _torsoHeadDistance; this._catHead.rotation = this._torso.rotation; } } Basically I just want retain the same distance between both sprites in the group within the time. The problem is that I am not able to figure out the code which should be in UpdatePosition() method. I know it should be something with vectors and normalizing, but I already spent few hours solving this without success. Can someone point me closer to the solution, please? I start to be desperate... Thanks in advance!

Hey, when I assign setDepth(number) to Groups and Tilemaps, it seems not to work. Only after setting setDepth(number) on an already added sprite, it works. Any Ideas on it? Complete code below. // Tilemaps already created // # Configure z indexes layer.background.setDepth(0); //dynamic tilemap layer layer.midground.setDepth(1); //dynamic tilemap layer layer.objects.setDepth(2); // group layer.enemies.setDepth(3); // group layer.player.setDepth(4); // group layer.ground.setDepth(5); //dynamic tilemap layer layer.effects.setDepth(6); // group layer.water.setDepth(7); //dynamic tilemap layer //later on const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); //result: SPRITE is not in front of layer.background .. // BUT when I also write: const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); SPRITE.setDepth(0); // Now the sprite is before layer.background... ?

I'm creating group of items (barrels). After killing some of items with weapon, I call items.callAll('revive');, but barrels are spawning in random position. Who came across with this problem? items = this.game.add.group(); items.enableBody = true; // inside for loop: var sprite = group.create(element.x, element.y, 'barrel');

Hey everyone. Is there a possibility to use something like a "master alpha" for a group of sprites instead of them all having their individual alphas changed? If that's not clear enough: I have a group of overlapping sprites that make up a bigger element. Now I want to fade this in/out as one single object using a tween. Instead, the sprites fade individually which results in them overallbeing less transparent in overlapping areas as well as initially covered sprites to shine through for the duration of the fade. Obviously, I could alternatively just make it all one sprite, but due to multiple possible combinations, that would be quite costly. Does anyone have an idea? Thanks! EDIT: After some more research, I think rendertexture might be what I need, right?

Hi all, I cannot add a group in an another group. for example; var mainGroup=this.add.group(); var subGroup=this.add.group(); var bg=this.add.sprite(200,300,"background"); var bonusImg=this.add.sprite(200,300,"bonusImage"); subGroup.add(bonusImg); subGroup.add(bg); mainGroup.add(subGroup); This was working on Phaser 2 but not working on Phaser 3. Is there any way to solve it?

this.imageGroup = this.add.group(); for( var i = 0 ; i < 10 ; i++) { var image = this.add.image(100*i, 100*i, "box"); // Add Image this.imageGroup.add(image); // added image to group } this.imageGroup.clear(true); // Remove all Children. I'm using clear() method to remove all children of imageGroup. Can I add children to this group after performing clear. OR this group is deleted and I need to create another group. And what is the difference between clear(), remove() and delete() methods of GameObjects.Group class?

Hi, I hope that I find you well, I am a little stuck. I have a group of sprites, that on overlap of another jump sprite image, I require it to play the jump animation, but only on the individual sprite within the group, when it has overlapped. My code, is pretty much working how I want apart from this issue, in the current build, on overlap the animation will play for all sprites within the group (not an individual basis), and will trigger again (beyond the original, overlap) if another sprite hits the jump image. Appreciate any assistance. var game; var globalParams = { calculatedWidth: 1350, calculatedHeight: 900 } var GameResolution = { _1350: 1350, _960: 960 }; function calculateSize() { // Get Pixel Width and Height of the available space var w_w = window.innerWidth * window.devicePixelRatio; var w_h = window.innerHeight * window.devicePixelRatio; var g_w = w_w; // We prepared all assets according to aspect ratio of 1.5 // Since we are going to use different assets for different resolutions, we are not looking at the resolution here var originalAspectRatio = 1.5; // Get the actual device aspect ratio var currentAspectRatio = g_w / w_h; if (currentAspectRatio > originalAspectRatio) { // If actual aspect ratio is greater than the game aspect ratio, then we have horizontal padding // In order to get the correct resolution of the asset we need to look at the height here // We planned for 1350x900 and 960x640 so if height is greater than 640 we pick higher resolution else lower resolution if(w_h > 640){ globalParams.selectedResolution = GameResolution._1350; globalParams.calculatedHeight = 900; globalParams.calculatedWidth = w_w * (900 / w_h); } else { globalParams.selectedResolution = GameResolution._960; globalParams.calculatedHeight = 640; globalParams.calculatedWidth = w_w * (640 / w_h); } } else { // If actual aspect ratio is less than the game aspect ratio, then we have vertical padding // In order to get the correct resolution of the asset we need to look at the width here if(w_w > 960){ globalParams.selectedResolution = GameResolution._1350; globalParams.calculatedWidth = 1350; globalParams.calculatedHeight = w_h * (1350 / w_w); } else { globalParams.selectedResolution = GameResolution._960; globalParams.calculatedWidth = 960; globalParams.calculatedHeight = w_h * (960 / w_w); } } } window.onload = function () { calculateSize(); game = new Phaser.Game(globalParams.calculatedWidth, globalParams.calculatedHeight, Phaser.AUTO, 'gameDiv'); game.state.add('main', mainState); game.state.start('main'); //game.forceSingleUpdate = true; } var yourGroup; var mainState = { preload: function() { if(!game.device.desktop) { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.setMinMax(game.width/2, game.height/2, game.width, game.height); } game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; // Background game.stage.backgroundColor = '#71c5cf'; // Horse Sprites for (var i = 1; i <= 3; i++) { this.load.spritesheet('runner'+i, 'assets/horse-'+i+'.png', 368, 300); } // Other Sprites game.load.image('fence', 'assets/jumpfence1.png'); game.load.image('track', 'assets/grasstrack1.png'); }, create: function() { this.jumpGroup = game.add.group(); this.timer = game.time.events.loop(12000, this.addNewJump, this); this.horseGroup = game.add.group(); this.horseGroup.enableBody = true; this.horseGroup.physicsBodyType = Phaser.Physics.ARCADE; this.addHorse(this); }, addHorse: function() { for (var i = 1; i <= 3; i++) { var posY = game.rnd.integerInRange(300, 500); var posX = game.rnd.integerInRange(30, 120); geegee = this.horseGroup.create(posX, posY, 'runner'+i); // Add 'sprite' to the group this.horseGroup.sort('y', Phaser.Group.SORT_ASCENDING); geegee.animations.add('gallop', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 20, true); geegee.animations.add('jump', [4, 11, 12, 13, 14, 15, 16, 17, 4], 14, false); } }, addJump: function(x, y) { var fence = game.add.sprite(x, y, 'fence'); this.jumpGroup.add(fence); game.physics.arcade.enable(fence); fence.body.setSize(50, 350, 105, 0); fence.body.velocity.x = -500; fence.checkWorldBounds = true; fence.outOfBoundsKill = true; }, addNewJump: function() { this.addJump(game.world.width - 40, this.game.height - this.game.cache.getImage('fence').height); }, update: function() { this.horseGroup.forEach(function(item) { // jump fences this.game.physics.arcade.overlap(this.horseGroup, this.jumpGroup, this.fenceJump, null, this); this.hurdle(); // move up and down field if (item.x > game.width - 650) { item.x = game.width - 650; item.body.velocity.x += game.rnd.integerInRange(-5, 0); } else { item.body.velocity.x += game.rnd.integerInRange(-5, 5); } if (item.x < 50) { item.x = 50; item.body.velocity.x = 0; } }.bind(this)); }, fenceJump: function(horseGroup,jumpGroup) { this.horseGroup.forEach(function(item) { item.body.velocity.y = 1; hurdleFence=false; }.bind(this)); }, hurdle: function() { this.horseGroup.forEach(function(item) { if(!this.hurdleFence){ //check if we already have -50 gravity or not if(item.body.velocity.y > 0){ item.events.onAnimationStart.add(airJump, this); function airJump() { item.body.velocity.x = 5; item.body.gravity.x = 100; } item.animations.play('jump'); item.events.onAnimationComplete.add(groundGallop, this); function groundGallop() { item.body.velocity.y = 0; } } else { item.animations.play('gallop'); } } }.bind(this)); }, };

Hi guys, How can you change the anchor of a sprite inside a group? For a sprite outside the group I use this.add.sprite(100,100, 'sprite').setOrigin(0,0); I tried the next code but It didn't work leprosy = this.add.group([{ key: '001_leprosy', setXY: { x: 444, y: 115 }, setOrigin : {x:0, y:0} } ]); Any ideas? Thanks.

this.inputEnableChildren = true; this.onChildInputDown.add(() => this.onClick.dispatch(this)); I use the code above to track input on my Group. But when I cache the Group: this.cacheAsBitmap = true; ...the signal stops working. Is there a way to handle input on a cached Group?

Hello everyone! Ive been tinkering around happily with phaser CE now for my latest browser app. I'm feature complete since yesterday and stumbled upon one last problem i cannot figure out how to address... i tried a couple of things but do not understand why things behave like they do. Basically i have a group of sprites, which i add as a child to another sprite. Now the problem i have is, i calculate a scalefactor for my app to scale it accordingly to the browser/device size and the group seems to scale in a very weird way (the scaling is very inconsistent, on a super small window it gets scaled down super much, on scalefactors close to 1 it is ok...) so what i do (i reduced the code to the affected lines): class MapScreen extends Phaser.Sprite this.anchor.setTo(0.5, 0.5); this.mapSize = 0.52; //0.52 this.scale.setTo(App.scaleFactor * this.mapSize); this.mapGroup = this.game.add.group(); this.stationButtons = []; this.stationButtons.push(this.game.add.sprite(App.gameWidth/2 + (480 * App.scaleFactor), App.gameHeight/2 + (370 * App.scaleFactor), 'point1')); // Anfang 0 // enable animations for buttons and add function for (let i = 0; i < this.stationButtons.length; i++) { this.stationButtons[i].anchor.setTo(0.5, 0.5); this.stationButtons[i].scale.setTo(App.scaleFactor * (this.mapSize + 1.8)); this.stationButtons[i].animations.add("pulse", [0, 1, 2, 3, 4, 5, 6]); this.stationButtons[i].animations.play("pulse", 8, true); this.stationButtons[i].inputEnabled = true; this.stationButtons[i].input.useHandCursor = true; this.stationButtons[i].events.onInputDown.add(function(){this.stationClicked(i)}, this); this.mapGroup.add(this.stationButtons[i]); } this.addChild(this.mapGroup); so, when i leave the last line and do not add the group to the MapScreen, its fine, but as soon as i do it it starts to scale weirdly...?! And i cant figure out how to keep the scale the same when the scaleFactor changes... Thanks in advance

Should it be possible to create emitters in a loop and then add them to a group? I'm trying to use particle emitters as explosions and I might need to fire off multiple at a time. I figured I would use basically the same strategy used with bullets. Maybe there is a better strategy? this.explosions = this.add.group(); let particles; let emitter; for(let i=0; i<3; i++) { particles = this.add.particles('spark'); emitter = particles.createEmitter(); emitter.setSpeed(200); emitter.setBlendMode(Phaser.BlendModes.ADD); emitter.on = false; this.explosions.add(emitter); //this line causes an error. }

I have created a group like this: malos = this.physics.add.group(); malo1 = malos.create(30,30,'gnu'); malo2 = malos.create(0,100,'gnu'); malo3 = malos.create(30,200,'gnu'); malo4 = malos.create(0,300,'gnu'); malo5 = malos.create(30,400,'gnu'); Which is the less code method to assign an animation to all the elements of the group. I am looking for something like this: malos.anims.play('right', true); Thanks!

My game has tiles that can contain units, of which there are several types of different units. My goal is to have one group called 'units' of which all units are a sprite inside of it, with properties about what type of unit it is, and what tile it is currently on. Lets say I want to get all 'tank' unit type from tile 'T1' , would I have to use two different itererate steps? First iterating for the tile location and then iterating for the unit type I want? I cant figure out a way using iterate to search on multiple criteria at once. I am regularly going to be grabbing units from territories and doing things with them, but I was wondering if this was the best way to implement or not. I currently had the unit types separated into separate groups to start with, but that will become cumbersome to the game design if additional unit types are added. Any advice or thoughts ? Thanks

Hi, I have a sprite sheet with 9694 pixels width that I can NOT make it narrower because it has 74 frames with 131 pixels each. However it is blowing WebGL (see snapshot with the error attached)... How could I solve this issue?

Hey there! I was wondering how you stop all animations in a sprite group when clicking one of them. I can't seem to get it to work. Heres my code that deals with it: function create(){ cardPack = game.add.group(); cardPack.create(game.world.centerX - 250, game.world.centerY, 'card'); cardPack.create(game.world.centerX - 75, game.world.centerY, 'card'); cardPack.create(game.world.centerX + 100, game.world.centerY, 'card'); cardPack.callAll('animations.add', 'animations', 'flip', [0,1,2,3], 12, true); cardPack.callAll('play', null, 'flip'); cardPack.setAll('inputEnabled', true); cardPack.setAll('input.useHandCursor', true); cardPack.setAll('events.onInputDown.addOnce', stopAnimation, this); cardPack.setAll('input.priorityID', 1); } function stopAnimation(){ cardPack.callAll('animations.stop', 'animations', null, true); } Is the error in the callAll for the animation stop or in the setAlll for event onInputDown? I've tried manipulating both and looking for examples for this but I'm coming up empty handed or just not searching correctly.

Currently I have a group of sprites and I want to make them all fall at the same time. I am trying to accomplish this with the following functions, where the group (here: fallGroup) should fall when the down arrow key is pressed. (and yes, I have already initialized keys in the create() method) I have tried passing multiple versions of the function definition to callAll() (eg. "this.setVel", "game.setVel", ect.) as well as several different contexts instead of 'null' ("this", "that=this, then passing 'that' in", "game", "game.stage", ect.) but so far nothing happens. For some of the combos I get "TypeError: Cannot read property 'setVel' of undefined" others produce no error but also do not call my 'setVel' function. At this point I'm pretty lost as to what to do. Edit: appleYpos, groundYpos, appleTime; are all globally defined variables function setVel(sprite,vel) { sprite.body.velocity.y = vel; } function makeFall(group) { //calculate fall distance and then adjust velocity to meet time goal //note: velocity in physics.arcade is in pixels/sec let dist = appleYpos - groundYpos; let vel = dist/appleTime; group.callAll('setVel',null,vel); } function update() { if(keys.down.isDown) { makeFall(fallGroup); } }

I was wondering what is the best way to handle shadow for a "character". I made a character and i want to put a shadow at the bottom a kind of "circle" with opacity, for convenience let's say it's gonna be a transparent PNG. The way i can think of : - (1) Just add the sprite to the game, this leads to duplicated calculations in the update part cause i have to update both the "character" sprite and his shadow; - (2) Add the shadow as a child sprite of the "character", this leads to having the shadow on top of the sprite instead of back to it; - (3) Add the "character" sprite as a child of the shadow sprite, this seems not logical, but it works somehow; - (4) Create a group and add both the shadow and the sprite, (havn't test it but most likely) this leads to define specific property to the group for the size, the position and the overflow boundaries for collision relative to the "character" sprite and the shadow; - (5) Using a filter (Shader) applied on the hole game, with my character position as uniform to render the shadow directly on the "groundLayer". What do you think please ? Is there a better way that i am missing ? Thanks.

I have 2 sprite groups each representing a hand of cards. Each group has its own scale, rotation and position; same for each sprite (card) in each group. I'm trying to create a smooth animation of the card moving from one hand to the other. I can calculate the local parameters (scale, rotation and position) of where the card should be in the new group, but I can't seem to find an easy way to create a tween between 2 sets of local parameters. The only route I could think of at the moment is something along the lines of: store 'sprite.world', 'sprite.worldScale' and 'sprite.worldRotation' => remove sprite from group => add sprite to temporary group => set temporary group's parameters to the stored world parameters => calculate the world parameters in the new group => tween to new world parameters => add sprite to new group and set it to its local parameters. The becomes even more difficult if the destination could potentially change during the tween. Is there an easier or a more robust way of achieving that?

I have been looking at this: http://phaser.io/examples/v2/games/gemmatch example. The columns and rows are positioned starting at the game origin, which can cause the sprites to appear off centre, when looked at relative to the canvas/game border. I have aded a couple of lines of code which [visually] centres the 'gems'. The code lets you adjust the GEM_SPACING and/or canvas/game dimension values, and updates the 'gems' [group] [*correction, each 'gem'] anchor value accordingly. However, what I can't seem to do, is to create a margin between the canvas edges and the 'gem' [group], without breaking the code. All suggestions, welcome. Thanks.... -u Correction above in bold. I don't know why this text has strikethrough applied, or why some of the above text does too!

Hello, Today I started with Phaser, I worked a lot at school with when I had free time. But I have a problem I can't delete an item in my group when my character makes a collision an item belonging to the group. make my group: (in create function) game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.enable(character, Phaser.Physics.ARCADE); game.physics.enable(enemygroup, Phaser.Physics.ARCADE); enemygroup = game.add.group(); for(var i=0; i<10 ;i++) { var s = enemygroup.create(game.world.randomX, game.world.randomY, 'monster'); s.frame = 3; s.animations.add('enemymove', [2,3,4], 10, true); s.play('enemymove'); game.physics.enable(s, Phaser.Physics.ARCADE); } for detect collider:(in update function) game.physics.arcade.collide(character, enemygroup, function(){ enemygroup.remove(this); }); /*OTHER WAY I HAVE TRY*/ for(var i = 0; i < enemygroup.length; i++) { if(game.physics.arcade.collide(character, enemygroup)) { enemygroup.remove(enemygroup[i]); } } Thanks you for help ! good development at all and sorry for my bad english (i'm french).