Search the Community

this is very hard to explain, but i essentially have a bunch of sprites holding spears, and seek to have their range beyond what the player can hit from the front. i want the hit box of the "spearman" to be smaller than its weapon (ie: sprite.scale.set(.5, 1)), and believe the best way to do this is to add a second child sprite which is smaller than the original sprite as the hittable body. trouble is, the children inherit the parent's properties, which is not wanted. another way is to make the ORIGINAL body smaller and add a larger child sprite as the spear, but this creates problems with horizontal flip alignment when the spearmen reach the edge of platforms and turn around. put another way, say you have ten sprites in a group all added via createFromObjects. then you want ANOTHER set of sprites to follow these sprites in tandem. this is perhaps usually done with some form of forEach and addChild implementation. the problem is that addChild always makes the child inherit the parent's properties, which is not desired. any way to have the child follow the parent while retaining a different scale/alpha/etc than the parent? any examples on how to do this would be appreciated.

Hi, recently i moved from Phaser 2 to Phaser 3 and i started some new project. Here is my problem: In Phaser 2 its easy to add text to sprite like this: var sprite = game.add.sprite(...); var button_style = { font: "27px Verdana", fontWeight: "bold", align: "center", fill: "#000000", stroke: '#ffffff', strokeThickness: 2 }; button_text = game.add.text(0, 0, 'blabla', button_style); sprite.addChild(button_text); After few days i am very tired of searching to get solution on Phaser 3 to add text on sprite. Can anybody help me please ? Thanks in advance.

Hi Guys, I'm having some issues with an emitter that I am trying to attach to a sprite using the addChild method. The emitter should be a child of the player's arm so that it moves and rotates correctly. When I add the emitter to the game without being added as a child it works fine. As soon as I add it as a child to the arm it disappears from the game world. I've played around with a bunch of different coordinates in case it was being moved slightly off screen but I've come to the conclusion that something is going wrong here. I've also run tests in a new state with just a single sprite and an emitter and as soon as I add the emitter asChild of the sprite it is gone. I'm probably missing the thing that is going wrong here, so any help would be appreciated. I'll put my code snippet below if that helps at all create: function() { this.game.stage.backgroundColor = "#000"; this.playerContainer = this.game.add.sprite(300, 600, null); this.player = this.game.add.sprite(0, 0, 'player'); this.player.scale.setTo(0.75); this.backArm = this.game.add.sprite(-10, -180, 'backArm'); this.backArm.scale.setTo(0.75); this.frontArm = this.game.add.sprite(-10, -180, 'frontArm'); this.frontArm.scale.setTo(0.75); this.emitter = this.game.add.emitter(0, 0, 5000); this.emitter.makeParticles('whiteParticle'); this.emitter.minParticleSpeed.setTo(200, 0); this.emitter.maxParticleSpeed.setTo(2000, 0); this.emitter.gravity = 200; this.emitter.lifespan = 0; this.playerContainer.addChild(this.backArm); this.playerContainer.addChild(this.player); this.playerContainer.addChild(this.frontArm); this.frontArm.addChild(this.emitter); this.game.physics.arcade.enable(this.playerContainer); this.game.physics.arcade.enable(this.player); this.playerContainer.body.collideWorldBounds = true; this.player.anchor.setTo(0.5); this.frontArm.anchor.setTo(0.4866, 0.2925); this.backArm.anchor.setTo(0.4866, 0.2925); },

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)?

Hi Guys, I'm trying to link 3 sprites together for a player character using the addChild method on a sprite. I have backArm, player and frontArm sprites that need to be rendered in that order. The arms both rotate at the shoulder and the backArm needs to go behind the player sprite. I've seen a suggestion on this thread to have a main sprite container with a null key and add the sprites as children of that. I've tried that and I have my sprites rendered in the correct order but the arms do not follow the player anymore when it walks across the screen. The arms just stay in place while the player walks away. Pretty sure I've made an error somewhere. I'll put a code snippet below and any advice would be really helpful. Thanks create: function() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.playerContainer = this.game.add.sprite(200, 500, null); this.backArm = this.game.add.sprite(0, 500, 'backArm'); this.player = this.game.add.sprite(200, 500, 'player'); this.frontArm = this.game.add.sprite(0, 500, 'frontArm'); this.playerContainer.addChild(this.backArm); this.playerContainer.addChild(this.player); this.playerContainer.addChild(this.frontArm); this.game.physics.arcade.enable(this.player); this.player.anchor.setTo(0.5); this.frontArm.anchor.setTo(0.4866, 0.2925); this.backArm.anchor.setTo(0.4866, 0.2925); //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.world); this.backArm.rotation = this.game.physics.arcade.angleToPointer(this.backArm.world); }

