第36節 - LibGDX: Tiled Map Editor (Background & Foreground)
這一節我會介紹用Tiled Map Editor來製作一個2D遊戲(2D Platformer Game)的背景。
Tiled Map Editor 是一個免費2D地圖編輯器，並且可以在Windows與Linux，OS X上執行，可以用來設計地圖、遊戲場景、遊戲邏輯等等，輸出格式為XML的資料。
一個2D Platformer Game主要包括以下部分:
- Background(背景)
- Foreground(前景)
- Actors (Hero, Bullet & Enemy etc.)
- Collision Detection
而我將會利用Tiled Map Editor來製作以下部分:
- Background
- Foreground
- Foreground - Collision Detection (Set properties = "blocked")
1) Background Layer圖片
2) Foreground Layer圖片
3) Combined - Background & Foreground Layers合併圖片
4) 3D構圖 - Background & Foreground Layers合併圖片
以下是LibGDX: Tiled Map Editor (Background & Foreground)程式執行的動畫:
LibGDX - maps API
Libgdx預設有一個 generic maps API(Application Programming Interface)，儲存在com.badlogic.gdx.maps package內。
以下是Libgdx maps的Class Diagram :
下載Tiled Map Editor
Tiled Map Editor可以在以下網站下載:
- 官方下載網站: http://www.mapeditor.org。
Tiled Map Editor檔案格式
Tiled Map Editor須要一個圖片檔案(.png)來儲存不同的小圖片，再產生一個Tiled文件檔案(.tmx)，它的格式是XML的資料。
Tiled Map Editor與Bitmap Font、Texture Packer很相似，就是它們各擁有兩個檔案，一個是圖片檔案(.png)，另一個是記錄各圖片資料(XML格式)，如下圖:
- Tiled Map Editor的文件內容。
製作Tecture Packer圖片
- 我在第18節 - LibGDX: Texture Packer介紹過如何用Texture Packer軟件把不同的圖片(.png)合併成一張大圖片(.png)。以上所有小圖片(32張)都是32x32 px。
製作Background
建立圖層Layer
- 下載及安裝Tiled Map Editor，完成後建立新檔案，選擇"File"。
- 選擇"New"。
- 設定map的大小。
- 因為我們在tilealtas.png內的小圖片均是32x32 px，所以設定每一格tile的Width=32 px, Height=32 px。
Map Width = 32 tiles X 32 px = 1024 px
Map Height = 24 tiles X 32 px = 768 px - 按"OK"鍵。
- 把第一層Layer改名為"background"。
- 在以上橙色範圍內按Mouse右鍵，選擇"Add Tile Layer"。
- 把第二層Layer改名為"foreground"。
建立Tileset
- 完成Layer後，建立新Tileset，則我們的tileatlas.png圖片，選擇"Map"。
- 選擇"New Tileset..."。
- 建立Tileset的Name = tileatlas。
- 選擇檔案位置。
- 因為我們在tilealtas.png內的小圖片均是32x32 px，所以設定每一格tile的Width=32 px, Height=32 px。
- 按"OK"鍵。
建立Background圖片
- 選擇"background"圖層。
- 選擇喜歡的Tile。
- 選擇Stamp Brush (B)。
- 設計您喜歡的Background圖層。
Background Layer完成圖片
按照以下Background Layer完成圖片:
製作Foreground (Set properties = "blocked")
設定Foreground的Properties = blocked
首先我們把Background和Foreground分開兩層，目的是把Foreground上的物件加上"blocked" properties，這樣做，我們就可以用來偵測物件的互相碰撞(Collision Detection)。
我會在第38節 - LibGDX: Tiled (Collision Detection) 介紹。
以下設有紅色邊的tile(方塊)就須要把properties加上"blocked":
- 在以上橙色範圍內選擇第一張小圖片按Mouse右鍵，選擇"Tile Properties..."。
- Properties視窗會出現。
- 選擇+號。
注意，我們須要重複這動作，把所有須要的小圖片，加上Properties = blocked號。
- 輸入的Properties Name = blocked。
- Properties = blocked就會建立。
注意，我們須要重複這動作，把所有須要的小圖片，加上Properties = blocked號。
Foreground Layer完成圖片
設定完properties = blocked後，按照以下Foreground Layer完成圖片:
儲存檔案
最後儲存檔案:
- 儲存檔案，把檔案儲存為map.tmx。
- 注意，我們須要更改以上tileatlas.png的路徑，如果與map.tmx檔案儲存的路徑相同，就不須要指明路徑。
LibGDX顯示Tiled Map
以下介紹如何利用LibGDX顯示Tiled的Background & Foreground在屏幕上:
- 建立一個TiledMap物件(tileMap)，把Tiled Map(map.tmx)傳入tileMap內。
- 建立一個TiledMapRenderer物件(tileMapRenderer)，把tileMap傳入OrthogonalTiledMapRenderer()內。
注意，TiledMapRenderer是一個介面(Interface)，OrthogonalTiledMapRenderer是一個類別(Class)，它是實作(implements)TiledMapRenderer介面的，所以tileMapRenderer其實是一個reference variable指向OrthogonalTiledMapRenderer物件(則new orthogonalTiledMapRenderer)。 - 設定camera，把camera傳入tiledMapRenderer.setView()方法內。
- 把tileMap顯示在屏幕上。
例子1 - LibGDX顯示Tiled的Background & Foreground在屏幕上
這個例子會用LibGDX顯示Tiled的Background & Foreground:
DesktopLauncher.java
- DesktopLauncher是PC Desktop的Starter Class，我們在DesktopLauncher內設定顯示的大小為1024 X 768 px。
- 把hero1Atlas.pack和hero1Atlas.png儲存到Android的Assets文件夾內(/data/...)。
- 把map.tmx和tileAtlas.png儲存到Android的Assets文件夾內(/map/...)。
MyDemo36.java
- 建立變數(Variable)。
- 設定camera為orthographic projection，false代表yDown=false，則是座標y-axis向上。
- 建立一個TiledMap物件(tileMap)，把Tiled Map(map.tmx)傳入tileMap內。
- 建立一個TiledMapRenderer物件(tileMapRenderer)，把tileMap傳入OrthogonalTiledMapRenderer()內。
注意，TiledMapRenderer是一個介面(Interface)，OrthogonalTiledMapRenderer是一個類別(Class)，它是實作(implements)TiledMapRenderer介面的，所以tileMapRenderer其實是一個reference variable指向OrthogonalTiledMapRenderer物件(則new orthogonalTiledMapRenderer)。 - 設定camera，把camera傳入tiledMapRenderer.setView()方法內。
- 把tileMap顯示在屏幕上。
注意，如果我們不須要分開Background和Foreground兩個田圖層，可用tiledMapRenderer.render()代替。
執行程式:
例子2 - 加入Actor和Control Input
最後，我們把以上例子1和第36節 - LibGDX: Input Control (Polling VS Event Driven Input)的Control Input 合併。
- 建立變數(Variable)。
- 加入一個新的整數 int grid = 32，因為每一格小圖片是32 X 32 px，方便計算。
- 設定camera為orthographic projection，false代表yDown=false，則是座標y-axis向上。
- 把sprite的高度上升3格tile，則grid*3-1 = 32 X 3，減1可以去除漂浮的感覺。
- 設定camera，把camera傳入tiledMapRenderer.setView()方法內。
- 把tileMap顯示在屏幕上。
注意，如果我們不須要分開Background和Foreground兩個田圖層，可用tiledMapRenderer.render()代替。
建立一個TiledMap物件(tileMap)，把Tiled Map(map.tmx)傳入tileMap內。
建立一個TiledMapRenderer物件(tileMapRenderer)，把tileMap傳入OrthogonalTiledMapRenderer()內。
注意，TiledMapRenderer是一個介面(Interface)，OrthogonalTiledMapRenderer是一個類別(Class)，它是實作(implements)TiledMapRenderer介面的，所以tileMapRenderer其實是一個reference variable指向OrthogonalTiledMapRenderer物件(則new orthogonalTiledMapRenderer)。
執行程式:
