Estoy tratando de colocar sprites en un lienzo usando una matriz, sin embargo, no puedo hacer que los sprites se dibujen correctamente.
function preload() { fileContent = loadStrings('track.txt'); grasssprite= loadImage('grass.png'); tracksprite= loadImage ('track.jpg'); } function setup() { createCanvas(500, 500); racetrack = new Array(fileContent.length); for (let i = 0; i < racetrack.length; i++) { let tiles = splitTokens(fileContent[i]); for (let k = 0; k < racetrack.length; k++) { spr = createSprite(i * 1 + 1, k * 10 + 1, 1, 1); if (tiles[i] == "1") { spr.addImage(grasssprite); } if (tiles[i] == "0") { spr.addImage(tracksprite); } } } } function draw() { background(220); drawSprites() } the txt file looks like this: 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 1 1 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 1 0 0 1 0 0 0 0 1 0 0 0 0 1 0 1 0 0 1 0 0 0 0 1 1 1 1 1 1 0 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0'''
Sé que el problema es la ubicación xy de la línea spr=createsprite, pero parece que no puedo resolverlo. ¿alguien puede darme algunos consejos?
Su código tenía una serie de problemas menores. Es difícil decir con certeza que esos son todos los problemas porque no incluyó el código ejecutable (podría haber un problema con las versiones de p5.play y p5.js a las que hacía referencia).
// You should pre-declare variables before assigning them // This isn't mandatory but it is a good practice let grassprite; let tracksprite; let fileContent; let racetrack; // You were drawing sprites 1x1 which is very small const spriteSize = 5; function preload() { grasssprite = loadImage("https://www.paulwheeler.us/files/stackoverflow69240406/grass.png"); tracksprite = loadImage("https://www.paulwheeler.us/files/stackoverflow69240406/road.png"); fileContent = loadStrings("https://www.paulwheeler.us/files/stackoverflow69240406/track.txt"); } function setup() { createCanvas(500, 500); // You may need to resize your images to match your sprite dimensions grasssprite.resize(spriteSize, spriteSize); tracksprite.resize(spriteSize, spriteSize); racetrack = new Array(fileContent.length); for (let i = 0; i < racetrack.length; i++) { let tiles = splitTokens(fileContent[i]); // There's no point in having a racetrack array if you aren't going to put // anything in it. This may or may not be useful later. // Perhaps you actually want to have an array containing your sprites? racetrack[i] = tiles; // You should be using tiles.length here instead of racetrack.length // Although since your track.txt file is square it would still technically work for (let k = 0; k < tiles.length; k++) { let spr = createSprite(i * spriteSize + 1, k * spriteSize + 1, spriteSize, spriteSize); // you were reading tiles[i], you meant tiles[k] if (tiles[k] == "1") { spr.addImage(grasssprite); } if (tiles[k] == "0") { spr.addImage(tracksprite); } } } } function draw() { background(220); drawSprites(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://www.paulwheeler.us/files/p5.play.js?r=0"></script>Creo que su instructor debe enseñar a toda la clase los conceptos básicos de la depuración y solución de problemas de JavaScript.