Opa!
Alguém poderia me dizer qual comando eu posso usar para alterar o sprite do ator com a movimentação, no caso só dois frames mesmo, sendo esses abaixo, cada um em sua respectiva direção.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Opa!
Alguém poderia me dizer qual comando eu posso usar para alterar o sprite do ator com a movimentação, no caso só dois frames mesmo, sendo esses abaixo, cada um em sua respectiva direção.
Olá João, tudo bem?
A imagem do personagem de costas foi nomeada zelda_up e a de frente zelda_down.
Para alterar o sprite do ator com a movimentação faremos alterações em 2 áreas do nosso código, imagens.js e ator.js.
Em imagens.js declaramos a variável spriteAtual, essa variável vai ser usada para alterar entre as 2 imagens que são carregadas na imagemAtor. Sendo a imagemAtor uma lista com 2 itens, o primeiro ocupando a posição 0 e o segundo a posição 1.
//Nova variável do sprite atual do personagem
let spriteAtual;
//Um load referente ao sprite em uso no momento e outro para a mudança de sprite usando uma lista
function preload(){
spriteAtual = loadImage("imagens/zelda_up.png");
imagemAtor = [loadImage("imagens/zelda_up.png"), loadImage("imagens/zelda_down.png")];Em ator.js, modificamos a função mostraAtor() para mostrar o sprite atual, dessa forma o sprite do personagem sempre será a ultima imagem atribuída a esta variável:
//Mostra imagem do ator
function mostraAtor() {
image(spriteAtual, xAtor, yAtor, 30, 30);
}
//Mostra spriteAtual
function mostraAtor() {
image(spriteAtual, xAtor, yAtor, 30, 30);
}Adicionamos na função de movimento do ator a mudança das imagens, por meio da variável spriteAtual mudaremos entre a primeira ou segunda imagem da lista dependendo da tecla pressionada:
function movimentaAtor() {
if(keyIsDown(UP_ARROW)){
yAtor -= 3;
//Mudamos o sprite atual para a primeira imagem na lista
spriteAtual = imagemAtor[0];
}
if(keyIsDown(DOWN_ARROW)){
if (podeSeMover()) {
yAtor +=3
//Mudamos o sprite atual para a segunda imagem na lista
spriteAtual = imagemAtor[1];
}
}
}Prontinho! Com isso modificamos o código para que seja alterada as imagens de acordo com o movimento, segue o código completo para visualização:
Caso surja qualquer dúvida estamos à disposição, conte conosco!
Um bom dia e bons estudos.
Muito obrigado, amigo! Era exatamente isso que eu queria.