Box2D tutorial 4-complex appearance of complex rigid bodies

Box2D tutorial 1-create a collision world

Box2D tutorial 2-mouse Interaction

Box2D tutorial 3-Rigid Body binding

Box2D tutorial 4-complex appearance of complex rigid bodies

Box2D tutorial 5-Collision Detection

Previously we learned how to create a standard ry and its appearance. This tutorial mainly addresses how to create a complex ry. Box2D uses polygon stitching to form a complex appearance. In the previous tutorial, we learned to use the following two sentences to create a rigid body.
B2Body = b2World. createBody (b2BodyDef)
B2Body. createFixture (b2FixtureDef)
For complex rigid bodies, b2Body and b2BodyDef are the same, that is, they are always a rigid body. We use FixtureDef to splice multiple polygon, that is, create multiple b2FixtureDef and execute multiple times.
B2Body. createFixture (b2FixtureDef)
If the fish tank is spliced by a number of quadrilateral

The shape attribute of b2FixtureDef must provide a polygon b2PolygonShape, which can be created using the following method.
B2PolygonShape. setAsArray (veticesArray)
This method requires an array of b2Vec2 objects. Each element of this array determines a vertex, And the array elements are sorted clockwise (required ).

Specific implementation code

1 private var _ container: b2Body;
2 [Embed (source = "./assets/container.png")]
3 public var ContainerImg: Class;
4
5 // Add the appearance of the container and align it
6 private function addContainerTexture (): void
7 {
8 var img: Bitmap = new ContainerImg ();
9 this. addChild (img );
10
11 // adjust the image position
12 img. x = 43;
13 img. y = 3;
14}
15 private function createContainer (): void
16 {
17 // a three-dimensional array composed of all vertices of the container
18 // The first dimension is a polygon.
19 // The second dimension is the four vertices in the polygon.
20 // The third dimension is the x and y coordinates of each vertex.
21 var shapeCoords: Array = [
22 [[39,135], [23,124], [],
23 [[23,124], [39,135], [25,220], [6,218],
24 [[6,218], [25,220], [44,305], [28,312],
25 [[28,312], [44,305], [94,372], [82,384],
26 [[82,384], [94,372], [167,413], [161,425],
27 [[161,425], [167,413], [250,424], [250,437],
28 [[250,438], [250,424], [339,416], [341,429],
29
30 [[341,430], [339,416], [411,383], [418,393],
31 [[418,393], [411,383], [464,327], [478,334],
32 [[478,334], [464,327], [489,254], [504,252],
33 [[504,252], [489,254], [488,183], [504,177],
34 [[504,177], [488,183], [470,112], [488,103],
35 [[488,103], [470,112], [], [], [],
36 [[], [], [], [], []
37];
38 // create a rigid body Definition
39 var bodyDef: b2BodyDef = new b2BodyDef ();
40 bodyDef. type = b2Body. b2_staticBody;
41 bodyDef. position. Set (20/PIXEL_TO_METER,-10/PIXEL_TO_METER );
42 // create a Rigid Body
43 _ container = world. CreateBody (bodyDef );
44 // create a modifier for a Rigid Body
45 // pass the vertex array as a parameter
46 createFixtrues (shapeCoords );
47}
48 // create Fixtures
49 // create multiple Fixture Based on the first dimension of the vertex Array
50 private function createFixtrues (coords: Array): void
51 {
52 for (var I: int = 0; I <coords. length; I ++)
53 {
54 var shape: b2PolygonShape = new b2PolygonShape ();
55 // call the vertex creation method to take the second dimension of the array as the parameter
56 // return a vertex array for creating a shape
57 var shapeVertices: Array = createVerticesArray (coords [I]);
58 shape. SetAsArray (shapeVertices );
59 var shapeFixtureDef: b2FixtureDef = new b2FixtureDef ();
60 shapeFixtureDef. shape = shape;
61 shapeFixtureDef. density = 1;
62 shapeFixtureDef. restitution = 1.0;
63 _ container. CreateFixture (shapeFixtureDef );
64}
65}
66
67 // create a vertex Array
68 private function createVerticesArray (coords: Array): Array
69 {
70 // no less than three vertices
71 if (coords. length <3)
72 {
73 throw new Error ("Shape create wrong ");
74}
75 var vertices: Array = new Array ();
76 // traverse the second dimension of the vertex array to generate the b2Vec2 Array
77 for (var I: int = 0; I <coords. length; I ++)
78 {
79 var vertice: b2Vec2 = new b2Vec2 (coords [I] [0]/PIXEL_TO_METER, coords [I] [1]/PIXEL_TO_METER );
80 vertices. push (vertice );
81}
82
83 return vertices;
84
85}

So why don't we create all the vertices at once and connect them in clockwise order to form an overall polygon?
Because the Box2D border cannot be concave, and the inside border of the fish tank is curved to concave, all cannot perform correct collision detection.

How can we get so precise with so many vertices?
I did this. I'm not sure whether it's the simplest or not. It's quite convenient for me to use it. With Photoshop, we first cut out all unused pixels at the edge of the fish tank, open the information panel, and place the cursor at the corresponding position to display the coordinates of the position, and write down the coordinates. Finally, save the cropped fish tank as the appearance image, so that it can be matched.

Download source code