CODEWITHSUNDEEP
javascriptarraysp5.jsp5.play
grammamoocow
grammamoocow

Reputation: 31

placing sprites using an array

I am trying to place sprites on a canvas using an array however I an unable to get the sprites to draw correctly.

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

'''

I know the issue is the xy location of the spr=createsprite line but I cant seem to figure it out. anyone able to give me some pointers?

Upvotes: 1

Views: 556

Answers (1)

Paul Wheeler
Paul Wheeler

Reputation: 20140

Your code had a number of minor issues. It's hard to say for sure that that's all the problems because you didn't include the runnable code (there could be an issue with the versions of p5.play and p5.js you were referencing).

// 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>

I think your instructor needs to teach the entire class the basics of JavaScript debugging and troubleshooting.

Upvotes: 1

Related Questions