Major Softwares

  INDEX PAGE

  1. 簡介
  2. Java, Android和LibGDX好書推介
  3. Java, Android和LibGDX要學的知識
  4. 用Windows寫Java程式
  5. 用Eclipse寫Java程式
  6. 用Eclipse寫Android程式
  7. 用Eclipse寫LibGDX程式
  8. Standard Java Naming Conventions
  9. System.out.println()的用法和意思
  10. Where is main() method in Android?

LibGDX - Splash & Menu Screen

  1. LibGDX: World, Texture, Background, Camera, Viewport, Screen & OpenGL
  2. LibGDX: Texture, TextureRegion, SpriteBatch & Sprite
  3. UML(Unified Modeling Language): Class Diagram
  4. Type Casting, Upcasting & Downcasting
  5. @Override的用法和意思
  6. LibGDX: Scene2d & Graphical User Interface(GUI)
  7. LibGDX: Splash Screen
  8. LibGDX: Texture Packer
  9. LibGDX: BitmapFonts, JSON & Skin
  10. Android: R.java File
  11. Android: onClick事件的5種實現方式
  12. LibGDX: Game Menu Screen
  13. LibGDX: Advanced Game Menu Screen (using Abstract Screen)
  14. LibGDX: Disposable Interface
  15. Java & LibGDX: super keyword
  16. LibGDX: Advanced Game Menu Screen (using AssetManager)
  17. Java: Array, Arrays, List, ArrayList & LibGDX: Array
  18. LibGDX: File I/O (Preferences)
  19. LibGDX: Game Level Selection Screen
  20. LibGDX: Advanced Game Level Selection Screen (using AssetManager)

LibGDX - Tiled 2D Platform Game

  1. LibGDX: Lifecylce (Render() Method)
  2. LibGDX: Delta Time
  3. LibGDX: Animation & Spritesheet
  4. LibGDX: Keyboard, Mouse & Touch Screen Control
  5. Input Control (Polling VS Event Driven Input)
  6. LibGDX: Tiled (Background and Foreground)
  7. LibGDX: Jumping Action
  8. LibGDX: Tiled (Collision Detection)
  9. LibGDX: Tiled (Bullet Class)
  10. LibGDX: Audio (Sound & Music)
  11. LibGDX: Tiled (Scrollable Background with Camera & HUD)
  12. LibGDX: WorldController & WorldRenderer Class

LibGDX/Java - Card Game No.1 - Blackjack

  1. LibGDX: Install & Setup Android Studio IDE
  2. LibGDX: Use Android Studio to Run Java Hello World
  3. LibGDX: Use Android Studio to Run LibGDX Hello World
  4. Adobe Illustrator: Basic Components Part 1
  5. Adobe Illustrator: Basic Components Part 2
  6. Adobe Illustrator: BlackJack Table & Cards
  7. LibGDX: Blackjack Animation
  8. LibGDX: Interpolation
  9. Java: toString() Method
  10. Java: Blackjack Shuffle Methods
  11. LibGDX: Blackjack Shuffle Method
  12. Java: Blackjack Card Game

LibGDX - Others

  1. Making and Displaying App Icon
  2. LibGDX: Displaying Traditional and Simplified Chinese Characters
  3. LibGDX: Handling Different Screen Resolutions

Unity Game Engine & C#

  1. Visual Studio: C# Hello World
  2. Unity: C# Hello World
  3. Unity: Handling Different Screen Resolutions
  4. Unity: Life Cycle
  5. Unity: StartCoroutine, StopCoroutine, IEnumerator & Yield
  6. Unity: Splash Screen
  7. Unity: Fonts, Traditional and Simplified Chinese Characters
  8. Unity: GameObject, Class Object, new & Instantiate
  9. Unity: Start Screen with Glowing Animated Button
  10. Unity: C# Get & Set Modifier
  11. Unity: Delegates & Events
  12. Unity: File I/O, Read & Write Text File & PlayerPrefs
  13. Unity: Game Level Selection Screen
  14. Unity: Game Menu Screen & ScreenManager
  15. Unity: Encrypt and Decrypt Text File
  16. Unity: Options Menu Screen
  17. Unity: Convert Numbers Image to Custom Font

Unity - Card Game No.1 - Blackjack

  1. Unity: Blackjack Card Game - Part 1 (Full Game)
  2. Unity: Blackjack Card Game - Part 2
  3. Unity: Blackjack Card Game - Part 3
  4. Unity: Blackjack Card Game - Part 4
  5. Unity: Blackjack Card Game - Part 5
  6. Unity: Blackjack Card Game - Part 6
  7. Unity: Blackjack Card Game - Part 7

