Best approach to doing "tires" on a car

[neoRiley]

I've got a top down view of a car and the client wants the tires to rotate.  So the car and tires have to be separate sprites obviously.  The car has a collider and I'm using p2 physics to control it and the collisions in the game.  

 

 

I initially tried creating a wheels group and adding that the car so that it would move relative to the car, but that doesn't seem to work with phaser?  

 

At this point, I thought I'd just ask for the best approach for something like this

 

Thanks for your help,

 

John

[Heppell08]

Use the main car sprite as the parent to a tyres group. Then when you create each of the 4 tyres offset their positions relative to the parent (in your case the car) and then the group will update along with the car sprite because they are children to the sprite.

[neoRiley]

Use the main car sprite as the parent to a tyres group. Then when you create each of the 4 tyres offset their positions relative to the parent (in your case the car) and then the group will update along with the car sprite because they are children to the sprite.

 

I'm looking in the docs and I don't see an "add()" method or how to parent a group to a sprite - how do I parent a group to a sprite?  Sounds like a really lame question, thanks for your patience

[neoRiley]

This is what i'm doing and the wheels do *not* move with the car:

 

// CAR        var carLayer = this.game.add.group();        carLayer.z = 2;                this.player = carLayer.create(            this.playerOrientation.x,            this.playerOrientation.y,             'car');                this.player.collideWorldBounds = true;        this.physics.p2.enableBody(this.player, false);        this.player.body.clearShapes();        this.player.body.loadPolygon('physicsData', 'car');        this.player.body.angle = this.playerOrientation.z;        this.player.body.onBeginContact.add(this.collisionHandler, this);                this.wheels = this.game.add.group();        this.wheels.z = 1;        this.wheels.create(1, 22, "tire");        this.wheels.create(59, 22, "tire");        this.player.add(this.wheels); // doesn't seem to work?

[Heppell08]

To parent the car you would do this:

tyreGroup = this.add.group(car);

The car in the brackets is now the parent to the tyre group.

[neoRiley]

ah, you pass the sprite reference in the group() method and that basically is passing what parent to use - that worked, thanks very much,

 

John

[neoRiley]

this is working great Heppell08 - thanks very much

 

One other thing I'm trying to understand is, how would sort the sprite of the car with the tires?  I want the tires to be below the car sprite, which is the parent of the tire group.  I know these are set up like display lists in Flash, but if the sprite itself is the container/parent, can it be sorted so it shows over the children?

 

[Heppell08]

you would need to do:

 

car.bringToTop();

 

that will put the car on top

[neoRiley]

I can see how that would work if the car was in the same display list as the tires, but in this case, the car is the parent container to the wheeks group and I think thats the sticky part:

 

car(sprite)

|

----WheelGroup

    |

    ----leftTire(sprite)

    ----rightTire(sprite)

 

the "car" is what i'm moving with physics as well as assigning the poly collider.  So I hacked it by creating a transparent rectangular image the same dimensions as the car sprite.  I then use the transparent image for the car, and then add the real car image to the same display list as the tires and it works perfectly.

 

I'm sure I could have set this up differently, but it works very well like this - thanks for your help

[neoRiley]

Just for completeness, cause I hate when people say "it's fixed, thanks" and don't post THE fix they used:

 

// CARthis.carLayer = this.game.add.group();this.carLayer.z = 2;// using the transparent image same dimensions as the carthis.player = this.carLayer.create(    this.playerOrientation.x,    this.playerOrientation.y,     'trans32');this.player.collideWorldBounds = true;this.physics.p2.enableBody(this.player, false);this.player.body.clearShapes();this.player.body.loadPolygon('physicsData', 'car');this.player.body.angle = this.playerOrientation.z;this.player.body.onBeginContact.add(this.collisionHandler, this);this.wheels = this.game.add.group(this.player);this.leftWheel = this.wheels.create(1, 30, "tire");this.rightWheel = this.wheels.create(59, 30, "tire");this.leftWheel.anchor.setTo(0.5, 0.5);this.rightWheel.anchor.setTo(0.5, 0.5);this.car = this.wheels.create(-34, -60, 'car');