Search the Community

Showing results for tags 'group'.

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
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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 224 results

  1. this.imageGroup =; 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?
  2. 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 =; this.timer =, this.addNewJump, this); this.horseGroup =; 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( - 40, -'fence').height); }, update: function() { this.horseGroup.forEach(function(item) { // jump fences, 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){, this); function airJump() { item.body.velocity.x = 5; item.body.gravity.x = 100; }'jump');, this); function groundGallop() { item.body.velocity.y = 0; } } else {'gallop'); } } }.bind(this)); }, };
  3. andrei.nicolae

    Group set origin

    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 =[{ key: '001_leprosy', setXY: { x: 444, y: 115 }, setOrigin : {x:0, y:0} } ]); Any ideas? Thanks.
  4. Doug

    Hi Rich.  @rgk mentioned that you might be able to please add a "patron" badge to my forum profile?  Thanks very much!

  5. 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?
  6. bobonthenet

    Adding an emitter to a group

    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 =; 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. }
  7. I have a lot of sprites for the background in a phaser grohp and they don't move. I'm thinking it would be a lot more efficient on mobile devices to have them all turned into one big image at runtime as their position won't change or anything. How would I go about doing this?
  8. I have created a group like this: malos =; 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:'right', true); Thanks!
  9. AdamRyanGameDev

    setInteractive() on a whole group

    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!
  10. 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
  11. 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, but I'm struggling to find the equivalent in Phaser 3. Any help appreciated, nice one thanks. Sam
  12. 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?
  13. CyborgNachte

    Stop all animations in a sprite group

    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 =; cardPack.create( - 250,, 'card'); cardPack.create( - 75,, 'card'); cardPack.create( + 100,, '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.
  14. 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); } }
  15. Nephelococcygia

    Best way to handle Character with shadow

    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.
  16. 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.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?
  17. Hi i'm quite new with phaser but i'm making a game at the moment for a class project and i was wondering if their is a way to choose a specific sprite from a group of maybe by order of how they were created or something . any help would be much appreciated
  18. ugajin

    gemmatch example

    I have been looking at this: 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!
  19. bluecake

    [HELP] Group collider detection

    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 =; for(var i=0; i<10 ;i++) { var s = enemygroup.create(,, 'monster'); s.frame = 3; s.animations.add('enemymove', [2,3,4], 10, true);'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).
  20. Hi, I want to visualize the "projectiles" of a flamethrower using a group of sprites. They are moved by body physics of type arcade. Now I'd like to scale the single projectiles up, depending on their position on the x axis or alternatively on their livetime. How would you achieve this without draining the cpu too much? Would you use forEachAlive or some sort of callback? Might it be easier to implement using particles and can I check for collision with particles? What I have so far: execute() { let sprite = this.spriteGroup.getFirstExists(false); if (sprite) { sprite.reset(this._enemy.attackSpawnX, this._enemy.attackSpawnY); sprite.body.velocity.x = -200; setTimeout(this.execute.bind(this), 100); } } I use setTimeout in order to spawn the projectiles asynchonous until the group is empty. greetings
  21. So I am preloading an atlasXML spritesheet game.load.atlasXML('sheet', 'images/sheet.png', 'images/sheet.xml'); and I can create a sprite using: game.add.sprite(,, 'sheet', 'playerShip1_orange.png'); I am trying not to use a for loop to create many sprites for a a sprite group I'm creating by using Group.createMultiple Now if I'm just loading a sprite or image, I can do this.meteorGrey =; this.meteorGrey.createMultiple(25, 'meteorGreyBig1.png'); Now when it's in a atlas sprite, this is where I'm running into trouble. this.meteorGrey =; this.meteorGrey.createMultiple(25, 'sheet', 'meteorGreyBig1.png'); It ends up displaying nothing
  22. arknoid

    Group and foreach

    Hi , I m new user of phaser and i develop a retro shoot them up for the GameOFF jam . i have a problem in my game state : enemyTween: function(){ this.enemyPool.forEachAlive(function(enemy){ enemyTween = }) TypeError: is undefined [En savoir plus] why i cant acces to game and other event into function of group? (sorry for my bad english)
  23. rorymcg

    P2 sprite collision group pain

    Hi all, Been banging my head against the wall for ages with this. Default P2 collision works, I clearShapes() on each sprite to get rid of these boundary boxes and loadPolygon() to get my custom boundaries (defined in sprite_physics.json). However the collision groups appear not to be working as my player sprite goes straight through/under the enemy. Can anyone see where I'm going wrong? // in index.html (function() { var game = new Phaser.Game(1024, 768, Phaser.AUTO, null) game.state.add('Game', Game); game.state.start('Game'); })(); // in game.js var Game = function (game) { }; Game.prototype = { preload: function () {'player', 'assets/player.png');'enemy', 'assets/enemy.png');'sprite_physics', 'assets/sprite_physics.json'); }, create: function () {; this.playerCollisionGroup =; this.enemyCollisionGroup =; this.createPlayer(); this.createEnemy(); }, update: function () { // <snip> do some steering stuff </snip> }, createPlayer: function () { this.player =, + 300, 'player');, true); // so I can see the polygon's boundaries // Gets rid of current bounding box this.player.body.clearShapes(); // BUT THEN need to add collision cos default p2 collision is wiped with clearShapes() // Add boundary shape from PhysicsEditor this.player.body.loadPolygon('sprite_physics', 'player'); // Seems to do nothing :( this.player.body.setCollisionGroup(this.playerCollisionGroup); this.player.body.collides([ this.enemyCollisionGroup ]); }, createEnemy: function () { this.enemy =,, 'enemy');, true); this.enemy.body.clearShapes(); this.enemy.body.loadPolygon('sprite_physics', 'enemy'); this.enemy.body.setCollisionGroup(this.enemyCollisionGroup); this.enemy.body.collides([ this.playerCollisionGroup ]); } }
  24. Hi guys, just a quick question. I'm trying to detect overlap between emitter particles and a group like so: create: function() { this.emitter =, 0, 1000); this.emitter.enableBody = true; this.emitter.makeParticles('whiteParticle'); this.emitter.minParticleSpeed.setTo(100); this.emitter.maxParticleSpeed.setTo(800); this.emitter.gravity = 50; this.emitter.maxParticleScale = 3; this.emitter.minParticleScale = 0.1; this.emitter.setYSpeed(-150, 150); this.emitter.flow(1500, 100, 100, -1, false); //lifespan, frequency, quantity, total, immediate this.emitter.checkWorldBounds = true; this.emitter.outOfBoundsKill = true; =; = true; this.fire3 =, 500, 'fireL3'); this.fire2 =, 500, 'fireL2'); this.fire1 =, 500, 'fireL1');;;; }, update: function(){,, this.damageFire, null, this); } damageFire: function(){ console.log('fire damaged!'); }, I can get this to work fine if I check for overlap between 2 sprites/groups, but I cannot get it to work for the emitter. Could anyone point me in the right direction? Thanks
  25. Hello, 1. I created a group groupA in the game. 2. I created a sprite spriteA and added it to groupA. 3. After that I kill() spriteA and keep its reference in a pool array for later use. 4. I destroy() groupA. 5. I get the spriteA from the pool array to be used in another group and try to change its texture with loadTexture(), I get error: phaser2.8.8.js:46794 Uncaught TypeError: Cannot read property 'cache' of null at Phaser.Sprite.loadTexture (phaser2.8.8.js:46794) That doesn't happen if I don't destroy the group in step 4. Could anyone please explain what is going on and what is the right way to reuse Sprites even when their container parents are destroyed?