Ren'Py How to make "that" grid map.

[Notsorandomguy]

I've played quite a few rpg +18 games over the years, and in many of them they have a clickable grid based map like this. (The examples are from Trials in Tainted Space)

And I want to know how one makes interactive maps like this for a project of mine that I am working on because I've not had an easy time finding sources on how to make this exact map.
I can make a world map, or a town map with the resources I've found, but a "dungeon" map like this? No idea. I assume the devs of games that use grids like these don't just code each individual square one by one, so, is there an easy way to make these grid based maps, where random enemies popup every now and then in certain areas, or am I cooked and need to look for another type of rpg game to make?
Strive for power and Monster girl dreams uses maps like these in certain sections too btw.

 

[Winterfire]

Switched to my alt account real quick to let you know that Ren'Py already features a grid:

You must be registered to see the links

which would allow you to create a grid of buttons that each do something when clicked (By using the index as a parameter), as shown in the samples above.

For a specific shape, you'd have to place them manually if you don't want to do it by code with a for loop.

You can also do an approach similar to Sakura Dungeon where you have a "map", a grid file, where (for instance): O is an empty cell and X is an occupied cell, then loop through it (by giving the "map" file as a parameter) to draw the button in the place of X, while putting an empty space on the O. This also requires some python knowledge.

You can also fake it by drawing a standard grid, and make some buttons uninteractable and invisible, this way while there's a square grid of buttons, the only ones visible and interactable are the ones you can use, giving the illusion there's a shape there.

-Edit-
This is an example of drawing a shape with a for loop:

You must be registered to see the links

But replace that with an imagebutton.

So, the easiest but most time consuming approach is to do it manually.
The easiest, faster but probably more dirty approach is to create a standard square grid, and disable/make invisible the image buttons to create a shape out of that square, a bit like if it was a screen made of pixels (each pixel being the imagebutton) and you disable/enable them in order to draw the wanted shape.

 

[HELIO CESAR]

For full random designs search resources like procedural level generation,

You must be registered to see the links

or popular games, like the binding of Isaacs, room generation break downs.
Implementing them after the generation Is another story and variates from engine to engine, winterfire sugestion for renpy with a grid of buttons is one of them TITS uses some custom engine made in javascript if i am not wrong. But i am sure you could find some tutorials for them or a AI could help you to give resources/tips.

 

[Notsorandomguy]

Switched to my alt account real quick to let you know that Ren'Py already features a grid:

You must be registered to see the links

which would allow you to create a grid of buttons that each do something when clicked (By using the index as a parameter), as shown in the samples above.

For a specific shape, you'd have to place them manually if you don't want to do it by code with a for loop.

You can also do an approach similar to Sakura Dungeon where you have a "map", a grid file, where (for instance): O is an empty cell and X is an occupied cell, then loop through it (by giving the "map" file as a parameter) to draw the button in the place of X, while putting an empty space on the O. This also requires some python knowledge.

You can also fake it by drawing a standard grid, and make some buttons uninteractable and invisible, this way while there's a square grid of buttons, the only ones visible and interactable are the ones you can use, giving the illusion there's a shape there.

-Edit-
This is an example of drawing a shape with a for loop:

You must be registered to see the links

But replace that with an imagebutton.

So, the easiest but most time consuming approach is to do it manually.
The easiest, faster but probably more dirty approach is to create a standard square grid, and disable/make invisible the image buttons to create a shape out of that square, a bit like if it was a screen made of pixels (each pixel being the imagebutton) and you disable/enable them in order to draw the wanted shape.

Ahhh! Thanks mate! I couldn't find any sources online and was starting to think it was some sort of cheap, but still paid for, packet of some sorts!

 

[Notsorandomguy]

For full random designs search resources like procedural level generation,

You must be registered to see the links

or popular games, like the binding of Isaacs, room generation break downs.
Implementing them after the generation Is another story and variates from engine to engine, winterfire sugestion for renpy with a grid of buttons is one of them TITS uses some custom engine made in javascript if i am not wrong. But i am sure you could find some tutorials for them or a AI could help you to give resources/tips.

Thanks for the reply! I don't think I want full randomness in my game yet, as I want to just design the first few areas and dungeons by hand to make sure the proof of concept works, but if I ever decide to add random mazes, I will use this!