New to coding, need a little help with level design Method

Help & Support
1

Hi all,

I hope someone can help out a little bit with a way I have in my head to build my levels.

The levels will be made up of several types of block and the idea I’ve had to build the levels is to simply create a text file such as (it’s a very random and simplified example of a level)

1E1111111
10500010X
106010401
104060501
106080301
107070801
102010901
100050001
111111111

Where numbers 1-9 are different ‘blocks’, 0 represents empty space that the player can inhabit, E represents the ‘Entry Point’ of the level and X represents the Exit of the level.

The levels will be quite large eventually so creating them manually will be very time consuming as you can imagine, so this would be a big help, it also opens up the possibility of procedurally generated levels in the future.

Does anyone have any ideas on the scripting necessary for this? I do have a little background in scripting/coding, but not for PlayCanvas, so not really sure where to start.

Thanks in advance,
TheMightySpud

1 Like
2

I have used exactly this method before :smiley:

Your first step would be getting the text file contents into a 2D array (or just create it as a 2D array to start with) and then just iterate over this array checking each value and creating the relevant entity

I have made an example project [here][1] which creates blocks depending on the 3x3 array

var levelLayout = [
    [1,2,1],
    [3,0,3],
    [1,2,3]
];

Feel free to fork this project and play around with the array to see what it’s doing
[1]: https://playcanvas.com/project/348304/overview/example-level-creation

3

That is absolutely brilliant thank you. The code looks straightforward enough, and looks easy enough to modify to add in some randomisation (ie, randomly generating the numbers for the array.

Thank you ever so much :smile:
TheMightySpud

4

No problem! Feel free to ask more questions if you get stuck with any of it :smiley:

5

Funny you should say that. lol.

I’ve got everything sorted and showing up, the only problem I’m having now is figured out how to space my blocks out. At the moment they’re overlapping quite a bit and I can’t seem to work it out.

Thanks
TheMightySpud

6

No problem, that’s easily done. In the original example I posted everything was spaced by a distance of 1. If we want to space things out more then we just need to multiply the index of the array by the distance we want.

I have updated the previous code to the following:

createLevel: function(){
  var xDist = 2, zDist = 1;
        
  for(var i = 0; i < levelLayout.length; i++){
    for(var j = 0; j < levelLayout[i].length; j++){
                
      //Do not create a building for 0
      if(levelLayout[i][j] !== 0){
        this.createBuilding(levelLayout[i][j], new pc.Vec3(i*xDist,1,j*zDist));
      }
    }
  }
}

Here I am using xDist to define how far apart I want things separated on the X axis, and zDist for the Z axis. With this code now everything is twice as far apart on the X axis now, but the same as before on the Z axis.

I’ve updated the same project before so you can see it in action there still.

7

Absolute Diamond. :smile:

Got it working like a charm.

Thanks very very much :smile:

One last question about it, is there a way to offset the ‘start’ of the grid that’s generated? Tried messing about with it but can’t seem to work it out.

In my head it seems that doing some clever Maths with the LevelLayout.length part is the way to go. :confused:

Currently the grid (ie, the first block) is placed at the 0,0,0 point and then everything is placed according to that.

Ideally I’d like to be able to dynamically position the level so that the center point is at the center point of the world, if that makes sense.

Thanks
TheMightySpud

8

With LevelLayout.length indeed. Basically what you’re trying to do is shift everything up/left by half the width of the map. You need to calculate the offset (half map width) to subtract from each building position, you do this by:

  • LevelLayout.length - 1
  • Multiply that by the axis distance (xDist or zDist)
  • Then divide that by 2

So the function becomes

createLevel: function(){
  var xDist = 2, zDist = 1, x, z, xOffset;
  var zOffset = ((levelLayout.length-1)*zDist)/2;
        
  for(var i = 0; i < levelLayout.length; i++){
    xOffset = ((levelLayout[i].length-1)*xDist)/2;
            
    for(var j = 0; j < levelLayout[i].length; j++){
                
      //Do not create a building for 0
      if(levelLayout[i][j] !== 0){
        x = (j*xDist)-xOffset;
        z = (i*zDist)-zOffset;
                    
        this.createBuilding(levelLayout[i][j], new pc.Vec3(x,1,z));
      }
    }
  }
}

This is updated in the project again

9

Amazing, thank you so much for your help, definately got a better understand of how it all works (well this part at least. lol.)

Thanks
TheMightySpud

1 Like