12
respostas

Ator não aparece mais

Pessoal, alguém poderia me ajudar?

Estou dividindo o código em vários arquivos, e agora, não é mais exibido o ator, a "vaquinha".

Seguem os códigos e os respectivos arquivos:

imagens.js

// Variáveis
let imagemDaEstrada;
let imagemDoAtor;
let imagemCarro;

function preload() {
  imagemDaEstrada = loadImage("imagens/estrada.png");
  imagemDoAtor = loadImage("imagens/ator-1.png");
  imagemCarro = loadImage("imagens/carro-1.png");
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="imagens.js"></script>
    <script src="ator.js"></script>
  </body>
</html>

sketch.js

// Variáveis de carros
let xCarro = 600;

function setup() {
  createCanvas(500, 400);
}

function draw() {
  background(imagemDaEstrada);
  mostraCarro();
  movimentaCarro();
}

function mostraCarro() {
  image(imagemCarro, xCarro, 40, 50, 40);
}

function movimentaCarro() {
  xCarro -= 2;
}  

ator.js

// Variáveis do ator
let yAtor = 366;
let xAtor = 100;

function mostraAtor() {
  image(imagemDoAtor, xAtor, yAtor, 30, 30); // X, Y, largura, altura
}

function movimentaAtor() {
  if(keyIsDown(UP_ARROW)) {
    yAtor -= 3;
  }
  if(keyIsDown(DOWN_ARROW)) {
    yAtor += 3;
  }
  if(keyIsDown(LEFT_ARROW)) {
    xAtor -= 3;
  }
  if(keyIsDown(RIGHT_ARROW)) {
    xAtor += 3;
  }
}

Tudo estava funcionando bem, até eu começar a criar arquivos e mudar código de lugar, seguindo as instruções do instrutor.

E, sim, já subi as imagens também para o P5.JS...rsrsrs :)

Grato pela ajuda.

12 respostas

Olá, Marcos! Tudo bem contigo?

O que faltou foi chamar a função mostraCarro()dentro da função draw()


function draw() {
  background(imagemDaEstrada);
  mostraCarro();
  mostraAtor();
  movimentaCarro();
}

Faça esse teste e nos dê um retorno!

Um abraço e bons estudos

Olá Cássio!

Tudo bem, e você?

Então, mas o que está acontecendo, é o ator não aparecer. A função mostraCarro() já está no sketch.js. E no ator.js, já existe uma função mostraAtor(), da seguinte maneira:

function mostraAtor() {
  image(imagemDoAtor, xAtor, yAtor, 30, 30); // X, Y, largura, altura
}

O que poderia estar acontecendo? :)

Caso seja necessário, o link para o projeto é esse:

https://editor.p5js.org/marcos.zy/present/MuxtTXNGH

Opa, Marcos!

Agora vendo o projeto fica mais fácil para identificar rs

O que acontece é que ao criar a função mostraAtor()espera-se receber cinco parâmetros = a imagem, a posição X, a posição Y, Largura e Altura.

Neste caso ele só esta recebendo a imagem, largura e altura.

Veja o erro abaixo:

Erro xAtor

Erro yAtor

Para resolvermos isso, basta darmos valores às variáveis do X e Y do ator. Então "bóra" rs

// Variáveis do Ator
let xAtor = 85;
let yAtor = 366;

Veja se deu tudo certo, Marcos!!

Fico no aguardo, meu amigo!!!

Oi Cássio, obrigado. :)

Então, é que eu estava mexendo. O código já tinha essa variável. :(

Dá uma olhadinha lá agora, se puder. Continua não aparecendo o ator, e aparentemente, está tudo certo.

Grato, fico no aguardo. Obrigado mais uma vez.

Se retorno todo o código (que foi separado) para o sketch.js, funciona. Mas, separando conforme o Guilherme, o instrutor, explica, não funciona. :(

Vi que o arquivo ator.jsestá dentro da pasta imagens.

Crie um arquivo ator.jsfora da pasta imagens. Isso vai resolver!

Eu até testaria aqui, mas eu não consigo criar arquivos ou pastas no projeto!

Faça isso e me retorne ;-)

Estou no aguardo

Opa, valeu Cássio!

Mas, fiz isso, colei nele todo o conteúdo, e continua igual. :(

Teste aí, ser puder, por gentileza. :)

Maaarcos... esqueci de dizer para chamar a função mostraAtor()dentro da função draw()

Teste aí!!!

Agora sim...rsrsrs

Obrigado. Puxa, mas o professor podia ter dito esse tipo de coisa em aula, não? rsrsrsrs

Tive também de inserir a função movimentaAtor() , dentro do sketch.js . :)

Muito obrigado, Cássio!

Boa, Marcos!!!

Valeu, meu amigo!!!

Solucionamos \o/

Qualquer dúvida nos procure

Um abração!!

Com certeza! :)

Muito obrigado, meu caro!

Grande abraço, e ótimo dia pra você!