How do I Procedurally Place Tiles For Infinite Level

0 favourites
From the Asset Store
Forgotten Place - Melodic ambiance, background music, Synth
  • Hi Guys,

    I was wanting to know if it is possible to procedurally place tiles in a layout for an infinite level without me having to place tiles manually. If it is possible I have two questions.

    How do you make a layout size infinite so the level goes on continuously until say the player dies?

    Can you (and if you can) place tiles in that infinite layout without having to manually do it.

    Think flappy bird where the level went on forever until you lost the game

  • have a look at the examples that ship with c2 especially infinite jumper and flappy bird

    start new project and in the search bar at the top right of the file load window type to fine the examples

  • Hi RamPackWobble.

    I have the Steam version of Construct 2 when I go to the example projects I don't see an infinite jumper or flappy bird game. Is it something I need to get from the Scirra store?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I don't have the steam version so not 100% sure but try :-

    New project

    and you should get ...

    go to top right search bar and start to type "fla" and it should list the flapping bird template.

    also look in the installed folder and there might be a templates folder ?

  • Ahh yes thanks man!

    I see the templates. I think I may need to reconsider how I am placing down tiles as I can't think of how to place them down procedurally.

    The Flapping Bird template gives the illusion of an endless level by tiling objects and backgrounds, my level is a little different as there is tiles there but they are in chunks so I can use the tileset option to place them down into my layout.

    I may need to go into Illustrator and make sections of the level that are tilable and use those sections to move along the X of my player view to give the impression of an endless level. Unless there is another way to do it

  • I haven't really done this stuff but I believe that there is some good info in this thread:


    There's also this link in there, which appears to be similar to what you're describing:

    I hope that was useful

  • ultrafop thanks for the links man very cool stuff.

    I had a rough idea on how I would have to do it and this just clarifies what I needed to know

  • Hi Guys,

    Here is an update on how I am going to try and attempt to procedurally generate my level for my infinite runner game.

    Each artboard is a 'room' or 'section' of the level. My plan is to spawn the sections at random, which may take some careful planning on how they are built which leads me to some questions. Before I ask my questions I just want to explain that when I export these images they are going to be used in various ways.

    The floor of the level is on its own layer which I am going to be making a 'Solid' when I bring in the level sections into C2. I plan on importing the sections of the level as layers e.g, FG_Solid = Floor, BG_Level = Background artwork for the level, FB_LevelElements = Decorative artwork such as the windows, barrels, crates, mummy caskets etc.

    When I import my layered artwork into C2 (this may be a stupid question), how should I import it in? As a tileset, an animation frame? The floor and threats in the level (moving saws, spikes, etc) are going to need collision so I am not to sure what the best way is to bring them into C2.

    My second question is, how much control can I give myself when it comes to coding the levels. Each artboard is a level which I want to spawn randomly to make an infinite level but I want the layout of the level to make sense. How can I code the logic of that to have complete control over what spawns next to what? I know that is a pretty broad question but if someone has some sort of formula or general idea on how to code the logic to control what section spawns next to another section I would appreciate a push in the right direction, otherwise I can try and figure it out myself xD

    Thanks for all the help so far though guys, this is an interesting topic and I hope if I get an efficient workflow for this kind of thing, I will definitely be sharing, may be a blog post or something



  • If you want some natural looking shapes, like for outdoor levels, you might try the Noise.js 3rd party plugin.

    The noise JS is nice for picking random numbers too.

    Here is something I made with the demo he posted in just a few minutes :

    level uses Simplex noise, the ocean effect is a Perlin noise.

    Might be good for like a space level, jumping through an asteroid belt or something.

  • That looks very interesting

    My game is going to look pretty much exactly like the screenshot I posted above, each art board is a section of the level so the way I am hoping to manage the generation of them is to bring each level in but in a logical placement. So if there is a higher platform for the floor in one section of the level then the next section of the level will have to match that.

    I am hoping to do about 16 different variations of the level sections to keep things 'fresh' xD

    My problem is I am not entirely sure how to import my level sections in to C2. Whether I can bring each of the level sections in as an animation frame and use them like that, or I can build multiple layouts in C2 using a tilemap and these layouts can be my level sections, I can then make a main layout for my game and use the other layouts as my level sections and just generate them that way (I hope that makes sense haha).

    I am trying to figure out the usage of these level sections and what ways are the most efficient for mobile devices to be able to run my game. I am a little worried that I am going to make 16 of them in Illustrator and then find out they aren't usable haha.

    Sweet link though man thanks for that

  • I would make a tile level editor for the sections that plots everything to an array. Then i would save the rooms array as .JSON strings so i could re-draw the arrays later.

    Durring the game run time you draw the arrays off the right side of the screen as needed. When the rooms are less than the left side of the viewport, then destroy them.

    When the player scrolls too far from X=0 things will start getting shaky, so I suggest giving the player a break to review the score, while you reset the map and the player position.

  • jojoe

    How would I import my assets into C2 to make this array?

    Should I import my level layers as animation frames?

    Or would the layouts work?

    [quote:1cbok2cu]I can build multiple layouts in C2 using a tilemap and these layouts can be my level sections, I can then make a main layout for my game and use the other layouts as my level sections and just generate them that way

  • You should chop your concept levels into small bit sized pieces, and make a tilemap:

    Things the player interacts with, like if they break the vases, should be imported as sprites. This way you can make cool physics objects or add animations if needed.

    you will need to make an in game editor, so you can draw the rooms back, and record the tile positions.

    After you make the rooms you want you can export the tilemap as JSON data. You can save this single room in an array objects slot.

    When it comes time to draw a room, you simply randomly pick a number, and dump that arrays index number to fetch back the JSON to load back into a tilemap object to re-draw whichever room you made.

    When a tilemap goes off the screen to the left destroy it.

  • Sorry to be a nag, how would I do something like this?

    [quote:2qn1e10g]you will need to make an in game editor, so you can draw the rooms back, and record the tile positions.

    I understand the tilemaps and I have a tileset already made. But I have no idea how to make an 'in game editor'.

    Thanks for your help man I really appreciate it, giving me a direct answer on the best approach is brilliant

  • Actually, you can grab the JSON data in an easier way....

    Draw the tile maps out in Construct 2 for the room.

    Then use an System.OnStart--------------browser.Download:Tiles as Json

    I am in a good mood, here is a template to learn from:!sZBHHY5J

    Could just make 7 text objects, and copy and paste those strings into their text field. Then when it comes time to load a tile set you have it randomly pick one of the text objects to load the json string from.

    i highly recoomend learning and using arrays though.

    Have fun!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)