Jump to content

Best approach to doing "tires" on a car


neoRiley
 Share

Recommended Posts

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.  

 

2014-04-26_16-34-52.png

 

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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?

 

2014-04-27_10-04-46.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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');
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...