How to draw a game map by Processing library?

I’m going to create a map for a game that I’m making, I’m confused on how to do it. Could anyone give me some guidance or hints please? Thank you! (The library I’m using is Processing.)

Here’s my idea:

Write a txt file to represent the map, for example:

AAAAAAA
A     A
A  B  A
A     A
AAAAAAA

//A represents trees; B represents the player; space represents grass

Each alphabet represents a tile (png picture) of 20*20 pixels. I have no idea how to achieve such thing…

I’ve tried to use loadImage() to load each tile, but I can only put them at specific position one by one (coding a lot…) it’s very inefficient…

EDIT:

Thank you for all the comments! I’m getting some idea but stuck on how to get the character index of each line.

I’ve searched a lot online and find out that indexOf() will find the index, but only the first one.

For example, use index = line.indexOf("A"); for the txt file above, it will only find the index of first “A” in each line. Is there any method to solve this problem?

Answer

You can read in the txt file and use the number of characters read in the current line multiplied by the width of your texture as the X coordinate for loadImage() and the number of lines read multiplied by the height of your texture as the Y coordinate. So iterating through all characters of your txt file you would do something like this:

PImage imgTree = loadImage("treeTexture.jpg");
PImage imgPlayer = loadImage("playerTexture.jpg");
PImage imgGrass = loadImage("grassTexture.jpg");
PImage imgMissing = loadImage("missingTexture.jpg");
PImage currentTexture;
String[] lines = loadStrings("map.txt");

for (int i = 0 ; i < lines.length; i++) //Looping through all lines. i stores the current line index
{
    for (int j = 0; j < lines[i].length; j++) //Looping through all characters. j stores the current character index
    {
        if (lines[i].charAt(j) == "A")  //A switch statement would be more efficent but I am not sure how processing works so I just wrote this as an example
        {
            currentTexture = imgTree;
        }
        else if (lines[i].charAt(j) == "B")
        {
            currentTexture = imgPlayer;
        }
        else if (lines[i].charAt(j) == " ")
        {
            currentTexture = imgGrass;
        }
        else //For safety reasons
        {
            currentTexture = imgMissing;
        }
        image(currentTexture, j * currentTexture.width, i * currentTexture.height); 
    }
}

I am not entirely sure how processing works and I didn’t test this code so please use accordingly. Also keep in mind that according to how processing works the read data might also contain the invisible line end character (n) at the end. If that is the case then change your inner loop like this:

for (int j = 0; j < lines[i].length - 1; j++)