I am recently building a container / map with thousands of sprites in canvas. My player will be moving around among those sprites on a large map. But I find my game becomes very slow after I add too many (-about 5000+) units on the container. I think it may perform better if I only display units that are within the camera of my player as my player moves around on the map. But by doing this I will need to perform addChild / removeChild operation of pixi.Container many times during the game loop, because as my player moves new sprites come into sight and some sprites are out of sight. I am not sure if this is a good or bad decision. Maybe it’s too costly to do these operations in the ticker? But how can I draw as little in-sight sprites as possible otherwise?

Hello, I want to pass a Sprite that will rotate around a pivot sprite. So the child sprite will be added as a child using addChild. I want my bat to follow the childSprite, so I passed it to the follow variable. Example: this.pivotSprite = this.create(player.position.x, player.position.y + 100, 'invisible_block'); var childSprite = new Phaser.Sprite(this.game, 0, this.pivotSprite.position.y - 100, 'invisible_block'); this.game.physics.arcade.enableBody(childSprite); childSprite.pivot = this.pivotSprite.position; childSprite.body.angularVelocity = 50; this.pivotSprite.addChild(childSprite); var bat = new Bat(game, 0, 0); bat.follow = childSprite; So, the point is, the childSprite will rotate around a pivotSprite, and my bat will follow that childSprite. But, the problem is that when I use "Phaser.Physics.Arcade.moveToObject(bat, bat.follow, 100)" the bat goes to the initial position provided in "var childSprite = new Phaser.Sprite(this.game, 0, this.pivotSprite.position.y - 100, 'invisible_block');" and stay there. I'm using the Phaser.debug.body to check the child, and she is really moving around the pivotSprite. Is that right? Because I was wondering that childSprite and bat.follow would be the same object.

hi there im wondering what happens to a child element when its parent suffered .kill() or .destroy() method? does it also get erased from earth? thanks!

Hi, I've spent the past 2 days stuck on something that should be very simple. I have a sprite representing a ship. I add 10 sprites as child using addChild around the ship. I want to detect an overlap between any of the child sprite and the asteroids. Here is the code used to create the ship: this.player = this.game.add.sprite(this.options.position.x, this.options.position.y, this.options.sprite); this.player.anchor.set(0.5); this.player.enableBody = true; this.game.physics.enable(this.player); Then here is how I add the "sensors" around the ship: var sensors = scope.game.add.physicsGroup(); for (i=0;i<=9;i++) { var x = (r*Math.cos(360/n*i*Math.PI/180))-(this.player.body.width/4); var y = (r*Math.sin(360/n*i*Math.PI/180))-(this.player.body.height/4); var sensor = sensors.create(x, y, 'ship-sensor'); sensor.name = 'sensor-'+i; this.game.physics.enable(sensor); this.sensors.push(sensor); } this.player.addChild(sensors); Finally, here is how the asteroids are created: this.asteroids = this.game.add.physicsGroup(); for (i=0;i<20;i++) { var asteroid = this.asteroids.create(rand_x, rand_y, 'asteroid'); asteroid.body.immovable = true; asteroid.name = 'asteroid-'+i; asteroid.body.mass = -100; } On my update() function, I have: this.game.physics.arcade.overlap(this.sensors, this.asteroids, function(sensor, asteroid) { console.log("> ", sensor, asteroid ); }, null, this); My goal is to detect an overlap between any of the "sensors" and the asteroids so that I can feed that to a neural network to have a ship that learns to navigate on its own. I tried with Arcade physics, I tried with P2 physics, and I'm about to give up and move on to another game engine at this point... Anybody has a solution to that simple problem?

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)