以下是預告-Coming soon!


Secret Weapon No.1

  1. Unity: Card Game No.2

Advanced Programming

  1. Unity: GPS Programming
  2. Unity: User Login System
  3. Unity: Augmented Reality (AR)

Secret Weapon No.2

  1. Unity: GPS & AR Application

第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主要包括以下部分:

  1. Background(背景)
  2. Foreground(前景)
  3. Actors (Hero, Bullet & Enemy etc.)
  4. Collision Detection

而我將會利用Tiled Map Editor來製作以下部分:

  1. Background
  2. Foreground
  3. Foreground - Collision Detection (Set properties = "blocked")

1) Background Layer圖片

LibGDX: Tiled Map Editor (Background & Foreground)

2) Foreground Layer圖片

LibGDX: Tiled Map Editor (Background & Foreground)

3) Combined - Background & Foreground Layers合併圖片

LibGDX: Tiled Map Editor (Background & Foreground)

4) 3D構圖 - Background & Foreground Layers合併圖片

LibGDX: Tiled Map Editor (Background & Foreground)

以下是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 :

LibGDX: Tiled Map Editor (Background & Foreground)

下載Tiled Map Editor

Tiled Map Editor可以在以下網站下載:

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 官方下載網站: http://www.mapeditor.org。

Tiled Map Editor檔案格式

Tiled Map Editor須要一個圖片檔案(.png)來儲存不同的小圖片,再產生一個Tiled文件檔案(.tmx),它的格式是XML的資料。

Tiled Map Editor與Bitmap Font、Texture Packer很相似,就是它們各擁有兩個檔案,一個是圖片檔案(.png),另一個是記錄各圖片資料(XML格式),如下圖:

LibGDX: Tiled Map Editor (Background & Foreground)

LibGDX: Tiled Map Editor (Background & Foreground)
  1. Tiled Map Editor的文件內容。

製作Tecture Packer圖片

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 我在第18節 - LibGDX: Texture Packer介紹過如何用Texture Packer軟件把不同的圖片(.png)合併成一張大圖片(.png)。以上所有小圖片(32張)都是32x32 px。

製作Background

建立圖層Layer

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 下載及安裝Tiled Map Editor,完成後建立新檔案,選擇"File"

  2. 選擇"New"

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 設定map的大小。

  2. 因為我們在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

  3. "OK"鍵。

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 把第一層Layer改名為"background"

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 在以上橙色範圍內按Mouse右鍵,選擇"Add Tile Layer"

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 把第二層Layer改名為"foreground"

建立Tileset

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 完成Layer後,建立新Tileset,則我們的tileatlas.png圖片,選擇"Map"

  2. 選擇"New Tileset..."

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 建立Tileset的Name = tileatlas

  2. 選擇檔案位置。

  3. 因為我們在tilealtas.png內的小圖片均是32x32 px,所以設定每一格tile的Width=32 px, Height=32 px。

  4. "OK"鍵。

建立Background圖片

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 選擇"background"圖層。

  2. 選擇喜歡的Tile

  3. 選擇Stamp Brush (B)

  4. 設計您喜歡的Background圖層。

Background Layer完成圖片

按照以下Background Layer完成圖片:

LibGDX: Tiled Map Editor (Background & Foreground)

製作Foreground (Set properties = "blocked")

設定Foreground的Properties = blocked

首先我們把Background和Foreground分開兩層,目的是把Foreground上的物件加上"blocked" properties,這樣做,我們就可以用來偵測物件的互相碰撞(Collision Detection)。

我會在第38節 - LibGDX: Tiled (Collision Detection) 介紹。

以下設有紅色邊的tile(方塊)就須要把properties加上"blocked":

LibGDX: Tiled Map Editor (Background & Foreground)
LibGDX: Tiled Map Editor (Background & Foreground)
  1. 在以上橙色範圍內選擇第一張小圖片按Mouse右鍵,選擇"Tile Properties..."

  2. Properties視窗會出現。

  3. 選擇+號。

    注意,我們須要重複這動作,把所有須要的小圖片,加上Properties = blocked號。

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 輸入的Properties Name = blocked

LibGDX: Tiled Map Editor (Background & Foreground)
  1. Properties = blocked就會建立。

    注意,我們須要重複這動作,把所有須要的小圖片,加上Properties = blocked號。

