Tile Map System - JR 01

[JR01]

Tile Map System

Flowlab Game Creator - Advance Tilemap

I’m back with another complex system that will hopefully be useful for anyone that can use it. This isn’t my first time making a tilemap, but this is my first successful 8-way check tilemap system. Before, I use to use Raycasts to detect 4-way checks, but Raycast would never work for 8-way checks and can cause a lot of lag from the physics engine. So after a Pizza asked if there is a way to tilemap without Raycasts, I had an idea and went to work. I’m pretty satisfied with the results.

I have 2 examples to show off this system. The link above shows the sprite system that will automatically set up when you play the game. But a huge drawback is that the animation plays only after all the objects have been registered which takes a few frames and looks ugly.

The second example is an export setup for this system, this will make it where the tilemap as soon as the game starts and also has more features. The export system is explained below with a video and steps, but I only suggest using the export after you finished with your game setup.

---

4-way check vs. 8-way check

When I made tilemap systems, I’ve always used the 4-way check which allows up to 16 total combinations and 12 animations set in this example. Now with this new system, we can do an 8-way check which allows up to 256 total combinations that I have set to 20 animations. Both bundles are available in the example.

8-way checks allow up to more customization such as ledges, platforms, columns, and other possibilities with changing the expression. I’ll probably make an update later for several different expressions to allow different/more animations that are sorted from the 256 possibilities.

With the Type option, I can have different objects/maps that help separate or blend maps together. I may later make an update that allows using a mix of several types together.

---

Animation

The Animations here is actually a single animation called “Tilemap”, and we choose which frame to use with the frame input on the animation behavior. With this system, it’s important that the animation frame is in a specific order.

When making your own tilemap, make sure the animation order matches the object you are using (4-way or 8-way object).

---

Exporting the System

Setting up the Tile Map System

Exporting has a separate example link:

Flowlab Game Creator - Tilemap Export

1. Import the Tileset, Tilemap, and Animation bundle into your tilemap object.

2. In your game, make a new object and call it Export and place it in every level you have. Then Copy the List Export and Map Export into it.

3. In your tilemap object, go into your tileset bundle to set the type for the map (leave 1 to map with other mapped objects). Set the same Type value in the Tilemap bundle where it says “type Search”.

4. Go to the Export object on every level and run the level, then press “Space” to get the level list in you clipboard. On every level, you will import the level list in the “Map Export”. You will have many lists.

5. After getting a list from every level, connect the join inputs and outputs as shown already. Then run the game and press Enter to put the Master List in your clipboard.

6. Now into your tilemap object and go into the tilemap bundle, import and replace the list in that bundle. And then the Tilemap should be working if you set up the animation like I have.

7. You can delete the “Export” object from your game, and the “tileset” bundle in the tilemap object.

---

How it works (long)

Each mappable object saves its x and y value as a single value that gets put into a list. I can also edit this value to say what level these objects are on, or what type these objects can be/check.

Then after all objects are in the list, I can make checks to see if there are objects anywhere around the object. By using the same setup as above, I can use the current location ±32 for a new value and check the list if it’s there.

Each check uses binary values that add up a total that is used to set the animation of the block. I can check these values and create rule sets by which bit is being used (I learned bitwise operations).
So now the 8-way check is using all 256 values for the 20 animations (frames).

For the export to work, I need to set the list to include every level in the Master List. To do this, you would export a list behavior for every level, and then combine those to export a Master List that is used in the tilemap bundle.

Setting Types will help separate different object maps from merging because these types are added to the list. I would like to be able to allow several types at the same time that would be better to control. Look out for updates to these examples.

---

If you have any questions, feedback, or what you think on this, leave a comment below!

[rcreger]

Flowlab has been needing one of these for a while lol great addition, and fantastic work!

[John_Shrekinson]

Can you make open world games with this?

[JR01]

It’s an animation mapper, you can do this for any game if you want to add a tilemap to it.

[John_Shrekinson]

Ok, thanks.

[Galactian]

you forgot to fix this

[sup3r87]

This is absolutely awesome, could definitely be used for some kind of building game. Marvelous work!!

[JR01]

I don’t see a problem there, that tile system you screenshot is the 4 way check.
The dirt tileset is the 8 way check, which would be a better map look.

