Programando con Love 2D – Textos de colores centrados

En el anterior post sobre “Programación con Love 2D” vimos como centrar una imagen. Es bueno ver ese post desde aquí antes que este ya que se recicla el código.

El código de ejemplo con el que vamos a trabajar requiere descargar una tipografía, una imagen y un sonido.

Podemos bajar todo desde aquí: https://mierda.tv/descargas/test.tar.gz

El código para que se vea eso y se escuche sonido de fondo es este:

function love.load()
        --love.window.setFullscreen(true, "desktop") -- set the window to fullscreen
        font = love.graphics.newFont("Elementary_Gothic_Bookhand.ttf", 12)
        texto = "Hace más de 500 años en los bosques de blabla cerca de ddjf4js"
        anchoTexto = 300

        screen = {}
        screen.w, screen.h = love.graphics.getDimensions()
        screen.wc = screen.w / 2 -- x center screen
        screen.hc = screen.h / 2 -- y center screen

        fondo = {}
        fondo.img = love.graphics.newImage("fondo.jpg")
        fondo.w, fondo.h = fondo.img:getDimensions()
        fondo.wc = fondo.w / 2 -- x center fondo.img
        fondo.hc = fondo.h / 2 -- y center fondo.img
end

function love.draw()
        music = love.audio.newSource("awesome_wishes_from_the_dawn.ogg")
        music:play()

        love.graphics.setColor(255, 255, 255)
        love.graphics.draw(fondo.img, (screen.wc-fondo.wc), (screen.hc-fondo.hc))

        love.graphics.setColor(95, 55, 27)
        love.graphics.setFont(font)
        love.graphics.printf(texto, screen.wc-(anchoTexto/2), screen.hc+fondo.hc, anchoTexto, right)
end

Lo importante del código es la parte en la que se ve como podemos colocar el texto indicando el tamaño que queremos que tenga en pixeles y si queremos que esté alineado a la izquierda (left), a la derecha (right) o centrado (center).

El fragmento de código:

love.graphics.printf(texto, screen.wc-(anchoTexto/2), screen.hc+fondo.hc, anchoTexto, right)

Se ve claro que se indica como parámetros de esa función:

– Texto: un texto que queremos que se muestre. Lo hemos declarado en la variable texto.
– Posición x: la coordenada x que queremos.
– Posición y: la posición y en la que deseamos que salga el texto.
– Ancho del texto: Los pixeles que ocupará como máximo el texto.
– Alineado: right, left, center

Esta forma de colocar un texto la comentamos a groso modo ya en el articulo: https://mierda.tv/2017/12/19/love-reproducir-ogg-y-mostrar-texto-con-una-tipografia-ttf/.

La diferencia con la otra entrada es que esta vez estamos colocando texto con ancho fijado y junto a otros elementos.

Por otro lado se puede apreciar que hemos dado color al texto. Cosa que en la otra entrada no se indicó.

Existen más formas de mostrar texto aunque esta es buena creo.

Deja un comentario