Unity Core 5 - Tilemap

Tilemap is generally called a tile map or a tile map. It is a new feature in Unity2017. It is mainly used to quickly edit scenes in 2D games and improve map diversity by reusing resources.

​ The working principle is to arrange and combine small images one by one into a large map

​ The similarities and differences between it and SpriteShape

• What they have in common: They are all used to make scenes or maps for 2D games

• difference:

  • SpriteShape can make terrain have radians, Tilemap can't

  • Tilemap can quickly make a map with a pseudo "Z" axis, SpriteShape can't

​ Search for 2D in Window  --> Package Manager, select 2D Tilemap Editor, and import the project

1. Tile resources

​ The smallest unit of Tilemap: "tile", there are two ways to create it:

​Method  1:

​ Create in Assets  --> Create  Tile, or right-click  Create   Tile --> in the Project window -->-->

​Method  two:

​ Create in the Tile  Palette  tile palette window, click Window  --> 2D  --> Tile Palette

1. First create a new tile map editing file, and the default parameters at the time of creation will not change

2. Drag the image resource into the window and select the path to save

​

​Parameter  introduction:

1. Preview: preview image
2. Sprite: The sprite texture associated with the tile
3. Color: Tile tone color
4. Collider Type: Collider type
   • None: no colliders are generated
   • Sprite: generate collider shape based on sprite outline
   • Grid: generate collider shapes based on tile cells

2. Tile palette window

(1) Create tile color palette related parameters

1. Name: The name of the tile shader
2. Grid: grid layout of tiles
   • Rectangle: rectangular tile
   • Hexagon: Hexagonal tiles
   • Isometric: Isometric tiles, the cells are diamond-shaped
   • Isometric Z as Y: Isometric tiles and convert cell Z axis to local Y coordinate
3. Hexagon Type: Hexagon tile map type, which determines the rotation position of the hexagon
   • Point Top: point towards the top of the hexagon
   • Flat Top: Hexagons facing the top
4. Cell Size: The tile is drawn to the size of the cell
   • Automatic: automatically set the size of the sprite based on the tile resource
   • Manual: custom size

(2) Tile palette panel

When editing, pay attention to turn on the Editor switch:

1. : Select (S)
2. : move (M)
3. : Brush (B), after using the selector, it will automatically switch to the brush tool, a single fill
4. : Box fill (U), use the selector and then switch to the box fill tool, range fill
5. : picker (I), select fill sample
6. : Eraser (D), single erase
7. : Fill (G), use the selector and then switch to the fill tool, fill in batches
8. Active Tilemap: The currently active tile layer

(3) Create a map

1. Import all resource images together into the tile palette

1. Right-click in the Hierarchy window and select 2D Project  --> Tilemap to create, and a grid will appear in the Scene window
2. Use the picker to select the picture in the palette, and click Create directly in the Scene window
3. You can create multiple Tilemaps and sort them hierarchically

(4) Editing of isometric tile maps

​ Create a tile palette with the mode Isometric Z as Y, drag resources into it, and you will find that pictures with different heights are not aligned

​ The reason is that the center point of the picture and the center point of the rhombus will coincide by default in the palette . Here we need to adjust the center point of the Sprite in the Sprite Editor window.

​ After adjustment, the upper surface of the block can be aligned with the rhombus plane

​ You can also turn on Can Change Z Position in the Tile Palette window to manually set the height for each picture. Press "+" and "-" to quickly modify the height of Z

​ But at this time, when drawing different squares in the Scene window, the rendering will be very strange

​ Because of the internal settings of Unity, we need to modify the   Transparency Sort Mode in Edit --> Project Setting  --> Graphics  Camera Settings to Custom Axis, and set X, Y, and Z to 0, 1, -0.26. -->At the same time, switch the Tilemap Renderer mode of the Tilemap to individual, and the rendering will become normal.

3. Tile map key script and collider

(1) Grid

1. Cell Size: the size of the grid cell
2. Cell Gap: the size of the interval between grids
3. Cell Layout: the shape and arrangement of grid cells
   • Rectangle: rectangular tile
   • Hexagon: Hexagonal tiles
   • Isometric: Isometric tiles, the cells are diamond-shaped
   • Isometric Z as Y: Isometric tiles and convert cell Z axis to local Y coordinate
