HTML and CSS Reference
In-Depth Information
Figure 5-25. MTS conversion to pixels in Box2D
To get the sizes of the walls (width and height) we need to divide all the relative Canvas pixel
values by 30. To get the location, we need to do the same but also make sure that we provide
origins in the center, not the upper-left side of the object.
To top this off, the width and height passed to the Box2D
setAsBox()
method (width and
height) are given in ½ width and ½ height. (We will discuss
setAsBox()
a little later in this
chapter.)
So, for the top wall that we want to extend all the way across the Canvas with a height of 1
pixel, the code would be as follows:
{
x
:
250
/
30
,
y
:
1
/
30
,
w
:
500
/
2
/
30
,
h
:
1
/
30
}
Or, alternatively:
{
x
:
8.3
,
y
:
.
03
,
w
:
8.33
,
h
:
.
03
},
//top wall
The rest of the wall values use the same type of calculations to convert pixel values to MTS
units for Box2D. Now let's use those units to make something.
Whatisinterestingaboutthisscalevalueisthatwhenyouuseituniformly(toconverttoMTS
units from pixels and from pixels to MTS units), the value can be
anything
. It just needs to
be consistent. However, the value does have an effect on your physics world. The size of the
value models the world in a different way. The smaller the scale value, the bigger the objects
are in your world and vice versa. You will need to manipulate this scale value to tweak the
physics for the world you are simulating.
