Child sprite anchor - strange behaviour

[bigboy]

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();}

[jmp909]

could you not just change the anchor on your turret to line it up.

 

anyway if you addChild then your turret coordinates are related to your tank coordinates so you need to modify the update function to account for that .. eg turret x&y should not change as they are not moving around on the tank

 

also if you addChild(shadow) your shadow will appear on top of your tank, and i'm not sure you can send it behind the parent sprite.

 

you could possibly put them all in a blank sprite, but you'll still have a bunch of coordinates to fix

[jmp909]

ok this isn't everything you need.. but i made a few changes to help

 

* put everything (tankBase, shadow, turret) inside a blank sprite (tank). (note i renamed the original tank base to tankBase so it could be put inside the new tank parent)

* changed the bullet firing code so that it looks like it's coming out of the turret rather than from under the centre of the tank

* fixed the physics body size/offset due to using a blank sprite (needs setting to same size as tank)

 

http://phaser.io/sandbox/UUSODbhJ/play

 

took quite a while to work out.. happy studying!

 

 

you could leave it the original way of course and just fix your turret anchor..but anyway.. i thought I may as well learn something

[bigboy]

jmp909, thanks a lot! I'll check it out and reply.

[jmp909]

The biggest headache was the bullet. I was using rotate point with the distance constraint to place it away from the tank centre and nearer the end of the turret. But of course because it was using angle to pointer, if you put your mouse on the tank then the bullet fired backwards. So what I do is reset the bullet to the middle (zero origin), get the angle, and *then* rotate it and move it out ... Just a couple of different commands in the end , but a while to work it out! Note though, that it's doing an extra trig calculation than the original... So theoretically slower.

[bigboy]

jmp909, at first your solution didn't work, but I've managed to figure it out and adapt for my game. I didn't understand, why you use tankBase instead of just tank. Anyway, after changing it to tank everywhere - it started to work.

 

But there is one more issue coming out of your code. In my situation bullets... well it would be more correct to call them shells... So shells are coming out of the wrong place, looks like it is positioned not in the turret's center.

 

Here are some pictures for better understanding, the red dot is an approximate point where the shells are coming from:

 

 

 

 

I understand that it is something with fire () function, but I'm too stupid to understand what exactly is causing this

[jmp909]

Because tank is now a blank 'group' sprite that you control, and tankBase is what used to be called tank, but you don't control that directly anymore

The bullet is a little more complex . Let me think it through . It still starts from the middle of the base, hence why it doesn't line up with the turret

[jmp909]

I would try translate the point p by something like (10,0) maybe before rotating it. Not sure... Would have to look tomorrow. That's only a guess

And this is why you shouldn't turn up late to vector maths lessons at school

[jmp909]

Because turret is a child of the sprite, it's x,y doesn't move ( eg turret.x is constant... Probably zero). However there may be a localToGlobal function like Flash has, to get its point in the World, at which point you could then reset the bullet to the turret centre not the tank centre

[jmp909]

fixed by creating a new angleToPointer version that uses sprite.world.x  rather than sprite.x  in its calculations (since our sprite is nested we need the global coords)

http://phaser.io/sandbox/UuTkxwqm/play