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

  1. 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);
  2. 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
  3. 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?
  4. 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.
  5. 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
  6. 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.
  7. 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; }
  8. 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*/ }
  9. 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
  10. 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.
  11. 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.
  12. 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.
  13. I simply want to know the best approach for destroying a group and everything within the group. According to the documentation: destroy(destroyChildren, soft) Destroys this group. Removes all children, then removes this group from its parent and nulls references. Unfortunately, I'm still finding that my references return an object - not null or undefined For reference, here is a simplified look at the object I'm trying to destroy: class MyObject extends Phaser.Group { constructor(game) { = game; // Creating Phaser sprites and adding them to group } destroyObject() { this.destroy(); } }
  14. I just found there is a function called sort(key, order) inside inherited from Phaser.Group. I have a list of objects of type Phaser.Graphics inside my parent also of type Phaser.Graphics. The parent object is a wall and the children are shelves. I need to fake a 3D effect that the shelves sit on top of each other as the "y" coordinate increases. I can do this by setting the child index to descending order i.e from larger to smaller, but I need first to sort my shelves by "y" coordinate in ascending order. (The shelves which have the smallest "y" coord. have the highest z-index i.e sit on top of the other). Could I use this Phaser.Group.sort(key order) function for children of Phaser.Graphics or not? Or maybe there is a another way to sort graphical objects?
  15. Hi, i'm trying to make my bomb collide with the sprite at border left and right, it's colliding but i wanna make them immovable and i'm getting stuck. this.backgroundImage =, 0, 440, 600, spriteAssets.backgroundName); this.backgroundGraphics =, 0); this.backgroundGraphics.lineStyle(2, 0xFFFFFF, 1); //this.barreiraGroup =; this.barreiraGroup =; for(var j = 0; qnt >= j; j++){ var p = j*22; //this.barreiraGroup.create(0, j+p, spriteAssets.backgroundBarreira); this.backgroundBarreira =, j+p, spriteAssets.backgroundBarreira); this.backgroundBarreira.tint = 0x677E52; this.backgroundBarreira.blendMode = PIXI.blendModes.MULTIPLY; this.barreiraGroup.add(this.backgroundBarreira); } for(var j = 0; qnt >= j; j++){ var p = j*22; //this.barreiraGroup.create(, j+p, spriteAssets.backgroundBarreira); this.backgroundBarreira =, j+p, spriteAssets.backgroundBarreira); this.backgroundBarreira.tint = 0x677E52; this.backgroundBarreira.blendMode = PIXI.blendModes.MULTIPLY; this.barreiraGroup.add(this.backgroundBarreira); } //this.barreiraGroup.setAll('body.immovable', true); //this.barreiraGroup.setAll('body.moves', false); With that code, my result: But without comment: this.barreiraGroup.setAll('body.immovable', true); this.barreiraGroup.setAll('body.moves', false); My result: NO COLLIDE
  16. Hi there. I'm an experienced JS dev looking to get into Game Development. I've started out with a fairly small top-down "rpg" style game. I'm used the program "Tiled" to create the world map. So far i've been following this tutorial to get started, learn the basics of Phaser, but now i'm unfortunately running into this problem. This tutorial is about 2 years old, and uses it's own "object" generator, however i'd really like to use Phaser's native `.createFromObjects` function. My code is as follows; ="world");"sheet", "spritesheet"); let map =; let objects =; objects.enableBody = true; { map.createFromObjects(, element.gid,, 0, true, false, objects); }); The error I receive in the console; Tilemap.createFromObjects: Invalid objectgroup name given: goldCoins Tilemap.createFromObjects: Invalid objectgroup name given: playerSpawn Tilemap.createFromObjects: Invalid objectgroup name given: goldCoins Tilemap.createFromObjects: Invalid objectgroup name given: campFire Tilemap.createFromObjects: Invalid objectgroup name given: stool Tilemap.createFromObjects: Invalid objectgroup name given: sign I've cut out the majority of the code for sake of saving space in this forum post, but the full code is available here. I've already looked up multiple forum posts, each with their own solutions to fix the bug i'm experiencing, however none have worked. I've tried replacing the "groups" param with the Tiled object's name, as per this post, but i'm unable to find a fix for this. I'd appreciate any help anyone may provide for me.
  17. this is my first post so i apologize if i'm posting incorrectly. i'm trying to have a button change its frame and some of the others in the group. the buttons display fine initially and i can successfully change the properties but i cannot visually get them to change frames when one is clicked. on the other hand, if i want to change only one button that works (you can see that i left the code commented out for that). i left the changing button frames line blank because i've tried so many things and nothing seems to work. var GameState = { preload: function(){'btnSht', "tFassets/btnSprtSht.png", 100, 100, 4); }, create: function(){ btnArray = [ {x: 50, y: 200, id: 1, frm: 0}, {x: 150, y: 200, id: 2, frm: 0}, {x: 250, y: 200, id: 3, frm: 0}, {x: 350, y: 200, id: 4, frm: 0}, {x: 450, y: 200, id: 5, frm: 0}, {x: 50, y: 300, id: 6, frm: 0}, {x: 150, y: 300, id: 7, frm: 0}, {x: 250, y: 300, id: 8, frm: 0}, {x: 350, y: 300, id: 9, frm: 0}, {x: 450, y: 300, id: 10, frm: 0}, ]; this.btns =; var self = this; count = 0; btnArray.forEach(function (element){ btn = self.btns.create(element.x, element.y,'btnSht'); btn.idNum =; btn.frame = element.frm; btn.inputEnabled = true;, this); }); }, btnFunc: function (sprite, event) { //console.log(sprite.idNum); /* this works to change the one clicked if (sprite.frame == 0) { sprite.frame = 1; count++; } else { sprite.frame = 0; count--; }; */ btnArray.forEach(function (element){ //resets all back to zero before element.frm = 0; //assigns new frame value to appropriate btns for (var i = 0; i < sprite.idNum; i++){ this.btnArray[i].frm = 1; }; //check to make sure values are changed and they are console.log(btnArray); //change btn frames visually }); }, update: function(){ }, }, game = new Phaser.Game(600, 400, Phaser.AUTO); game.state.add('GameState', GameState); game.state.start('GameState'); tF.js
  18. Hi i need some help with my school assignment so what i want to do is to kill the children at the same time if all the children's y position more than 820. or if i can check all the position of the children or the group ( i dont think that possible). animals.forEach(function(animal) { var z=0; if (animal.y > 820) { z++; console.log(z); } if (z>6) {animal.kill();} } ); the number of the children is 5 and the problem is the number of z is always 1 therefor the animal.kill() never been process. thought?? or do you have better way to check the position? really appreciate the help guys thanks
  19. Hi, I have next problem with collision.. I have a player: this.player =, parseInt(playery), 'player',5); ); this.player.anchor.set(.5); this.player.scale.x=70/100; this.player.scale.y=65/100; this.player.body.setSize(25, 60, 0, 5); I have a group of animals: this.animal =; this.animal.setAll('body.immovable', true); this.animal.setAll('body.bounce.x', 1); this.animal.setAll('body.bounce.y', 1); then i am creating animals: if (zwierzenazwa == "cow"){ this.cow =this.animal.create(zwierzex, zwierzey, 'cow'); this.cow.frame = zwierzefrlos; = iidzwierze; = zwierzenazwa; this.cow.datadodaniaanim = datadodaniaanim; this.cow.frameleft =5; this.cow.frameright = 13; this.cow.frameup =1; this.cow.framedown =9; this.cow.body.velocity.x = 0; this.cow.body.velocity.y = 0; //this.cow.body.immovable = true; //this.cow.anchor.set(0.45, 0.4); if(zwierzefrlos == 5 ){ this.cow.body.setSize(80, 38,20, 50); } else if(zwierzefrlos == 13) { this.cow.body.setSize(80, 38,30, 50); } else{ this.cow.body.setSize(38, 70,50, 40); } // this.cow.body.width = 48; //this.cow.body.height = 64; //; this.cow.animations.add('cowleft',[7,6,5,4]); this.cow.animations.add('cowright', [12, 13, 14, 15]); this.cow.animations.add('cowdown', [8, 9, 10, 11]); this.cow.animations.add('cowup', [0, 1, 2, 3]); this.cow.animations.add('coweatleft', [20,20,20,20,20,20,20,20,21,22,22,23,22,22,23,22,22,23,22,22,23,22,21]); this.cow.animations.add('coweatdown', [24,24,24,24,24,24,24,24, 25, 26,26, 27,26,26,27,26,26,27,26,26,27,26,25,24]); this.cow.animations.add('coweatright', [28,28,28,28,28,28,28, 29, 30, 31,30,30,31,30,30,31,30,30,31,30,30,31,30,30,31,30,30,29,28]); this.cow.animations.add('coweatup', [16,16,16,16,16,16,16, 17, 18, 19,18,18,19,18,18,19,18,18,19,18,18,19,18,18,19,18,17]); //this.cow.scale.x=32; //this.cow.scale.y=32; this.animal.add(this.cow); //console.log(; } Then collision:, this.animal, this.stopanimplayer, null, this);, this.animal, this.stopanimzwierz, null, this); And i have a problem because i must set immovable true to all animals to collide with player, but then there dont collide with each other in group.. Anyone can help to set it work?
  20. Hi guys, I would like to ask about group events and position that I assigned manually. If there a clean way to approach this? this.mouth1 = this.mouthGroup.create(150, 40, 'mouth1'); this.mouth1.inputEnabled = true; this.mouth1.input.enableDrag();, this);, this); this.mouth1.scale.setTo(0.5); this.mouth1.anchor.setTo(0.5); this.mouth2 = this.mouthGroup.create(150, 120, 'mouth2'); this.mouth2.inputEnabled = true; this.mouth2.input.enableDrag();, this);, this); this.mouth2.anchor.setTo(0.5); this.mouth2.scale.setTo(0.5); this.mouth3 = this.mouthGroup.create(150, 200, 'mouth3'); this.mouth3.inputEnabled = true; this.mouth3.input.enableDrag();, this);, this); this.mouth3.anchor.setTo(0.5); this.mouth3.scale.setTo(0.5); etc....
  21. I am currently adding a sprite to my game with no texture as I just need an invisible draggable area, resizing it to the dimensions I need, then adding a bunch of buttons to it with .addChild(button) so that the buttons follow the sprite when dragged, which works fine, but the buttons adopt the scale of the sprite, which is undesired in this case. How can I reset the scale of a child after it has been added to a group?
  22. So, when i tried to remove from my my group "groundobjects" works fine only the first time. I will use a database to conect and get coordinates, there's no problem in that. I add the object to the group and with a timer i remove and add other. The first time works fine, then, when i add other sprite in this case with random positions the other are not removed. What im doing wrong? Ah im using a zoom function that i find in this forum Let my code... <script type="text/javascript"> var x = "<?php echo $_SESSION['coord_x']; ?>"; sessionStorage.setItem("c_x", x); var y = "<?php echo $_SESSION['coord_y']; ?>"; sessionStorage.setItem("c_y", y); alert(" " + x + "," + y + " "); function getWidthAndHeight() { var w = (this.width) / 2; var h = (this.height) / 2; sessionStorage.setItem("Ancho", w); sessionStorage.setItem("Alto", h); return true; } function loadFailure() { alert("'" + + "' failed to load."); return true; } var myImage = new Image(); = "assets/gray.jpg"; myImage.onload = getWidthAndHeight; myImage.onerror = loadFailure; myImage.src = "assets/gray.jpg"; var oldcamera; var worldScale = 1; var currentBounds; var mapSizeMax; var worldwidth = 1024; var worldheight = 720; var mapSizeX = 8000; var mapSizeY = 4000; var prevScale = {}; var nextScale = {}; var zoompoint = {}; var mapSizeCurrent; var distance = 0; var olddistance = 0; var distancedelta = 0; var easing = 0.1; var game = new Phaser.Game(worldwidth, worldheight, Phaser.AUTO, '', {preload: preload, create: create, update: update}); function preload() { game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.setScreenSize(true); game.load.image('clouds', 'assets/gray.jpg'); game.load.image('dude', 'assets/body.png'); game.load.image('diamond', 'assets/diamond.png'); } function create() { timer = game.time.create(false); timer.loop(5000, updateStars, this); timer.start(); worldScale = 1; stageGroup =; // this group will contain everything except the UI for scaling backgroundobjects =; groundobjects =; mapSizeMax = mapSizeX; mapSizeCurrent = mapSizeMax; background1 = game.add.sprite(0, 0, 'clouds'); backgroundobjects.add(background1); stageGroup.add(backgroundobjects); sprite = game.add.sprite(sessionStorage.getItem("c_x"), sessionStorage.getItem("c_y"), 'dude'); groundobjects.add(sprite); stageGroup.add(groundobjects); currentBounds = new Phaser.Rectangle(-mapSizeX, -mapSizeY, mapSizeX * 2, mapSizeY * 2); = currentBounds;"Ancho"), sessionStorage.getItem("Alto")); game.input.mouse.mouseWheelCallback = function (event) { var wheelDelt = game.input.mouse.wheelDelta; if (wheelDelt < 0) { mapSizeCurrent -= 150; mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth, mapSizeMax); } else { mapSizeCurrent += 150; mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth, mapSizeMax); } worldScale = (mapSizeCurrent / mapSizeMax); }; } function update() { //touch zoom if (game.input.pointer1.isDown && game.input.pointer2.isDown) { olddistance = distance; distance = Phaser.Math.distance(game.input.pointer1.x, game.input.pointer1.y, game.input.pointer2.x, game.input.pointer2.y); distancedelta = Math.abs(olddistance - distance); if (olddistance > distance && distancedelta > 4) { mapSizeCurrent -= 150; } else if (olddistance < distance && distancedelta > 4) { mapSizeCurrent += 150; } mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth, mapSizeMax); //prevent odd scalefactors - set a minimum and maximum scale value worldScale = (mapSizeCurrent / mapSizeMax); //calculate point between fingers (zoompoint.x and zoompoint.y) if (game.input.pointer1.x < game.input.pointer2.x) { zoompoint.x = game.input.pointer1.worldX + (Math.abs(game.input.pointer1.worldX - game.input.pointer2.worldX) / 2); } else { zoompoint.x = game.input.pointer2.worldX + (Math.abs(game.input.pointer1.worldX - game.input.pointer2.worldX) / 2); } if (game.input.pointer1.y < game.input.pointer2.y) { zoompoint.y = game.input.pointer1.worldY + (Math.abs(game.input.pointer1.worldY - game.input.pointer2.worldY) / 2); } else { zoompoint.y = game.input.pointer2.worldY + (Math.abs(game.input.pointer1.worldY - game.input.pointer2.worldY) / 2); } } else { // wheelzoom zoompoint.x = game.input.mousePointer.worldX; zoompoint.y = game.input.mousePointer.worldY; } // move camera / pan if (game.input.activePointer.isDown && !game.input.pointer2.isDown) { if (oldcamera) { // if moving the world always continue from the last position += oldcamera.x - game.input.activePointer.position.x; += oldcamera.y - game.input.activePointer.position.y; } oldcamera = game.input.activePointer.position.clone(); } // adjust camera center and zoom here else { oldcamera = null; rescalefactorx = mapSizeX / (mapSizeX * stageGroup.scale.x); // multiply by rescalefactor to get original world value rescalefactory = mapSizeY / (mapSizeY * stageGroup.scale.y); prevScale.x = stageGroup.scale.x; prevScale.y = stageGroup.scale.y; nextScale.x = prevScale.x + (worldScale - stageGroup.scale.x) * easing; nextScale.y = prevScale.y + (worldScale - stageGroup.scale.y) * easing; var xAdjust = (zoompoint.x - * (nextScale.x - prevScale.x); var yAdjust = (zoompoint.y - * (nextScale.y - prevScale.y); //Only move screen if we're not the same scale if (prevScale.x != nextScale.x || prevScale.y != nextScale.y) { var scaleAdjustX = nextScale.x / prevScale.x; var scaleAdjustY = nextScale.y / prevScale.y; var focusX = ( * scaleAdjustX) + xAdjust * (rescalefactorx); var focusY = ( * scaleAdjustY) + yAdjust * (rescalefactory);, focusY); } //now actually scale the stage stageGroup.scale.x += (worldScale - stageGroup.scale.x) * easing; //easing stageGroup.scale.y += (worldScale - stageGroup.scale.y) * easing; } } function updateA() { groundobjects.destroy(); stageGroup.remove(groundobjects); } function updateStars() { updateA(); sprite = game.add.sprite(100+Math.random() * 900, 100+Math.random() * 900, 'dude'); groundobjects.add(sprite); stageGroup.add(groundobjects); } </script>
  23. Hello all, I'm trying to re-use sprites like so: squareTargets =; squareTargets.enableBody = true; squareTargets.physicsBodyType = Phaser.Physics.ARCADE; squareTargets.createMultiple(maxSquareTargets, 'square target sheet'); squareTargets.setAll('checkWorldBounds', true); squareTargets.setAll('outOfBoundsKill', true); squareTargets.setAll('hasOverlapped', false); //my own property I use in my logic squareTargets.setAll('frame', 1); // so it displays on the 1 index of my sprite sheet squareTargets.callAll('animations.add', 'animations', 'explode', [1, 2, 3, 0], 5, false); I also want the individual sprite to kill() when the explode animation is run, how do I set this at the group level? I see that I can individually set animations on a sprite and do this: var explode = singleTarget.animations.add('explode', [1, 2, 3, 0], 5,); explode.killOnComplete = true; But I'd rather find a way set the animation on the group and killOnComplete for the animation in one go, rather than loop through the group and define the animation and property (which I suspect is wasteful from a memory point of view).
  24. Hello, I'm now to Html5 game development (well game development in general not just html5) and phaser. I've decided on the phaser library because it gives me more control over the code and I find it more sustainable for me to know how things work. What I am looking for, is to make space games. Yes space game with player controlled ships, and for that I am experimenting with different types of controls. The easiest so far for me was to get a basic 8 direction movement(duh), which did not take long to make as everything was pretty straight forward. var game = new Phaser.Game(800, 600,, 'phaser-example', { preload: preload, create: create, update: update, render: render }); var result = 'Press a key'; function preload() { //load assets game.load.image("shipbox", "/img/box.png"); } function create() { //Add keybinds pauseKey = game.input.keyboard.addKey(Phaser.Keyboard.P); UP = game.input.keyboard.addKey(Phaser.Keyboard.W); DOWN = game.input.keyboard.addKey(Phaser.Keyboard.S); RIGHT = game.input.keyboard.addKey(Phaser.Keyboard.D); LEFT = game.input.keyboard.addKey(Phaser.Keyboard.A); TURN_LEFT = game.input.keyboard.addKey(Phaser.Keyboard.Q); TURN_RIGHT = game.input.keyboard.addKey(Phaser.Keyboard.E); ship =; ship.create(200,200, 'shipbox'); ship.create(190,195, 'shipbox'); ship.create(190,205, 'shipbox'); ship.x = 200; ship.y = 200; ship.pivot.x = ship.x+ship.width/2; ship.pivot.y = ship.y+ship.height/2; } function update() { if (pauseKey.isDown){ result = "Paused"; }else if(RIGHT.isDown && UP.isDown){ ship.x +=1; ship.y -=1; result = "RIGHT+UP"; }else if(RIGHT.isDown && DOWN.isDown){ ship.x +=1; ship.y +=1; result = "RIGHT+DOWN"; }else if(LEFT.isDown && UP.isDown){ ship.x -=1; ship.y -=1; result = "LEFT+UP"; }else if(LEFT.isDown && DOWN.isDown){ ship.x -=1; ship.y +=1; result = "LEFT+DOWN"; }else if (RIGHT.isDown){ result = "RIGHT"; ship.x +=1; }else if (LEFT.isDown){ result = "LEFT"; ship.x -=1; }else if (UP.isDown){ result = "UP"; ship.y -=1; }else if (DOWN.isDown){ result = "DOWN"; ship.y +=1; }else if (TURN_LEFT.isDown){ result = "TURN LEFT"; ship.angle -=0.2; game.debug.text(ship.angle, 32, 64); }else if (TURN_RIGHT.isDown){ result = "TURN RIGHT"; ship.angle +=0.2; game.debug.text(ship.angle, 32, 64); }else { result = 'Press a key'; }; } function render(){ game.debug.text(result, 32, 32); } So with that out of the way I proceeded on doing asteroids movement, of which I found the asteriods movement example at ,and this brings me to my problem. I do not know if it's a software limitation or just me being new but when I try to use the same code but for a group all I get in return is a black screen. What I basically did was instead of : // Our player ship sprite = game.add.sprite(300, 300, 'ship'); sprite.anchor.set(0.5); I changed to // Our player ship sprite =; sprite.create(300, 300, 'ship'); sprite.create(290, 295, 'ship'); sprite.create(310, 305, 'ship'); My logic says this should be working, so why isn't it? I am trying to avoid using complicated math to calculate heading based on orientation and that's the reason for using the arcade physics. I was basically hoping for something along the lines of pressing "W" and the "ship group" moves forward (the forward direction based on current orientation angle). Any thoughts on this?
  25. As shown in this topic: It seems, separate groups are interleaved. How do they function with the z-index between each other? If I create group1 first and group2, group1 is below group2 right? What if I add element1 first to group2 and then element2 to group1 will element1 be above element2 since group2 was created later or its vice versa? Can somebody explain me how Phaser groups work?