O que é frameCount no p5.js?
No p5.js, o framecount (ou frameCount em código) é uma variável interna que conta o número de quadros (frames) que foram renderizados desde o início da execução do programa. Ele é útil para controlar ou sincronizar eventos ao longo do tempo em uma animação ou simulação.
Características do frameCount
Incremento automático: O
frameCounté incrementado automaticamente pelo p5.js a cada quadro renderizado.Começa em 0: Quando o programa inicia, o
frameCountcomeça em 0 e aumenta em 1 a cada quadro.Taxa de quadros (frame rate): O valor do
frameCountdepende da taxa de quadros (frames por segundo, ou FPS) definida no programa. Por padrão, o p5.js tenta rodar a 60 FPS.
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.
// Sprites do jogo
var bow, arrow, scene;
// Imagens dos elementos
var bowImage, arrowImage, backgroundImage;
var red_balloonImage, blue_balloonImage, green_balloonImage, pink_balloonImage;
// Sistema de pontuação
var score = 0;
Passo 3: Função preload()
A função preload() é usada para carregar imagens e animações antes do jogo iniciar.
loadImage("background0.png"): Carrega a imagem do fundo do jogoloadImage("bow0.png"): Carrega a imagem do arco do jogadorloadImage("arrow0.png"): Carrega a imagem da flechaloadImage("red_balloon0.png"): Carrega a imagem do balão vermelholoadImage("blue_balloon0.png"): Carrega a imagem do balão azul
function preload(){
backgroundImage = loadImage("background0.png");
bowImage = loadImage("bow0.png");
arrowImage = loadImage("arrow0.png");
red_balloonImage = loadImage("red_balloon0.png");
blue_balloonImage = loadImage("blue_balloon0.png");
green_balloonImage = loadImage("green_balloon0.png");
pink_balloonImage = loadImage("pink_balloon0.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 cenário de fundo:
scene = createSprite(200,200);
scene.addImage(backgroundImage);
scene.scale = 2.5;
createSprite(200,200): Cria o sprite do fundo posicionado no centroaddImage(backgroundImage): Adiciona a imagem de fundoscale = 2.5: Ajusta o tamanho do cenário
Agora criamos o arco do jogador:
bow = createSprite(380,220,20,50);
bow.addImage(bowImage);
bow.scale = 1;
createSprite(160,340,20,20): Cria o sprite do personagem na posição desejada.scale = 1: Ajusta o tamanho do personagem.addImage(bowImg): Adiciona a imagem do personagem ao sprite.
Passo 5: Função draw()
background(0): Define o fundo da tela como preto.bow.y = World.mouseY: Faz com que o arco siga a posição do mouse no eixo Y.
function draw() {
background(0);
// Movimento do cenário
scene.velocityX = -3;
if(scene.x < 0) {
scene.x = scene.width/2;
}
// Controle do arco
bow.y = World.mouseY;
Agora, usaremos frameCount para controlar a frequência com que os balões aparecem na tela:
var select_balloon = Math.round(random(1,4));
switch(select_balloon) {
case 1:
redBalloon();
break;
case 2:
blueBalloon();
break;
case 3:
greenBalloon();
break;
case 4:
pinkBalloon();
break;
default:
break
}
Math.round(random(1,4)): Escolhe aleatoriamente um tipo de balão para aparecer (1 a 4).switch(select_balloon): Verifica o número gerado e executa a função correspondente.case 1: redBalloon();– Se o número for 1, cria um balão vermelhocase 2: blueBalloon();– Se o número for 2, cria um balão azulcase 3: greenBalloon();– Se o número for 3, cria um balão verdecase 4: pinkBalloon();– Se o número for 4, cria um balão rosa
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.
Passo 6: Criando a função para gerar os balões vermelhos
A função redBalloon() é chamada continuamente para criar os balões vermelhos na tela da animação.
frameCount % 100 == 0: Cria um novo sprite a cada 100 quadros.Math.round(random(20, 370)): Faz com que o balão apareça em posições aleatórias no eixo Y.createSprite(0, Math.round(random(20, 370)), 10, 10): Cria o sprite na posição definida.addImage(appleImg): Adiciona a imagem do balão vermelho ao sprite.scale=0.1: Define o tamanho do sprite.velocityY = 3: Define a velocidade horizontal de movimento.lifetime = 150: Evita consumo excessivo de memória ao remover sprites antigos.
function redBalloon() {
if (frameCount % 100 == 0) {
var red = createSprite(0, Math.round(random(20, 370)), 10, 10);
red.addImage(red_balloonImage);
red.scale = 0.1;
red.velocityX = 3;
red.lifetime = 150;
}
}
Passo 7: Criando a função para gerar os balões azuis
A função blueBalloon() é chamada continuamente para criar os balões azuis na tela da animação.
frameCount % 80 == 0: Cria um novo sprite a cada 80 quadros.Math.round(random(20, 370)): Faz com que o balão apareça em posições aleatórias no eixo Y.createSprite(0, Math.round(random(20, 370)), 10, 10): Cria o sprite na posição definida.addImage(blue_balloonImage): Adiciona a imagem do balão azul ao sprite.scale=0.1: Define o tamanho do sprite.velocityY = 3: Define a velocidade horizontal de movimento.lifetime = 150: Evita consumo excessivo de memória ao remover sprites antigos.
function blueBalloon() {
if (frameCount % 100 == 0) {
var blue = createSprite(0, Math.round(random(20, 370)), 10, 10);
blue.addImage(blue_balloonImage);
blue.scale = 0.1;
blue.velocityX = 3;
blue.lifetime = 150;
}
}
Passo 8: Criando a função para gerar os balões verdes
A função greenBalloon() é chamada continuamente para criar os balões verdes na tela da animação.
frameCount % 140 == 0: Cria um novo sprite a cada 140 quadros.Math.round(random(20, 370)): Faz com que o balão apareça em posições aleatórias no eixo Y.createSprite(0, Math.round(random(20, 370)), 10, 10): Cria o sprite na posição definida.addImage(green_balloonImage): Adiciona a imagem do balão verde ao sprite.scale=0.1: Define o tamanho do sprite.velocityY = 3: Define a velocidade horizontal de movimento.lifetime = 150: Evita consumo excessivo de memória ao remover sprites antigos.
function greenBalloon() {
if (frameCount % 140 == 0) {
var green = createSprite(0, Math.round(random(20, 370)), 10, 10);
green.addImage(green_balloonImage);
green.scale = 0.1;
green.velocityX = 3;
green.lifetime = 150;
}
}
