Programación de Juegos para Android

Programación de Juegos para Android 07: Insertar imágenes con SpriteBatch

42 videos

238 minutos

Para mostrar una imagen en pantalla tenemos que usar el método render, como ya te comenté anteriormente. Para ello lo que tenemos que hacer es lo siguiente. Primero le decimos al Batch, la clase que usamos para dibujar cosas por pantalla, que queremos comenzar a dibujar cosas, simplemente llamando al método begin. Después metemos todo lo que queremos dibujar por pantalla, ya veremos cómo se hace, y por último le decimos que hemos terminado con una llamada a end.

Y cuando llamemos a end, todo lo que le hayamos dicho entre begin y end lo dibujará de golpe para que sea más rápido. Dentro de Batch, hay un método muy importante llamado draw, que sirve para dibujar cosas. Como ves, tenemos un montón de formas de llamar a draw, desde métodos cortos hasta métodos largos como éste que impresiona por la cantidad de parámetros que tiene. También tenemos algunos métodos que reciben texturas,

y otros que reciben regiones, ya veremos qué es eso. En este caso me interesa utilizar el método más corto, que es el que recibe una textura, y las posiciones X, Y de dónde queremos dibujarlo por pantalla. Pero como ves, hay otras formas de llamar a draw. Puedes decirle las dimensiones, como width o height. Puedes decirle qué escala quieres que tenga, qué rotación debe tener, si quieres que esté girado, o con un flip. Es decir,

que tienes un montón de formas de decirle cómo se dibuja, pero en este caso me interesa la más corta para obtener resultados cuanto antes. Voy a pedirle a minijoe que se dibuje en la posición 0, 0. Que haya elegido estos números no es casualidad, me vais a entender ahora por qué. Si yo ejecuto este código en escritorio (ya os dije que usaríamos el escritorio, por comodidad), veis que ocurre en primer lugar una cosa bastante rara.

Esto ocurre porque antes de grabar este vídeo aposta he hecho una prueba y he mostrado imágenes en distintos puntos de pantalla. Voy a cerrar esto antes de que queme mi pantalla. Es importante que antes de dibujar cualquier fotograma limpiemos el buffer de la tarjeta de vídeo. ¿Por qué? Porque he hecho la prueba aposta quitando el dispose, es decir, que los recursos se han quedado en la tarjeta gráfica y no se han liberado.

Se ha quedado el búfer de la tarjeta de vídeo sucio y cuando le he pedido que dibuje se ha visto la imagen fantasma de lo que había antes en mi anterior prueba. No quieres que ocurra eso, así que tienes que resolver esto de dos formas. Una haciendo un dispose de lo que quieres dejar de usar para que no ocurra esto, y otra es limpiar la pantalla antes de dibujar cosas en ella. Para ello es muy sencillo, hay que hacer únicamente una llamada a Gdx.gl. Gdx

es una clase interesante, ya os hablaré en detalle en otro momento, esta es la que usamos para controlar el juego, los gráficos, la entrada... en este caso OpenGL, que es lo que está por debajo en la tarjeta gráfica, y pidiéndole que se vacíe. ¿Que se vacíe qué? El buffer de bits, escribiendo COLOR_BUFFER_BIT. Puedes copiar y pegar este código, no le des mucha vuelta, pero es importante pedirle a la tarjeta gráfica

vacía todos los colores que tengas en pantalla'. En cuanto hagamos esto, quedará como la seda y se verá perfectamente bien. Porque si no le pedimos que se vacíe la pantalla, se puede quedar sucia y puede ocurrir eso. Ya veis por qué es importante también liberar recursos, para que no pase eso. Como ves, la imagen en el 0,0 se representa aquí abajo a la izquierda. Eso es porque libGDX tiene un eje de coordenadas interesante

del que es importante hablar. Para libGDX todos los píxeles de la pantalla tienen una posición, indudablemente. La parte inferior izquierda, la parte inferior derecha. Píxeles como los de cualquier pantalla. En particular, libGDX tiene el eje de coordenadas empezando en el 0,0, que está ubicado abajo a la izquierda. Las X crecen hacia la derecha y las Y crecen hacia arriba. Es decir, que si yo pido que la imagen la dibuje en vez de en el 0,0

en el 200,0, como le digo X=200, la imagen se verá más a la derecha que antes, por ejemplo, tal que aquí. Del mismo modo, si yo en vez de decir 0 verticalmente digo 200, la vais a ver más hacia arriba de lo habitual. Por ejemplo, en este caso subida aquí. Cuanto más arriba se vea mayor tiene que ser el valor de la Y, y cuanto más a la derecha, mayor tiene que ser el valor de la X. ¿Cómo puedo adivinar cuánto mide mi pantalla?

Vamos a echarle un vistazo a la clase Gdx otra vez, y esto se lo preguntamos al sistema de gráficos. El sistema de gráficos tiene una serie de métodos interesantes detallados posteriormente, y uno de ellos es getWidth, que sirve para obtener el ancho de la pantalla, y getHeight, para obtener el alto de la pantalla. Por ejemplo, si me vengo al create y le escribo este código, [teclea], puedo conocer cuánto de grande es la pantalla

en la que se está ejecutando el juego. Y esto lo podríamos guardar en variables, y utilizarlo para lo que nos interese, por ejemplo, puedo guardar esto en una variable llamada width, y esto en una variable llamada height.

Si quieres enterarte de los nuevos cursos, suscríbete. No habrá spam, prometido :)

Sobre el autor

foto de jotajotavm
José Javier Villena

jotajota pa los amigos y jota pa los de más cnfianza.

Bio Seria: Analista-Programador en diferentes lenguajes. Tutor PREMIUM de reconocidas plataformas de nivel mundial como CodigoFacilito. Redactor de artículos para Cristalab. Mi canal de YouTube está patrocinado por la editorial ANAYA y LaTostadora. Me gusta explicar con detalle y poner varios ejemplos para que no queden dudas.

Bio Molona: Me presento :) soy informatico, ni frostis d hardware pero muy muxo de programacion, friki a medias o del to segun el dia. Me gusta programar, muxo. Manejo varios lenguajes y tdo lo ke sepa lo comparto x amor al arte. Este no es mi trabjo pero lo ago mejor y con +ganas y calidad que si lo fuera, x eso mismo, xq para mi es divertido. Solo spero al menos algo de agradecimientO!! ;)

Dios, qe gusto haber escrito este parrafo cm me a dao la gana sin pensar en ortografia ni tildes ni historias!!!!!