Search the Community

I have a group that contains a large number of children that are P2 physics objects. When I tween the group the sprites all move correctly, but their collisions occur in the position they were prior to the tween. Is there a good way to update the position of the bodies of all the children? Heres some super simplified code incase it helps: game.physics.startSystem(Phaser.Physics.P2JS); const collisionGroup1 = game.physics.p2.createCollisionGroup(); const collisionGroup2 = game.physics.p2.createCollisionGroup(); const targetsGroup = game.add.group(0,0); const ammoGroup = game.add.group(0,300); const target1 = targetsGroup.create(0,0, "key"); const target2 = targetsGroup.create(50,0, "key"); game.physics.enable(target1, Phaser.Physics.P2JS); game.physics.enable(target2, Phaser.Physics.P2JS); target1.body.setCollisionGroup(collisionGroup1); target1.body.collides(collisionGroup2); target2.body.setCollisionGroup(collisionGroup1); target2.body.collides(collisionGroup2); const bullet = ammoGroup.create(0,0, "key2"); game.physics.enable(bullet, Phaser.Physics.P2JS); bullet.body.setCollisionGroup(collisionGroup2); bullet.body.collides(collisionGroup1); game.add.tween(targetsGroup.position).to( {y: "-100"}, 300, Phaser.Easing.Quadratic.Out, true ); Any help would be greatly appreciated, cheers

How do I enable MatterJS based physics in my group bodies? I have the following: this.bullets = this.scene.add.group({ key: 'bullet', frame: 0, repeat: 5, maxSize: 10, setXY: { x: 32, y: 100, stepX: 40 } }); And I'm noticing the body value (at the bottom) is 'null' Based on this tutorial - https://phaser.io/tutorials/making-your-first-phaser-3-game/part8 It uses 'this.physics.add...' but unfortunately, 'this.physics' isn't available. Perhaps because I'm not using Arcade Physics? I also tried 'this.bullets.enableBody = true;' which doesn't seem to do anything. Thoughts?

Hi everyone, quick question, I googled that you can't add velecity to a group so I wrote this script and it works fine, but am I pulling to many resourses on the cpu if I create mulitble enemies at once on the screen, at present I have 2 enemies but will add more in laymans terms I have an external json file for the enemy x,y, key, velocity etc.., I then push each enemy into an empty array, and use a for loop in the update function to check collision against a wall and reverse the velocity here's the 2 parts I wrote in the create function : //create an empty array this.en = []; for (var i = 0; i <this.levelData.enemyData.length; i ++){ // add sprite to stage this.enemy = this.add.sprite(this.levelData.enemyData.x, this.levelData.enemyData.y, this.levelData.enemyData.key); //enable physics this.game.physics.arcade.enable(this.enemy); //give it a speeed for x this.enemy.body.velocity.x = this.levelData.enemyData.vel; this.enemy.scale.setTo(0.5); this.enemy.anchor.setTo(0.5); //push enemy into the array this.en.push(this.enemy); }; in the update function // enemy stuff for (var i=0; i < this.en.length; i++){ //hits wall this.game.physics.arcade.collide(this.en, this.collisionLayer, function(){ var hitRight = this.en.body.blocked.right; var hitLeft = this.en.body.blocked.left; if (hitRight){ this.en.body.velocity.x = - this.levelData.enemyData.vel; this.en.scale.setTo(-0.5,0.5); } if (hitLeft){ this.en.body.velocity.x = this.levelData.enemyData.vel; this.en.scale.setTo(0.5, 0.5); } }, null, this); // player hits enenmy this.game.physics.arcade.overlap(this.player, this.en, this.hitEnemy); } am I right or is there a better way to do it ? also on a seconadry note I originally used this in the update function this.game.physics.arcade.collide(this.en, this.collisionLayer, this.reverseEn, null, this); reverseEn : function(enemy, layer){ var hitRight = enemy.body.blocked.right; var hitLeft = enemy.body.blocked.left; var speed = enemy.body.velocity.x; if (hitRight){ enemy.body.velocity.x = -30; enemy.scale.setTo(-0.5,0.5); // console.log('hit right wall at ' + speed); } if (hitLeft){ enemy.body.velocity.x = 30; enemy.scale.setTo(0.5, 0.5); // console.log('hit left wall at ' + speed); } }, but speed is set at 0 and not at the this.en.bodyvelocity.x eg 30 - why is that ? hope it makes sense - thanks in advance Eric

