Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I read through this question to try and get a grasp on the topic, but I can't figure out how to apply this to my Slick2d window.

I'm trying to do something as simple as place an edge on the bottom of the screen, so I had been thinking of something like

bottomEdge.setAsEdge(new Vec2(0f, SCREEN_HEIGHT), new Vec2(SCREEN_WIDTH, SCREEN_HEIGHT))

...but I have no idea how move from my pixel system to the MKS system of jBox2d. In fact, the body.getPosition().x of a movable body I am drawing returns a decimal value between 100 and 101, but I have no idea how it's deciding on this value. As I move off screen to the left, it decreases down to 99, 98, and so on.

How should I go about making this conversion and thereby also being able to support different screen sizes & resolutions? My instinct is to somehow use the LWJGL underneath Slick, but I'm lost.

share|improve this question
up vote 0 down vote accepted

The box2d faq may help you out, one of the Q&As reads:

How do I convert pixels to meters?

Suppose you have a sprite for a character that is 100x100 pixels. You decide to use a scaling factor that is 0.01. This will make the character physics box 1m x 1m. So go make a physics box that is 1x1. Now suppose the character starts out at pixel coordinate (345,679). So position the physics box at (3.45,6.79). Now simulate the physics world. Suppose the character physics box moves to (2.31,4.98), so move your character sprite to pixel coordinates (231,498). Now the only tricky part is choosing a scaling factor. This really depends on your game. You should try to get your moving objects in the range 0.1 - 10 meters, with 1 meter being the sweet spot.

As a basic example (snippet):

/** 100 Pixels = 1m in Physics jbox2d */
private static final float SCALE = 0.01f;   // 1/100 pixels

// Convert a Slick 2D screen x coordinate to a JBox2D x coordinate    
public static float toPosX(float posX)
    float x = posX * SCALE;
    return x;

// Convert a Slick 2D screen y coordinate to a JBox2D y coordinate
public static float toPosY(float posY)
    // As the physics world uses a 2d cartesian coordinate system
    // and slick uses screen coordinates with top-left being (0,0)
    // flip y
    float y = -posY * SCALE;
    return y;

 * Convert a JBox2D x coordinate to a Slick 2D screen x coordinate
 * @param posX The JBox2D x coordinate
 * @return The Slick 2D x coordinate
public static float toScreenX(float posX)
    // convert back to screen coordinate
    float x = posX / SCALE;
    return x;

public static float toScreenY(float posY)
    // convert back to screen coordinate
    float y = -posY / SCALE;
    return y;

public void example()
    BodyDef bd = new BodyDef();
    bd.type = BodyType.STATIC;
    Body body = world.createBody(bd);
    PolygonShape shape = new PolygonShape();

    // Note: v1X, v1Y, v2X, v2Y are in screen coordinates
    // Point A of the edge
    Vec2 v1 = new Vec2(toPosX(v1X), toPosY(v1Y));
    // Point B of the edge
    Vec2 v2 = new Vec2(toPosX(v2X), toPosY(v2Y));
    shape.setAsEdge(v1, v2);
    body.createFixture(shape, 1.0f);        

Also, someone gives a great explanation here:

There are many different ways of doing the conversion, this is just one example. If you take a look at the jbox2d testbed code, it uses an OOBB structure to do the conversion. I'm still getting my head around it myself, I haven't touched jbox2d for a while now so if anyone has any input, I would be glad to hear/see it.

share|improve this answer
Thanks @nejinx. My question was based off a misguided understanding of the world coordinates initially, and this helped me see the topic more clearly. It also had a roundabout way of leading me to, which ended up being a great resource. – lase Feb 27 '13 at 15:37

There is actually something that does this for you in the library, called OBBViewportTransform. It will handle all view-to-world and world-to-view transformations, and even allows rotation, skewing, etc (anything that can be done with a 2x2 matrix).

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.