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
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 194 results

  1. 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.
  2. 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
  3. Hi, in my render function, I have the following: render: function() {;; }, Now, the player, has a little green box around him, however the monster (or the group of monsters) has nothing and I get a warning: " gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);" HOW TO I GET A LITTLE GREEN DEBUG BODY ON A GROUP OF OBJECTS?
  4. I'm having an issue which I'm unsure what's happening and can't find anyone else having a similar issue. Basically, I create a group, create them, add a tween to animate them across the page. I create a player sprite and whenever the player collides with the other sprites in the group kill them and render another one. however, this only works on the first item I create. var group =; group.enableBody = true; group.physicsBodyType = Phaser.Physics.ARCADE; So create my group and then do a `for loop` to create all my enemies for (var i = 0; i < 2; i++) { c = group.create(game.width, 20, 'seacreatures', 'octopus0000'); = "enemy" + i; c.body.immovable = true; c.alive = true; c.alignIn(laneArr[Math.floor(Math.random() * laneArr.length)], Phaser.RIGHT_CENTER); game.add.tween(c).to({ x: -200 }, speedArr[Math.floor(Math.random() * speedArr.length)], Phaser.Quadratic, true, 0, 0, false); } group.callAll('animations.add', 'animations', 'swim', Phaser.Animation.generateFrameNames('purpleFish', 0, 32, '', 4), 30, true, false); group.callAll('play', null, 'swim'); game.physics.enable(c, Phaser.Physics.ARCADE); Below this I also render the player currPlayer = game.add.sprite(50, game.height / 4 * 2 + 45, "playerFish"); game.physics.enable(currPlayer, Phaser.Physics.ARCADE); currPlayer.body.immovable = true; currPlayer.physicsBodyType = Phaser.Physics.ARCADE; currPlayer.alignIn(laneRect_three, Phaser.LEFT_CENTER); currPlayer.scale.set(1.5); So in short, the enemy travels across the `x` axis and once it collides with the player it triggers a function which looks like this, my update function: game.physics.arcade.overlap(playerFish, enemyFish, collisionHandler, null, this); then the function it calls, `collisionHandler` looks like function collisionHandler () { killedEnemies += 1; c.destroy(); c.alive = false; text.setText("You have killed " + killedEnemies + " enemies !"); console.log("<<<<<<<<"); } But like I said, it only kills the first item it hits, am I missing anything?
  5. First of all, sorry for my english Hello! I'm trying to make a Arkanoid game on android Phaser. When the ball hits a brick, the brick disappears and the ball bounces well. Now I have two types of bricks, a normal brick, brick and TNT brick. I've implemented that when the ball touches a TNT brick, kill adjacent bricks too, but when one of those adjacent bricks is a TNT brick, it must call the same function recursively, but something does not work ... any idea? here is my function:
  6. Hello, I have searched a solution for a problem for long time and didn't found, if someone have some ideas I am taking all x) did someone know if it's possible to rotate a group of bodies around an anchor point, I set some bodies for invisble walls and my objective is to turn them around by 90° around an anchor point, I know It must be not very comprehensive so I set up an Image to explain myself. In the screen, I have 2 bodies and I want them to turn around the red dot what must be my anchor point, I know it's impossible in arcade so I tried in P2 physics and impossible to found any solution :/ Thanks for reading, feel free to leave a feedback
  7. how to add Phaser. Graphics to a group? doing some tweens to a group but the things i drawed using a graphic did not move allthogeder. i draw thing on create phase, is it any kind of problem? any guidance is welcome.
  8. Hi, I am getting some unwanted behaviour with groups and p2 physics. When the sprites is leaving the screen, I want to kill them and reset new ones. But when I kill the first one, and reset a new one, the physics goes haywire. Anyone got a suggestion on how to fix this? Check this pen for an example:
  9. Still working on the Phaser, making your first Phaser game tutorial. I am not familiar with js so the question might be easy. I added 5 baddies as a group after the tutorial and I was trying to make it move and change direction every 1 sec. I used a Direction function to determine the direction for 1 baddie. However, I tried to put the time.event.loop function in my loop of creating baddies, only 1 baddie will move around. Others had a velocity of 0. There's my code.
  10. Hello! I have an issue that I didn't understand too much. I'm trying to build a tiled-isometric-map loader for Phaser, where I have many issues about perfomance. So I will investigate different techniques to make them more lightweight for CPU/GPU trying to use some techniques like render the map layers in cropped RenderTextures (just draw the visible area of the map at once), using sprite-populated SpriteBatches/Groups as source (I tested with both). In simple words, the logical behind this is the following: Populate the SpriteBatch/Group with tile-based sprites from a cache-array (to prevent creating/destroying each time). Render that SpriteBatch/Group into the RenderTexture, clearing it before that. Cleaning the SpriteBatch/Group, putting the tile-based sprites back to the array and removing from the SpriteBatch/Group (without destroying them, off course). Create a Phaser.Image that show the RenderTexture in the screen. (Or create once, the texture are updated anyways). I tested that with one RenderTexture and works fine. The issue comes if I write more many of them (Assuming that 1 RenderTexture is equivalent at 1 Layer of the scenario), the screen starts showing y-inverted versions of the RenderTexture at random times. A important fact that this just occurs in WebGL mode (in Canvas the behaivour is the correct). I'm using Phaser CE 2.7.3. I coded a short example of the issue (each column is a different RenderTexture with correspondent Sprites), you're free to see and debug them : Canvas: WebGL: Some idea of what's going on there? Thanks in advance
  11. Hey all, I'm trying to filter an entire group, but I can't seem to succeed, where applying that same filter to a sprite instantly works. I'm working on my first Typescript project and I like it a lot! I have a MainGame class (mainGame.ts) which extends Phaser.State and I have a Container class (container.ts) which extends Phaser.Group When I apply a filter to a sprite that I simply added like: this.body = this.add.sprite(0, 0, 'bgBase'); this.body.filters = [ new Phaser.Filter.BlurY(, null,'') ]; the blur filter is applied. Now when I try to apply the filter to a container which contains Sprites, like: this.container = new Container(; this.container.filters = [ new Phaser.Filter.BlurY(, null,'') ]; does NOT work. But when I apply the filter directly to a Sprite inside the container, like: this.container.someSprite.filters = [ new Phaser.Filter.BlurY(, null,'') ]; the filter is applied as expected. I must be overlooking something important for how I create or add the group, but I keep missing it. I hope somebody has an idea about where to look. Help will be much appreciated!
  12. Hello everyone, I'm currently creating my first Phaser game, so I'm relatively new to all of this. Basically what I'm trying to achieve is to create text with images inside. I'm thinking of building Strings like "This is a {{test}} String", which gets parsed in a way that the "{{test}}" part will be replaced by an image that has previously been loaded into the cache, using the identifier 'test'. I've been searching through the web in the past few days but didn't find anything that really helps me. For experimental purposes, the images I want to use in my Text are the Playstation input symbols (Cross, Square, Triangle and Circle). So, for example, if I add a text "Press {{cross}} to continue" to the game I want it to show the Cross-Symbol inside the text. Hopefully this explains enough. Does anyone have a good idea for a way of achieving this, or done this before? I will greatly appreciate any help! Kind regards and thanks for reading! Edit: Thanks for the answers! Just like mattstyles suggested, I figured I'd have to generate the text and image parts by parsing the string and then calculate each of the parts positions. For those who are interested in how I did it: First I parsed the string by splitting it at spaces (" "), iterating over the resulting array and depending on the "substring", either add a text or image to a previously defined group. Then I iterated over the groups children and set each of their x and y attributes after calculation the position, based on the all the previous children's widths, heights and a fixed anchor point. My result is a tooltip that follows the mouse pointer when hovering over certain objects. This is a very rough explanation. If anyone wants, I can provide some of my code with more precise information.
  13. I created these four groups: underlayer_group =; npc_group =; overlayer_group =; transtions_group =; I set these depth factor to help me sorting them: underlayer_group.depth = 1; npc_group.depth = 2; overlayer_group.depth = 3; transtions_group.depth = 4; The problem is: In some moments of the game, I use removeAll() method from the groups underlayer_group and overlayer_group to remove their children, so I can add new children. Here is how I add them: this.map_sprite = game.add.tilemap(this.key_name); this.map_sprite.addTilesetImage(this.tileset_name, this.key_name); for(var i = 0; i < this.sprite.layers.length; i++){ var layer = this.sprite.createLayer(this.sprite.layers[i].name); layer.resizeWorld(); overlayer_group.addChild(layer); } I was hoping that only creating the groups in that initial order, I would not have problems with their z order. But I'm having. New layers come over transitions_group. So I created the depth property to help me sort after children insertion like this:'depth', Phaser.Group.SORT_ASCENDING); But this is also not working. What can I do to sort my groups properly? ---------- EDIT It seems that only the group with a graphic sprite (rectangle) is not working properly...
  14. Hey guys, I got a weird behavior from using the callback method on group.onDestroy: this.playerCar = 'car1'; this.enemyCar = 'car2'; this.optionsGroup.onDestroy.add(this.currentTrack.createCars, this, 0, this.playerCar, this.enemyCar);
  15. Hey guys, I got a weird behavior from using the callback method on group.onDestroy: this.playerCar = 'car1'; this.enemyCar = 'car2'; this.optionsGroup.onDestroy.add(this.currentTrack.createCars, this, 0, this.playerCar, this.enemyCar); and what I get on the other side instead of 'car1' and 'car2', is: [object, object] and true. I even tried using: this.currentTrack.createCars.bind(this), but it does not help Does anyone know why? Phaser version 2.6.2
  16. Is there any way to get the absolute position of a sprite? I have a group holding several sprites and I want to move one of them. The group will be moved as a whole. The sprite's position is relative to the group, but I would like the position relative to the world, or more precisely, relative to the activePointer. I have tried using physics.arcade methods, such as angleToPointer, but those methods do not take inte account the object's offset, that is its parents' positions (the group's position). Is there any way built into Phaser to accomplish this? Or do I need to iterate over all parents and calculate the absolute position in my own function?
  17. Hello, I want to move group of sprites toward the player: var goBack =;{x:,y:},2000); goBack.start(); But it seems that the group treats coordinates x, y as starting from group (like it has its own coordinate system) and not from Canvas' (0,0). How to make the tween movement work with world coordinate system and not in group (0,0)? Thanks for help, Edit #1 Ok I have overcome this problem by dividing player.x - child[0].x and the same for y.
  18. Hi I have a script (below): How do I get the elements for myItems, I want to drag an item over an identical item placed at the top of the stage so that I can kill it here is my custom function once there is an overlap touchItem1 : function(myitem, item){ console.log('MY ITEM ->' + this.myItems.key + ' - RANDOM ITEM KEY -> ' + this.getRandItem1); if (this.myItems == this.getRandItem1){ console.log('Touching the same id key and now i can kill the sprite'); } }, link : var FreestyleGame = FreestyleGame || {}; FreestyleGame.GameState = { //initiate game settings init: function(currentLevel) { //use all the area, don't distort scale this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //cursor keys this.cursors =; //initiate physics system; //game constants this.PLAYER_SPEED = 500; this.score = 0; }, create: function() { //moving stars background this.background = this.add.sprite(0, 0, 'background'); this.levelData = JSON.parse('level')); // create 3 top irems to choose from this.getRandItem1 = Math.floor((Math.random() * 15) + 1); this.getRandItem2 = Math.floor((Math.random() * 15) + 1); this.getRandItem3 = Math.floor((Math.random() * 15) + 1); // show 3 random items at top this.item1 = this.add.sprite( / 2 - 200 ,100,'item' + this.getRandItem1); this.item1.anchor.setTo(0.5); console.log(this.getRandItem1);; this.item2 = this.add.sprite( / 2 ,100,'item' + this.getRandItem2); this.item2.anchor.setTo(0.5);; this.item3 = this.add.sprite( / 2 + 200,100,'item' + this.getRandItem3); this.item3.anchor.setTo(0.5);; //my items this.myItems =; this.myItems.enableBody = true; var item; this.levelData.itemData.forEach(function(element){ //create rendom x and y this.getRandX = Math.floor((Math.random() * 711) + 1); this.getRandY = Math.floor((Math.random() * 1111) + 200); //get info from the json file item = this.myItems.create(this.getRandX,this.getRandY, element.key); // get key //touch and drag item.inputEnabled = true; item.input.enableDrag(); }, this); this.myItems.add(item); //player this.player = this.add.sprite(500, - 200, 'player'); this.player.anchor.setTo(0.5);; this.player.body.collideWorldBounds = true; this.player.customParams = {}; this.createOnscreenControls(); //load level this.loadLevel(); this.addScore = * 4, function(){ this.score ++; this.distance --; this.refreshStats(); }, this); }, update: function() { this.myItems.forEach(function(element){ //console.log(element.key); }, this);, this.item1, this.touchItem1, null, this);, this.item2, this.touchItem2, null, this);, this.item3, this.touchItem3, null, this); //listen to user input if( { //get the location of the touch var targetX =; //define the direction of the speed var direction = targetX >= ? 1 : -1; //move the player this.player.body.velocity.x = direction * this.PLAYER_SPEED; } // keyboard and touch control if (this.cursors.left.isDown || this.player.customParams.isMovingLeft){ this.player.body.velocity.x = - this.PLAYER_SPEED; } else if (this.cursors.right.isDown || this.player.customParams.isMovingRight){ this.player.body.velocity.x = + this.PLAYER_SPEED; } }, createOnscreenControls : function(){ this.leftArrow = this.add.button( * 0.05, /2, 'arrowButton'); this.rightArrow = this.add.button( * 0.95, /2, 'arrowButton'); this.leftArrow.alpha = 1; this.leftArrow.scale.setTo(2); this.rightArrow.alpha = 1; this.rightArrow.scale.setTo(2); this.rightArrow.scale.x = -2; //left{ this.player.customParams.isMovingLeft = true; }, this);{ this.player.customParams.isMovingLeft = false; }, this);{ this.player.customParams.isMovingLeft = true; }, this);{ this.player.customParams.isMovingLeft = false; }, this); //right{ this.player.customParams.isMovingRight = true; }, this);{ this.player.customParams.isMovingRight = false; }, this);{ this.player.customParams.isMovingRight = true; }, this);{ this.player.customParams.isMovingRight = false; }, this); }, touchItem1 : function(myitem, item){ console.log('MINE ->' + this.myItems.key + ' - RAND -> ' + this.getRandItem1); if (this.myItems == this.getRandItem1){} console.log('Touch'); }, touchItem2 : function(myitem, item){ console.log('MINE ->' + this.myItems.key + ' - RAND -> ' + this.getRandItem2); if (this.myItems == this.getRandItem1){} console.log('Touch'); }, touchItem3 : function(myitem, item){ console.log('MINE ->' + this.myItems.key + ' - RAND -> ' + this.getRandItem3); if (this.myItems == this.getRandItem1){} console.log('Touch'); }, }; thanks in advance Eric
  19. I'm making an endless runner as my first dive into phaser and I've working on getting the 'obstacles' for my player to jump over. I have 3 obstacles for the player to jump over, 2 on the 'ground' and 1 hanging from the top of the game. My plan is to have one obstacles randomly generated every 2-6 seconds and for them to move towards the player (the player is static except for being able to jump). But I'm not sure how to go about this. Can anyone point me in the right direction? just some sudo code or ideas how you would approach the problem? My repo is if anyone would like to take a look.
  20. Hello all, I have a problem with Phaser P2 physics in short i have 2 groups with objects. One is for my projectiles and the other is for enemies. The problem is that i want when projectile hits an enemy, the enemy should not move (it bounce back a little...). This is the code for my enemies i set the body.kinematic = true but it doesn't work. Thanks. this.enemiesGroup =; this.enemiesGroup.enableBody = true; for(var i = 0; i < 3; i++){ for(var j = 0; j < 9; j++){ var tmp = this.enemiesGroup.create( 80 +(j*66), y , 'enemies_1'); this.physics.p2.enable(tmp, this.Debug); tmp.enableBody = true; tmp.physicsBodyType = Phaser.Physics.P2JS; = 'enemy' + buff; this.enemiesHP[] = 100; tmp.anchor.setTo(0.3); tmp.angle = 90; tmp.scale.setTo(0.6); tmp.body.setCircle(18); tmp.body.kinematic = true; tmp.checkWorldBounds = true; var exp = this.enemyExplosion.create(0, 0, 'explosion'); exp.visible = false; exp.exists = false; exp.anchor.setTo(0.5); buff++; } y = y + 90; }
  21. Game = function(game) { this.timer = 0; this.cycle = 1000; this.cnt = 0; } Phaser.GameObjectFactory.prototype.enemy = function(x,y,xPix,yPix,enemyNum) { return Enemy(,x,y,xPix,yPix,enemyNum) ); } Game.prototype = { create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); enemies =; enemies.enableBody = true; // locations for the first group of enemies to fly in var group1PixelLocations = { 'x' : [game.width/2,game.width/2-30,game.width/2,game.width/2-30, game.width/2,game.width/2-30,game.width/2,game.width/2-30], 'y' : [(game.height/2)-30,(game.height/2)-30,(game.height/2)-60,(game.height/2)-60, (game.height/2)-90,(game.height/2)-90,(game.height/2)-120,(game.height/2)-120], }; //create enemies for (var i = 0; i < 8; i = i+2) { enemies.create(game.add.enemy(game.width/1.33,0,group1PixelLocations.x[i],group1PixelLocations.y[i],0)); //create another enemy object with opposite coordinates enemies.create(game.add.enemy(game.width/4,0,group1PixelLocations.x[i+1],group1PixelLocations.y[i+1],1)); } }, update: function() { if ( > this.timer) { this.timer = + this.cycle; var en = enemies.getAt(this.cnt); // this is the function I want each child to perform en.group1Path(); this.cnt = this.cnt + 1; } } }; I'm trying to call a function that I created in the Enemy class(below) with the children in my group. However, the error I get is 'Uncaught TypeError: en.group1Path is not a function' . Which is odd becuase the group consists of Enemy objects. Enemy class: var Enemy = function(game,x,y,xPix,yPix,enemyNum) {,game,x,y,''); this.xPix = xPix; this.yPix = yPix; this.enemyNum = enemyNum; this.create(); } Enemy.prototype = Object.create(Phaser.Sprite.prototype); Enemy.prototype.constructor = Enemy; var completed = false; Enemy.prototype.preload = function() { } Enemy.prototype.create = function() { //this.group1Path(); } Enemy.prototype.update = function() { if (!this.exists) return; if (completed) game.physics.arcade.moveToObject(this.enemy,this.pixel,100); } Enemy.prototype.isComplete = function() { completed = true; } //path of the first group Enemy.prototype.group1Path = function() { /*This is the function to be called*/ }
  22. Hello, I'm trying to apply a tint to the whole of a group, to designate a team. Instead of creating a spritesheet that includes every sprite corresponding to each team, I'm using a grayscale sprites, putting them in a group, and applying tint to that group. For some reason, this works perfectly with the "group.alpha" setting, but doesnt with the group.tint setting. The sprites just stay grayscale Here's my code: var game = new Phaser.Game(800, 600, Phaser.AUTO, 'row', { preload: preload, create: create, update: update }); // Spritemap Key, spritemap url and JSON file URL var spriteMap = "main" var textureURL = 'assets/main.png' var atlasURL = 'assets/main.json' var terrainLayer; var terrain; var biffinRed; var army; var corps; function preload() { //Preloading... game.load.atlasJSONHash(spriteMap, textureURL, atlasURL) // Loads Sprite atlas and corresponding file} } ; function create() { // Start of create // creates Red Army supergroup biffinRed =; = "Red SuperGroup"; biffinRed.inputEnableChildren = true, biffinRed.tint = 0xff0000; //inside biffinRed, creates "army group", and assigns properties: army =; army.spriteMap = 'main'; army.textureURL= 'assets/main.png'; = "Red army"; //inside army, create corps, that houses units array corps =; = 'Army corps' corps = {units: [ {assetName: 'artillery0.png', pos_x: 3, pos_y: 3}, {assetName: 'artillery0.png', pos_x: 4, pos_y: 4}, {assetName: 'antiair0.png', pos_x: 2, pos_y: 4} ]}; //create sprite inside army group using corps properties. army.create(corps.units[0].pos_x*32,corps.units[0].pos_y*32, spriteMap, corps.units[0].assetName); Sorry for the noobie question, still new to phaser. Any help greatly appreciated, Bab
  23. hi guys, I wonder is there any way to check whether 2 sprite in different groups are overlap, in the p2 system, currently I am using game.physics.p2.setPostBroadphaseCallback(this.checkOverlap, this); to do it, however I think it maybe expensive because I need to check whether the 2 sprites are from same group (the same group should not do anything). and I do not need collide when 2 sprite impact, I just need them to trigger my function. so I wonder is there any way to do thing like body.collide in arcade system, thanks.
  24. I'm using Phaser and TypeScript to create a Snake game with multiple snakes and my question is about the general structure of the program. My question is: What is the best way to structure the data for such a game using Phaser.js? So I mean which variable types to use for the snakes, walls, apples etc. when the key features of the game would be: Everything is placed on a grid There are multiple snakes that can grow and shrink during a game Snakes move on a timer from tile to tile (so no smooth animation in-between tiles) There are walls, the layout differs per level but doesn't change during a game Food item appear randomly and can be eaten by the snakes The snakes are build up out of several sprites, and they will display the shape of the snake including the bends and turns with shadow effect etc. These snake-parts need to be updated as the snake moves/shrinks/grows. For each move the game will need to check if the snakeheads bumps into something, either a wall or a food item or another snake (or its own tail). I was first thinking of using just one big two-dimensional array, fill it with integers to represent all in-game items. And then another two-dimensional arry filled with sprites, make all those sprites invisible, and then for each move set the sprites (frame number/visibility) in the corresponding array positions. Array[x][y] (entire play area) with integers representing all items, 1=snakehead 2=snake-part-up .. 8=apple, 9=wall etc. Array[x][y] (entire play area) | +- Phaser.Sprite But a better approach would be to use Phaser.Group to group each snake, and then a separate Phaser.Group to hold all the food items and maybe also the walls. And for the hit detection/eat food etc. there need to iterate all groups children against all other groups children. Another thing is that each snake also needs to hold some extra information (head position, direction) and I can't easily extend default classes (using Type Script) array[snakes] | +- Phaser.Groups (a group for each snake) | +- Phaser.Sprites (snake parts) Phaser.Group (FOOD + WALLS) | +- Phaser.Sprite (sprite for each apple or mushroom) For the hit detection/eat food etc. it makes more sense to just put it in a two-dimensional array because everything is on a grid, and then you can simply lookup the grid positions to see if something is in it. So, I'll be glad to hear any ideas on this.. Btw I've already seen this Phaser Snake tutorial but that example does not address the issues with multiple snakes and the snake parts sprites.
  25. hello, I have an error when using destroy() on group.children[0] function create() { boomerangBullets =; boomerangBullets.enableBody = true; boomerangBullets.physicsBodyType = Phaser.Physics.ARCADE; boomerangBullets.setAll('checkWorldBounds', false); boomerangBullets.setAll('outOfBoundsKill', true); } function update() { if(game.physics.arcade.distanceBetween(player, boomerangBullets.children[0]) < 30) { boomerangBullets.children[0].destroy(); } } here is an error screenshot --> Please help me, the kill() method is working fine but I need to completely destroy the group children element.