Registrarse

[RPGXP] Recortando Bitmaps

Jessie

What goes around, comes around




Recortando Bitmaps






Introducción







Una manera practica de manejar gráficos pequeños, es colocar todos estos en una sola imagen, de esta manera en lugar de tener varias imágenes dentro de una carpeta, tendremos una sola imagen que contenga todos estos gráficos diferentes.

Pero, ¿Cómo le haremos para cargar los gráficos de manera separada?
Pues la respuesta es simple, dentro del RGSS o Ruby Game Script System, tenemos la instancia llamada Sprite. Esta es una clase (class) que se especializa en mostrar bitmaps en la pantalla del juego.

Dentro de esta misma instancia, tenemos la propiedad llamada src_rect, la cual se encarga de guardar la información del rectángulo que es formado por el mismo bitmap. Esta propiedad, a su vez contiene iniciada la instancia Rect, la cual es de ayuda para poder manipular la información de ese mismo rectángulo.



Proceso







Primero necesitamos crear nuestro gráfico, para este tutorial usaré como ejemplo los iconos de pokémon, del 001 al 009, o sea estos nueve gráficos.



Y lo que hacemos es colocar todos los gráficos que necesitamos dentro de la misma imagen. Para este ejemplo, la imagen quedaría algo así :




Ahora, nos vamos a nuestro editor de scripts. Para propósito de este tutorial, crearé una instancia nueva dentro de una nueva sección, pero pueden aplicar el proceso en cualquier otra instancia que use la clase (class) Sprite o en el caso de Pokémon Essentials, alguna instancia relacionada con esta.

La imagen que usaré se llama iconos_prueba.png, pero pueden llamarla como gusten.



Código:
class Pruebas

    def imagenes
        # Iniciamos nuestra instancia
        bulbasaur = Sprite.new
        bulbasaur.bitmap = Bitmap.new("Graphics/iconos_prueba")
        bulbasaur.src_rect.set(0,0,64,64)
    end

end




Como podemos ver en el ejemplo anterior, he usado el método set, este pertenece a la clase (class) Rect, y ya que la propiedad src_rect contiene esta clase iniciada, podemos usar los métodos y propiedades de la clase Rect, en este caso el método set.
El método set es usado para definir la información del rectángulo que se formará con el bitmap, y usa cuatro argumentos.



Código:
        bulbasaur.src_rect.set(OX,OY,ANCHO,ALTO)




OX : El punto X de origen del gráfico
OY : El punto Y de origen del gráfico
ANCHO : El tamaño en pixeles del gráfico
ALTO : El tamaño en pixeles del gráfico

En el ejemplo, he colocado solamente el icono de Bulbasaur, así que para tomar sus coordenadas de origen y el tamaño del mismo, lo hacemos de esta manera :





Así que ya teniendo los puntos de origen y el tamaño del gráfico, ya podemos definir la información del rectángulo. Y al momento de probar nuestra instancia, se verá algo como esto :





Y esto mismo lo podemos aplicar para cualquiera de los otros gráficos, por ejemplo si queremos hacer lo mismo con el icono de Ivysaur, primero buscamos las coordenadas y luego aplicamos los cambios a nuestro script.






Código:
class Pruebas

    def imagenes
        # Iniciamos nuestra instancia
        Ivysaur = Sprite.new
        Ivysaur.bitmap = Bitmap.new("Graphics/iconos_prueba")
        Ivysaur.src_rect.set(64,0,64,64)
    end

end



Así que al momento de probar nuestro script debería verse de este modo :






Conclusión







Como hemos visto, el usar de esta manera los gráficos quizás sea un poco más complicado e incluso tedioso, pero con solo un par de líneas de código adicionales podemos ahorrarnos el estar agregando tantos archivos gráfico dentro de las carpetas de nuestros proyectos.

Es importante tener en cuenta que el código mostrado es solo un ejemplo, deben pensar bien que es lo que desean lograr y como lo necesitan manejar para que funcione correctamente.

Si tienen dudas o sugerencias, no duden en comentar y responderé tan pronto como pueda.

Saludos.



 
Última edición:

DavouGS

Aprendiz de leyenda
Gracias en serio que esto me sirvió demasiado, solo que creo también se tenía que agregar un viewport(no sé si lo escribí bien), pero por lo demás es muy funcional
 
Arriba