时间戳

首页 > 解决方案 > p5 tiledmap 卡在加载中

javascript - p5 tiledmap 卡在加载中

问题描述

我在这里创建了 p5 代码，以使用文本文件创建轨道。我相信它们被称为瓷砖地图。

我正在使用在线编辑器并将 .png 保存在与代码相同的文件夹中名为 sprites 的文件夹中。有没有人知道为什么会发生这种情况以及我的代码中是否有任何错误。提前致谢！

这是名为 track.txt 的 .txt 文件中的地图

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 1 1 1 1 1 1 1 0 0 0 0 0
0 0 0 1 0 0 0 0 0 1 1 0 0 0 0
0 0 0 1 0 0 0 0 0 0 1 1 0 0 0
0 0 1 1 0 0 0 0 0 0 0 1 0 0 0
0 1 1 0 0 0 0 0 0 0 0 1 0 0 0
0 1 0 0 1 1 1 0 0 1 1 1 0 0 0
0 1 0 0 1 0 1 0 0 1 0 0 0 0 0
0 1 0 0 1 0 1 0 0 1 1 1 1 1 0
0 2 0 0 1 0 1 1 0 0 0 0 1 1 0
0 1 0 0 1 0 0 1 1 0 0 0 0 1 0
0 1 0 0 1 0 0 0 1 0 0 0 0 1 0
0 1 1 1 1 0 0 0 1 0 0 0 1 1 0
0 0 1 1 0 0 0 0 1 1 1 1 1 1 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0  



This is the code:
let track = [];
let images = [];

function preload() {
  images[0] = loadImage("sprites/grass.png");
  images[1] = loadImage("sprites/road.png");
  images[2] = loadImage("sprites/finish.png");
}

function setup() {
  createCanvas(400, 400);
  loadStrings("track.txt", getTrack);
}

function getTrack(arr){
  for(let i = 0; i < arr.length; i++)
  {
    let line = arr[i].trim();  //This is to make sure trailing spaces don't break the code
    let tempArr = line.split(" ");
    track.push(tempArr);
  }
}
function getImage(col, row) {
  return images[track[col][row]];
}

标签： javascriptp5.js

解决方案

我无法重现您遇到的任何问题。您的代码没有绘图代码或其他方式来查看加载步骤是否完成。您的资产可能存在问题，但从您提供的信息中无法判断。您应该检查控制台是否有错误，并在您的问题中包含任何相关内容。

let track = [];
let images = [];

function preload() {
  images[0] = loadImage("https://www.paulwheeler.us/files/stackoverflow69240406/grass.png");
  images[1] = loadImage("https://www.paulwheeler.us/files/stackoverflow69240406/road.png");
  images[2] = loadImage("https://www.paulwheeler.us/files/stackoverflow69240406/finish.png");
}

function setup() {
  createCanvas(400, 400);
  loadStrings("https://www.paulwheeler.us/files/stackoverflow69240406/track.txt", getTrack);
}

const imgSize = 20;
const padding = 2;
function draw() {
  background(255);
  for (let x = 0; x < track.length; x++) {
    for (let y = 0; y < track[x].length; y++) {
      let img = getImage(x, y);
      if (img) {
        image(
          img,
          padding + (x * (imgSize + padding)),
          padding + (y * (imgSize + padding)),
          imgSize,
          imgSize
        );
      }
    }
  }
}

function getTrack(arr) {
  for (let i = 0; i < arr.length; i++) {
    let line = arr[i].trim(); //This is to make sure trailing spaces don't break the code
    let tempArr = line.split(" ");
    track.push(tempArr);
  }
  
  console.log('track loaded');
}

function getImage(col, row) {
  return images[track[col][row]];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

推荐阅读