4. Cell Swizzle: Unity reorders XYZ cell coordinates to the type of your choice

(2) Tilemap

1. Animation Frame Rate: The rate at which tile animation is played, equivalent to double speed
2. Color: Tile tone color
3. Tile Anchor: The anchor point offset of the tile
4. Orientation: The direction of the tiles on the tile map, which is equivalent to which two axes in Unity are used by the 2D plane

（三）Tilemap Renderer

1. Sort Order: Sets the tile sorting direction on the selected tile map

2. Mode: the rendering mode of the renderer

   • Chunk: Group tiles by position, and batch render tile sprites together, with better performance

   • Individual: Renders each tile individually, taking into account their position and sort order. Allows tile sprites to interact with other renderers or custom sort axes in the scene

     Isometric tiles generally choose this option

3. Detect Chunk Culling: How the renderer removes the boundaries of the tile map

   • Auto: automatic detection
   • Manual: manually set the expansion boundary

4. Mask Interaction: mask interaction

   • None: Do not interact with any sprite masks in the scene
   • Visible Inside mask: The place covered by the sprite mask is visible, but the outside of the mask is invisible
   • Visible Outside mask: The place outside the sprite mask is visible, but the mask coverage is invisible

5. Material: Material, the default selection is a material that is not subject to lighting effects

6. Chunk Culling Bounds: When you choose to manually set the culling expansion boundary, you can fill in your own expansion value here

7. Sorting Layer: where the sorting layer

8. Order in Layer: the serial number of the sorting layer

(4) Tile map collider

​ Add the Tilemap Collider 2D script to the object that mounts the TilemapRenerer script, and the collider will be added automatically

​ Note: The Collider Type type of the tile that wants to generate a collider needs to be set, and it cannot be None

4. Import the official tile expansion package

​ The expansion pack adds new tile types and brush types to Tilemap, helping us edit 2D scenes more conveniently

​ After decompression, drag it directly into the Assets folder

​ Download address: https://github.com/Unity-Technologies/2d-extras

​ Pay attention to select the corresponding Unity version to download

​ After downloading, right click in the Project window, you will find these options

5. New tile types

(1) Rule Tile

​ Defines whether there are rules for connecting images in different directions, allowing us to edit maps more quickly

1. Default Sprite: default image

2. Default GameObject: The default game object, generally not associated

3. Default Collider: The default collider rules

   • None: no colliders are generated
   • Sprite: generate collider shape based on sprite outline
   • Grid: generate collider shapes based on tile cells

4. Tiling Rules: tiling rules, you can add and delete by yourself

   Left-click in the Jiugongge on the right to select ✔️, indicating that there is a picture in this Jiugongge; right-click to select ❌, indicating that there is no picture in this Jiugongge, double-click to switch the selected form

   When the entire Jiugongge satisfies the conditions you set, the picture selected on the far right will be displayed in the central area of ​​the Jiugongge

(2) Animated Tile

Sequence frames can be specified to generate tiles that can play sequence frame animations

1. Number of Animated Sprites: How many pictures are there in the animation
2. Minimum Speed: minimum playback speed
3. Maximum Speed: maximum playback speed
4. Start Time: The time to start playing
5. Start Frame: From which frame to start playing
6. Collider Type: Collider rules
   • None: no colliders are generated
   • Sprite: generate collider shape based on sprite outline
   • Grid: generate collider shapes based on tile cells

(3) Pipeline Tile

​ Change the displayed picture according to the number of adjacent tiles

• One —— Four: The picture used when there are 1 to 4 adjacent pictures

(4) Random tile Random Tile

​ According to the picture you set, randomly select one of them to draw

1. Number of Sprites: How many pictures constitute
2. Color: the color of the overlay
3. Collider Type: Collider rules
   • None: no colliders are generated
   • Sprite: generate collider shape based on sprite outline
   • Grid: generate collider shapes based on tile cells

(5) Terrain Tile

​ A bit similar to rule tiles, except that terrain tiles help you set rules

