Solucionado
Olá, estou tentando inserir a imagem da estrada no jogo mas não carrega, fica apenas aparecendo "Loading" infinito e da o seguinte erro:
p5.js says: It looks like there was a problem loading your image. Try checking if the file path (https://preview.p5js.org/imagens/estrada.png) is correct, hosting the file online, or running a local server.
Se alguém puder dar um help eu agradeço S2.
hoje, com a Alura e o Google Gemini
Oi Nicole, tudo bem?
Pelo que você comentou parece que o p5 está tendo problemas em fazer o carregamento da sua imagem. Para resolver sugiro que você verifique se os seguintes passos foram dados:
preload() :let imagemDaEstrada;
function preload(){
imagemDaEstrada = loadImage("imagens/estrada.png");
}Atente-se para a grafia do nome do arquivo para que você não coloque nenhum espaço a mais ou insira o nome com alguma letra trocada. Como o arquivo está dentro de uma pasta no p5, é necessário criar o caminho do arquivo como foi feito no código acima, iniciando pelo nome da pasta e em seguida colocando o nome do arquivo, tudo entre aspas e separados por uma barra.
draw() no interior dos parênteses da propriedade “background”:function draw() {
background(imagemDaEstrada);
} Além de tudo isso é importante que você verifique dentro do arquivo “index.html” se o arquivo “Imagens.js” faz parte da tag “body”. Caso ele não esteja ali você pode acrescentar o seguinte comando:
<script src="Imagens.js"></script>Espero que com esses passos e se atentando para os detalhes mencionados você consiga resolver o problema. Caso ainda persista esse erro, peço que me envie seu código para que eu possa te ajudar melhor.
Para compartilhar seu código do p5.js basta você estar logado na sua conta e dentro do seu projeto. Na opção File no lado superior esquerdo da tela, você irá clicar em Share e em seguida irá escolher o último link que redirecionará diretamente para os comandos criados.
Grande abraço e bons estudos!
Olá Rodrigo, fiz passo a passo do recomendado mas ainda sim a estrada não aparece, porem o "Loding" infinito desapareceu. segue abaixo o que eu tenho feito:
https://editor.p5js.org/nicksdry/sketches/Napomoi2A
Obrigado desde já pela ajuda =D
Oi Nicole, tudo bem?
Dei uma olhada no seu projeto e identifiquei alguns erros que podemos corrigir com os seguintes passos:
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
<script src="Imagens.js"></script>
</body>
</html>let imagemDaEstrada;
function preload(){
imagemDaEstrada = loadImage("imagens/estrada.png");
}Nesse arquivo, ainda serão inseridas as variáveis para o ator e para os carros, que seguirão o mesmo padrão usado para a estrada.
setup() , responsável pela criação do canvas e pela trilha sonora do jogo;draw() , responsável por desenhar todos os componentes do jogo e realizar toda a movimentação criada pelas funções ao longo do jogo;function setup() {
createCanvas(500, 400);
}
function draw() {
background(imagemDaEstrada);
}Aproveito para lembrar que durante o curso o instrutor irá criar arquivos com o final .js para o ator e para os carros e dentro de cada arquivo serão escritos os comandos específicos para cada parte do jogo, portanto atente-se para separar adequadamente os códigos e manter seu projeto organizado.
Espero ter ajudado. Caso tenha outras dúvidas, estarei à disposição.