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)
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.
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
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.
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.
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.
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.
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.
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));
}
}
}
}
