Search the Community

Hola hola, So I am working on a 2D basketball game. I am using 2 small sprites (with circular physics bodies) on each side of the basket rim for collision detection with the ball. I parented the 2 sprites to the backboard so I could move them all together (as shown in the child sprite example). I turned on the debug draw for the physics bodies and found the 2 bodies were not in the same position as the sprites. //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, 200, 'net'); this.net.anchor.setTo(0.5); //Add hoop children markers this.leftMarker = this.net.addChild(this.game.make.sprite(-66, 60, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker = this.net.addChild(this.game.make.sprite(66, 60, 'marker')); this.rightMarker.anchor.setTo(0.5); I parent them like so.. but my physics bodies don't act as if they are parented. They should be at the same position as the sprite, but instead they are (-66, 60) and (66, 60) from the top left corner (0, 0) instead of (-66, 60) and (66, 60) from the parents position (world center x, 200). You can see the attached image as an example. Is there something I am missing? Is this the way it's supposed to be? Can I somehow update the physics bodies to line up with the sprites easily?

How can I remove child from a group but I don't want it deleted or killed from stage? I keep all my screen objects in a group called screenObject for fading in. Then I have another group called cardGroup which keeps only the card sprites. I want to remove just two specific card sprites from cardGroup. I do this cardGroup.remove(card1, false); cardGroup.remove(card2, false); But it removes the object from stage as well. What do I do wrong? Or what to do?

Hi, trying to achieve mesh scaling from parent but with maintained aspect ratio, so if parent is scaled, child mesh will scale together but will maintain aspect ratio. would it be possible to do that by overriding `computeWorldMatrix` or there is better way to override default scaling behaviour ? I tried to override `_afterComputeWorldMatrix` to update world and local matrix, but no luck , probably doing something totally wrong protected _afterComputeWorldMatrix() { super._afterComputeWorldMatrix(); const min = Math.min(this._worldMatrix.m[0], this._worldMatrix.m[10]); this._worldMatrix.m[0] = min; this._worldMatrix.m[10] = min; this._localWorld.m[0] = min; this._localWorld.m[10] = min; } thanks for any hint

I have a sprite using (arcade) physics and I'm setting velocity to move around. When the player overlaps with a weapon, you can press a key to pick it up. I want the gun to be at an offset-ed position to the player and follow it around.. I thought parenting it was the easiest, but I can't figure out how to do it. Can anyone help me with this? ?

Hello everyone! Ive been tinkering around happily with phaser CE now for my latest browser app. I'm feature complete since yesterday and stumbled upon one last problem i cannot figure out how to address... i tried a couple of things but do not understand why things behave like they do. Basically i have a group of sprites, which i add as a child to another sprite. Now the problem i have is, i calculate a scalefactor for my app to scale it accordingly to the browser/device size and the group seems to scale in a very weird way (the scaling is very inconsistent, on a super small window it gets scaled down super much, on scalefactors close to 1 it is ok...) so what i do (i reduced the code to the affected lines): class MapScreen extends Phaser.Sprite this.anchor.setTo(0.5, 0.5); this.mapSize = 0.52; //0.52 this.scale.setTo(App.scaleFactor * this.mapSize); this.mapGroup = this.game.add.group(); this.stationButtons = []; this.stationButtons.push(this.game.add.sprite(App.gameWidth/2 + (480 * App.scaleFactor), App.gameHeight/2 + (370 * App.scaleFactor), 'point1')); // Anfang 0 // enable animations for buttons and add function for (let i = 0; i < this.stationButtons.length; i++) { this.stationButtons[i].anchor.setTo(0.5, 0.5); this.stationButtons[i].scale.setTo(App.scaleFactor * (this.mapSize + 1.8)); this.stationButtons[i].animations.add("pulse", [0, 1, 2, 3, 4, 5, 6]); this.stationButtons[i].animations.play("pulse", 8, true); this.stationButtons[i].inputEnabled = true; this.stationButtons[i].input.useHandCursor = true; this.stationButtons[i].events.onInputDown.add(function(){this.stationClicked(i)}, this); this.mapGroup.add(this.stationButtons[i]); } this.addChild(this.mapGroup); so, when i leave the last line and do not add the group to the MapScreen, its fine, but as soon as i do it it starts to scale weirdly...?! And i cant figure out how to keep the scale the same when the scaleFactor changes... Thanks in advance

