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

第73節 - Unity: Options Menu Screen

這一節我會介紹Unity: Options Menu Screen,Options Menu Screen包括以下UI Components:

  1. UI - Canvas

  2. UI - Button

  3. UI - Slider

  4. UI - Toggle

  5. UI - Toggle Group

  6. UI - Text

Unity: Options Menu Screen

1) Result (執行結果):

以下是本節第73節 - Unity: Options Menu Screen的執行結果:

2) Step By Step Tutorial

以下會詳細介紹每一個步驟:

Unity: Options Menu Screen
  1. 選擇Main Camera。

  2. 設定Orthographic Size = 512。

  3. 加入Audio Source。

  4. 把兩張圖片和一個背景音樂檔案拖放到Assets區域內,再拖放背景音樂到Audio Source內。

首先我會製作以下UI Components:

Unity: Options Menu Screen


Unity: Options Menu Screen
  1. 建立一個Canvas。

  2. 選擇Main Camera,把Main Camera拖放到Render Camera內。

  3. 設定Canvas的不同值。

Unity: Options Menu Screen
  1. 建立一個UI Panel - Panel。

  2. 設定Panel的Anchors位置在底部、Panel的座標、高度和寬度。

  3. 設定Panel的顏色。

  4. 加入Animator。

    注意: 我們必須把Animator,因為我們不希望Panel一開始就進入畫面,而是當我們按一下按鈕後才把Panel進入畫面。

Unity: Options Menu Screen
  1. 選擇Add Property,再選擇Panel - Anchored Position。

  2. 在時間軸=0時,把Panel座標設定為X = 1.25、Y = -290和Z = 0。

Unity: Options Menu Screen
  1. 在時間軸=1秒時,把Panel座標設定為X = 1.25、Y = 352和Z = 0。

Unity: Options Menu Screen
  1. 開啟Animator。

  2. 選擇Entry。

  3. 選擇Parmeters。

  4. 選擇Bool,再輸入isHidden。

Unity: Options Menu Screen
  1. 選擇以上按鈕。

  2. 輸入movein。

  3. 設定Speed = 1。

Unity: Options Menu Screen
  1. 選擇剛剛完成的movein按鈕、再按照Mouse右鍵,選擇Copy,然後Paste,即複製一個按鈕。

  2. 輸入moveout。

  3. 設定Speed = -1。

Unity: Options Menu Screen
  1. 選擇以上箭咀。

  2. 選擇 +,再選擇isHidden和true。

Unity: Options Menu Screen
  1. 選擇以上箭咀。

  2. 選擇 +,再選擇isHidden和false。


Unity: Options Menu Screen
  1. 建立一個UI Button - BackButton。

  2. 設定BackButton的Anchors位置在中間、BackButton的座標、高度和寬度。

Unity: Options Menu Screen
  1. 選擇BackButton的Text。

  2. 設定以上BackButton Text的所有值。

Unity: Options Menu Screen
  1. 建立一個UI Slider - Slider。

  2. 設定Slider的Anchors位置在中間、Slider的座標、高度和寬度。

Unity: Options Menu Screen
  1. 選擇Slider的Text。

  2. 設定Slider Text的Anchors位置在中間、Slider Text的座標、高度和寬度。

  3. 設定以上Slider Text的所有值。

Unity: Options Menu Screen
  1. 選擇Slider。

  2. 把Main Camera拖放到OnValueChanged()方法內,再選擇AudioSource > Volume。

Unity: Options Menu Screen
  1. 建立一個UI Toggle - Toggle。

  2. 設定Toggle的Anchors位置在中間、Toggle的座標、高度和寬度。

Unity: Options Menu Screen
  1. 選擇Toogle的Background。

  2. 設定Toogle Background的Anchors位置在中間、Toogle Background的座標、高度和寬度。

  3. 把musicon圖片拖放到底Image內。

Unity: Options Menu Screen
  1. 選擇Toogle的Checkmark。

  2. 設定Toogle Checkmark的Anchors位置在中間、Toogle Checkmark的座標、高度和寬度。

  3. 把musicoff圖片拖放到底Image內。

Unity: Options Menu Screen
  1. 選擇Toogle的Label。

  2. 設定Toogle Label的Anchors位置在中間、Toogle Label的座標、高度和寬度。

  3. 設定以上Toogle Label的所有值。

Unity: Options Menu Screen
  1. 選擇Toogle。

  2. 把Main Camera拖放到OnValueChanged()方法內,再選擇AudioSource > Mute。

Unity: Options Menu Screen
  1. 建立一個UI Panel - SubPanel。

  2. 設定SubPanel的Anchors位置在底部、SubPanel的座標、高度和寬度。

  3. 設定SubPanel的顏色。

  4. 加入Toggle Group。

Unity: Options Menu Screen
  1. 建立一個UI Toggle - Toggle1。

  2. 設定Toggle1的Anchors位置在中間、Toggle1的座標、高度和寬度。

  3. 把SubPanel拖放到Group。

Unity: Options Menu Screen
  1. 選擇Toogle1的Label。

  2. 設定Toogle1 Label的Anchors位置在中間、Toogle1 Label的座標、高度和寬度。

  3. 設定以上Toogle1 Label的所有值。

Unity: Options Menu Screen
  1. 建立一個UI Toggle - Toggle2。

  2. 設定Toggle2的Anchors位置在中間、Toggle2的座標、高度和寬度。

  3. 把SubPanel拖放到Group。

Unity: Options Menu Screen
  1. 選擇Toogle2的Label。

  2. 設定Toogle2 Label的Anchors位置在中間、Toogle Label的座標、高度和寬度。

  3. 設定以上Toogle2 Label的所有值。

Unity: Options Menu Screen
  1. 建立一個UI Text - Text。

  2. 設定Text的Anchors位置在中間、Text的座標、高度和寬度。

Unity: Options Menu Screen
  1. 建立一個UI Button - OptionButton。

  2. 設定OptionButton的Anchors位置在底部、OptionButton的座標、高度和寬度。

  3. 把Controller Object拖放到OnClick()方法內,再選擇MyScript1.Option.Pressed()方法。

Unity: Options Menu Screen
  1. 選擇OptionButton的Text。

  2. 設定以上OptionButton Text的所有值。

Unity: Options Menu Screen
  1. 建立一個Empty GameObject - Controller。

  2. 建立一個C# Script,並把它拖放到My Script 1,最後把Text、Toggle1和平Panel GameObject拖放到以上位置。

Unity: Options Menu Screen
  1. 建立public和private變數。

  2. 建立一個OptionPressed()方法。

  3. 建立一個BackPressed()方法。

  4. 在Update()方法內用if - else statement決定顯示英文或中文文字。

Unity: Options Menu Screen
  1. 選擇BackButton。

  2. 把Controller拖放到OnClick()方法內,再選擇MyScript1.BackPressed()方法。

Unity: Options Menu Screen
  1. 選擇OptionButton。

  2. 把Controller拖放到OnClick()方法內,再選擇MyScript1.OptionPressed()方法。

執行結果

Unity: Options Menu Screen
  1. 執行結果,如上。

Download above code and sample pictures here!