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
    • 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

Found 217 results

  1. 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!
  2. 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!
  3. 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
  4. 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
  5. 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?
  6. 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.
  7. 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); } }
  8. 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.
  9. 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?
  10. [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).
  11. 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
  12. 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
  13. 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!
  14. 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)
  15. 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 ]); } }
  16. 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
  17. 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?
  18. Currently making a menu, I have a bunch of buttons, that are essentially groups containing the button sprite itself and text. Trying to vertically align each subsequent group with their previously added button sprite inside the group (since we can't directly alignTo() groups). The code is essentially how it reads below: let rect, buttons; let InitState = { preload: function() { let square =,0); square.beginFill(0xFFFFFF,1); square.drawRect(0,0,200,100); rect = square.generateTexture(); square.clear(); }, create: function() { buttons =; buttons.position = {x: 50, y: 50} let btnarray = ["ONE","TWO","THREE","FOUR","FIVE"]; btnarray.forEach(function(btnTxt) { let buttonGroup =; let image = rect; let buttonImg = buttonGroup.add(,0,rect)); let txt = buttonGroup.add(,buttonImg.height/2,btnTxt)) txt.anchor = {x: 0.5, y: 0.5}; if(buttons.children.length>1) { // We won't be needing to align the first one buttonGroup.alignTo( buttons.getAt(buttons.children.length-2).children[0], // buttonImg Phaser.BOTTOM_LEFT, 0, 4 ); } }.bind(this)) }, } let Game = new Phaser.Game( 800, 600, "", Phaser.AUTO, InitState ); This is a simplified version of what I'm doing, but even in this simplified version, the same thing occurs. The first and second buttons are correctly placed, but the third one is positioned in top of the second, and the fourth in top of the third. As you can see on the picture below, we can only see the first and last buttons, because the rest is buried under "five". alignTo() always refers to the second-to-last button in the group (the last being the one I'm trying to move), so why it seems to always take position (0,0) (relative to buttons) as reference? Thanks in advance.
  19. Hello comrades, I'm new to phaser and I can't seem to create new objects to the group "capetinhas", even though I can load the sprite through game.add.sprite. Here's the code: var game = new Phaser.Game(448, 448, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload () { game.load.image('tabuleiro','assets/tabuleiro.png') game.load.spritesheet('devil','assets/devil.png',32,32); var capetinhas; } function create (){ capetinhas =; game.add.sprite(window.width,0,'tabuleiro');//loading the background game.add.sprite(128,128,'devil'); // this works capetinhas.create(32,32,'devil'); // this doesnt } function update (){ } Any helpe would be really apreciated. Thanks in advance.
  20. 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
  21. Change pivot position of a group

    Hi I am new to phaser . I am working on a animation to rotate a glass with lid . when I rotate it ,it rotates anti cliockwise to the left . I want it turn clockwise to right . and when I try to change the pivot position the group position gets changed. Need help .
  22. Hello, I've got this code: create: function () { this.cursor = game.input.keyboard.createCursorKeys(); this.jump = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); this.xKey = game.input.keyboard.addKey(Phaser.Keyboard.X);, 0, 1920, 0); //Fisicas game.physics.startSystem(Phaser.Physics.ARCADE); = 1000; //fondo game.stage.backgroundColor = "#00FFFF"; //codigo de plataformas this.platforms =; this.platforms = game.add.sprite(0, 553, 'plataforma'); this.platforms = game.add.sprite(-400,300, 'plataforma'); game.physics.arcade.enable(this.platforms); this.platforms.body.immovable = true; // this.platforms = game.add.sprite(700,300, 'plataforma'); // this.platforms = game.add.physicsGroup(); //tipo this.player = game.add.sprite(125, 100, 'tipito'); this.player.anchor.setTo(0.5, 1);'tipito'); game.physics.arcade.enable(this.player); this.player.body.gravity.y = 800; //this.player.body.collideWorldBounds = true; (PRODUCE BUG CON //animaciones this.player.animations.add('correr', [0, 1, 2, 3, 4, 5], true); //'correr', 10, true); //game.physics.arcade.collide(this.player, this.platforms); }, update: function () { //this.walkVelocityR = this.player.body.velocity.x = 200 //this.walkVelocityL = this.player.body.velocity.x = -200 //this.jumpVelocity = this.player.body.velocity.y = -400 game.physics.arcade.collide(this.player, this.platforms); //this.platforms.body.checkCollision.down = false;; if (!this.player.inWorld) { this.playerDie(); } if ((this.cursor.right.isDown || this.cursor.left.isDown) && this.jump.isDown && this.player.body.wasTouching.down) { this.player.body.velocity.x = 200; this.player.body.velocity.x = -200; this.player.body.velocity.y = -700; } else if (this.cursor.right.isDown && this.cursor.left.isUp) { //this.cursor.left.enabled = false; this.player.body.velocity.x = 200;'correr', 5, true); this.player.scale.x = 1; this.a = 2; //console.log("este es a = " + a); } else if (this.cursor.left.isDown && this.cursor.right.isUp) { //this.cursor.right.enabled = false; this.player.body.velocity.x = -200;'correr', 5, true); this.player.scale.x = -1; } else if (this.jump.isDown && this.player.body.wasTouching.down) { this.player.body.velocity.y = -700; } else { this.player.body.velocity.x = 0; this.player.animations.stop(); this.player.frame = 4; } /*/if(this.cursor.right.justUp){ this.cursor.left.reset(); } if(this.cursor.left.justUp){ this.cursor.right.reset(); }/*/ //var style = { font: "65px Arial", fill: "#ff0044", align: "center" }; //this.text = game.add.text(0, 0, "phaser 2.4 text bounds",{ font: "10px Arial"}) //this.text.anchor.set(0.5); }, render: function (){ //game.debug.inputInfo(32,32); game.debug.key(this.cursor.right, 50,50) }, playerDie: function () { this.player.kill(); this.start() //, this.start, this) }, start: function (){ game.state.start('play'); } as you can see, I created a group which has two platforms sprites, the problem is when the collision between the player and the group occurs, just apply to the last one I created, the rest the player just avoid them. I don't know what is my mistake, please tell me if this is ridiculous or I'm an idiot.
  23. Just noticed an issue. Lets say we have a group named OurGroup with three buttons (represents settings window with buttons 'soundOn', 'pause', 'close'). Each button have its own inputDown listener (or any else like inputOver, inputOut etc.). Then we add this group to the game via It works perfect, all the buttons are clickable and so on. Some time later, we want to remove the group from the game (i.e. user clicked the close button on our window) by itself: /*somewhere in the OurGroup class*/ if(this.parent) { this.parent.removeChild(this); } OK, the OurGroup has succesfully removed from the game, it's invisible. But! The listeners attached to the group's buttons are still active and react the input events! Could someone explain me is it a bug or I'm doing something wrong? I migrated to Phaser from flash, and there after have removed a DisplayObject from a stage, all listeners attached to it were removed as well.
  24. Cannot use spritesheet in group

    In the Phaser documentation for groups it says that you can do the following: group.create(x, y, "spritesheet", index) ...where index is the frame on the spritesheet you want be be included in the group. However, when I use this it just displays the entire spritesheet.
  25. Get Id of object in group

    Hello I'm using an overlap between player (joueur) and bottles (bouteilles). bottles is a group of 4 bottle and I want to know which bottle I'm interacting with in the function called by the overlap game.physics.arcade.overlap(joueur,bouteilles,interragitb,null,this); then the function function interragitb(joueur,bouteille){ cursors = game.input.keyboard.createCursorKeys(); if (cursors.up.isDown && points > 0) { bouteille.frame = bouteille.frame +1; point(0); } } and I want to increment a variable to know how many times I interracted with a spécific bottle how should I do ? Is there any way to get index in the group or var name ? Thank you