I've created the p5 code underneath here to create a track using a text file. I believe they are called tile maps.
I am using an online editor and have the .png's saved in a folder called sprites in the same folder as the code. Does anyone have any clue on why this is happening and if there are any errors within my code. Thanks in Advance!
This is the map in a .txt file called track.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]];
}
I cannot reproduce whatever problem you are experiencing. Your code has no drawing code or other way to see that the loading step is complete. It's possible that there is some issue with your assets, but it is impossible to tell from the information you have provided. You should check the console for errors and include anything relevant in your question.
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>