Atlas Tile Editor (ATE)

Atlas Tile Editor (ATE)

Not enough ratings
How to use ATE Dec 2017 Version
By Mad Merv
Lead Developer speaks on use of ATE and how you can take advantage of various features, including using ATE with game making programs like RPGMaker, Unity, GameMaker, Ethanon Engine and more!
   
Award
Favorite
Favorited
Unfavorite
Adding a Texture Atlas to ATE (Atlas Importing)
After loading up your workspace, click "Atlas Library" on the Workspace Main Menu

At the bottom there is a row of buttons:

"Assemble and Import" --- take a series of images and combine them into a single sprite sheet. Save to a file, or import into the Atlas Library.

"Import Spritesheet" --- take a pre-existing sprite sheet and import it. See the manual for details on all of the features.

Once an Atlas has been imported, it will be added to your workspace. When you enter the "Atlas Tiles" option on the Workspace Main Menu, it will be available for you when you go to create a tileset using the "+ TILESET" button.
ATE Basics: Creating Tiles Using the Editor, then Exporting Your Work
Overview of the Main Tile Editing Screen




Layered​ ​Grid​ ​Drawing

Basic drawing workflow:
  • To select what to draw with, click in the Atlas Palette. This will set your active Brush. You can also use the arrow keys to move around the grid of brushes.
  • LEFT CLICK on the Tile Painting / Editor will draw in the grid.

When you select a layer, you draw on that layer.

❏ Layer 1 - 2 x 2 grid
❏ Layer 2 - 4 x 4 grid
❏ Layer 3 - 8 x 8 grid
❏ Layer 4 - 16 x 16 grid

Once a layer is selected, you will draw on that grid based on the currently selected. Layer 1 is
in “back”, layer 4 is in “front” -- this way you can draw most reusable tiles.

  • RIGHT CLICK to remove something you drew on the grid.
  • LEFT CLICK to draw something.
  • Tinier tiles are drawn in front of the larger ones.


Freehand​ ​Drawing

Draw / Drop Square Tool and the Object Inspector and Added Square List

If you toggle the box ON next to “Draw Square”, when you click + drag you will draw a square
that can be rotated. You can fine tune the rotation and position of the last drawn or selected
square in the “Object Inspector Area” and you can select others in the Added Square List, which
shows a particular layer’s list of squares (or, when no layers are selected, then the top list of
squares).

If you want to insert many of the same size and rotation, you can “paint” with a square by
toggling the box ON next to “Drop Square”, and the last dropped square’s rotation and size will
be used.
● If you are using the Draw/Drop square tool, it will draw behind the current layer.
● If you deselect all layers, the Draw/Drop square tool will draw on top of the entire stack.

Tile​ ​Info​ ​Area
In this area you can “Save” which saves all tilesets and tiles in them.
You can also name the tile by moving the mouse over the text box, then typing. It’s again best
to use alphanumeric names only. Each tile should have a unique name. A name is
autogenerated for you.

Height​ ​Map
When you click the height map button (a tile-sized button), you should navigate to a special
heightmap atlas tileset in your workspace. Once you find the height map, you can then click
“Select this Height Map and Return to Editor” -- it’s best not to modify the height map during the
selection process, unless you’ve made a copy, as other tiles might be using it.

Export​ ​Options
The “Bake to PNG” button appears here.
In the future “Bake to CSS/JSON” may also appear here.

About​ ​Height​ ​Maps​ ​and​ ​Normal​ ​Maps

A sample "height map atlas" has been provided for you. You can copy that atlas from the “main” sample workspace, or, you can create your own.

The goal of the height map atlas is to a provide a variety of topographies to describe a heightmap
for using bump or normal mapping in a game. Your goal is to match the height map to the color
map as precisely as possible. "White" is "high" and "black" is "low" ..

A height map for a wall:



Exporting the height map. When you “Bake to PNG” you will see this heightmap exported
alongside the color map. Additionally a "normal map" will be automatically generated.

Normal map (automatically generated) from the above wall height map:



Note: It’s also recommended that, in the game engine, you overwrite the original tile 10%
opacity over the height map before converting it to a normal map, but the height map portion will
be converted to a normal map without this added detail. (In the future, there may be an option
to automatically do this.) Doing this increases the chance for detail, but is not mathematically
accurate, though it generally looks OK.
Using ATE with RPGMaker, Ethanon, Unity 3D and TiLED
Atlas TIle Editor (ATE) is specialized to create tiles and tile sets.

Example of an exported tile from ATE:




ATE allows you to build tiles around a single atlas, but once you've made a bunch of tiles, you can reassemble them into a new atlas! Then you can start the process all over again, or import it into an external program like a game engine or another editing tool.

One possible workflow is:
1) Take an atlas
2) Make a bunch of tiles
3) Export your new tiles
4) Glue them together into a new Atlas
Rinse, repeat, or import into another program like RPGMaker or Unity!

Texture atlases are predictably-spaced sprite sheets (though some variations include other optimizations). However, consider them similar to a "Bitmap Font" -- it is a grid of image segments, organized by rows and columns.