I've played around with P2 physics and created a sprite that has a child attached that can (is supposed to) move freely around the parent. The child should still contribute to collisions with other objects so I gave it a P2 body as well, but it was behaving very odd. A closer look at the debug data revealed that the collision shape and the sprite image are not at the same position o_O in fact the collision shape is located at an absolute position in the world that relates to the relative coordinates between parent and child and does not move at all. Here is an example that you can try with the sandbox editor: game.physics.startSystem(Phaser.Physics.P2JS); var parent = game.add.sprite(200, 200, 'phaser'); game.physics.p2.enable(parent, true); parent.anchor.set(0.5); var child = game.make.sprite(100, 100, 'phaser'); game.physics.p2.enable(child, true); child.body.static = true; child.anchor.set(0.5); child.angle = 0; parent.addChild(child); If you look at the attached image you can see the offset. When dragging the parent around with the mouse the collision shape will stay at a fixed position, but it CAN collide with the parent. This issue might be related to an older discussion: Any ideas how we can fix this (that don't involve creating the child as a "free" sprite and let it follow the parent via the update() function)?

Hello, please help. Can I put sprites with children in the bitmapdata? I'll attach the picture, is this possible and how? Thank you.

Hi I'm trying to create a scene where randomly generated balloons move across the screen with toys hanging from them. When the user clicks the balloon the toy will drop and either hit or miss a basket. I would like to use a tween on the y position of each balloon so that they move up and down as well. I would like to use a tween on the toy so that it swings a bit (less important). I am thinking of setting up an array to push the balloon objects into so that I can push and pop as they are generated and destroyed. What is the best way to set up the parent > child relationship for the balloon and toys though please? Should I create a Phaser.GameObjects.Group() and create() the balloon and toy within that group and then push that group into my array? Or should I create each balloon and toy as a Phaser.GameObjects.Sprite and set a parent > child relationship somehow (I think you could use addChild() in Phaser 2?)? Or should I be using physics bodies and linking the toy to the balloon somehow, and then releasing that link to drop the toy when the balloon is clicked? Thanks! By the way, I don't know if it's helpful, but there is an error in http://labs.phaser.io/view.html?src=src\physics\arcade\circular body.js - "Uncaught ReferenceError: GetOverlapX is not defined".

Is it possible to get the absolute rotation of a child mesh, in the same way it is possible to get the absolute position of a child mesh via mesh.getAbsolutePosition?

I am using the last official release 2.6.2. Given the following code, which can be found on the following jsbin: http://jsbin.com/lazefep/1/edit?js,output var MainState={ create: function(){ var circleGraphic = new Phaser.Graphics(); circleGraphic.beginFill(0xFFBBBB); circleGraphic.drawCircle(0, 0, 100); circleGraphic.endFill(); circleSprite = this.game.add.sprite(0, 0, circleGraphic.generateTexture()); //circleSprite.anchor.setTo(0.5); // (Try barSprite anchor below first.) Ugh, this doesn't fix it... var barGraphic = new Phaser.Graphics(); barGraphic.beginFill(0x88FF88); barGraphic.lineTo(250, 0); barGraphic.lineTo(250, 10); barGraphic.lineTo(0, 10); barGraphic.lineTo(0, 0); barGraphic.endFill(); var barSprite = this.game.add.sprite(this.game.world.width/2, this.game.world.height/2, barGraphic.generateTexture()); barSprite.addChild(circleSprite); //barSprite.anchor.setTo(0.5); // Why doesn't the child adjust to the anchor with the parent? } }; var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'phaser-example', MainState); As long as the two lines remain commented out, what is rendered makes perfect sense: 1. A circleSprite is created and registered to position 0,0 of the parent sprite that it is later attached to. 2. A barSprite is created and its top left is added to the center of the world. 3. The circleSprite is added as a child to barSprite, and consequently, the top left of that child sprite is found at 0,0 of the parent sprite. As a result, you can see a sort of sideways "b" graphically depicted. Now, my (reasonable?) assumption is that the parent barSprite can be treated like any ordinary sprite as a composite whole. Anything I do to the parent sprite should automatically cause cascaded adjustments to the children so that the parent sprite would behave as it would if it were just an individual sprite on its own without any children behavior artifacts. However, if you notice, uncomment the line that sets the barSprite anchor, and the child does not follow. The child remains in place as if the anchor to the parent is not applied. To make matters worse, I have no easy recourse. I cannot recover the intended sideways "b" by uncommenting the circleSprite anchor. Is this a bug with anchor? Or is this intended behavior for some reason? What are my best options? (I am also curious if this behavior will exist in v3.) Also, please make me aware if you happen to see a violation of good/best practices!