How would you move all the objects in a group to the bottom of the depth-sorting stack? Also, what is the easiest way to select a specific group object to manipulate it?

So far I've encountered different options and was wondering if there is any of them that should be preferred or is better practice (I'm feeling inclined for 3, but I might be missing something). All three work (tested): // option 1 Phaser.Actions.Call(this.enemies.getChildren(), function(enemy) { enemy.speed = Math.random() * 2 + 1; }, this); // option 2 this.enemies.children.each(function(enemy) { enemy.speed = Math.random() * 2 + 1; }, this); // option 3, native js this.enemies.getChildren().forEach(function(enemy) { enemy.speed = Math.random() * 2 + 1; }, this);

I was wondering if there is a way to add a custom property to all the sprites when creating a group, something like an "extend" property on the config object, similar to that of Scenes: this.enemies = this.add.group({ key: 'dragon', repeat: 5, setXY: { x: 120, y: 100, stepX: 70, stepY: 20 }, //proposed idea extend: { gold: 2, silver: 1 } }); Is there a way currently to set a property to all the elements of a group? from the source code I only found Phaser.Action.Call which can be used for this.

Hey guys, Im making a top down game and i'm struggeling to find a solution, to show players behind an object. My goal was to have: 1. the background layer, which contains the map image 2. the player layer, which contains the player sprite and collisons 3. the foreground layer, which contains the objects which are over the player with this setup you wouldn't see the player behind the foreground layer so i want to add another layer which contains the player sprite tinted black or something but for that to work i need the foreground layer to be an alpha mask for the "silhouette" layer Any ideas how to archive this with a good performance?

I have a question. I'm creating multiple "popups" in my game that's triggered with different buttons. Right now I have 5 functions 4 of them are basically the same thing. Closewindow, openwindow, closewindow1 and openwindow1. The only difference is that they correspond to different popups. Is there a more elegant solution (if that's the right word) than what I have right now. I plan on adding more so I feel like there's another way I just don't know what it is. I've looked at groups but don't items in groups have to be all doing the same thing? I attached my code if it helps. Thanks

Hello community, i am new here, because i have any questions about blender + babylon.js I want to create a game (oh, really ? :D), write the logic in JavaScript and the design stuff in blender. Now i am an point i dont know how to group objects in blender, so in can use them in babylon.js I am great in Webdevelopment but terrible in blender (no experience) I am able to add stuff like tubes, cubes, etc. but not shure about how to group them so babylon.js can create meshes out of the groups. It seems to babylon.js create for every item (cubes, tubes, ...) i add in blender a new mesh. I want that when i group things, that only for the group are meshes created. (See screenshot) BTW i export every thing as *.obj And (for this point not necessary), how can in group, groups to an whole "item", like an building, car, or something else ? Thanks guys!

I posted a while back about tile maps without much luck, I may have been way too vague. No matter, finished up the game and was happy enough with it. On to the next one! Phaser kicks ass!!! My Issue: I have a few sprites that I've added to a group, what I want to do is scale the group down and maintain its position. I was reading about "pivot" but I couldn't get it to work. It seems like the group is shrinking to the top left corner. I want to set the "center" of the group and then scale down. If anyone has experience with this I'd love to hear how you solved it, if you need a code sample let me know. I haven't worked with the sandbox much but will be more than willing to set it up if it helps out. Thanks and cheers!

I am fairly new to phaser. I am currently working on a card game using phaser and I am trying to work out how to best position sprites in zones around the board. My tests this far have revolved around hardcoding positions on the screen and that has been a math-tastic nightmare. I am building two decks of cards on either side of the screen. Then I am dropping several other cards onto the board in a row. The two decks of cards when clicked will be added to two seperate zones (one hand and one play). So, my thought process is as follows: Load all sprites Assign sprites by starting position into starting groups when a card is clicked add that card to the appropriate group use the group to determine the position within the bounds of the group (checking for overlap, etc). Does this seem like an appropriate way of handling it? If not, what would you suggest?

So Ive searched and the topics discussing this in the forum didnt help. I added 3 groups: backLayer, middleLayer, frontLayer declared in that order. Added a sprite to back and middle, and a text to front, however the text is still below the sprites. I tried using game.world.bringToTop on the text itself and the frontLayer group and it didnt work.

So Ive searched and the topics discussing this in the forum didnt help. I added 3 groups: backLayer, middleLayer, frontLayer declared in that order. Added a sprite to back and middle, and a text to front, however the text is still below the sprites. I tried using game.world.bringToTop on the text itself and the frontLayer group and it didnt work.

Hi there, I have two groups, each one with 50 item placed randomly in the stage. I need to check if any of the items of group1 overlaps with any of the items of group2 (and then, destroy it) but I´m doing something wrong as all the elements of group 2 are being destroyed, it´s like is checking object1 with the whole group2... how can I check items by item? I have this code (not working properly) function checkOverlaps(group1, group2){ group1.forEachAlive(function(obj1){ group2.forEachAlive(function(obj2){ var boundsA = obj1.getBounds(); var boundsB = obj2.getBounds(); if(Phaser.Rectangle.intersects(boundsA, boundsB)){ obj2.destroy(); } }, this) }, this) },

Hello, everyone. I am using Phaser 2.8.3 Basically I want to add a sprite to two groups. In my game I want three columns so I have three column groups. this.leftColumn = game.add.group(); this.middleColumn = game.add.group(); this.rightColumn = game.add.group(); Later I add buttons into these groups this.spawnRateButton = []; this.spawnRateButton.push(this.leftColumn.create(0,0,"custom-left-button")); this.spawnRateButton.push(this.middleColumn.create(0,0,"custom-middle-button")); this.spawnRateButton.push(this.rightColumn.create(0,0,"custom-right-button")); for(var i=0;i<3;i++){ this.spawnRateButton[i].inputEnabled = true; this.spawnRateButton[i].events.onInputDown.add(this.buttonPress,this); } However here comes my problem. I want these columns to be scrollable, so I have to utilize this https://github.com/trueicecold/phaser-scrollable . this.scroller = game.add.existing(new ScrollableArea(x, y, width, height, {horizontalScroll: false})); //... this.scroller.addChild(this.leftColumn); this.scroller.addChild(this.middleColumn); this.scroller.addChild(this.rightColumn); this.scroller.start(); The scrolling works, however, the events.onInputDown of the spawnRateButtons do not. I click the buttons and nothing happens. When I take away the scroller everything works fine except for the scrolling, of course. When I add the sprites individually to the scroller it doesn't work either. I am guessing this is because I am trying to add the sprites to two groups? Is there a correct way to do this?

I'm starting to use Phaser, and am mystified by the subtle complexities of how the API differs for sprites vs groups. Let's look at the process of creating a display element, and then adding it as a child of another display element at a given x,y. 1. Creating a sprite and adding it as a child of another sprite at a given x,y parent.addChild(game.make.sprite(x,y,"artkey")) 2. Creating a sprite and adding it as a child of a group at a given x,y parent.add(game.make.sprite(x,y,"artkey")) Why do we need to use add here, instead of addChild? 3. Creating a group and adding it as a child of a sprite at a given x,y g = parent.addChild(game.make.group()); g.x = x; g.y =y; Why is there no way to make a group with a given x, y in one step like sprites? Why the need to manually set position in two extra steps? 4. Creating a group and adding it as a child of a group at a given x,y g = parent.add(game.make.group()); g.x = x; g.y= y; For this, we use add and then we also need the two extra steps. Did I get the taxonomy correct here? Why is every combination different? Thanks.

I looked at the documentation on how to create a sprite https://phaser.io/docs/2.6.2/Phaser.GameObjectFactory.html#sprite It takes in the following parameters x y key frame group It's very easy to add a sprite with just the first three parameters car1 = this.game.add.sprite(800, 400, 'car'); But it fails when I try to add the car to a group car1 = this.game.add.sprite(800, 400, 'car', objects); If I went with the first declaration and then added objects.add(car1) it will then work I need to use the second declaration because my codebase is becoming way too large, and I need fewer lines. Not sure, why this is failing. Maybe an update killed this functionality?

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!

I have two groups of sprites, one containing trees, and another one containing characters. I want to sort them with the group.sort() function, but in order to do that I would need to put them in other, bigger group. However, I can't do that with the approach taken in the example of "sub groups", because when I do it that way, the _container has other containers as its children, instead of the actual sprites. What is the best/easiest way to accomplish this, without losing the flexibility of having separate groups for trees and characters?

Hi all, first post, happy to be here. I'm pretty new to Phaser (love it) but not to JavaScript or web development. For my first game, I'm making a Raiden-style top-down shooter. My problem is in using motion paths. I can get them working for one enemy ship, but I'd like to apply them to all the ships in a group. The ships from the group enter the world at an interval, so they'd be on different parts of the path at any given time. Here's my group. What I was trying to do is to use that pathPosition property to store the correct index value of the path for each individual ship. enemies = game.add.group(); enemies.enableBody = true; enemies.physicsBodyType = Phaser.Physics.ARCADE; enemies.createMultiple(10, 'enemy'); enemies.setAll('anchor.x', 0.5); enemies.setAll('anchor.y', 0.5); enemies.setAll('scale.x', 2.0); enemies.setAll('scale.y', 2.0); enemies.setAll('angle', 180); enemies.setAll('pathPosition', 1); // this is a custom value for motion path Here's my spawning function: function spawnEnemy(numOfEnemies) { if (numOfEnemies > 0) { var randTime = getRandom(1000, 1500); // var x = game.rnd.integerInRange(50, game.width - 50); // var y = -100; var x = path[0].x; var y = path[0].y; // a promise that handles enemy spawning var sendEnemies = new Promise(function (resolve) { var enemy = enemies.getFirstExists(false); if (enemy) { enemy.reset(x, y); enemy.checkWorldBounds = true; // without this can't check if sprite is in bounds enemy.events.onOutOfBounds.add(hasLeftBottom, this); // this adds a custom callback //enemy.body.velocity.y = enemySpeed; } resolve(1); }); // calls the promise and sets a success result. sendEnemies.then(function (result) { setTimeout(function () { spawnEnemy(numOfEnemies - 1); }, randTime); }); } } Here's my plot function: function plot() { var x = increment / game.width; for (var i = 0; i <= 1; i += x) { var px = game.math.catmullRomInterpolation(points.x, i); var py = game.math.catmullRomInterpolation(points.y, i); path.push({ x: px, y: py }); } } Here's what I'm trying to do in my update function: enemies.forEach(function (enemy) { if(path[enemy.pathPosition]){ enemy.x = path[enemy.pathPosition].x; enemy.y = path[enemy.pathPosition].y; enemy.pathPosition ++; } else{ enemy.body.velocity.y = 300; } }); What I get is a jumbled mess of flashing enemy ship sprites crawling through their points. There must be a better way. Help?

Hello all, Is it possible to align a group to the center of the stage? I have a series of buttons that comprise the locked and unlocked levels of my game. Because the number of levels is arbitrary (as for now) is it possible to determine the width of the group in order to align it to the stage?

Hey! I have a group of enemies created like this (called from create()): spawnEnemies: function(map){ this.enemies = this.game.add.group(); this.enemies.enableBody = true; this.game.physics.arcade.enable(this.enemies); var enemyStartPositions = this.findObjectsByType('enemyStart', this.map, 'objectLayer'); for(var i = 0; i < enemyStartPositions.length; i++){ var enemyStart = enemyStartPositions[i]; var enemy = new Enemy(this.game, enemyStart.x, enemyStart.y, 'cultist'); enemy.countStats(); this.enemies.add(enemy); } this.enemies.setAll("body.immovable", true); } In the update function - I try to detect the collision between the children in the group like in this example (using 2.4.7): http://examples.phaser.io/_site/view_full.html?d=arcade physics&f=group vs self.js&t=group vs self&phaser_version=v2.4.7& this.game.physics.arcade.collide(this.enemies); But they wont collide with - just passing trough - each other. Also tried with adding a callback as when I let the player sprite collide with the enemy group like this: this.game.physics.arcade.collide(this.player, this.enemies, this.collisionHandlerPlayerAndEnemy, null, this); this.game.physics.arcade.collide(this.enemies, null, this.collisionHandlerEnemyAndEnemy); And the callback-function will not be called (may it be that this does not even work at all when the case is group to group?). I need someone elses eyes on this. No properties for enemy body is set outside these code blocks.

So I am trying to create a game like battle cats if any one knows what that is. But i have to test if the enemy sprite is overlapping with the player sprites that I am spawning. I am using a group to spawn them so that i can do the this.player.create(x, y, 'image'). But if 1 sprite from the groups collide with the enemy i have to stop them by setting velocity to 0 so that it will stop moving and do some damage. The problem is that I dont know how to only stop the sprite that is actually touching the enemy sprite from a group. So each time 1 sprite from the group touches the enemy sprite, all the sprites stop moving. Any ideas on how to fix this? or if there is an easier way of doing this I would like to know Thank you in advance for any help you can give me

Hi All Quick question, I am scratching my head on this for the last day - what am I doing wrong ? I have created a basic car driving on a highway and to avoid the cars. I hae created an enemies grou fornthe car and my car is a player object http://html5gamer.mobi/phaser2/carChase/index.html sample of script : in create I have : //player this.player = this.add.sprite(this.game.world.centerX, this.game.world.height - 200, 'player'); this.player.anchor.setTo(0.5); this.game.physics.arcade.enable(this.player); this.player.body.collideWorldBounds = true; this.player.customParams = {}; this.initEnemies(); this.scheduleEnemies = this.game.time.events.loop(Phaser.Timer.SECOND * 1, this.initEnemies, this); in update I have : // kill enemies when out of screen if (this.enemies.y > this.game.height){ this.enemies.kill(); } //player and enemy hit this.game.physics.arcade.overlap(this.player, this.enemies, this.killPlayer, null, this); rest of the functions : initEnemies: function(){ this.enemies = this.add.group(); this.enemies.enableBody = true; this.createEnemy(); }, createEnemy: function(){ // create a random lane for the cars to drive down - 4 lanes var carRandom = Math.floor((Math.random() * 4) + 1); ; if (carRandom == 1){ //console.log('1st lane'); this.laneX = 50; this.laneY = -150; this.vel = 400; } else if (carRandom == 2){ //console.log('2nd lane'); this.laneX = 220; this.laneY = -150; this.vel = 400; } else if (carRandom == 3){ //console.log('3rd lane'); this.laneX = 500; this.laneY = -150; this.vel = 900; } else if (carRandom == 4){ //console.log('4th lane'); this.laneX = 660; this.laneY = -150; this.vel = 900; } // creat random cars var key = Math.floor((Math.random() * 4) + 1); ; // create enemy if one exists in the enemies group var enemy = this.enemies.getFirstExists(false); if (!enemy){ enemy = this.add.sprite(this.laneX,this.laneY, 'car' + key); } else { enemy.reset(this.laneX,this.laneY, 'car' + key); } // make the cars move towards the bottom enemy.body.velocity.y = this.vel; // add enemy to enemies group this.enemies.add(enemy); if (carRandom > 2){ // reverse the car image in the last 2 lanes enemy.scale.setTo(-1); } }, killPlayer: function(player, enemy) { cosnole.log('HIT !'); this.player.kill(); this.game.state.start('GameState'); }, Thanks for any help in adavnce Eric