Por enquanto, usaremos o seguinte site para nossas imagens, o link a seguir leva diretamente a imagem do Pingu: https://caz-creates-games.itch.io/lil-penguin-character-sprite
Crie uma pasta chamada assets e adicione os arquivos terminados em .png a ela.
No arquivo personagem.js, adicione uma constante chamada CHAR_IDLE_IMG_PATH e atribua a ela o caminho para o arquivo idle. O caminho é sempre com referência ao local do seu arquivo sketch.js, portanto, o caminho ficará "assets/lil penguin idle.png”.
Adicione outra variável, usando var, chamada CHARIMG e deixe ela sem valor por enquanto.
No arquivo sketch.js, adicione o código abaixo, antes da função setup:
function preload() {
CHARIMG = loadImage(CHAR_IDLE_IMG_PATH);
}
// Seu function setup()...
Imagens, músicas e qualquer tipo de mídia devem ser carregados dentro da função preload()!
Agora, volte para o arquivo personagem.js, e ao invés de um quadrado, use a função image para desenhar o Pingu (a imagem que carregamos) ao invés do quadrado.
A imagem, diferente do retângulo, não é alterada quando usamos o rectMode. Ela sempre é desenhada a partir do canto superior esquerdo. Para ajustar a posição do personagem, precisamos acessar a largura da imagem. Podemos fazer isso usando charSize. Seu canvas deve estar parecido com a imagem abaixo:
O problema agora é que nosso Pingu virou o Michael Jackson! Precisamos inverter a imagem quando trocar a direção. Comece criando uma variável baseSpeed, usando o let, que possui valor inicial 3. Agora, caso não exista, crie outra variável chamada speed que não possui um valor inicial. Quando o personagem mover para frente (direita) o valor de speed deve ser baseSpeed. Já quando mover para esquerda, deve ser -baseSpeed.
Agora, na sua função drawCharacter(), adicione os comandos push() como seu primeiro comando e o pop() como sendo o último. Essas funções fazem com que as transformações que fizermos sejam aplicadas apenas aqui. Por exemplo, se usássemos um rectMode(CENTER), ele se aplicaria apenas entre o push() e pop().
Dessa forma, o código do seu drawCharacter() deve estar parecido com o abaixo:
function drawCharacter() {
push();
image(CHARIMG, charX - charSize/2, charY - charSize/2);
pop();
}
Vamos para a parte complicada, que é inverter a imagem horizontalmente. Para isso, precisaremos inverter o próprio eixo X! Primeiro, precisamos identificar quando o nosso personagem está voltando. Podemos usar nossa variável speed para isso. Tendo identificado o momento no qual o personagem está voltando, nós invertemos o eixo X e alteramos a coordenada X do personagem para manter a posição. Use o código abaixo para isso.
// Inverte o eixo X fazendo com o Pingu mude de direção
scale(-1, 1);
// Altera a posição X na qual o personagem é desenhado, mantendo
// a posição quando o eixo é invertido
image(CHARIMG, -(charX + charSize/2), charY - charSize/2);
Atualmente, nosso pinguim parece um peso morto. Vamos animar as coisas por aqui dando um pouco de movimento para ele.