1. Filled: filled
2. Three Sides: three sides
3. Two Sides and One Corner: Two Sides and One Corner
4. Two Adjacent Sides: Adjacent sides
5. Two Opposite Sides: two opposite sides
6. One Side and Two Corners: One side and two corners
7. One Side and One Upper Corner: One side and the upper corner
8. One Side: one side
9. Four Corners: four corners
10. Three Corners: three corners
11. Two Adjacent Corners: two adjacent corners
12. Two Opposite Corners: Two Opposite Corners
13. One Corner: a corner
14. Empty: Empty

(6) Weighted Random Tile Weighted Random Tile

​ It is possible to randomly select the tiles of the picture without uniformity

1. Number of Sprites: How many pictures constitute
2. Weight: the weight of each image
3. Color: the color of the overlay
4. Collider Type: Collider rules
   • None: no colliders are generated
   • Sprite: generate collider shape based on sprite outline
   • Grid: generate collider shapes based on tile cells

(7) Rule Override Tile

​ On the basis of rule tiles, change the picture corresponding to the rule that has been set

(8) Advanced Rule Override Tile Advanced Rule Override Tile

​ On the basis of rule tiles, change the already set rules and corresponding pictures

6. New brush type

(1) Custom brushes

1. Preset body brush - used to quickly brush out the sprite you want to create

Prefab can be associated to quickly create the prefab

2. Preset random brush - used to quickly and randomly brush out the sprites you want to create

• Perlin Scale: Perlin algorithm parameters, generally do not need to be changed

3. Random brush - you can specify tiles to associate, and randomly brush out the corresponding tiles

• Random Tile Set Size: random tile set size, draw X * Y tiles each time
• Random Tile Sets: random tile settings
• Pick Random Tiles: randomly select tiles, the effect is not obvious
• Add To Random Tiles: Add to random tiles, the effect is not obvious

(2) Expand the brush

​ The brush records additional information, which is equivalent to displaying this information when used

1. Coordinate Brush coordinate brush - you can see the grid coordinates in real time

2. Game Object Brush - Game Objects can be selected and erased in the scene, only children of the selected Game Object

3. Group Brush - you can set parameters, when you click on a tile style, it will automatically select a range of tiles backwards

   • Gap: Look backward from the brush, and stop selecting when Gap tile spaces are encountered
   • Limit: Look back at Limit tiles from the brush, and select Limit + 1 tiles in total

4.Line Brush linear brush - determine the starting point and end point to draw a line

• Line Start Active: Whether the starting point is active
• Fill Gaps: Expand the width of the line
• Line Start: the starting point coordinates of the line

5. Random Brush - Similar to the previous custom random brush, it can randomly draw tiles

Similar to Random Brush in custom brushes

6. Tint Brush - it can color the tiles, and the color lock of the tiles should be turned on (switch the Debug mode in the Inspector window, and modify Flags to None)

7. Tint Brush (Smooth) smooth coloring brush - can give tiles a gradient coloring, need to change the material as required

Seven, code management Tilemap

​ Tilemap component: used to manage tile maps

​ TileBase component: the base class of tile resource objects

​ Grid component: used for coordinate conversion

Using them requires referencing the namespace:using UnityEngine.Tilemaps;

// 瓦片地图信息 可以通过它得到瓦片格子
public Tilemap map;

// 格子位置相关控制 可以通过它 进行坐标转换
public Grid grid;

// 瓦片资源基类通过它可以得到瓦片资源
public TileBase tileBase;

// Start is called before the first frame update
void Start()
{
    // 1.清空瓦片地图
    map.ClearAllTiles();

    // 2.获取指定坐标格子
    TileBase tmp = map.GetTile(Vector3Int.zero);

    // 3.设置删除瓦片
    map.SetTile(new Vector3Int(0, 2, 0), tileBase); // 设置
    map.SetTile(new Vector3Int(1, 0, 0), null);     // 删除

    // 4.替换瓦片
    map.SwapTile(tmp, tileBase); // tmp 的所有瓦片将变成 tileBase

    // 5.世界坐标转格子坐标

    //   屏幕坐标转世界坐标
    //   世界坐标转格子坐标
    // 传入的参数是世界坐标
    grid.WorldToCell();
}