Hi, I have a button in my game which has two child elements(a text aligned top center in and another text aligned bottom center). The issue is the child texts are also taking click of the button which should not happen. Here is the code for this: Fiddle : https://jsfiddle.net/3sf1b2zL/18/ var game = new Phaser.Game(480,320,Phaser.AUTO,''); var gameStates = {}; gameStates.Main = function(game){}; gameStates.Main.prototype = { preload: function() { this.load.crossOrigin = "Anonymous"; this.load.image('shop','https://s1.postimg.org/6fz3duzc0r/user_input_box.png'); }, create:function(){ var btnText = this.add.text(0,0,"Game Loaded",{fill:"#ffffff"}); var infoText = this.add.text(0,0,"This is a description of the game. It is only an informative text and it should not take click of its parent button. Try clicking this text",{fill:"#ffffff", wordWrap:true,wordWrapWidth:450}); var shopBtn = this.add.button(0,0,'shop', function(){ btnText.text = "Shop Clicked";}, this); shopBtn.anchor.setTo(0.5, 0); shopBtn.addChild(infoText); shopBtn.addChild(btnText); btnText.alignTo(shopBtn, Phaser.TOP_CENTER); infoText.alignTo(shopBtn, Phaser.BOTTOM_CENTER,0,20); shopBtn.x = this.game.width/2; shopBtn.y = this.game.height*0.2; } } game.state.add('main',gameStates.Main); game.state.start('main'); Please help me so that only the button takes click and text should not take the click Thanks

So.... to my great disappointment - yes, another one of those - it looks like parented meshes don't work with physics engine. Is there any workaround? I think it's impossible for me to unroll all parenting in the project, it would break animations and god knows what else... BTW it looks like @Wingnut is currently working on similar issues (poor physics support). thumbs up to you for all the great work

Hi guys, I'm trying to rotate a player's arm (anchored at the shoulder) to the mouse pointer using angleToPointer() method for aiming. I have a player sprite and a frontArm sprite. angleToPointer works as expected until I make the frontArm sprite a child of the player sprite. When I do this, the frontArm sprite will get stuck at certain points and won't rotate any further. I'm a complete newbie to Phaser and game dev so any help would be appreciated. I'll put my code below: create: function() { this.background = this.game.add.sprite(0, 0, 'background'); this.game.physics.startSystem(Phaser.Physics.ARCADE); this.player = this.game.add.sprite(200, 500, 'player', 'Fire Marshall Main_00025'); this.game.physics.arcade.enable(this.player); this.player.anchor.setTo(0.5); this.frontArm = this.player.addChild(this.game.make.sprite(-10, -240, 'frontArm')); this.frontArm.anchor.setTo(0.48, 0.30); this.game.physics.arcade.enable(this.frontArm); //walk animation this.player.animations.add('walkright', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 0, 24,'', 5), 24, true, false); this.player.animations.add('walkleft', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 24, 0,'', 5), 24, true, false); cursors = this.game.input.keyboard.createCursorKeys(); }, update: function() { //player walk movement this.player.body.velocity.x = 0; if (cursors.right.isDown) { this.player.body.velocity.x = 150; this.player.animations.play('walkright'); }else if (cursors.left.isDown){ this.player.body.velocity.x = -150; this. player.animations.play('walkleft'); }else { this.player.animations.stop(); this.player.frame = 25; } this.frontArm.rotation = this.game.physics.arcade.angleToPointer(this.frontArm); }