Here is an example of one of the atlases included with ATE:

This atlas can come from many different sources, including exported through Unity, Photoshop, TiLED, other sprite editing tools like AESprite, or from the assembly of images such as is possible through TexturePacker or the free program GlueIT.

You can see that it is a collection of square regions aligned by row and column, sort of like a font, and this concept is called a lot of names like "Sprite Sheet", "Texture Atlas", "Atlas", "Tileset" ... but it's all based around the same basic idea: a grid of images that are all the same size that can be 'looked up' by a game engine or editor.

In Atlas Tile Editor (ATE), you can build things using each grid element like a "brush", allowing you to quickly build variations for environmental elements like walls, floors, carpets, tilework, ground and more. Additionally, you can associate heightmaps and normalmaps to build tiles that are ready for dynamic lighting. (See the section below on Ethanon Engine to learn more.)



RPGMaker

RPGMaker directly supports use of atlases. Once you have imported your atlas into ATE, or used one of the atlases it comes with, you can then create tiles. You can then export your tiles and use GlueIT to "glue" them together into a sprite sheet. This image "collection" is called an atlas as well, and can be used in RPGMaker as a sprite source. (From the RPGMakerWeb.com forums: https://forums.rpgmakerweb.com/index.php?threads/sprite-sheet-formats-and.63612/ info on sprite sheets). This example talks about "Characters" but you can also use them as building blocks for levels, under the name "Tilesets" -- examples: https://vxresource.wordpress.com/category/resources/tilesets/

You can even use Tileset resources as a source for artwork in Atlas Tile Editor (ATE)! This will let let you build new tiles out of old assets! Once you make the tiles, you can then GlueIT into a sheet, and follow this tutorial to import it into RPG Maker MV

RPG Maker and using Sprite Sheets (Tilesets):


..
.
Unity

The PNGs that are exported from ATE can be assembled into a Unity "Tilemap Palette" https://docs.unity3d.com/Manual/Tilemap-CreatingTiles.html (source sprites can be created in ATE) ... likewise, multiple ATE exported tiles can be imported and then assembled in a Tilemap Palette https://docs.unity3d.com/Manual/Tilemap-Palette.html .....

....going the other way (from Unity to ATE): if you export your Tilemap Palette, you can use that as an Atlas source for ATE. If your tilemap palette can be exported as a single image, you can export the palette (in the example it is 8x8) and then add the following to your atlases.txt file in your workspace:

atlas {
name myUnityTilemapPalette1
texture "data/workspaces/myworkspace/atlases/exportedUnityTilemapPalette1.png"
grid
mirrored
nearest
rows 8
columns 8
dontGenElements
}

This would import the tilemap and then you could draw individual ATE tiles using it as an atlas source, export the tiles, assemble them into a Tilemap Palette inside Unity, without having to use GlueIT.



TiLED

TiLED is a great tool for creating maps, and it uses the TMX format. You could use ATE's Assemble and Import feature, similar to GlueIT's sprite sheet assembly features, to make atlas sheets for use in TiLED. TiLED's TMX format has a lot of other data in it that ATE probably won't support any time soon. (For example WangSets*, Terrain, and actual maps / map layers)

ATE doesn't make maps, it just makes tiles. So, it works with TiLED if you export from ATE, but importing doesn't make all that much sense since the two editors are very different and have different goals. You could make tiles in ATE which are usable in TiLED already, however, since it writes out PNGs of user-customizable sizes, and these PNGs can be then assembled using GlueIT (eventually, ATE will have GlueIT-like features inside.)

Atlas Tile Editor actually does have planned support for WangSets (which allow per-vertex colors, not the ones that have edge-colors, since you can do edge-colors using per-vertex colors) but it is currently not implemented (though it's on the Early Access Trello already!)


One workflow is:
1) Create an atlas to use to build collages
2) Make your tilesets
3) Export your tiles to a folder
4) Use Assemble and Import to create a sprite sheet, and then export it as a PNG
5) Use the PNG in TiLED





Ethanon Engine

Consider the following image (from Ethanon Engine website)

To create an Ethanon Engine 2.5D entity, you need two images: a color map, a normal map. In Atlas Tile Editor (ATE), we had Ethanon Engine in mind when we created features to allow support for dynamic lighting.

Color Map:



Height Map:



Normal Map:



You can use the output from ATE to create an Ethanon Ent by first creating a color map, then assembling a height map using a height atlas (one is provided, or you can provide your own) .. since it is easier for the brain to think in terms of the height map, we allow you to customize the height of your object after you've drawn it, and then you can associate that height map that you've drawn specifically, or reuse one.

Reusable (for walls):

A wall:



A wall heightmap:



You could make many variations of the color map, and use the same heightmap texture over and over. ATE will automatically convert the heightmap to a normal map:





The above "Atlas Tile EDIT" sign is an example from the YouTube Atlas Tile Editor (ATE) demo, watch this video to see how it was made: