# Create 2D game map with images

**URL:** <https://discourse.processing.org/t/create-2d-game-map-with-images/28410>\
**Category:** Coding Questions\
**Created:** [March 10, 2021, 7:28pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410 "2021-03-10T19:28:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 10, 2021, 7:28pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/1 "2021-03-10T19:28:36Z")

</div>

A Bomberman level can be considered a grid, of three types, each represented by a 16x16 pixel size image: the ground (ground.png), the destructible blocks (softBlock.png) and indestructible blocks (hardBlock.png).  
The design of a level is shown in a csv file (level.csv), where  
x represents indestructible blocks

- represents the destructible blocks  
The lack of character represents the soil  
Any other character may be, at this stage, considered to be soil  
So you have to read the file and display correctly the level it represents

So I started by loading the csv file with loadStrings(), but now I dont know what to do? How can i put the Strings to have a grid, how can I make processing understand where to start ?

Thank you !

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 10, 2021, 8:24pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/2 "2021-03-10T20:24:00Z")

</div>

I would enumerate the different ground types, and then create a 16 by 16 array of ints that will store the current state of the game world in it.

Initially, you will want to parse the array of strings you have, to populate the game world array. The first string in your array of strings represents what’s in the top row of the game world.

You can thus use one loop to look at each character in your first string. If it is the character for ground, store a 0 at the right spot in your 16 x 16 array of ints. If it is the symbol for a soft wall, store a 1. If it is a hard wall symbol, store a 2.

Then add a second loop so you’re looking not just at the first row’s string, but all the strings!

Your code will look something like this:

```auto
int[][] level = new int[16][16];

void setup(){
  // size(); ??? etc
  String[] strings = loadStrings("whatever.csv");
  
  for( ???; ???; ??? ){
    for( ???; ???; ??? ){
      // Default case, soil?
      level[?][?] = 0;
      if( strings[?].charAt(?) == '?' ){ // Soft walls?
        level[?][?] = ?;
      }
      if( strings[?].charAt(?) == '?' ){ // Hard walls?
        level[?][?] = ?;
      }
    }
  }
}

```

Then you can use the numbers in that array when you draw your images in draw(). (And if you also store your images in an array, you can use the numbers in your level array as an index into your images array!)

---

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 10, 2021, 11:01pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/3 "2021-03-10T23:01:57Z")

</div>

Thank you for your answer,

```auto
int[][] level = new int[50][50];
PImage softBlock;
PImage hardBlock;
PImage floor;

void setup(){
  size(800,500);
  String[] lignes = loadStrings("level.csv");
   softBlock = loadImage( "softBlock.png");
  hardBlock = loadImage( "hardBlock.png");
  floor = loadImage("floor.png");
  
  for(int n=0; n<lignes.length; n++){
    for(int i=0; i<lignes[n].length(); i++){
      //floor
        level[n][i] = 0;
      if( lignes[n].charAt(i) == '-' ){ // Soft walls
        level[n][i] = 1;
      }
      if( lignes[n].charAt(i) == 'x' ){ // Hard walls
        level[n][i] = 2;
      }
       print(level[n][i]);
    }
   
  }
  

}

void draw(){
  
  for(int x=0;x<level.length;x++){
    for(int y=0;y<level[x].length;y++){
      if (level[x][y]==1){
          image(softBlock,y*16,x*16);
        }
        else if (level[x][y]==2){
          image(hardBlock,y*16,x*16);
        }else if (level[x][y]==0){
          image(floor,y*16,x*16);
        }
    
    
  }
  
}

}

```

This is what I did I have now a map but the problem is that it isnt in the right position and i cant find what i did wrong the blocks, I dont know if it is from the way i stored my data in the 2d array or from the way I position my images in draw().

i am getting this :  
 ![Capture](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e83e717d08a2c4f3782c76867f98d15623f62b85.png)

the order isnt right

---

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 10, 2021, 11:02pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/4 "2021-03-10T23:02:30Z")

</div>

![captre2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ed51ef8d279e6df30b82b9f6c3886a73f75a569d.png)

I should get this instead

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 11, 2021, 5:23am UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/5 "2021-03-11T05:23:37Z")

</div>

It’s good that you have images of different block types appearing! This is a total step in the right direction.

But you need to debug your code now. Perhaps it would be useful to display the values of X, Y and level[x][y] at each block’s location, instead of the blocks, for now.

Try this in draw():

```auto
background(100,0,0);
  for(int x=0;x<level.length;x++){
    for(int y=0;y<level[x].length;y++){
      text( "" + x + " " + y + " " + level[x][y], y*16,x*16 );
  }
}

```

Does what you see match up with what println() displayed when it printed out the level’s numbers?

---

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 11, 2021, 2:27pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/6 "2021-03-11T14:27:26Z")