Hey Guys, I have an object parented to a modified ArcRotateCamera. The Camera can pan left and right. I want my object to move left and right with the camera but not rotate when the camera rotates around its target. Is there any way to freeze the rotations of a mesh so that it does not rotate with its parent?

Hello guys, I have a little problem in my scenario. I am able to set the parent child relation among two meshes and i am able to move them along only if the parent mesh is dragged but not counter-wise. Both objects need to be able to be dragged and moved along together no matter which object is dragged. So i will be very thankful if anybody could help me. Thanks!

Hello! I am working on a voxel project and creating a very basic voxel player. It has a box as head, a bigger box for body, etc. I created the whole thing like this: this.player_head = BABYLON.MeshBuilder.CreateBox(PLAYER_HEAD, {size: 1, updatable: true}, scene); this.player_body = BABYLON.MeshBuilder.CreateBox(PLAYER_BODY, {width: 1, depth: 0.5, height: 1.5, updatable: true}, scene); this.player_right_arm = BABYLON.MeshBuilder.CreateBox(PLAYER_RIGHT_ARM, {width: 0.5, depth: 0.5, height: 1.5, updatable: true}, scene); this.player_left_arm = BABYLON.MeshBuilder.CreateBox(PLAYER_LEFT_ARM, {width: 0.5, depth: 0.5, height: 1.5, updatable: true}, scene); this.player_right_leg = BABYLON.MeshBuilder.CreateBox(PLAYER_RIGHT_LEG, {width: 0.5, depth: 0.5, height: 1.5, updatable: true}, scene); this.player_left_leg = BABYLON.MeshBuilder.CreateBox(PLAYER_LEFT_LEG, {width: 0.5, depth: 0.5, height: 1.5, updatable: true}, scene); // Head this.player_head.parent = this.player_body; this.player_head.position.y += 1.25; // Right arm this.player_right_arm.parent = this.player_body; this.player_right_arm.position.x += 0.75; // Left arm this.player_left_arm.parent = this.player_body; this.player_left_arm.position.x -= 0.75; // Right leg this.player_right_leg.parent = this.player_body; this.player_right_leg.position.x -= 0.25; this.player_right_leg.position.y -= 1.5; // Left leg this.player_left_leg.parent = this.player_body; this.player_left_leg.position.x += 0.25; this.player_left_leg.position.y -= 1.5; Since I need all the meshes to be treated as a single mesh, I merged them with: BABYLON.Mesh.MergeMeshes([this.player_head, this.player_body, this.player_right_arm, this.player_left_arm, this.player_left_leg, this.player_right_leg]); Until here, all beautiful and nice. But a problem arises: I want to be able to move the arms, legs and head to make some sort of animation for walking but it doesn't seem to work. My player object has the references to all the meshes before the merging, so I thought I would still be able to transform them even after the merging. What's wrong then? Also, is there perchance a better way to create a bunch of simple meshes, apply a specific material to each of them and then 'merging' them into 1 bigger BABYLON.Mesh without losing their individual texture/material? MergeMeshes destroys the materials of the children objects, which is quite bad :/.

Hi there, I'm working on a little project where I do a lot of parenting and swapping parents/children around, etc.. Is there an easy way to preserve a child's world position when changing its parent? I'm really new to Babylon so I don't always know what's available to me. If this doesn't exist how would I go about it? Inverse the parent's world matrix and apply to it its child? If someone has an example handy I'd appreciate Thanks!

Hi there! So here's my issue. I have a player sprite which has an orb sprite attached to it as a child. Player = function (game, x, y, image) { Phaser.Sprite.call(this, game, x, y, image); //calls constructor this.orb = this.addChild(game.make.sprite(0, 0, 'orb')); game.add.existing(this); }; /*--------------------------------------------------------*/ Player.prototype = Object.create(Phaser.Sprite.prototype); Player.prototype.constructor = Player; /*--------------------------------------------------------*/ I want to reference the x and y positions of the orb so that I can shoot bullets out of it. BUT, if I console.log(this.orb.x) or the y position, the value that is returned is 0. What do I do so that I can get the x and y positions of the orb, relative to the game world and not the parent sprite??

