Search the Community

Showing results for tags 'groups'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 93 results

  1. Looking through some of the other posts about this I couldn't manage to get mine to work. I've got: game.physics.arcade.collide(enemy1, world.player_spr, checkCollisionPlayer, null, this); function checkCollisionPlayer(thePlayer_spr, other_spr) { other_spr.kill();} where enemy1 is the group, player_spr is my player sprite and checkCollisionPlayer is my collision handler and I want the sprite from the group to be destroyed if they hit the player. I've tried other_spr.destroy(); as well but the sprites in the group just walk straight past my player no matter what. Thanks in advance.
  2. Hello, I have tried Phaser for a couple of weeks and I am trying to create something like a zoom in zoom out functionality on a 2D platformer. I am having trouble with setting the view of the game. I am using Phaser 1.1.3 First Approach: *= 5;I tried giving a different value for the camera's screenview. Screenview values changed but there are no changes with the camera's view. Second Approach: = 10I tried giving a different value for the world's scale, but the result is the same with the first approach. Nothing happend Third Approach: gameGroup.setAll('scale.x', 5);platforms.setAll('scale.x', 5);gameGroup.add(platforms);I tried creating a nested group but I was receiving an undefined errors. TypeError: e is undefined @ filephaser.min.js:2 Any ideas, suggestions or samples on how I should do this are welcomed. Thank you
  3. Hi friends, I am trying to do a top down space shooter in Phaser and I have a group, inside this group I've created the sprites of my enemy ships, they were created with, what I want to do now is to add one emitter to each enemy sprite, something like an Emitter Pool... it's possible?? Or what would be the best method? PD: Sorry for my english, I am from Colombia, South America.
  4. Hello! Can anyone, please, explain how I can apply accelerateToXY method to the whole group of objects? Thank you in advance!
  5. Hello, i was trying to attach eventListeners to sprites. I did that in the create function : this.selectorGroup =;height = 200;// looping through json for(var key in res){ var selector = game.add.sprite(625, height - 10, "resourceSelector"); selector.inputEnabled = true; // adding some custom property = key; // attaching eventListener; // adding the sprite to a group this.selectorGroup.add(selector); height = height+40;}// setting all elems of the group to alpha 0this.selectorGroup.alpha = 0;then in the callback function : triggerSearch = function (item, pointer) { // this is working console.log("looking for ",; // hide previous selections this.selectorGroup.alpha = 0; // this isnt working item.alpha = 1;};also, i cant access the selectorGroup to apply alpha 0 to all children in order to reset previous selections. though, if i dont set alpha to 0 to sprites in create function and i put item.alpha = 0 in the callback, i can remove opacity from the sprites... Am i missing something?
  6. hey there, after doing the first tutorial in the phaser site, i wanted to add a group that could easily create enemy sprites. baddies =;baddies.enableBody = true;i want the enemy to all have the same vallues for things like gravity. but i can't figure out how to do it/ what i have to change. i tried things like: baddies.body.gravity.y = 500;baddies.physicsBodyType.arcade.gravity.y = 500;those obviously don't work, but maybe they help you understand what im trying to accomplish. i couldn't find how to do it anywhere. i'm still a bit new in the javascript world so i'm sorry if i made a really dumb mistake ^^. thanks for reading .
  7. So, I'm still getting used to Phaser, and my question for the community is what would you do to get a sprite to pick up another sprite. So, example. The player is a helicopter, and the ground has crates, I want the chopper to make contact with the crate, and pick it up; in essence, the crate becomes attached to the chopper sprite, so it will move wherever the chopper goes. Of course, I'll need the player to drop the crate too. So, would I make the player into a group, and then add the collided crate into this group? What do you all think? Thanks, Dower
  8. I have a structure game - stageGroup - boxGroup - 3 spritesI have many boxGroups in stageGroup and I want to check collision between boxGroups Is it possible to check collisions/overlap this high? if it will be game-stageGroup-boxGroup-smallGroup-3spritesDo you think phaser will work that way if we check collisions between boxGroups? I see a solution to make a special group where I will put all sprites and check collisions inside a group..What do you think about that?
  9. Hi, I'm currently working on a dance revolution-like game and I've been wondering whats the best way to do this. I'm creating the arrows the player has to press on a group, any time a user press an arrow, if it matches with the one shown on screen, said arrow gets destroyed, the problem is that if two or more arrows come in the same group but the player only press one, all of them gets destroyed. I just want that only the arrow or arrows being pressed gets destroyed. What is the best approach to achieve that? thanks in advance!
  10. I based my game's bullet system on "Phaser Coding Tips 7", the create a Shoot-em-up tutorial ( Everything works fine until I reset the state, and I can't figure out any solution (this.getFirstExists(false) fails to find any bullets). The tutorial source code is available on:,output I added this in the Create-function at JS Bin to simulate the exact same problem I face in my game: var reset = this.input.keyboard.addKey(Phaser.Keyboard.R);reset.onDown.add(function(){'Game');}, this);If I hit "R" during game play the state resets as expected, and everything seems to work OK except the bullets wont work. Any ideas on how this could be solved?
  11. I'm putting together a basic top-down scrolling game and I have three groups of background tiles moving down the screen. I also have a character I add as a sprite but cannot get it to show up on top. I've tried bringToTop(), adding it to another group, enabling physics (like the background ones), adding it last, adding it first. My State object has three groups set at zero z and the sprite at 5 and it still never shows up. If I don't ever create the other groups, I'm fine. Does it matter that my character is a class derived from Phaser.Sprite instead of just a sprite? I can't find any reason this is happening. Thanks
  12. Hi all! I'm currently working on an activity for children. - They have a set of puzzle pieces (more a Tangram really). One of those pieces is fixed, the other they can drag around. Each piece will feature an image, randomly selected, that is a pair with another image placed on a fixed piece; So far I have the image sorting done (it's an array of words, that correspond to an image and sound that have the exact same naming convention. Whenever you pick an even number, you'll get the even number plus one - pairs ) I have the general event.onInputDown sorted from a previous activity I tackled (just needs a few tweaks). My issue at the moment is with the puzzle pieces + image: I think I should make them as groups: one for the fixed pieces, one for the moving pieces; I will create a new element/child(?) of each group, at position x, y). Issue: scale the puzzle pieces... I tried setAll(0.5, 0.5); tried anchor... then read groups don't really have anchors so ... Whatever I tried I only got, as a result, that the puzzle pieces seemed to stretch and move outside the game area... I need to add the randomly selected images on top of the moving pieces of puzzle and be able to drag the entire thing on one go... I have established on my script the variables for the groups and image. I tried the code below (trying/testing with just one element each at the time): fixedGrp =;puzzleGrp =; for(var i = 0; i < 3; i++){ if(i == 0){ fixedGrp.create(68, 68, 'piece1'); }else if(i == 1){ fixedGrp.create(68, 318, 'piece1'); }else if(i == 2){ fixedGrp.create(68, 568, 'piece1'); } } // should use a for as above puzzleGrp.enableBody = true; puzzleGrp.physicsBodyType = Phaser.Physics.ARCADE; puzzleGrp.create(900, 68, 'piece2'); //puzzleGrp.scale.setTo(0.5, 0.5); image =, 170, 'randomImg', puzzleGrp); image.width = puzzleGrp.width; image.height = puzzleGrp.height; image.inputEnabled = true; image.input.enableDrag(false, true);My idea is that the image will be part of the group and when I drag it, it will bring the group over with it. However... again my scaling attempts fail and I can only drag the image. Any pointers would be appreciated. Cheers! edit: Mistake on post name
  13. Hi, I've come from an OOP style background with AS3, etc. I'm struggling to work out how to groups things together (kind of like a movieclip in flash). So basically i want to create an object, which will have certain values i can access, but also have created several sprites, and bitmaptext associated with it. Example of how i want to create my object: createNewUpgradeItem:function(myNumber){ var upgradeItem = new UpgradeItem(this, 25, 200+i*55,, GAME_NAME.UpgradesAvailable.description, GAME_NAME.UpgradesAvailable.upgradePrice, GAME_NAME.UpgradesAvailable.priceMultiplier, GAME_NAME.UpgradesAvailable.sMultiplier, GAME_NAME.UpgradesAvailable.cMultiplier, i%4); GAME_NAME.upgradeMenu.add(upgradeItem); // Doesn't Work{UpgradeItemUpdate(this,upgradeItem);console.log(upgradeItem._name)},this); }, // Where 'i' would be a count (in a for loop) to create several objects. And UpgradesAvailable[] is an array of information to be passed. This works fine i believe and it creates the objects fine and puts them on screen,etc. What i want to do is have this upgradeItem added to a Group (say MenuGroup), so I would have thought something like the following would have worked: GAME_NAME.upgradeMenu.add(upgradeItem); But it doesn't seem to like it. My UpgradeItem code consists of some things, for example: var UpgradeItem = function(game, x, y, upgradeItemName, upgradeDescription, upgradePrice, price, speed, cSpeed, bNumber){ this._name = upgradeItemName; this._description = upgradeDescription; this._upgradePrice = upgradePrice; this._pMultiplier = price | 1; this._sMultiplier = speed | 1; this._cMultiplier = cSpeed | 1; this._active = false; this._backgroundNumber = bNumber | 1; this._upgradeItemGroup =; GAME_NAME.upgradeMenu.add(this._upgradeItemGroup); switch(bNumber){ case 0: this._background = game.add.image(x+10, y+36, 'uBackground1'); break; case 1: this._background = game.add.image(x+10, y+36, 'uBackground2'); break; default : this._background = game.add.image(x+10, y+36, 'uBackground1'); break; } this._background.inputEnabled = true; this._background.input.useHandCursor = true; this._background.anchor.setTo(0); this._upgradeItemGroup.add(this._background); this.UpgradeItemName = game.add.bitmapText(x+30, y+48, 'Lobster',this._name,26,this._upgradeItemGroup); this.UpgradeItemName.anchor.setTo(0); this.UpgradeItemDescription = game.add.bitmapText(x+180, y+48, 'Lobster',this._description,26,this._upgradeItemGroup); this.UpgradeItemDescription.anchor.setTo(0); } You can also see from my code here that i'm trying to group the 'assets' (the text and sprites) into a seperate group. Am I missing something really simple here? Thanks for looking
  14. Hi All, I have just started to learn about Game development and am following a flappy bird clone tutorials All works fine, apart from the collision detection between the bird and the poles. I have the below code which loops through the poles it the group and should detect collision, however nothing happens. // enable collisions between the bird and each group in the pipes group this.pipes.forEach(function(pipeGroup) {, pipeGroup, this.deathHandler, null, this); }, this); I have the below code which is for a single object colllision with a TileSprite // Bird collides with ground, this.ground, this.deathHandler, null, this); And this works fine. Any suggestions?
  15. My group aliens is moving around. At some point I remove a single alien and put it in a deadAlien group like this: deadAlien.add(alien);However, my deadAlien group does not have the same x, y as the 'alive' aliens group. they just move to the top of the canvas. Ok thats's easy to fix right? deadAlien.x = aliens.x; deadAlien.y = aliens.y;However, now my deadAliens constantly move around in sync with the alive aliens. Once an alien dies and is moved from the Aliens group into the deadAliens group, I need it to not change position (not to move to the top of the canvas), but also not have it's position dictated over time by the aliens group. How do I accomplish this?
  16. Hi there I'm just getting started with Phaser, so hopefully this isn't an old/silly question. I've been using groups in my game and they are pretty handy. I figure they are like adding folders to the hierarchy view in Unity (where you can group a bunch of elements together). I notice that it has a forEach method you can call that quickly cycles through all the entities inside the group. However, groups are a container for any mixture of entities - for example I might have a group called "titleGroup" made up of several different UI elements. This makes applying actions to groups difficult since I can't be sure what methods are available. In Unity we also have Tags. These let you tag entities by their type, which is separate from groups which are just a container of entities in the game world. The main advantage of tags is I could do a forEach on a tag type and know that every entity I'm cycling through is the same type. For example, my container of UI elements might have some buttons, a window, a image, all in a group call "titleGroup". With tags I could say 'foreach entity with tag 'button', set as disabled". Likewise, I might have 3 groups of enemy types, but if I do a linecast I don't want to cycle through all three groups manually, I would prefer to just do 'forEach tag of Enemy'. Does Phaser have anything like this?
  17. Hi Guys, I was looking for an answer but could not find one so Im sorry if I missed and double post. Im currently working on an small sidescroller game. The enemies are created as group and come from the right into the scene. what I would like to do is add a random name for the enemy displayed as text on top of the enemy, and having the same physical propperties like it (eg gets killed/destroyd if the enemy dies, moves at same speed etc) I suppose I can do this as child from the enemy but I have no idea how to add text this way especially for an "dynamic" text I appreciate any help cheers
  18. Hello guys, I just recently started to play with Phaser and so far I'm loving it.. However as I'm not used to it, I run into wall.. I'm creating a breakout game where I want different bricks to respond to ball hitting them differently.. Mostly I want to add bricks a health so to speak, so depending on the color of the brick, it will take 1,2,3.. etc ball hits to kill it.. I'm so far doing this in this fashion: // Red bricks bricks_1 =; bricks_1.enableBody = true; bricks_1.physicsBodyType = Phaser.Physics.ARCADE; // Yellow bricks bricks_2 =; bricks_2.enableBody = true; bricks_2.physicsBodyType = Phaser.Physics.ARCADE; // Gray bricks bricks_3 =; bricks_3.enableBody = true; bricks_3.physicsBodyType = Phaser.Physics.ARCADE; // Green bricks bricks_4 =; bricks_4.enableBody = true; bricks_4.physicsBodyType = Phaser.Physics.ARCADE;So, I'm creating a group for each of the type of the possible bricks.. Then as I randomly create a level, I do this: function randomLevel(){ var brick; for (var i = 0; i < 8; i++) { for (var j = 0; j < 6; j++) { var rand = game.rnd.integerInRange(1, 4); switch(rand) { case 1: brick = bricks_1.create(75 + (i*80), 55 + (j*40), 'brick_1'); brick.body.bounce.set(1); brick.body.immovable = true; break; case 2: brick = bricks_2.create(75 + (i*80), 55 + (j*40), 'brick_2'); brick.body.bounce.set(1); brick.body.immovable = true; break; case 3: brick = bricks_3.create(75 + (i*80), 55 + (j*40), 'brick_3'); brick.body.bounce.set(1); brick.body.immovable = true; break; case 4: brick = bricks_4.create(75 + (i*80), 55 + (j*40), 'brick_4'); brick.body.bounce.set(1); brick.body.immovable = true; break; } } }}And then I have 4 onHit functions (which I don't really like, would prefer a single one with some switch statement in there) where depending on what type of brick has been hit, it can play ie different sound for example.. game.physics.arcade.collide(ball, bricks_1, ballHitBrick_1, null, this); game.physics.arcade.collide(ball, bricks_2, ballHitBrick_2, null, this); game.physics.arcade.collide(ball, bricks_3, ballHitBrick_3, null, this); game.physics.arcade.collide(ball, bricks_4, ballHitBrick_4, null, this);This is example of one of the onHit functions (I basically used example of breakout a lot): function ballHitBrick_1(_ball, _brick) { _brick.kill();; score += 10; scoreText.text = 'Score: ' + score; // Are they any bricks left? if (bricks_1.countLiving() == 0 && bricks_2.countLiving() == 0 && bricks_4.countLiving() == 0) { // New level starts scoreText.text = 'Score: ' + score; introText.text = '- Next Level -'; // Let's move the ball back to the paddle ballOnPaddle = true; ball.body.velocity.set(0); ball.x = paddle.x + 16; ball.y = paddle.y - 16; ball.animations.stop(); // And bring the bricks back from the dead randomLevel(); }}And this all works well, ie I can play different sounds based on what brick has been hit.. However what do I need to do to add health to these bricks? So for example, bricks_1 bricks die only after 1 shot, while bricks_3 don't die ever (think of like concrete/metal/blocking bricks).. Thanks a ton!
  19. Hi folks, I was trying to group together two groups with the "group selected items" button. One time, my two groups just disapeared. The other time inside one group two empty groups were created. Oh and by the way, it would be nice to be able to also adjust the anchor points for groups like you can with sprites.
  20. Hi guys, Im creating this game using Can someone show me how to make objects inside a group collide with each other. Right now when i do, //board is the group and it has many elements //Floor is where all the elements fall to game.physics.arcade.collide(this.board, this.floor); All the elements inside the group stack on top of each other when they hit the floor at the same position. In other words the stack builds at one position, the latest one hiding the previous element and not upwards in the sense one on top of another at a higher position. How can i make the stack build upwards? If you could just show me how to make elements inside a group collide would be great. Thanks.
  21. Hello everyone, I hope the new year is treating everyone well so far! I've been out of the loop for a while, but I'm misunderstanding something about how groups, sprites, and sprite bodies interact. I couldn't find anything relevant on the search function, but I wanted to ask this question: What's the commonly accepted way to create groups that contain a variety of enemy types (each type having a different sized sprite, with differing numbers of frames for animation, and different names)? I have five enemy types in my game, each with differing sizes and differing animation frames (one might have 5 frames, another 8, etc). I created a group for each of these ("enemyType1Group", and so on), add enemies to each group based on the current level, and then add each of those enemyTypeXGroups to the main "enemies" group so that I can call functions on all of it's children (in the enemyTypeXGroups) instead of having to call the same code for each group individually (like setting scale, playing animations, etc). The problem is, during my Update() function, if I call something like the following, it breaks because the properties are undefined. I'm fairly certain I'm nesting groups incorrectly, or just going about it the wrong way, so any help would be fantastic. Of course, if anyone has some suggestions to shape the code up into something more efficient, I'm more than open to suggestions. Thanks! createEnemies: function() { // Removed group 4 because the sprite is being re-done. I'll add it later. // Create separate group for each enemy type this.enemyType1Group =; this.enemyType2Group =; this.enemyType3Group =; this.enemyType5Group =; // Create enemies for each group based on what the current level is. if ( == 1) this.enemyType1Group.createMultiple(5, 'enemy1') else if ( == 2) { this.enemyType1Group.createMultiple(5, 'enemy1') this.enemyType2Group.createMultiple(5, 'enemy2') } else if ( == 3) { this.enemyType1Group.createMultiple(5, 'enemy1') this.enemyType2Group.createMultiple(5, 'enemy2') this.enemyType3Group.createMultiple(5, 'enemy3') } else if ( == 4) { this.enemyType1Group.createMultiple(5, 'enemy1') this.enemyType2Group.createMultiple(5, 'enemy2') this.enemyType3Group.createMultiple(5, 'enemy3') } else if ( == 5) { this.enemyType1Group.createMultiple(5, 'enemy1') this.enemyType2Group.createMultiple(5, 'enemy2') this.enemyType3Group.createMultiple(5, 'enemy3') this.enemyType5Group.createMultiple(5, 'enemy5') } // Add enemy animations to each enemy group this.enemyType1Group.callAll('animations.add', 'animations', 'right', [0, 1, 2, 3, 4, 5, 6, 7], 8, true); this.enemyType1Group.callAll('animations.add', 'animations', 'left', [8, 9, 10, 11, 12, 13, 14, 15], 8, true); this.enemyType2Group.callAll('animations.add', 'animations', 'right', [0, 1, 2, 3, 4, 5, 6, 7], 8, true); this.enemyType2Group.callAll('animations.add', 'animations', 'left', [8, 9, 10, 11, 12, 13, 14, 15], 8, true); this.enemyType3Group.callAll('animations.add', 'animations', 'right', [0, 1, 2, 3], 4, true); this.enemyType3Group.callAll('animations.add', 'animations', 'left', [4, 5, 6, 7], 4, true); this.enemyType5Group.callAll('animations.add', 'animations', 'right', [0, 1, 2, 3, 4, 5, 6, 7], 8, true); this.enemyType5Group.callAll('animations.add', 'animations', 'left', [8, 9, 10, 11, 12, 13, 14, 15], 8, true); // Group contains all enemy groups, so that I can call animations, scale, etc on all sub-groups at once. this.enemies =; // Add enemy type groups to main group this.enemies.add(this.enemyType1Group) this.enemies.add(this.enemyType2Group) this.enemies.add(this.enemyType3Group) this.enemies.add(this.enemyType5Group) // Turn on teh body physics this.enemies.enableBody = true; // Resize enemies if spritesheet is too large. this.enemies.scale.setTo(0.5, 0.5); this.enemies.setAll('body.height', (35 * .5)); this.enemies.setAll('body.width', (41 * .5)); this.nextEnemy = 0; // Set enemy spawn to now},update: function() { // Ensure enemies face the correct direction this.enemies.forEachAlive(function(enemy) {'right'); }},
  22. rvizcaino

    Group as one

    Hi friends, I have a group for my main player, this group have inside 4 sprites, one for the body, one for the eyes, one for the mouth and one particle emitter, this works great. My issue begins with the collisions, every sprite is colliding individually, what I need is enable body in the group as one big sprite... is this possible? Or what could be the best approach? Thank you so much.
  23. Hey! I'm working further on with the first tutorial from Phaser, the platform game. I've changed a few things, such as different sprites. I'm trying to get a different image for the ground and the 2 platforms, but now my collision isn't working anymore... Also it won't show the platforms anymore. Complete beginner here, hope to get some help! Thanks in advance index.html
  24. I'm having some unexpected behavior using groups in my Phaser game. I'm using a Tilemap to build my world, and a Texture Atlas for my characters and objects. First I render my tilemap and then I add a group to the game, and add a couple of sprites to the group. This is where things go awry. The door sprite I add has no physics enabled, so it seems to get added on top of the game and just kid of floats there. The player sprite I add has physics enabled and is tracked by the camera, but it appears to be quite offset. It seems like the group isn't being created in the world and it's probably something glaringly simple I am overlooking, but I just can't figure this out. If I add the sprites to the game directly, vs using the group, they work fine. Here's what my state code looks like: { preload: function () { this.load.atlas('characters', 'assets/characters.png', 'assets/characters.json'); this.load.spritesheet('sheet1','assets/tiles.png',64,64,-1,1,2); this.load.tilemap('lvl_1-1','assets/lvl_1-1.json', null, Phaser.Tilemap.TILED_JSON); this.physics.startSystem(Phaser.Physics.ARCADE); this.physics.arcade.gravity.y = 800; this.physics.arcade.TILE_BIAS = 40; }, create: function () { ='lvl_1-1');'tiles', 'sheet1'); this.ground_layer ='Ground'); this.ground_layer.resizeWorld();[],true,this.ground_layer); this.player = new Phaser.Sprite(, 64, 408, 'characters', 1);; door = new Phaser.Sprite(, 64, 160, 'characters', 0); /** ================ Method 1: this doesn't work as expected =================== **/ characters_group =, 'characters_group', true); characters_group.add(door); // door is added like an overlay, does not move with camera characters_group.add(this.player); // player moves as expected, but falls off-camera /** ============================================================================ **/ /** =================== Method 2: this works just fine ========================= /;; /** ============================================================================ **/, Phaser.Camera.FOLLOW_PLATFORMER); this.cursors =; }, update: function () { this.physics.arcade.collide(this.player, this.ground_layer); if (this.cursors.left.isDown) { this.player.body.velocity.x = -200; } else if (this.cursors.right.isDown) { this.player.body.velocity.x = 200; } else { this.player.body.velocity.x = 0; } if (this.player.body.blocked.down && this.cursors.up.isDown) { this.player.body.velocity.y = -900; } } } I attached some screenshots showing what's happening. Any help would save me a lot of Tylenol!