[FREE] 3D Tilemap System - For 3D Pixel Art Games

3D Tilemap System is a tool for painting tiles on Unity terrains or even on custom meshs using tilesets in the same way as it is popularly made and seen in 2D game engines.

GitHub Page: GitHub - 7StarsGames/3D-Tilemap-System: 3D Tilemap System is a tool for painting tiles on Unity terrains or even on custom meshs using tilesets in the same way as it is popularly made and seen in 2D game engines.
Unity Package: Attached File

This tool took a lot of work and research time to develop, if you consider supporting the developer, you can do this in a number of ways, but don’t feel forced to.

  • Donation: Donation Link;
  • If you are looking for a sky system, consider purchasing Azure[Sky] Dynamic Skybox;
  • Post here on the forum screenshots showing your work using the tool.
  • Share the tool with other users, there may be someone out there giving up on making a game because they didn’t find a tool with those features. Believe me, I gave up on some projects a few years ago when I was a beginner for exactly that reason.
  • Give your feedback with tips and suggestions to improve the asset.

License: Use the asset ethically as if you had purchased it from the Asset Store without selling the plugin as a competitor in some store out there and blah blah blah…
Feel free to implement the system in other engines like Godot Engine, give credits if possible.

Features: Keep in mind that the asset is still a work in progress.

  • Paint Tool: Just select a tile in the palette to start painting the tiles using the paint tool.
    Open to See the Gif

(Note: Using the old Inspector)
4747574--450533--PaintTileGIF.gif

  • Flood Fill Tool: Fill an area with the same tile using the flood fill tool.
    Open to See the Gif

(Note: Using the old Inspector)
4747574--450536--FloodFillGIF.gif

  • Tile Picker Tool: Select a tile from the map using the tile picker tool.
    Open to See the Gif

(Note: Using the old Inspector)
4747574--450539--PickerToolGIF.gif

  • Autotiles: The plugin supports the blob autotile layout that is a template with 47 tiles and is one of the most used by 2D engines.
    Open to See the Gif

(Note: Using the old Inspector)

  • Multi Layers: You can add as many painting layers as you need.
    Open to See the Gif

  • Alpha Intensity: Each layer has a slider to set the opacity.
    Open to See the Gif

  • Copy and Paste: Copy the information of the tiles painted in one layer and paste it to another layer.
    Open to See the Gif

When and why should I use the 3D Tilemap System? You should use the 3D Tilemap System to texture medium to large size maps because this system does not require the terrain mesh to have a polygon for each tile as is commonly used in the traditional method. With this system you can texture large maps and still achieve a mesh with a low number of polygons.

When and why should I not use the Tilemap System? You should not use the 3D Tilemap System to texture small objects as props because the best option is still to use tools like Sprytile and or Crocotile3D.

Requirements:

  • 3D Tilemap System should work on all platforms with Texture3D support.
  • To use the paint tools on custom meshs in the Unity editor, they must have attached the mesh collider component because the plugin uses Raycast to know where the tile should be painted. This is not necessary for Unity terrains.
  • The uv mapping of the custom meshs must be created correctly to work as a tilemap.
  • The asset was developed using Unity 2019.3.9f1.

Road map:

  • Add compatibility with Unity Standard shader and URP shader, so you can create even more realistic terrains and tiles such as water puddles, tiles with support for reflections or metalized or anything that can be done using the standard shader.

  • Support for other autotile templates.

  • Tile brush.

  • Random tiles.

  • Randomize tiles.

  • Add option to invert the tiles horizontally and vertically.

  • Paint tiles in line, rectangle or any other shape.

  • Get what is the layer that is painted in the terrain in a determinate position.

  • Instantiate prefabs while painting the tiles (vegetation, plants, and props).

  • Animated Tiles? I do not know if this can be done with this approach, but I’ll try.

I hope you enjoy the tool and make good games using it.

4747574–655142–3D Tilemap System - v1.0.1.unitypackage (345 KB)

6 Likes