Foreground Layer完成圖片

設定完properties = blocked後,按照以下Foreground Layer完成圖片:

LibGDX: Tiled Map Editor (Background & Foreground)

儲存檔案

最後儲存檔案:

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 儲存檔案,把檔案儲存為map.tmx

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 注意,我們須要更改以上tileatlas.png的路徑,如果與map.tmx檔案儲存的路徑相同,就不須要指明路徑。

LibGDX顯示Tiled Map

以下介紹如何利用LibGDX顯示Tiled的Background & Foreground在屏幕上:

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 建立一個TiledMap物件(tileMap),把Tiled Map(map.tmx)傳入tileMap內。

  2. 建立一個TiledMapRenderer物件(tileMapRenderer),把tileMap傳入OrthogonalTiledMapRenderer()內。

    注意,TiledMapRenderer是一個介面(Interface),OrthogonalTiledMapRenderer是一個類別(Class),它是實作(implements)TiledMapRenderer介面的,所以tileMapRenderer其實是一個reference variable指向OrthogonalTiledMapRenderer物件(則new orthogonalTiledMapRenderer)。

  3. 設定camera,把camera傳入tiledMapRenderer.setView()方法內。

  4. 把tileMap顯示在屏幕上。

例子1 - LibGDX顯示Tiled的Background & Foreground在屏幕上

這個例子會用LibGDX顯示Tiled的Background & Foreground:

DesktopLauncher.java

LibGDX: Tiled Map Editor (Background & Foreground)
  1. DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為1024 X 768 px。

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 把hero1Atlas.pack和hero1Atlas.png儲存到Android的Assets文件夾內(/data/...)。

  2. 把map.tmx和tileAtlas.png儲存到Android的Assets文件夾內(/map/...)。

MyDemo36.java

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 建立變數(Variable)。

  2. 設定camera為orthographic projection,false代表yDown=false,則是座標y-axis向上。

  3. 建立一個TiledMap物件(tileMap),把Tiled Map(map.tmx)傳入tileMap內。

  4. 建立一個TiledMapRenderer物件(tileMapRenderer),把tileMap傳入OrthogonalTiledMapRenderer()內。

    注意,TiledMapRenderer是一個介面(Interface),OrthogonalTiledMapRenderer是一個類別(Class),它是實作(implements)TiledMapRenderer介面的,所以tileMapRenderer其實是一個reference variable指向OrthogonalTiledMapRenderer物件(則new orthogonalTiledMapRenderer)。

  5. 設定camera,把camera傳入tiledMapRenderer.setView()方法內。

  6. 把tileMap顯示在屏幕上。

    注意,如果我們不須要分開Background和Foreground兩個田圖層,可用tiledMapRenderer.render()代替。

執行程式:

LibGDX: Tiled Map Editor (Background & Foreground)

例子2 - 加入Actor和Control Input

最後,我們把以上例子1和第36節 - LibGDX: Input Control (Polling VS Event Driven Input)的Control Input 合併。

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 建立變數(Variable)。

  2. 加入一個新的整數 int grid = 32,因為每一格小圖片是32 X 32 px,方便計算。

  3. 設定camera為orthographic projection,false代表yDown=false,則是座標y-axis向上。

  4. 建立一個TiledMap物件(tileMap),把Tiled Map(map.tmx)傳入tileMap內。
    建立一個TiledMapRenderer物件(tileMapRenderer),把tileMap傳入OrthogonalTiledMapRenderer()內。

    注意,TiledMapRenderer是一個介面(Interface),OrthogonalTiledMapRenderer是一個類別(Class),它是實作(implements)TiledMapRenderer介面的,所以tileMapRenderer其實是一個reference variable指向OrthogonalTiledMapRenderer物件(則new orthogonalTiledMapRenderer)。

  5. 把sprite的高度上升3格tile,則grid*3-1 = 32 X 3,減1可以去除漂浮的感覺。

  6. 設定camera,把camera傳入tiledMapRenderer.setView()方法內。

  7. 把tileMap顯示在屏幕上。

    注意,如果我們不須要分開Background和Foreground兩個田圖層,可用tiledMapRenderer.render()代替。

執行程式:

LibGDX: Tiled Map Editor (Background & Foreground)

以下是LibGDX: Tiled Map Editor (Background & Foreground)程式執行的動畫:


Download above code and sample pictures here!