Lidando com sprites em JavaScript
Se você já desenvolveu jogos ou animações em JavaScript, provavelmente já ouviu falar do termo “sprite”. Mas o que exatamente é um sprite e como ele é usado no desenvolvimento de jogos?
O que é um Sprite?
Um sprite é um elemento visual usado em jogos e animações para representar um personagem, objeto ou cenário. No JavaScript,a biblioteca p5.js facilita o manuseio de sprites.
Agora, vamos entender um exemplo de código que cria um sprite animado usando JavaScript e a biblioteca p5.play.
Explicando a animação
Aqui está a animação que usaremos como referência:
Passo 1: Configurando o ambiente
Antes de começarmos a programar, certifique-se de ter um ambiente de desenvolvimento configurado:
Um editor de código (VS Code)
- Um navegador (Google Chrome)
Arquivo de template
Passo 2: Declaração de variáveis
Aqui, estamos declarando as variáveis que serão usadas para armazenar os sprites e suas imagens.
var path, boy, leftBoundary, rightBoundary;
var pathImg, boyImg;
Passo 3: Função preload()
A função preload() é usada para carregar imagens e animações antes do jogo iniciar.
loadImage(“path.png”): Carrega a imagem da pista para ser usada como plano de fundo.
loadAnimation(“Runner-1.png”,”Runner-2.png”): Cria uma animação para o personagem usando uma sequência de imagens.
function preload(){
pathImg = loadImage("path.png");
boyImg = loadAnimation("Runner-1.png","Runner-2.png");
}
Passo 4: Função setup()
A função setup() é executada apenas uma vez e configura o ambiente do jogo.
createCanvas(400,400): Cria um canvas de 400×400 pixels.
function setup(){
createCanvas(400,400);
Agora criamos o sprite do fundo da pista:
// Criando o fundo da pista
path = createSprite(200,200);
path.addImage(pathImg);
path.velocityY = 4;
path.scale = 1.2;
createSprite(200,200): Cria um sprite posicionado no centro da tela.
addImage(pathImg): Adiciona a imagem da pista ao sprite.
velocityY = 4: Faz com que a pista se mova para baixo.
scale = 1.2: Ajusta o tamanho da imagem.
Agora criamos o sprite do corredor:
// Criando o personagem principal
boy = createSprite(180,340,30,30);
boy.scale = 0.08;
boy.addAnimation("JakeRunning", boyImg);
createSprite(180,340,30,30): Cria o sprite do personagem na posição inicial.
addAnimation(“JakeRunning”, boyImg): Adiciona a animação ao sprite.
scale = 0.08: Reduz o tamanho do sprite.
E criamos também os sprites das bordas:
leftBoundary = createSprite(0,0,100,800);
leftBoundary.visible = false;
rightBoundary = createSprite(410,0,100,800);
rightBoundary.visible = false;
createSprite(0,0,100,800): Cria um sprite para a borda esquerda.
createSprite(410,0,100,800): Cria um sprite para a borda direita.
visible = false: Torna os sprites invisíveis para que não sejam vistos na tela, mas ainda funcionem como barreiras.
Passo 5: Função draw()
A função draw() é chamada continuamente para atualizar a tela do jogo e manter a animação fluida.
background(0);: Define o fundo como preto.
path.velocityY = 4;: Mantém o movimento do caminho.
function draw() {
background(0);
path.velocityY = 4;
Agora, precisamos garantir que o fundo volte ao início quando sair da tela:
if(path.y > 400 ){
path.y = height / 2;
}
if(path.y > 400): Verifica se o sprite do caminho saiu da tela.
path.y = height / 2;: Reposiciona o caminho para criar um efeito infinito.
Criando o movimento do corredor:
boy.x = World.mouseX;
boy.x = World.mouseX: Movimenta o jogador de acordo com o movimento do muse na posição X (esquerda e direita).
Adicionando colisão do corredor nas bordas:
boy.collide(leftBoundary);
boy.collide(rightBoundary);
boy.collide(leftBoundary): Verifica a colisão do corredor com a borda da esquerda.
boy.collide(rightBoundary): Verifica a colisão do corredor com a borda da direita.
Por fim, desenhamos todos os sprites na tela:
drawSprites();
}
drawSprites(): Exibe todos os sprites criados na tela do jogo, garantindo que a animação seja atualizada a cada quadro.