</div>

Thank you for your help 🙂

And no it doesnt I think the problem is in the way I am reading my file csv, the values i am getting are different from the one in the csv file.

---

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 11, 2021, 4:08pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/7 "2021-03-11T16:08:34Z")

</div>

![caaaaaaaaaaa](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5413337e751ac962ac63603bda375086e5bd7c13.png)

i found the problem its because of the ‘,’ the values arent in order how can i remove them or avoid them

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 11, 2021, 6:33pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/8 "2021-03-11T18:33:23Z")

</div>

Fantastic! That’s a great bug to have worked out.

Instead of parsing the string character by character, what you should do now is use split() on each string. This should give you an array of strings, some of which may be empty.

For example,

```auto
String[] csv_data = loadStrings("file.csv");
for( ? ? ? ){ // For each line,
  String[] line = csv_data.split(','); // Split it based on commas.
  for( ? ? ? ){ // For each string in the line array,
    if( line[?].charAt[0] == 'x' ){
       level_data[?][?] = 1;
    } /// etc
  }
}

```

This will deal with the commas properly. You don’t want to just remove or ignore them, because two commas next to each other still has a meaning - that there is ground there!

---

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 11, 2021, 7:51pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/9 "2021-03-11T19:51:26Z")

</div>

Okay Thank you I will check it, but doesnt split return one line of string ? so in that case i will lose my lines

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 11, 2021, 10:24pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/10 "2021-03-11T22:24:22Z")

</div>

split() works on one string, and splits it into an array of strings that were separated by the given character. You can search for it in the Reference to see how it works.

---

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 12, 2021, 9:45pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/11 "2021-03-12T21:45:59Z")

</div>

![map](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/92a4b21053efe3393bdb09962f78d6eb797b9581.png)

it worked with split !! but now how can i fit the whole map in the window, so it has the exact size of the window ?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 12, 2021, 10:29pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/12 "2021-03-12T22:29:41Z")

</div>

make the window smaller or the grid bigger

or the images bigger

---

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 12, 2021, 10:44pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/13 "2021-03-12T22:44:36Z")

</div>

Okay thank you,

Should i use scale to make the images bigger ?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 12, 2021, 10:45pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/14 "2021-03-12T22:45:39Z")

</div>

Your blocks are 16 pixels square, right? How big is your level? You can just change size() to have the right size for your level.

Or you can stretch the blocks to fit. But that might not look right. You could just try to double their size. Put `scale(2);` in draw(). But that might cut some of the level off. You should probably do this and also make your window the right size.

---

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 12, 2021, 10:48pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/15 "2021-03-12T22:48:59Z")

</div>

Thank you ! it worked I used scale and changed the size() and it is all good now !

thank you so much for ur help, I learned alot from this 🙂

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 13, 2021, 12:13am UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/16 "2021-03-13T00:13:53Z")

</div>

Great! Can you post your completed code so others can see how it works?

---

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 17, 2021, 3:55pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/17 "2021-03-17T15:55:43Z")

</div>

sure when i finish the whole project i will post the complete code, I am now trying to make my character move in this maze, any ideas on how to prevent it to move through walls ?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 17, 2021, 7:02pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/18 "2021-03-17T19:02:58Z")

</div>

When a character is going to move, first check if where it’s moving to is a valid place for it to be. If it’s not, don’t move there! It’s as simple as adding an if statement.

```auto
class Player {
  int x, y;
  /// ...
  void move(int dx, int dy){
    // Prevent movement into solid walls.
    if( is_solid( level_data[x+dx][y+dy] ) ) return;
    // Do movement.
    x += dx;
    y += dy;
  }
  boolean is_solid( int wall_type ){
    return( wall_type == 1 || wall_type == 2 );
  }
}

```

You might also need to add some logic to check that the position you are moving to is inside your grid too. For example, if your player is in the top left, (0,0), and trieds to move left, you don’t want to try to access `level_data[-1][0]`!

---

<div class="post-metadata">

**Author:** ![oussama10](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oussama10](https://discourse.processing.org/u/oussama10)\
**Post date:** [March 21, 2021, 6:07pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/19 "2021-03-21T18:07:51Z")

</div>

dx and dy is the position of the person when he moves?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 21, 2021, 6:18pm UTC](https://discourse.processing.org/t/create-2d-game-map-with-images/28410/20 "2021-03-21T18:18:56Z")

</div>

Hi @oussama10 ,

Looks like `dx` and `dy` represent **how much** the Player is going to move. It’s common to use the letter `d` (for difference) to talk about a small change 😉

Those values will be added to the player’s location respectively `x` and `y` for example :

```java
player.move(1, 0); // Move the player by 1 column

```

[Next page](https://discourse.processing.org/t/create-2d-game-map-with-images/28410.md?page=2)