Aula de SDL 2: Carregando e Exibindo Imagens

Olá pessoal, bem-vindo a mais uma aula de Sdli 2. Nesta aula eu vou falar de imagens, de como você carregar uma imagem e mostrar na tela do jogo essa imagem. Vamos começar com o formato BNP que já vem carregamento, uma função disponível no Sdli 2. Vamos usar biblioteca Sdli e mg para carregar os formatos como JPG e PNG. Vamos começar primeiro de tudo, deixa eu rodar o jogo para ver onde está. Temos um mensagem inicial na tela com gente e tal. Está vendo que o carácter e o ícordaceto estão funcionando, deixa eu te mostrar como consertar isso bem rapidinho. Se você pode mostrar onde é que você pode ver a referência. Se você for em documentação do Sdli ttf e na sessão 3 funções e 3.4 render renderização a gente está usando render text solid que você lembra aqui no arquivo jogo.cpp na linha 180. Estamos usando o ttf render text solid e tem um assento, esse carácter não aparece no codificador de lat 1. Então a gente vai mudar para o tf8 que tem o assento. Então para fazer isso só mudar a função, em vez de ser o ttf render text solid basta usar o ttf render o tf8 solid. Isso vai consertar o problema do assento não aparecer. Vamos lá no terminal, vou recompilar e rodar o meu jogo. Agora o assento aparece, saída, assaída. O í de saída agora aparece com o assento em vez daquele carácter incorreto. Vamos continuar na imagem. Eu quero mostrar uma imagem na tela quando o jogo começa. Por exemplo, a objetivo é atravessar o labirinto contra a saída e mostrar a imagem de uma pessoa andando ou correndo no meio da tela. Então primeiro de tudo você precisa ter um arquivo de uma imagem. Encontre a imagem que você queira mostrar na tela. No meu caso quero mostrar alguém correndo. Por exemplo, fiz uma busca aqui, palavra-chave-run, clipe-art e achei essa imagem e gostei. Clicando na imagem salvo, só vai imagem como. Essa imagem está muito grande para mim. E o formato para eu começar a te demonstrar como fazer o negócio. O formato dessa imagem era JPD, mas como o CSDL por padrão não dá para rodar JPD, não tem função para isso. Eu converti para BMP só para te mostrar. A BMP tem uma função já no Sdl, que é Sdl load BMP. Mas isso é só para demonstração. Claro que ninguém vai usar BMP. BMP, se você olhar o tamanho aqui, comparado BMP, o JPD, por exemplo, a imagem que eu tinha aqui trofé 1.2 megabytes do BMP é 77.7. Então ninguém usa BMP para usar PNG ou JPD e tal. Esse caso aqui no jogo simples. Está pronto. Então para eu redimensionar a imagem usando o GIMP, programa de editor de imagens. Eu abri a imagem, arrasto para a tela, clique em imagem, redimensionar a imagem. Aí eu coloquei o tamanho que eu queria com as proporções aqui, só mudar eu queria a altura 240, a proporção modificou a largura automaticamente. É de clicar redimensionar e salvo. Aí você pode ou salvar ou pode exportar como, botei export as. Como eu queria é só demonstrar o BMP, eu sabei como o formato aqui BMP, imagem BMP do Windows e clicar exportar. E ele vai cargar lá o arquivo aqui correndo ponto BMP. Vai criar esse arquivo. Tá bom, então vamos lá usar esse load BMP aqui. Então da mesma maneira que eu carguei aqui, eu pudei fazer da mesma maneira carguei as fontes. Cargar fontes, carregar imagens. Eu deveria até fazer algum sistema para armazenar imagens e tal. Eu vou deixar com exercício se você quiser fazer esse sistema. Só para demonstração eu vou carregar a imagem mesmo lá no game loop, que é na função rodar da classe jogo. Então aqui no rodar, para demonstrar mesmo, demonstração, vou criar uma superfície para essa imagem. Então vamos chamar essa IDL load BMP. Você passa como string, né? O caminho do arquivo nesse caso está no mesmo diretor, você vai ver que você corre no ponto BMP. A fonte vira e vou atribuir a um variável. Retorna um ponteiro para SdlSurface, vou chamar na superfície da imagem inicial. De acordo com a documentação que eu tenho no navegador no lado esquerdo da tela, o Sdl load BMP vai retornar o ponteiro para SdlSurface, ou se houver erro vai ser no. Retorna no se houver um erro. Então a gente vai checar se não tiver superfície da imagem inicial, e se a exclamação da imagem inicial houver erro, vamos fazer mesmo o que a gente fez nos erros de carga. A gente fazia o SdlLog com a GetError, Exit3. Então vamos fazer SdlLog, eu vou carregar a imagem para o CentOS. SdlLog GetError, nesse caso porque o erro vem do SdlLog. Vamos dar um Exit, vou falar 4. Vamos logar a imagem e tal e tal, vamos ver se funciona aqui. Vou deixar isso como não, só para testar. Então, info erro carrega a imagem, nesse caso não tem nenhum erro, mas fez alguma coisa, saiu do programa. Eu vou revertir essa mudança, vou continuar. Vou lidar com o erro e tal, quando a gente carrega essa superfície, a gente vai precisar utilizá-la no decorrer do jogo. No início, se você só vai usar no início, a gente poderia optimizar para não usar mais depois disso, mas eu só vou descarregar a imagem no final quando o programa terminar mesmo. Então vamos lá para o jogo, cadê? Desligar, na verdade ligar, não, a gente não fez o sistema de imagens, não tem sistema de imagens, então vamos lá no final de rodar, depois do loop. Vou dar Sdl de surface para poder deslocar a memória que foi alocada para essa superfície. Então a superfície da imagem inicial será livre depois do loop, para não criar a memory leaks. Pronto, com isso a imagem foi carregada, agora é a hora de a gente mostrar a imagem na tela. Eu gostaria de mostrar essa imagem só nos primeiros 10 segundos do jogo, que mostra aquela mensagem de objetivo. Então vou usar o mesmo timer que eu tenho aqui, da mensagem de objetivo para poder mostrar essa imagem. Então no loop aqui, na linha 194 tem o isle dentro da função rodar. Na parte de mostrar a mensagem de objetivo aqui, na linha 212f, mostrar mensagem de objetivo, você dá o bleed surface para mostrar aquele texto. Vou fazer outro bleed surface, dar o bleed surface. Agora com a superfície da imagem inicial, a vígula, o retângulo de origem. Nesse caso, queria clarificar aqui o bleed surface, poder não ter mais confusão. O que significa esses argumentos? O primeiro é a superfície que a gente quer copiar, aí a gente vai espécie de pintar em outra sobre outra. Agora esse source rack, retângulo de origem, diz aqui na documentação que o retângulo de origem determina o tamanho do retângulo a ser copiado. Então ele vai, se você tiver a imagem, se for no, ele vai copiar a imagem toda. Mas se você determinar o retângulo e você definir o tamanho, largura e altura, você pode fazer um clipe daquela imagem inteira. Então você quer copiar só uma parte da imagem, você pode definir nesse source rack. Agora o source rack é que define o tamanho a ser copiado, não é o destino. Acho que eu tinha confundido anteriormente aqui quando tinha feito o texto. Na realmente não importa o quarto argumento que a gente vai ver aqui. Então vamos pintar na Windows Surface e no quarto argumento que vai ser o endereço do destino da mensagem, mensagem não, imagem inicial. Agora o destino da imagem inicial, esse rack a gente vai criar aqui em cima, vamos aqui da mesma maneira na nova linha 193, a palavra sdli rack, destino da imagem inicial igual, agora vai ter o x e o y, vou escrever já, e o largura e altura. Agora largura e altura que não importa na verdade, eu tinha confundido aqui, mas isso não importa. O que diz na documentação aqui, no caso do quarto argumento que é o destino, ele diz aqui somente a posição do destino é utilizada, isto é o x e o y. A largura e altura que é width e height são ignoradas. Então na verdade isso não importa nesse 184, 185. Quem define esse aqui vai ser o retângulo de origem, o tamanho da imagem. Quem define a qual parte da imagem vai ser copiada o tamanho de origem. Agora, no caso de tamanho da imagem, por exemplo, se eu quiser se aumentar a imagem ou diminuir a imagem, aí não dá na verdade. Se você quiser diminuir o tamanho da imagem ou aumentar o tamanho da imagem, aí no meu caso eu tive que usar o Gimp para poder manipular a imagem e salvar em outro tamanho. Então a biblioteca sdli aqui, nesse caso que a gente está usando sdli no caso do DTF, nesse caso aqui o bleed surface não vai mudar, manipular a imagem e modificar as suas dimensões para aumentar o tamanho para ficar a imagem maior ou menor, não tem isso. Só pode fazer o clip, que é capturar uma sub-parte, uma sub-area da imagem. Eu estaria de clarificar isso no bleed surface. Agora vamos continuar. Então queria mostrar essa imagem no meio da tela mesmo. Como é que eu vou mostrar a imagem no meio da tela? Eu vei aqui, cadê o jogo? No meiozinho da tela vai ser como? Então, destino a que vai determinar onde na superfície da janela, aqui vai ser pintado. Eu quero no meio mesmo. No meio, vamos olhar na dimensão X. Em dimensão X, eu tenho uma variável que tem o tamanho da tela em dimensão X, que é 640, que é o Window Height, eu sei que é 640, então para poder colocar no meio vai ser o seguinte, você pega o 640, divide por 2, que é 320, vai estar aqui bem no meio. Mas a gente não pode pintar começando do 320, porque aí a imagem vai aparecer mais para o lado direito. Então a gente tem que diminuir, reduzir pela metade da imagem. Se você pegar metade da imagem e subtrair esse 320, você vai bater lá no local desejado. Então, menos o, nesse caso, superfície da imagem inicial, a traço maior que a W, que é a largura, dividido por 2. Como a gente pode fatorar aqui, eu posso colocar 640 menos isso, dividido por 2. E para altura é a mesma coisa, só pegar a altura. Nesse caso eu posso usar a variável, que é Window Width, aqui seria 480 para a altura, então 480 dividido por 2, menos superfície da imagem inicial, traço maior que a H, que é a altura, dividido por 2. Então posso fatorar, então vai ser o 480 menos a altura da superfície da imagem inicial, dividido por 2, usa variável por 440, que é Window Width, H, I, G, HT. Há 2.0, agora vou lá para ver se eu corre de ponto de vírgula aqui no linha dos S20. Então vamos ver no que dá isso. Vamos compilar e rodar. Está aí o menino correndo aparece nos primeiros 10 segundos do jogo. Está certo? Mais uma vez aí. Então vamos revisar aqui, pessoal. Então... Para poder carregar a imagem BMP, tinha uma Sdl load BMP, passo o caminho da imagem, isso retorna o ponteiro para Sdl surface, ou não, se tiver erro, no caso do erro, a gente checa aqui e lhe dá com o erro. E depois disso, quando tiver imagem, superfície da imagem, criamos um retângulo por destino da imagem inicial, que era no meio da tela. Você pode pegar a largura da tela e dessa largura subtrai a largura da imagem e dividir por 2 para poder centralizar a posição, para começar a pintar que vai pegar no centro. A mesma coisa para a altura. A altura da tela menos a altura da imagem, isso tudo dividir por 2 para poder centralizar a posição. E depois disso, no WIF, de mostrar mensagem de objetivo, enquanto mostrar mensagem de objetivo, vou ver o verdadeiro, da oblate surface de superfície da imagem inicial, no para o source rack, destino a window surface, o retângulo de destino, o endereço de destino da imagem inicial. E não se esqueça, no final, quando não precisar mais da imagem, na superfície da imagem, você dá o SDL Free Surface, um superfície da imagem inicial para não criar nenhum liquid em memória. Está certo pessoal? Então, vamos fazer uma pausa aqui e depois eu vou te mostrar como rodar, cargar imagens de outros formatos como o PNG. Até mais!