Skip to main content

Cuerpos y sprites (imágenes)

Youtube video player

Youtube video player

info

Prueba el demo en tu navegador y descarga el código fuente de todos los tutoriales en GitHub.

En este tutorial vamos a aprender cómo dibujar una imagen en nuestro cuerpo. Para comenzar, si tenemos un cuerpo circular que representa una pelota dibujaremos una imagen de una pelota junto con nuestro cuerpo y si tenemos un cuadrado dibujaremos una caja:

Es necesario almacenar la información de los cuerpos para saber exactamente donde vamos a dibujar los sprites para esto vamos a crear una clase GameObject donde voy a guardar el tipo, la posición y el ángulo actual del cuerpo.

static public class GameObject {
static final int BALL = 0;
static final int BOX = 1;
final int type;
float angleDeg;
Vector2 position;

public GameObject(float x, float y, int type) {
position = new Vector2(x, y);
this.type = type;
}

public void update(Body body) {
position.x = body.getPosition().x;
position.y = body.getPosition().y;
angleDeg = (float) Math.toDegrees(body.getAngle());
}
}

En el constructor inicializamos la posición inicial y el tipo de objeto (Pelota o Caja). Y la función update va a ser llamada cada vez que hagamos una llamada a la función oWorld.step (aproximadamente 60 veces por segundo) y sirve para actualizar la posición y ángulo del objeto.

Siguiendo los tutoriales anteriores vamos a crear el piso, una caja y una pelota por lo que vamos a tener 3 funciones createFloor, createBall, createBox recuerda que puedes descargar el código fuente en github.

También vamos a cargar las imágenes que se utilizarán para representar las pelotas y las cajas.

TextureRegion ball, box;

public Learn5(MainLearn game) {
super(game);
//...más código
ball = new TextureRegion(new Texture(Gdx.files.internal("data/pelota.png")));
box = new TextureRegion(new Texture(Gdx.files.internal("data/caja.png")));
//...más código
}

En la función update del ejemplo es necesario llamar el update de cada uno de los objetos GameObject:

@Override
public void update(float delta) {
oWorld.step(delta, 8, 6);
oWorld.getBodies(arrBodies);

for (Body body : arrBodies) {
if (body.getUserData() instanceof GameObject) {
GameObject obj = (GameObject) body.getUserData();
obj.update(body);
}
}
}

Y lo más importante es en la función draw del ejemplo tenemos que dibujar las pelotas y cajas:

@Override
public void draw(float delta) {
//...más código
oCamBox2D.update();

spriteBatch.setProjectionMatrix(oCamBox2D.combined);
spriteBatch.begin();

drawGameObjects();
spriteBatch.end();
//...más código
}

private void drawGameObjects() {
for (GameObject obj : arrGameObjects) {
TextureRegion keyframe;

if (obj.type == GameObject.BOX)
keyframe = box;
else
keyframe = ball;

spriteBatch.draw(keyframe, obj.position.x - .15f,
obj.position.y - .15f, .15f, .15f, .3f,
.3f, 1, 1, obj.angleDeg);
}
}

En la función drawGameObjects iteramos cada uno de los objetos GameObject para obtener su posición, ángulo y tipo para poder dibujarlo correctamente.