Spine2d pixel coordinates to world coordinates

amarino · 2017년 9월 1일

Hi All,
i don't know what im doing wrong...i think im having brain freeze. I am really struggling with converting my spine objects pixel coordinates to world coordinates. I have recently converted all my code to work with Ashley ecs and i cant seem to get my spine object to display in the correct position.
i have a system which handles the rendering and positioning of my spine object but i cant seem to get it displaying in the correct position.
I'm hoping someone can point me in the correct direction!

i have included my code for the spine rendering system...hope you can help!
i want to place the spine object at the same position as my box 2d object which is using world coordinates. but spine is using pixel coordinates. i have also included an image to show you what is happening. (the grey square near the middle right of the screen is where i want my spine object to be!)

Amarino

public class SpineRenderSystem extends IteratingSystem {
    private static final String TAG = com.chaingang.freshstart.systems.SpineRenderSystem.class.getName();

private PolygonSpriteBatch pBatch;
SkeletonMeshRenderer skeletonMeshRenderer;
private boolean process = true;

BodyComponent bodyComp;
Spine2DComponent spineComp;

public SpineRenderSystem(PolygonSpriteBatch pBatch){
    super(Family.all(RenderableComponent.class, Spine2DComponent.class, PositionComponent.class).get());
    this.pBatch = pBatch;
    skeletonMeshRenderer = new SkeletonMeshRenderer();
    skeletonMeshRenderer.setPremultipliedAlpha(true);

}


@Override
protected void processEntity(Entity entity, float deltaTime) {

    bodyComp = Mappers.body.get(entity);
    spineComp = Mappers.spine2D.get(entity);

    float offsetX = 100.00f/Gdx.graphics.getWidth(); //100 equal world width
    float offsetY = 50.00f/Gdx.graphics.getHeight(); //50 equals world height

    pBatch.begin();
        spineComp.skeleton.setX((bodyComp.body.getPosition().x / offsetX) );
        spineComp.skeleton.setY((bodyComp.body.getPosition().y) / offsetY);

        skeletonMeshRenderer.draw(pBatch,spineComp.skeleton);
        //spineComp.get(entity).skeleton.setFlipX(player.dir == -1);
        spineComp.animationState.apply(spineComp.skeleton);
        spineComp.skeleton.updateWorldTransform();
    pBatch.end();


}
}

Mario · 2017년 9월 4일

A Spine skeleton works in whatever coordinate system you want. It is true that the measures of e.g. bone positions relative to the skeleton.x/y are in the Spine editor coordinate system, but you can scale those to your rendering/physics coordinate system by using skeleton.scaleX/scaleY.

Pharan · 2017년 9월 4일

You can also apply the scale at load time.

SkeletonJson and SkeletonBinary classes have a setScale method so it loads the SkeletonData with a given scale. This will then apply it to the appropriate object fields like positions, widths, heights, lengths, spacings.

amarino · 2017년 9월 6일

Hi Guys, Thanks for the responses, i can adjust the scale of the model, i do it at loadtime. using the following

spine2DComponent.json.setScale(0.08f);

when i resize the screen the screen, it looks to be working correctly at a particular resolution but when i manually adjust the size of the window it doesnt work correctly...so imn guessing i have a problem with the camera..also when i zoom in and out the spine model doesnt change size as you would expect it to do. The level and any sprites i have showing seem to scale correctly.

i got spine model moving at a particular resolution moving correctly by using camera.project

position = ModelManager.camera.project(new Vector3(bodyComp.body.getPosition().x,bodyComp.body.getPosition().y,0));

pBatch.begin();
          

        spineComp.skeleton.setX((position.x));
        spineComp.skeleton.setY((position.y));

        skeletonMeshRenderer.draw(pBatch,spineComp.skeleton);
        spineComp.animationState.apply(spineComp.skeleton);
        spineComp.skeleton.updateWorldTransform();
    pBatch.end();

i thought moving the camera would not scale all objects on screen at the same rate?

Maybe i dont understand the camera and extended viewport as well as i think. i will re-look at my code again to see if i havent made any silly mistakes there... i will relook at how the resize method works and how i have set up the camera and viewport...maybe i forgot to delete some of old testing code by accident.

edit - ok i just figured out it works correctly with whatever resolution i set in the config.width and config.height in the desktop launcher...but when i adjust the zoom on the camera it still doesnt zoom the spine model at all.

Nate · 2017년 9월 6일

The PolygonSpriteBatch (or SpriteBatch or TwoColorPolygonBatch) has projection and transform matrices. You need to set the projection matrix using the camera's combined matrix.

OrthographicCamera camera;
PolygonSpriteBatch polygonBatch;
...
camera.update();
polygonBatch.setProjectionMatrix(camera.combined);
polygonBatch.begin();
...

amarino · 2017년 9월 6일

Hi Nate,
When i do that the spine model doesn't appear on the screen. the spineRender is one of the last rendering entity system to run

engine.addSystem(inputSystem);
//engine.addSystem(positionSystem);
engine.addSystem(b2DmovementSystem1);
//engine.addSystem(movementSystem);
engine.addSystem(spriteRenderSystem);
engine.addSystem(spineRenderSystem);
engine.addSystem(shootingSystem);
engine.addSystem(collisionSystem);
engine.addSystem(bitmapFontRenderSystem);
engine.addSystem(variableDisplaySystem);
engine.addSystem(cameraSystem);

my render method in my model manager looks like this:

public void render(float deltaTime){

    Gdx.input.setInputProcessor(inputMultiplexer);
    Gdx.gl.glClearColor(0,0,0,1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);


    levelManager.renderLevel();
    box2DDebugRenderer.render(world, camera.combined);

    entityManager.update(deltaTime);
    EntityManager.update(world);
    world.step(deltaTime,8,3);
    camera.update();
}

Nate · 2017년 9월 7일

If you want your camera to affect the skeleton rendering, then you need to do as I described. If it doesn't appear, then you draw it at the wrong place. Above you show using Camera project to position the skeleton. If your skeleton rendering is using the camera, you should not do that.

spineComp.skeleton.setX(bodyComp.body.getPosition().x);
spineComp.skeleton.setY(bodyComp.body.getPosition().y);

amarino · 2017년 9월 8일

right as always...i had some extra cameras floating about and a few random matrix changes...it all work pretty well again...i just dont understand viewports and cameras as well as i thought i did! :$

Nate · 2017년 9월 8일

Great! Camera stuff is tricky, especially when you simply don't see anything and have to figure out why.