[Galactian]

do you have a fix for this?

i need this for an island generation since raycasts break at a 225 degree angle

[CodeAlpaca]

Feel like everyone is somehow just discovering this

[JR01]

Let me look into it, I have to refresh myself on bitwise expressions.
Edit: After relearning bitwise and looking at my blueprint for the bitwise animation map, I see I could change a few things to work better. Let me work it out and fix that tonight.

[JR01]

Alright @Galactian, I updated my bitmap so it should work better for that formation. Let me know if you find any other animation orders that doesn’t make sense for the 8 way check.

What changed bitwise

Not that it will make sense to anyone, but I changed the bitwise expression handler to work better with the rules that I set that would set the animation of the block. It is true that there are a total of 256 possible solutions, but I made rules that separate them to work with their animation (which is why it’s important to keep the tilemap animation order the same when using this system). You can see these reference used for these rules above Level 3.

Old Bitwise Map

//Not Set
A == 0 ? 2:
//Block
(A & 80 == 80) && (A & 10 == 0) ? 1:
(A & 88 == 88) && (A & 2 == 0) ? 2:
(A & 72 == 72) && (A & 18 == 0) ? 3:
(A & 82 == 82) && (A & 8 == 0) ? 4:
(A & 74 == 74) && (A & 16 == 0) ? 6:
(A & 18 == 18) && (A & 72 == 0) ? 7:
(A & 26 == 26) && (A & 64 == 0) ? 8:
(A & 10 == 10) && (A & 80 == 0) ? 9:
//Inside Corners
(A & 90 == 90) && (A & 4 == 0) ? 10:
(A & 90 == 90) && (A & 128 == 0) ? 11:
(A & 90 == 90) && (A & 32 == 0) ? 12:
(A & 90 == 90) && (A & 1 == 0) ? 13:
//Platform
(A & 16 == 16) && (A & 74 == 0) ? 14:
(A & 24 == 24) && (A & 66 == 0) ? 15:
(A & 8 == 8) && (A & 82 == 0) ? 16:
//Column
(A & 64 == 64) && (A & 26 == 0) ? 17:
(A & 66 == 66) && (A & 24 == 0) ? 18:
(A & 2 == 2) && (A & 88 == 0) ? 19:
//Alone
(A & 90 == 0) ? 20:
//default
(A & 186 == 186)? 5:5```

New Bitwise Map

//Not Set
A == 0 ? 20:
//Block
(A & 90 == 80) ? 1:
(A & 90 == 88) ? 2:
(A & 90 == 72) ? 3:
(A & 90 == 82) ? 4:
(A & 90 == 74) ? 6:
(A & 90 == 18) ? 7:
(A & 90 == 26) ? 8:
(A & 90 == 10) ? 9:
//Inside Corners
(A & 90 == 90) && (A & 165 == 161) ? 10:
(A & 90 == 90) && (A & 165 == 37) ? 11:
(A & 90 == 90) && (A & 165 == 133) ? 12:
(A & 90 == 90) && (A & 165 == 164) ? 13:
//Platform
(A & 90 == 16) ? 14:
(A & 90 == 24) ? 15:
(A & 90 == 8) ? 16:
//Column
(A & 90 == 64) ? 17:
(A & 90 == 66) ? 18:
(A & 90 == 2) ? 19:
//Alone
(A & 90 == 0) ? 20:
//default
(A & 90 == 90)? 5:5
//Made by JR01```

[ThatBoxLion]

Hi! I found this TileMap System very handy, but I have a question. Is there any way you can add additional frames that would fix issues like this?

The corners don’t quite line up and its just a little awkward. Its also not a huge problem as those are semi-uncommon structure formations, and might not be used in a typical game. Other than that, real good!

[JR01]

Yep, someone had the same request not too long ago and I have made another version with 47 animations. You can still add more (up to 255) but its a lot of work to get the binary masking for specific frames you want to add.

But this version should help with those additional animations you need.

Flowlab Game Creator - Tilemap 47 Test

[DJ1]

I know JR01 is okay with this on his topic but please try not to revive topics, it floods the forums with a bunch of old revived topics.

[ManiacPumpkin]

