Creating a tile-based scrollable 2D environment

Posted By: Yking

Creating a tile-based scrollable 2D environment - 08/21/18 10:40

Hello Forum,

I have taken a long break from programming and wanted to get back to it, challenging myself with a 2D minigame of sorts.
However, as I have never done 2D-only games before, I have been stuck at one problem.

I want to create a game that looks and function as a 2D RPG.
The environment is supposed to be tile-based and I want to generate it dynamically.
The player would then walk from tile to tile, being only blocked by some tiles that are walls, and the screen should be scrollable.
So basically just standard RPG-Maker grids that form the world through a lot of tiles.

My problem is, that I do not know how to realize this "dynamic tile creation" in a reasonable way.

At first I was thinking, that Sprites aka 2D-Entities would work. Just put them next to each other.
But assuming I create a room that is 100x100 tiles big, this would mean that I have to create 10000 Entities,
which sounds a little unreasonable, since a larger map could mean 100.000 Entities.

Then I thought about using Panels, and perhaps creating 10000-100.000 panels is fine but panels do not scroll
according to the camera and I would need to do that manually, but then again, changing 10000 panels positions every frame seems crazy.

It could also be that I underestimate modern computers and the Engine, so maybe the Entity solution would be fine,
but all in all I would want to know if anyone has suggestions on how to realize this scrollable tile-based world.
I have dug up some 2D tutorials but I can't seem to find anything that helps me or perhaps I am not good at searching blush

Yours Yking

PS: It should be dynamic because it would be cool to have an in-game level editor where someone can place tiles.
Posted By: txesmi

Re: Creating a tile-based scrollable 2D environment - 08/21/18 13:37

Hi,
the key is to draw potentially visible tiles only. You might fill the screen in reference to some sort of static memory (bitmap, array or data base) instead of trying to manage the whole thing with engine objects.
Posted By: Evo

Re: Creating a tile-based scrollable 2D environment - 08/21/18 14:16

Hi Yking,

I primarily work with 2D and I've made many editors and prototypes for 2D development. I have older tilemap editors, but they were from A6/A7 and I don't have any recent A8 ones. For a basic example, you can find my old 2D JRPG (pixel collision example) that uses full images for levels, but I need to update it with my new code since the old version has a few bugs.
http://www.opserver.de/ubb7/ubbthreads.php?ubb=showflat&Number=465319#Post465319

I found it best (and faster) to create 2D environments with panels and use full image layers to piece the levels together. Pixel collision also helps and avoids hundreds of function calls from individual collision blocks. The only tricky thing about using panels is that there is no 3D camara to move and you must simulate that by moving the level around the player to create that effect.

Using a tileset and collision blocks you can create the levels dynamically, but it will take a lot more code and resources and you'll need to create some type of custom editor. Creating this in 3D with entities would work and give an actual camera to move, but that also involves using different image formats for sprites and PNG files don't work well as 3D sprites due to transparency issues. You'll also have to customize the 3D camera view to alter the perspective, otherwise seams will show and tiles will look offset as you move around because of the layer difference.

I would recommend using full panel layers and pixel collision which will create the same thing and run much faster than 100's/1000's of individual tiles/entities and collision blocks. It also makes it much easier to create a custom 2D camera since there are just a few images to move around.

Have a great day.
Posted By: Yking

Re: Creating a tile-based scrollable 2D environment - 08/21/18 15:27

Wow, thank you for your answers laugh !
I would have never thought that it would be this complicated with A8 frown .

txesmi: I did not come across this idea, it sounds good and would take off loads of processing. Could you elaborate it a little bit laugh ? How would I fill the screen, what kinds of commands would I have to use? laugh

EVO: I wish I had found your template sooner, it looks really good! You are suggesting, that when the player "moves", the panels get moved and create the illusion of player movement laugh ?
Collision blocks also sound interesting, I wonder how much resources that would need, but still having a 3D camera to zoom would be really cool grin
Posted By: Evo

Re: Creating a tile-based scrollable 2D environment - 08/21/18 16:13

Yes. If you test the basic jrpg example, the player only moves when on the level boundaries and when the player is in the X or Y center of the screen, the level then moves instead of the player to create 2D scrollable levels. But that also means that all other images, npcs and other level objects must move with it as well.

For a basic 2D collision block example, you can look at some code I wrote years ago for my Evoeon 2D Game Builder :
http://www.opserver.de/ubb7/ubbthreads.php?ubb=showflat&Main=53207&Number=442653
But remember that this code is old and needs to be cleaned up and rewritten.
Posted By: txesmi

Re: Creating a tile-based scrollable 2D environment - 08/22/18 07:20

@Yking
well, there are many ways. I would probably use a bitmap (or more than one) as world data holder and a shader to paint the screen. But you might use 'draw_quad' or 'draw_obj' inside two nested 'for' loops instead. Imagine your project window fits a rectangle of 32x24 tiles, the world is defined in a bitmap called 'bmpWorld' and the tiles are arranged in an array so one channel of the world bitmap determines the tile. You might paint the screen as follows:

Code:
var _format = bmap_lock(bmpWorld, 0);
var _posX = 0;
for (; _posX<32; _posX+=1) {
   var _posY = 0;
   for (; _posY<24; _posY+=1) {
      var pixel = pixel_for_bmap(bmpWorld, player.x - 16 + _posX, player.y - 12 + _posY); // retrieve the pixel from the world bitmap
      COLOR _col;
      var _alpha;
      pixel_to_vec(&_col, &_alpha, _format, _pixel); // transform the pixel to a color vector and alpha value
      draw_quad(bmpTiles[_col.red], vector(_posX*tileSize, _posY*tileSize, 0), NULL, vector(32, 32,0), NULL, NULL, 100, 0); // draw the corresponding tile
   }
}

Posted By: Dooley

Re: Creating a tile-based scrollable 2D environment - 08/26/18 16:55

I would approach it using 3D, but fixing the camera so it would appear 2D, or 2.5D if you want. You could re-use game objects by teleporting them once they are off-screen. For instance, if your character is moving to the right, any object that passes beyond the left edge of the screen could then get re-used by teleporting it ahead of the player, where it would then come into view again. You could also use ent_morph to change objects as needed, to add some variety. This way, you could make a huge level, but only have a few dozen game objects that actually exist on the level.

It seems like teleporting objects and morphing them would also take up a lot of memory, but it is nothing compared to having hundreds or thousands of objects, so it should work out if you can figure out how to code it.
© 2024 lite-C Forums