Might be a bug or it could my expectations (again). However the problem could be at the root of people having difficulties placing pivots. If you rotate a parent them translate its child using LOCAL axes the child moves and positions as you would expect. However if you rotate a parent then translate its child using WORLD or use position the child moves again in the direction of LOCAL axes but distances depend on the rotation of the parent. The PG http://www.babylonjs-playground.com/#1J7LGZ shows the effect. The cylinders mark the positions of the child mesh (the pilot) as it and the parent (sphere) move. The red cylinder marks the expected final position following the final move of -2 in the direction of the world x axis. The pilot meshes show the actual positions. Commenting out the pilot and sphere moves and uncommenting them in turn will show the sequence.

In the app I am building, the user can drag in different components that snap together (think lego). As part of that I am introducing grouping (think Microsoft Powerpoint where you can add individual shapes but then group them and any transformations are then applied as a group). The approach I have used so far is that when individual components (meshes) are added they have no parent. When component A is snapped to component B it checks whether either has a parent. If neither has a parent (ie neither is yet part of a group) then it creates an invisible mesh and makes that the parent of both. If one or more has a parent (ie they are already part of a group) then it combines them under one parent (if both have parents, some logic will be introduced to determine which would be the best parent). This works to an extent. The problem I am seeing is that the meshes may have been moved around prior to being grouped. So their position will have a value. What seems to be happening when the parent is set is that the component's position is being re-evaluated relative to the parent and so the component jumps to a new position in space. I just wanted to first validate that this is how parenting should work and also get some advice on how to counter it's behaviour. I don't want the child meshes to move when I set the parent. However from that point on I do want any further movement or rotation to be done as a group. I have already amended my onMouseMove function so that if a mesh has a parent, the movement is applied to the parent (and therefore ALL children) rather than just the mesh being moved. This works a treat. This little playground illustrates the behaviour I am seeing. It creates 3 meshes ... m1, m2 and parent and gives them each a new position away from the world origin. It writes their position and getAbsolutePosition to the console. It then sets m2.parent=parent and again writes their position to the log. You can see that m2 is initially positioned at (10,0,0) and parent is at (20,0,0). However when m2.parent is set to parent, m2 moves to (30,0,0). So its position is now being evaluated relative to its parent (ie 20+10 along the x axis). This is contrary to how I have seen the behaviour described elsewhere in which it seemed to suggest that position was nullified upon setting a parent. Thoughts? Thanks Rich

I cant figure out how i would be able to add a function as a child, the function spawns items at the top of the screen and then they fall to the bottom where they will be killed. But if i add a background the items spawn behind that background. i cant figure out how they will be able to spawn infront of the background any help would be greate! Here im trying to add the items as a child Potato.SpawnPotato = this.mainBackground.addChild(game.potato); And this is the code which holds game.potato Potato.item = { spawnPotato: function(game){ game.world.enableBody = false; game.physics.startSystem(Phaser.Physics.ARCADE) game.physics.arcade.gravity.y = 200; var dropPos = Math.floor(Math.random()*650); var dropOffSet = [-27, -36, -36, -38, -48]; var potatoType = Math.floor(Math.random()*5); var potato = game.add.sprite(dropPos, dropOffSet[potatoType], 'FallingPotato'); potato.animations.add('anim', [potatoType], 10, true); potato.animations.play('amim'); game.physics.enable(potato, Phaser.Physics.ARCADE); potato.inputEnabled = false; potato.anchor.setTo(0.5, 0.5); potato.rotateMe = (Math.random()*4)-2; game._potatoGroup.add(potato); potato.checkWorldBounds = true; potato.events.onOutOfBounds.add(this.removePotato, this) }, removePotato: function(potato){ potato.kill(); } }