Reviving dead topics in general isn’t the best thing to do, but when asking a question regarding someone’s example or code, I don’t see an issue with.

That’s the main reason grazer doesn’t have older discussions automatically delete so new users can look for question that have likely already been solved than making more topics for it. As long as it’s productive and not for the sake of continuing drama or for spam, there isn’t any issue.

[ThatBoxLion]

Thank you! Also sorry if reviving old topics is a not good, I’ll be more careful in the future!

[JR01]

Update:
I updated the examples with the 47 frame tilemap version.
Now you can have more animations for your tilemap.
If you use this animation set, be sure to keep the same frame order in the animation.

Bitmasking

The old 24 animation tilemap used 2 bitmasks (90 and 165).
But the New version uses 10 bitmask patterns (123, 95, 222, 250, 94, 218, 122, 91, 255 and 90).
The total outputs 47 different frames in the tilemap, making everything look much smoother.

I also developed a tool so I’m not counting every binary value around the block by hand.
Flowlab Game Creator - Binary Block Adder

Bitmasking Patterns.

//Binary Masks
var BA = A & 255;  //All
var BS = A & 90;   //Sides
var BR = A & 123;  //Right Arrow
var BD = A & 95;   //Down Arrow
var BL = A & 222;  //Left Arrow
var BU = A & 250;  //Up Arrow
var BUR = A & 94;  //Up Right Arrow
var BDR = A & 218; //Down Right Arrow
var BDL = A & 122; //Down Left Arrow
var BUL = A & 91;  //Up Left Arrow

//Set
A == 0 ? 1:
A == 255 ? 6:
//Around
BA == 90 ? 25:
BA == 251 ? 26:
BA == 127 ? 27:
BA == 223 ? 28:
BA == 254 ? 29:
BA == 123 ? 30:
BA == 95 ? 31:
BA == 222 ? 32:
BA == 250 ? 33:
BA == 122 ? 34:
BA == 91 ? 35:
BA == 94 ? 36:
BA == 218 ? 37:
BA == 126 ? 46:
BA == 219 ? 47:
//Patterns
BR == 75 ? 41:
BR == 106 ? 40:
BR == 107 ? 7:
BR == 74 ? 23:
BD == 27 ? 44:
BD == 30 ? 45:
BD == 31 ? 9:
BD == 26 ? 24:
BL == 86 ? 39:
BL == 210 ? 38:
BL == 214 ? 5:
BL == 82 ? 21:
BU == 120 ? 42:
BU == 216 ? 43:
BU == 248 ? 3:
BU == 88 ? 22:
BUR == 22 ? 8:
BUR == 18 ? 20:
BDR == 208 ? 2:
BDR == 80 ? 17:
BDL == 104 ? 4:
BDL == 72 ? 18:
BUL == 11 ? 10:
BUL == 10 ? 19:
//Sides
BS == 16? 11:
BS == 24? 12:
BS == 8? 13:
BS == 64? 14:
BS == 66? 15:
BS == 2? 16:
//Default
1
//Made by JR01

[JR01]

Update 3/2/24

I made a couple more versions with another idea on how to improve performance. I made a live system that would create tilemaps that are offscreen, but there was some performance issues with globals that made it slow the bigger the level is. I also made a raycast version of my tilemaps since that is the most common way for users currently to make tilemaps. But I just had an idea to combine the two methods and the performance is better than I exspected. I also dumped the other animations/bit masks so this is now the best and easiest version for adding tilemaps to your games.

If you are wondering why I didn’t use raycasts before; it’s because before we had offsets, it was impossible to accurately get corners. But with offsets added to raycasts, you can scan outside the object in ways you couldn’t before. I still have one more plan to perfect this system, but that will have to wait until Flowlab can update with the features I want.

Try it out and see what you think. Let me know if there are any issues or questions.

Flowlab.io - Live Raycaster Tilemap

[JUSTPLAINOP]

Wow, this is pretty good!

How is this not extremely slow? -due to large quantities of raycasts being used? Last time I tried a raycaster tilemap system, the level took 30 seconds to load initially. Oooh, is it due to the system being triggered by an In-View? If so, I need to use it in my new game, which will definitely need a tilemap system.