Jump to content

Making a level through an array


Recommended Posts


I followed lessMilks tutorial (http://www.lessmilk.com/tutorial/2d-platformer-phaser) on how to make a platformer and they use an array with two for loops to create the level

from the tutorial - 

// Design the level. x = wall, o = coin, ! = lava.
var level = [
    '!         !          x',
    '!                 o  x',
    '!         o          x',
    '!                    x',
    '!     o   !    x     x',

/ Create the level by going through the array
for (var i = 0; i < level.length; i++) {
    for (var j = 0; j < level[i].length; j++) {

        // Create a wall and add it to the 'walls' group
        if (level[i][j] == 'x') {
            var wall = game.add.sprite(30+20*j, 30+20*i, 'wall');
            wall.body.immovable = true; 

        // Create a coin and add it to the 'coins' group
        else if (level[i][j] == 'o') {
            var coin = game.add.sprite(30+20*j, 30+20*i, 'coin');

        // Create a enemy and add it to the 'enemies' group
        else if (level[i][j] == '!') {
            var enemy = game.add.sprite(30+20*j, 30+20*i, 'enemy');

I have used this to create my own level but have run into some problems and was wondering if anyone knew how to help.

1) I set my game bounds to 3000, 480, then adjusted the size of the array and the position of platforms/player/enemies etc so it all fits nicely and spaced correctly. I have noticed that each space in the array is the equivalent of 30px, 30px. Would it be possible to change this? As I can't find a way to do this. 

2) I wanted to potentially make a small level editor by making adding the platforms etc, enabling drag and setting them into position (which works great). But I have no idea how to capture the position of the platform in the array. I can get the coords of the platform from within the level itself but I don't know how to reference the array. Ideally, this would work by adding and setting the platform then somehow pushing the letter ('x' from the example above) to the array. If anyone has any ideas that would be great because I am quite stumped at the moment. 

3) Lastly, is making a level like this viable? I am only running this game locally and I'm having no performance issues so far.

I'm quite happy creating the levels in the ide but thought I'd ask the community if they had any experience with this.

Thank you,


Link to comment
Share on other sites

Well here's my best stab at answering, you can quote me but don't hold me to it:)

1) The elements are positioned 20 pixels apart. The grid layout starts at (30, 30) though, so the space across the top of the grid and the space down the left side are each 30 pixels. To change the grid's top padding change the '30' in '30+20*i', to change the left padding change the '30' in '30+20*j'. To change the vertical spacing between elements, change the '20' in '30+20*i', to change the horizontal spacing between elements change the '20' in '30+20*j'. My advice is to plug values into the coordinates (30+20*j, 30+20*i) in your head or w/ calculator and see where it's at when i and j are 0, when you increase one or the other, etc. Also if you use constants for the those values instead of hard-coding it will be easier to change them and experiment, since the values are used multiple times.

2) With this system you can't have arbitrary/random positions. For instance, in this case you can have positions (30, 30) and (50, 30) but nothing in between. Off the top of my head, I think you can subtract 30 from the desired position's x and y values and then divide them by 20. Then take these x and y values and call Math.round() on each, or Math.floor() or Math.ceil() depending on how you want it to snap... Then level[y][x] = 'x' would put a wall there for instance (again off the top of my head, it all still needs testing and verifying). Like for 1) I think plugging in values in your head or on paper  will make it more clear.

3) IDK but it seems non-ideal / impractical creating a separate type every time anything other than position changes between elements, the positioning isn't flexible - not on a per-element basis, and then there's the extra element for each 20x20 pixels of emptiness, and prob other things I can't think of off the top of my head;) That said I haven't tried it myself and IDK how easy or hard it would be to extend and overcome the limitations, etc, or if you'd even need to.. Also, for what it does it's a neat/clever way to visualize the level in code...

All that said, I recommend to try using an array of objects for each type of element, where each object has properties for position, rotation, size or scale,  maybe health and strength for enemies, etc... Or just one big array and use a property to track which type each element is (whether wall or lava or enemy, etc.). That's probably a better starting point for a drag-and-drop level editor IMO, especially if you want arbitrary positioning and more properties to edit like rotation, tint, etc...

Link to comment
Share on other sites

  • 6 months later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...