Hi I'm trying to make my enemies turn in the opposite direction when they get close to the edge of a platform. I've attached two 16 x 16 child sprites to enemies, one to the bottom left, the other to the bottom right. However, I can't get them to detect my map's collision layer (playState.collisionLayer - I'm using Tiled for maps and exporting to JSON). Ideally what would happen is if the enemy is moving left and the left child sprite stops colliding with the collision layer, the enemy would start moving right Any tips?

http://www.babylonjs-playground.com/#3HNIJ#1 I am trying to create a Fischer Price type toy with three meshes. I was thinking I could combine the three meshes and have one solid mesh and just move one mesh. Originally I tried connecting them with joints to give the character parts a little movement but the joints were way too loose. After creating and positioning my three meshes, whenever I try to make one mesh a parent it changes the location of the children. That seems very weird. Any ideas on how to combine these meshes? I tried another method (forget what it was called) and it said it was deprecated and to use child/parent. I want the option of making the meshes different colors too. Thanks for any tips.

Hi 2 all Is there a way in phaser to retrieve chlid information from its parent? Which method should i use to get information about the childs?

I am having the hardest time adding a list of objects to my container! For whatever reason, only the last container object appears on the left side of the screen. Any clue as to why only one container is being drawn? If anyone is interested in testing the program, here is a link to the related commit. Parent Container: (function (window) { function ChestManager() { container.Container_constructor(); container.addChest(640,100,1,1,"topClosed"); container.addChest(1100,360,1,1,"sideClosed"); container.addChest(640,620,1,1,"bottomClosed"); container.addChest(180,360,-1,1,"sideClosed"); } //instance of class var container = new createjs.extend(ChestManager, createjs.Container); //shared spritesheet properties var manifest = [{src: "chests.png", id: "chests"}]; container.loader = new createjs.LoadQueue(false); container.loader.addEventListener("complete", handleComplete); container.loader.loadManifest(manifest, true, "img/"); //configure after loaded function handleComplete() { container.spriteSheet = new createjs.SpriteSheet({ framerate: 4, images: [container.loader.getResult("chests")], frames: [[0,0,159,132,0,79.25,65.65],[159,0,193,107,0,98.25,40.650000000000006],[352,0,193,107,0,98.25,40.650000000000006], [545,0,113,147,0,56.5,73.4],[658,0,180,149,0,56.5,75.4],[838,0,180,149,0,56.5,75.4], //center bounds [0,149,116,97,0,57.25,47.75],[116,149,111,94,0,55.25,44.75],[227,149,111,94,0,55.25,44.75]], animations: { //"run": [0, 1, "run"], topClosed: [6], topOpenReward: [7], topOpenNothing: [8], sideClosed: [3], sideOpenReward: [4], sideOpenNothing: [5], bottomClosed: [0], bottomOpenReward: [1], bottomOpenNothing: [2] } }); } //update container.tick = function (event) { for (i=0; i<container.children.length; i++){ if (container.getChildAt(i).isClicked()){ container.removeChest(i); } } } container.addChest = function (x,y,scaleX,scaleY,frame){ container.addChild(new Chest(x,y,scaleX,scaleY,container.spriteSheet,frame)); //add to stage container.getChildAt(container.children.length-1).sprite.on("click", function(evt){ container.getChildAt(container.children.length-1).click(); }); } container.removeChest = function(i){ container.getChildAt(i).sprite.removeEventListener("click"); container.removeChildAt(i); } window.ChestManager = createjs.promote(ChestManager, "Container"); }(window)); Child Container: (function (window) { //constructors function Chest(){ container.Container_constructor(); } function Chest(x,y,scaleX,scaleY,spriteSheet,frame){ container.Container_constructor(); container.initChest(x,y,scaleX,scaleY,spriteSheet,frame); } //instance of class var container = new createjs.extend(Chest, createjs.Container); //initialize Chest container.initChest = function (x,y,scaleX,scaleY,spriteSheet,frame) { container.x = x; container.y = y; container.sprite = new createjs.Sprite(spriteSheet, frame); container.sprite.scaleX = scaleX; container.sprite.scaleY = scaleY; container.sprite.gotoAndStop(frame); container.customText = new CustomText(0,0,scaleX,scaleY,"car"); container.addChild(container.sprite); container.addChild(container.customText); } //public functions container.isClicked = function(){ return container.clicked; } container.click = function() { container.clicked=true; } window.Chest = createjs.promote(Chest, "Container"); }(window)); Result (ignore the backwards 'R' haha)