custom textures and Shapes

 

So in Part 3 of this series we will be moving awayfrom relying on the debug draw and SetAsBox function, and, instead wewill be creating custom shapes and textures by building a truck in ourBox2D world. This process is relatively simple but there are a fewcaveats.

To save time I will be extending the MouseJoint class from Part 2to avoid recoding everything from scratch. Also, I am going to post thesource code upfront and then explain the process since we jump around abit making it difficult to post code snippets without adding confusion.

 

Displaying textures

So in the previous tutorials we have been relying on the debug rendering to display our world. As useful as it is, it would be nice to apply some textures so lets fire up the Flash IDE and create the textures.

  • For this truck, will need to draw the truck body, a wheel and the ground. It is important that each of these MovieClip’s has the registration point in the middle. When you have finished creating the images set the linkage on them so we can create the MovieClips via code.

  • Lets make the bodies. It is the same process from the previous tutorials.  We will need to create the truck body, the three wheel bodies with revolute joints, and the ground body.
  • Make sure all the debug drawing code is removed.
  • Now we will create instances of the MovieClips that we created in the Flash IDE as set them as class member variables.
  •  Time to draw. Create a draw function (or multiple draw functions for each body if you like) and call it from your update function. In this draw function we will get the x and y position of a body and set the relevant texture MoveClip to this position. We will also set the rotation as well – just don’t forget to convert to degrees from radians.

Custom shapes:

Now that we have our drawing code in place, we need to create the shapes that the Box2D engine uses for its calculations.

Previously we had been calling a helper function to create a box for us. So this time, we will create a b2PolygonShape, but instead of calling SetAsBox we will pass in a array of b2Vec2 vertices that outline the truck.

Note, there are two main restrictions. The first is that we pass in the vertices in a clock wise direction. The second is that Box2D does not allow concave shapes. We can see that where the cab joins the cargo that it is a concave shape. The solution is that we will need to break the truck up into two convex shapes – the cab and the cargo.

I have updated the class diagram that I used in Part 1 to break down how the truck is being made.

  • So create a b2PolygonShape for the truck’s cab and cargo.
  • Create the vertices, place them in an array and pass this as a parameter in SetAsArray function on each of the b2PolygonShape. As of Box2D 2.1a we no longer are restricted to just 8 vertex points per shape.
  • Create a b2FixtureDef  for each b2PolygonShape. Set the shape property on the b2FixtureDef  to the corresponding b2PolygonShape.
  • Call the CreateFixture function on the truck body twice, once for the cab by passing in the cab’s b2FixtureDef and then the cargo b2FixtureDef.

That’s it. We are done,  run your code and you should now see our truck in the world!

 

原文地址:http://blog.allanbishop.com/box2d-2-1a-tutorial-%E2%80%93-part-3-custom-textures-and-shapes/

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值