hello im just wondering if i can cover a sprite with a bitmap, think about a character and covering it with clothes(bitmaps) i tried adding them as a child sprite1.addChild(bitmap); keep in mind that the sprite will be moving around, is there a easiest way to do this?

I have a class that extends from sprite. I want to add it to another sprite obj = new ItemBtn(this.state, xloc, yloc, item);this.menuContainer.addChild(this.game.make.sprite(xloc, yloc, obj));Can't I create a child without the image key? Can't I add a class to the sprite? Thank you.

I'm a newbie in Phaser and programming as well, so I apologize if this question is stupid. I took this tanks example as a base code. This example is great, while the turret is in the middle of the hull, but in my case it is slightly moved to the front of the tank: If i use the code without changes, when tank turns, his turret is not positioning correctly anymore: So, I googled a bit and found addchild solution: tank.addChild(turret); turret.x = 11; turret.y = 0; Now it looks great, turret stays on its correct position at any circumstances: BUT, STOP! What is this??? Turret's anchor (or rotation point) is positioning in a wrong place, it does not move with tank and stays in the same place of the "map". Moreover, bullets fire from the same position and do not move with tank as well: And it will stay there, no matter what happens. The situation is changing if I add: turret.x = tank.x; turret.y = tank.y;to update() section. Now anchor and bullets are in the right place and moving with tank. But turret is trolling me again: As its coordinates are updating, it runs ahead all the time. This thing is driving me crazy for at least past 3 hours and I have a feeling, that I'm missing something very simple. Full code (sorry, didn't find how to put it in hide): var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });function preload () { game.load.image('bullet', 'asset/shell.png'); game.load.image('tank', 'asset/games/tanks/tank1.png'); game.load.image('turret', 'asset/games/tanks/turret.png'); game.load.image('earth', 'asset/games/tanks/scorched_earth.png'); game.load.spritesheet('kaboom', 'asset/games/tanks/explosion.png', 64, 64, 23); }this.bullets = bullets;this.fireRate = 1000;var land;var tank;var turret;var explosions;var currentSpeed = 0;var cursors;var bullets;var fireRate = 1000;var nextFire = 0;function create () { // Resize our game world to be a 2000 x 2000 square game.world.setBounds(-1000, -1000, 2000, 2000); // Our tiled scrolling background land = game.add.tileSprite(0, 0, 800, 600, 'earth'); land.fixedToCamera = true; // Our bullet group bullets = game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(30, 'bullet', 0, false); bullets.setAll('anchor.x', 0.5); bullets.setAll('anchor.y', 0.5); bullets.setAll('outOfBoundsKill', true); bullets.setAll('checkWorldBounds', true); // The base of our tank tank = game.add.sprite(0, 0, 'tank', 'tank1'); tank.anchor.setTo(0.5, 0.5); tank.animations.add('move', ['tank1'], 20, true); // This will force it to decelerate and limit its speed game.physics.enable(tank, Phaser.Physics.ARCADE); tank.body.drag.set(0.2); tank.body.maxVelocity.setTo(400, 400); tank.body.collideWorldBounds = true; // Finally the turret that we place on-top of the tank body turret = game.add.sprite(0, 0, 'turret', 'turret'); turret.anchor.setTo(0.15, 0.5); tank.addChild(turret); //turret.x = 11; //turret.y = 0; // Explosion pool explosions = game.add.group(); for (var i = 0; i < 10; i++) { var explosionAnimation = explosions.create(0, 0, 'kaboom', [0], false); explosionAnimation.anchor.setTo(0.5, 0.5); explosionAnimation.animations.add('kaboom'); } tank.bringToTop(); turret.bringToTop(); game.camera.follow(tank); game.camera.deadzone = new Phaser.Rectangle(150, 150, 500, 300); game.camera.focusOnXY(0, 0); cursors = game.input.keyboard.createCursorKeys();}function update () { if (cursors.left.isDown) { tank.angle -= 4; } else if (cursors.right.isDown) { tank.angle += 4; } if (cursors.up.isDown) { // The speed we'll travel at currentSpeed = 300; } else { if (currentSpeed > 0) { currentSpeed -= 4; } } if (currentSpeed > 0) { game.physics.arcade.velocityFromRotation(tank.rotation, currentSpeed, tank.body.velocity); } land.tilePosition.x = -game.camera.x; land.tilePosition.y = -game.camera.y; turret.x = tank.x; turret.y = tank.y; turret.rotation = game.physics.arcade.angleToPointer(turret); if (game.input.activePointer.isDown) { // Boom! fire(); } }function fire () { if (game.time.now > nextFire && bullets.countDead() > 0) { nextFire = game.time.now + fireRate; var bullet = bullets.getFirstExists(false); bullet.reset(turret.x, turret.y); bullet.rotation = turret.rotation; game.physics.arcade.moveToPointer(bullet, 1500); }}function bulletHitPlayer (tank, bullet) { bullet.kill();}

I'm probably being funny because I recently started working with phaser but I couldn't find an answer anywhere. I'm doing zoom by changing the world scale and my sprites seem to act naturally when I zoom but the lines that I render using debug.geom(line) don't update properly ( they start moving away from their start and end point ( which are sprites) as I zoom in or out but they still respond relatively if I drag either of the sprites. How do i make them to stick to the actual sprites not the view ? P.S. : If you check out the attachment : I have zoomed in a little bit and now the line has moved away from the handles but remains parallel to the invisible line that connects the two sprites, it will stay parallel to that even if I drag the handles around , but it's length is not scaling and the position is not right ! ... }; var newLine= function () { handles['line'+lineCounter+'_1']= game.add.sprite(100, 200, 'balls', 0); var handle1=handles['line'+lineCounter+'_1'] ; handle1.anchor.set(0.5); handle1.inputEnabled = true; handle1.input.enableDrag(true); handles['line'+lineCounter+'_2']= game.add.sprite(400, 300, 'balls', 0); var handle2=handles['line'+lineCounter+'_2'] ; handle2.anchor.set(0.5); handle2.inputEnabled = true; handle2.input.enableDrag(true); lines['line'+lineCounter] = new Phaser.Line(handle1.x, handle1.y, handle2.x, handle2.y); //handles['line'+lineCounter+'_1'].addChild(lines['line'+lineCounter]); lineCounter++ ; }; // Add available input keys var key1 = game.input.keyboard.addKey(Phaser.Keyboard.ONE); key1.onDown.add(previousPicture, this); var key2 = game.input.keyboard.addKey(Phaser.Keyboard.TWO); key2.onDown.add(nextPicture, this); var key3 = game.input.keyboard.addKey(Phaser.Keyboard.THREE); key3.onDown.add(newLine, this); // set our world size to be bigger than the window so we can move the camera //game.world.setBounds(-900, -900, 900,900); // move our camera half the size of the viewport back so the pivot point is in the center of our view game.camera.x = (game.width * -0.5); game.camera.y = (game.height * -0.5); }, update: function() { for (var lineName in lines) { lines[lineName].setTo(handles[lineName+'_1'].x, handles[lineName+'_1'].y, handles[lineName+'_2'].x, handles[lineName+'_2'].y); //lines[lineName].fromSprite(handles[lineName+'_1'],handles[lineName+'_2'], false); } // movement if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { game.world.pivot.y -= 5; } else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { game.world.pivot.y += 5; } if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { game.world.pivot.x -= 5; } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { game.world.pivot.x += 5; } // zoom if (game.input.keyboard.isDown(Phaser.Keyboard.Q)) { worldScale += 0.05; } else if (game.input.keyboard.isDown(Phaser.Keyboard.A)) { worldScale -= 0.05; } // set a minimum and maximum scale value worldScale = Phaser.Math.clamp(worldScale, 0.8, 3); // set our world scale as needed game.world.scale.set(worldScale); /* if (cursors.left.isDown) { console.log("Left"); if (backgrounds['image-data-'+String(currentImage-1)] ) { previous_image= backgrounds['image-data-'+String(currentImage-1)] ; previous_image.alpha= 1.0 ; } } if (cursors.right.isDown) { console.log("Right"); if (backgrounds['image-data-'+String(currentImage+1)] ) { next_image= backgrounds['image-data-'+String(currentImage+1)] ; next_image.alpha= 0 ; } } */ }, render: function() { for (var lineName in lines) { game.debug.geom(lines[lineName],'rgb(0,255,0)'); } }

Hey First of all mad props whoever created this beautiful piece of software! Here, is my questions regarding addChild method. From my AS3 days I remember child display object's coordinates were relative to parent. So, in this vein I was hoping gray square would be sitting in the top left corner of the blue square. Instead of this I got strange positioning, also child object(gray one) lost his propositions. Upon loading it was 100/100 square. I guess I am missing crucial line of code but I cannot figure out where am I messing up preload() { this.game.load.image("debugRect", "Scripts/assets/debugRect.png"); //Load Map TIles this.game.load.image("bigOrange", "Scripts/assets/secondMap/Untitled-3-0.png"); this.game.load.image("gray", "Scripts/assets/secondMap/Untitled-3-1.png"); this.game.load.image("lightBlue", "Scripts/assets/secondMap/Untitled-3-2.png"); this.game.load.image("red", "Scripts/assets/secondMap/Untitled-3-3.png"); this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; ; } create() { const introSquareSprite = this.game.add.sprite(10,10, "debugRect"); introSquareSprite.anchor.setTo(0, 0); introSquareSprite.width = 960; introSquareSprite.height = 650; const gray = this.game.add.sprite(0, 0, "gray"); gray.anchor.setTo(0, 0); introSquareSprite.addChild(gray); }and here is screenshot

My problem is the same as the post at http://www.html5gamedevs.com/topic/2660-bring-sprite-to-front-over-all-other-groups/ , which states... The solution presented was This solution is exactly what I am looking for, however, when I try to implement it, the second drag (which moves the child from a small parent onto a group above) makes the child fly to a weird place. I've tried putting it back under the mouse by explicitly using position.x/.y, but that seems to fail. Any ideas on how I can correct this?

Hi All, I've searched this forum and the internet in general regarding my issue but can't find a solution. I'm adding one sprite (beam as in tractor beam) as a child to another sprite (saucer, as in flying saucer) and then adding this composite sprite to a group (flyingSaucerGroup). I add x number of these composite sprites (saucer and accompanying child beam) to this group in a for loop. I have another group of sprites (squirrelGroup) which contain the squirrels that are being abducted by the flying saucers. In the update function I have this line of code : this.physics.arcade.overlap( this.squirrelGroup, this.flyingSaucerGroup, this.collisionAbduct, null, this);When a beam from a flying saucer overlaps a squirrel, I expected that the callback function (this.collisionAbduct) would be triggered but its not. I know the problem has something to do with how I'm attaching these sprites to the group. I assumed that since the child beam was attached to the saucer parent which was added to the flying Saucer group that all sprites therein would be considered part of the flyingSaucerGroup that is being checked for collisions. Here is the callback code so you can see there is nothing funky going on there: collisionAbduct: function(s, { var txt = this.add.text(this.world.centerX, this.world.centerY,"squirrel killed" ); s.kill(); },Please take a look at the actual pertinent code and screen shot below. Thank you in advance for any help! Best, Michael

Hi! I have been trying to learn how to use the Sprite.addChild... but I noticed something weird: When I have a sprite (child), and add it as a child of another sprite (parent), if both sprites (parent and child) have physics enabled, whenever i give the parent a velocity, the child will acquire a weird acceleration, anyway, when I print the child's acceleration on the console log, it will be 0. I find this weird, I expected the child to move with it's parent. Is removing the physics to the child the only way to avoid this funny behaviour? because I can think of several cases where I would want the child sprite to have physics enabled. Here is an example: var mainState = ( function () { var preload = function () { game.load.spritesheet('sun', 'img/sun.png', 50,50); game.load.spritesheet('glow', 'img/glow.png', 70,70); } var create = function () { game.physics.startSystem(Phaser.Physics.ARCADE); fireball = game.add.sprite(0,0, 'sun'); glow = game.add.sprite(100,100, 'glow'); fireball.anchor.setTo(0.5,0.5); glow.anchor.setTo(0.5,0.5); game.physics.enable(fireball, Phaser.Physics.ARCADE); // everything goes fine // if I remove this line game.physics.enable(glow, Phaser.Physics.ARCADE); glow.addChild(fireball); glow.body.velocity.x = 10; // fireball will acquire a huge acceleration } var update = function () { }; return { preload : preload, create : create, update : update };})();var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game');game.state.add('main', mainState);game.state.start('main');