How it works:
Instead of using a Texture2D atlas as a tileset, that requires to creating in the mesh a quad with a proper uv targeting some of the tiles on the atlas texture for each tile you create on the map, which can be a bad idea when it comes to 3D. This system uses a texture3D as tileset and each tile is stored in one of its slices. You can also use a [Texture2DArray](https://docs.unity3d.com/ScriptReference/Texture2DArray.html?_ga=2.40424228.727676915.1587139977-338330723.1587139977) instead of Texture3D, but I chose to use a Texture3D because it is compatible with older devices.

Tileset: The tileset is the texture that contains all the tiles used on the map, as mentioned above, in this system the tileset is the Texture3D that stores each tile in one of its slices. The texture format of the tileset is RGBA32.

Tilemap: The tilemap is the texture that stores the data with the information of which tile should be rendered in a given map coordinate. So, when you paint a tile on the map, you’re actually just changing the data stored in the tilemap texture. You can use a Texture2D as tilemap, but in this system I chose to use a Texture3D to add support for layers, so the data for each layer is stored in a different slice of the texture. The texture format of the tilemap is R8(Single channel (R) texture format, 8 bit integer). This means that in each pixel, you can store a value between (0-255) and that is why you can have a palette with up to 256 different tiles per layer.

Rendering: It is the shader that makes everything render perfectly looking like magic and the logic behind it is very simple. The tilemap texture is sampled using the “Clamp” Wrap Mode so that each pixel of the tilemap texture covers the entire area of a tile on the map. And the value of each pixel of the tilemap texture is then used as the third argument of the tileset texture uv doing the work known as bitmasking and determining which slice of the tileset texture should be rendered on that coordinate in the map.

You can get a better idea of how everything works by looking at the image below that uses a 3x3 grid map as an example.

4747580--601258--TilemapSystemBehavior.png

1 Like

Getting Started:
After importing/installing the 3D Tilemap System in your project, the first thing you need to do is set up a Tile Palette.

Tile Palette: It is a scriptable object that extracts the tiles from an atlas texture and stores it in single images for a better use later.

Creating a Tile Palette: You can create a Tile Palette by the menu: Create>3D Tilemap System>Tile Palette.

Setting up a Tile Palette: Just attach an atlas texture to the Tile Palette and press the “Convert Atlas to Tiles” button to extract all tiles from your atlas texture and convert them into single images that will be saved as .asset files inside the Tile Palette. Of course, you will need to adjust some of the options available in the Tile Palette Inspector.

  • Tile Size: The resolution of each tile in your atlas texture.

  • Atlas Texture: The texture that contains all the tiles that will be used by one or more layers. This texture is created externally in your preferred image editor. Below are some tips on how to create your atlas texture:

  • The first tile of your atlas texture should always be the tile used as the base color. If you intend to use the Tile Palette in a top layer, then the first tile should always be transparent.

  • A Tile Palette supports up to 256 tiles, so avoid create your atlas texture with more than 256 tiles.

  • Create all your atlas textures with the same layout to avoid future problems.

  • Make sure that the import settings of your atlas texture is as follows:

  • Non-Power of 2: None;

  • Rad/Write Enabled: True;

  • Generate Mip Maps: Off;

  • Filter Mode: Point;

  • Grid Offset: The offset between each tile in the atlas texture.

  • Extract Number: The number of tiles to be extracted from the atlas texture.

Below is a screenshot of a Tile Palette.

Using the Tilemap System with Unity Terrain: To start painting the tiles on the terrain, you first need to create the textures and files needed to make the system work, these files are created and stored inside a scriptable object called "TilemapData" and the whole process is done automatically.

The Tilemap System Inspector was created to be as intuitive and easy to use as possible, so you will be informed directly in the Inspector if something is wrong and what needs to be done to fix it. Follow the instructions below to set up the Tilemap System and start painting:

  • Add “TilemapSystem3D.cs” to the terrain and in the “Grid Size” property set the same size of the terrain. By setting the “Grid Size” to the same size as the terrain, each tile will cover an area of 1x1 meter on the map.
    You can set the “Grid Size” to any value to change the density of tiles per square meter. Note: If you change the “Grid Size” after having painted the tiles on the map, you will need to regenerate the “TilemapData.asset” to apply the change and the painting data will be lost.

  • You should see an error message in the Inspector saying that there is still no layer created. Then create a new layer in the “Tilemap Layer” list to proceed.

  • You should now see an error message in the Inspector saying that there is no “TilemapData”. Then create a “TilemapData.asset” by pressing the “Generate Tilemap Data” button and choose the folder in your project where the file should be created. You can see that the terrain is now using a temporary checkered texture.

  • You should now be seeing another error message in the “Painting” tab saying that the “Tile Palette” for that layer is missing. This is because the system does not know which tile to use when painting because it does not yet have this information. So attach a valid “TilePalette” to the “Tile Palette” field and let’s see the next error message.:smile:

  • As you can see, the system prevents you from using it while a file or a setting is missing. So to fix the next error message, just press the “Generate Tilemap Data” button again to update the “Tileset” texture locatted inside the “TilemapData.asset” with the tiles from the “TilePalette.asset” you just attached. The painting tools should now be visible and the terrain should be using the first tile of the “TilePalette.asset” as the base color. You are now free to paint!

  • Note: Every time you change any relevant settings, the system will prevent you from using the painting tools until you press the “Generate Tilemap Data” button to send the new configuration to the files within “TilemapData.asset”. But don’t worry, the Inspector will display an error message informing you of this. :slight_smile:

  • Use the “Painting Mode” option to switch between the different painting features.

Using the Tilemap System with Custom Mesh: The process is the same as described above in the instructions for use with a Unity terrain, you just need to make sure of the following details:

  • The mesh must contain the “Mesh Collider” component to allow the system to detect mouse clicks and get the texture coordinate. The mesh collider is used provisionally and you can remove it before you build the project if you no longer need it.

  • The “Grid Size” must be the same size of the texture you used to create the uv mapping on your external 3D modeler.
    The image below shows the uv layout I made in Blender and used in the mesh of the example scene. As you can see, I did the uv mapping using a 32x32 texture resolution and each pixel of the texture covers an area where a tile should be rendered on the map. Also note that there are still several pixels available in the texture to be used in the uv mapping of other objects or parts of an even larger map.


    And this is the final result with the tiles painted on the mesh inside the Unity editor.

Still in development…

Autotile Setup:
See how simple it is to setup the autotile: You can create as many autotiles as you want and need just select a tile from the palette to pick up it to the layout.
4752896--451205--AutotileSetupGIF.gif

Blob Autotile:
Demonstration of the Blob Wang Tile. This template uses 47 tiles and is one of the most used by 2D engines.
4757873--451919--BlobAutotileGIF.gif

Attached are the tilesets that are being used in the screenshots and GIFs and will not be included in the package. They were created based on this tilesset.

4757873--451928--2-Edge Tileset.png
4757873--451931--Blob Tileset.png

Though I don’t have an immediate usecase, I find what you’re doing is awesome. Keep it up!

1 Like

I’m back. I was very busy doing the demo scenes, performance and compatibility testing. Just missing do the documentation to finally send the package to the store.

Below are some screenshots showing the system running on custom 3D meshes using Unity 2019.1.8f1. The plugin is not just for Unity terrains, you can use it in your 3D models too.

Mobile Support: 3D Tilemap System is working great on my Android Sansung Galaxy J7 Prime.


I didn’t use any performance-enhancing settings, I used Unity’s default setting without changing anything, and yet the test ran smooth at 60 frames per second without stuttering, so it’s still possible to save a lot more performance.

  • Note that I forgot to remove Unity’s default skybox material, it is likely that the skybox material is consuming more performance than the entire tilemap system.
  • I used real time lighting. With lightmapping you can save a lot more performance.
  • I used the shader variant with support for 4 tilemap layers. Using single-layer shader variant can save even more performance, as in general 256 different tiles will be enough for most mobile gaming.
  • I used the native resolution of the device which is 1920x1080p. Setting the game resolution to something like 1280x720p will dramatically improve performance, believe me, this changes everything.

The graph is from Ultimate FPS Counter.

2 Likes

A scene created within minutes using a few tiles from this tileset. The terrain is 500x500 meters with a 64x64 tilemap grid and tile resolution of 32x32 pixels.

For the background:
Azure[Sky] Dynamic Skybox: For the sky.
Horizon[ON]: For the horizon landscape.
Pixelation: For the background pixelation effect.

This is pretty much exactly what I’m looking for. Where it is? How can I have a copy? I seriously need this. Right now.

I’m sorry, but unfortunately this asset will no longer be released to the Asset Store because it has been declined. I just received this from the Asset Store team: “This asset is too simple and too far below our current quality standards. We have chosen not to publish this package.”

What I can say is that the asset works very well in my use case and I will keep improving the features anyway because I will need it for my personal use.

I have seen a lot of indie games using the default terrain painting system in their stylized graphics games that could benefit from a tiled painting system like this asset, maybe I would make the plugin open source in GitHub, so the community can also help to improve the asset.

3 Likes

Nao me diga algo assim.

What a damn shame. Yet, I see so many useless things in the store.

Well, if you put it up in Github, I’ll be using it for sure. Actually I’m hoping you do. This tool is like a miracle. Something so simple. Yet so sorely needed.

I can’t promise code nor money, but I can make a couple of tilesets that will be compatible with it.

Before making the asset available on GitHub I first want to make some changes and improvements, instead of using Texture2DArray I should switch to Texture3D to extend the range of supported devices and platforms. Creating the tileset with a Texture3D makes the system work even on DirectX9 and some older mobile devices.

As the plugin will no longer be released in the Asset Store, I can split it into 3 different versions.

  • Basic: Supporting only one layer focusing on performance and mobile devices.

  • Medium: Basically what is the plugin like now with a good range of features and working on almost all platforms balancing the basic version with the advanced version.

  • Advanced: Designed for PCs and consoles and with a range of advanced features that can degrade performance on mobile devices.

I wrote a brief explanation of how the plugin works, you can read it in the second post.

@DenisLemos Hey Denis ! This looks like a truely amazing tool ! Any updates regarding the github ? I would love to try this :smile:

Hi!

Unfortunately I ran out of time, I spent about 4-5 months on development, research and testing to make this asset. The last 2 months developing the new version of Azure also seem to have been in vain, generally the last 6 months of work has gone to waste.

As soon as I put everything in order I intend to make available a project containing at least the basic functionality. In the second post I provided the approach used to create the system, it is very easy to understand and you can try to recreate it yourself, the hardest and time consuming is to create the Inspector UI.

Damn, was just looking for a tool exactly like this, the one’s I’ve found so far don’t do what this does what I’ve understood of them. Damn shame it won’t be published.

Oh, man. Yeah. I was looking for a tool exactly like this, as well. Is there any way you can put it on a Github still? I don’t understand why this wasn’t approved for the asset store…

How did this not get approved for the asset store? Sorry to hear that mate - it is literally the only thing I think I would buy from there and they said no to it! Looking forward to any updates you have though :slight_smile:

Your work looks amazing!

Realy there is no option to get it? That tool you made would be very helpfull with my projects.

I’m looking for the same tool too, could you upload it to asset store?