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

第38節 - LibGDX: Tiled (Collision Detection)

這一節我會介紹LibGDX遊戲的Collision Detection System,我在第36節 - LibGDX: Tiled Map Editor (Background & Foreground)介紹過如何利用Tiled Map Editor製造一張foreground Map Layer,再在foreground上加上"blocked" properties。

一個2D Platformer Game遊戲的Collision Detection System主要包括以下部分:

  1. Right Collision
  2. Left Collision
  3. Bottom Collision
  4. Top Collision

製作Foreground (Set properties = "blocked")

以下設有紅色邊的tile(方塊)就須要把properties加上"blocked",詳細介紹請看第36節 - LibGDX: Tiled Map Editor (Background & Foreground):

LibGDX: Tiled Map Editor (Background & Foreground)

執行結果:

以下是LibGDX: Tiled (Collision Detection)程式執行的結果:


Collision Detection主要部分介紹

1) Cell & Tile的分別

在Tiled的Map內,有不同的Layer,而每一層Layer內,就有不同的格子(Tile),為甚麼還有Cell? Cell也是一個類別,它是TiledMapTileLayer類別的static Inner Class,Cell類別把Tile物件(tile)傳入,因為Cell類別有很多不同的方法可以用在Tile物件(tile)上,例如: getTile 、setTile、getFlipHorizontally()、setFlipHorizontally、 getFlipVertically、 setFlipVertically、 getRotation()和 setRotation()等等,如下圖:

LibGDX: Tiled Map Editor (Background & Foreground)

以下是LibGDX的官方解釋:

A cell is a container for a TiledMapTile. The cell itself stores a reference to a tile in addition to attributes that specify if the tile should be rotated or flipped when rendering it.

2) Tile Coordinate System

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 以上是Tile的座標系統,座標(0,0)設定在左下角。

3) 建立isCellBlocked() Method

LibGDX: Tiled Map Editor (Background & Foreground)
  1. 建立一個isCellBlocked()方法,把tile的座標傳入。

  2. 注意,傳入tile的座標後,我們用getCell()方法取得tile座標的(x,y)值,(x,y)值必須是int type。
    例如: int(2.35) = 2,int(2.999) = 2等等。

  3. 我們在foreground Layer內只建立以上紅色邊的tile,其他沒有紅色邊的tile不是tile!,所以會return null。

  4. 用Cell類別的cell.getTile().getProperties(0.constantKeys()方法,偵測tile是否有"blocked" properties。

Right Collision

LibGDX:  Tiled (Collision Detection)
  1. 建立一個collisionRight()方法,偵測右手面的兩個tile是否有"blocked" properties。

  2. 因為主角(hero1)是面向右手面,所以偵測的兩點須要加上64px。
LibGDX:  Tiled (Collision Detection)
  1. 例如主角(hero1)的座標是(0,0),兩個tile的座標便會是(2,2)和(2,1)

  2. 注意,因為主角(hero1)企立的位置是用collisionBottom()方法偵測後計算出來,(hero1)企立的位置不一定是(0, 32, 64, 96....的整數),所以就會有小小偏差(大約2px)。

    就是這小小偏差(大約2px),偵測的兩個tile的座標便會向下移一格,我會在其他章節介紹準確計算座標的方法。

Left Collision

LibGDX:  Tiled (Collision Detection)
  1. 建立一個collisionLeft()方法,偵測左手面的兩個tile是否有"blocked" properties。

  2. 因為主角(hero1)是面向左手面,所以偵測的兩點須要減少5px。
LibGDX:  Tiled (Collision Detection)
  1. 例如主角(hero1)的座標是(160,0),兩個tile的座標便會是(4,2)和(4,1)

  2. 注意,因為主角(hero1)企立的位置是用collisionBottom()方法偵測後計算出來,(hero1)企立的位置不一定是(0, 32, 64, 96....的整數),所以就會有小小偏差(大約2px)。

    就是這小小偏差(大約2px),偵測的兩個tile的座標便會向下移一格,我會在其他章節介紹準確計算座標的方法。

Bottom Collision

LibGDX:  Tiled (Collision Detection)
  1. 建立一個collisionBottom()方法,偵測左手面兩個tile是否有"blocked" properties。

  2. 偵測右手面兩個tile是否有"blocked" property。

    注意,右手面和右手面偵測的座標有所不同,是因為我們勿須偵測主角(hero1)最背後位置的tile是否有"blocked" properties,如果沒有,代表主角(hero1)是企在空氣中,主角(hero1)便會下降
LibGDX:  Tiled (Collision Detection)
  1. 例如主角(hero1)的座標是(128,64),兩個tile的座標便會是(5,2)和(6,2)

  2. 注意,因為主角(hero1)企立的位置是用collisionBottom()方法偵測後計算出來,(hero1)企立的位置不一定是(0, 32, 64, 96....的整數),所以就會有小小偏差(大約2px)。

    就是這小小偏差(大約2px),偵測的兩個tile的座標便會向下移一格,我會在其他章節介紹準確計算座標的方法。
LibGDX:  Tiled (Collision Detection)
  1. 例如主角(hero1)的座標是(128,64),兩個tile的座標便會是(4,2)和(5,2)

  2. 注意,因為主角(hero1)企立的位置是用collisionBottom()方法偵測後計算出來,(hero1)企立的位置不一定是(0, 32, 64, 96....的整數),所以就會有小小偏差(大約2px)。

    就是這小小偏差(大約2px),偵測的兩個tile的座標便會向下移一格,我會在其他章節介紹準確計算座標的方法。

Top Collision

LibGDX:  Tiled (Collision Detection)
  1. 建立一個collisionTop()方法,偵測頭頂一個tile是否有"blocked" properties就足夠。

  2. 偵測頭頂一個tile是否有"blocked" properties。
LibGDX:  Tiled (Collision Detection)
  1. 例如主角(hero1)的座標是(128,0),兩個tile的座標便會是(5,2)

  2. 注意,這次因為是在空中偵測頭頂的座標,小了(大約2px)後,便會回復正確的tile。

LibGDX程式

例子1 - 2D Platformer Game with Collision Detection

這個例子會用LibGDX示範Collision Detection System:

DesktopLauncher.java

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

LibGDX:  Tiled (Collision Detection)
  1. 把hero1Atlas.pack和hero1Atlas.png儲存到Android的Assets文件夾內(/data/...)。

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

MyDemo38.java

LibGDX:  Tiled (Collision Detection)
  1. 建立collisionRight, collisionLeft, collisionBottom和collisionTop變數(Variable)。

  2. 建立一個TiledMapTileLayer的物件(foregroundLayer),並把foreground Layer傳入。

  3. 建立Collision Detection System的方法:

    1) isCellBlocked()
    2) collisionRight()
    3) collisionLeft()
    4) collisionBottom()
    5) collisionTop()

  4. 設定State.Walking動作,Walking動作須要偵測以下方向:

    1) collisionRight()
    2) collisionLeft()
    3) collisionBottom()

  5. 設定State.Jumping動作,Jumping動作須要偵測以下方向:

    1) collisionTop()
    2) collisionBottom()

執行程式:

LibGDX:  Tiled (Collision Detection)

以下是LibGDX: Tiled (Collision Detection)程式執行的結果:


Download above code and sample pictures here!