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

第63節 - Unity: Splash Screen

這一節我會介紹Unity的過場動畫(Splash Screen),我會介紹以下三種方法:

1: Method 1 - Using C# Script

2: Method 2 - Advance Method 1 Using Animation Curve

3: Method 3 - Using Animation

1.0 Result (執行結果):

以下是本節Unity: Splash Screen三種方法所執行的結果:

2.0 Method 1 - Using C# Script

方法一會用C# Script的StartCoroutine()方法,調用IEumerator Type的FadeIn()方法,再用yield return statement輸出不同的Color Alpha值,做出Fade In效果。我在第62節 - Unity: StartCoroutine, StopCoroutine, IEnumerator & Yield有詳細介紹,如下圖:

Unity: Splash Screen
  1. 建立一個新Project 。

  2. 把有關圖片拖放到Assets區域內。

  3. 選擇Main Camera,設定Camera Orthographic Size = 圖片高度的一半 = 2560/2 = 1280。

Unity: Splash Screen
  1. 建立一個新的Canvas Image Bg,再選擇Canvas。

  2. 設定Render Mode = Screen Space - Camera。

  3. 把握Main Camera拖放到Render Camera內。

  4. 設定UI Scale Mode = Scale With Screen Size,Reference Resolution = 1440 x 2560和平Screen Match Mode = Expand。

Unity: Splash Screen
  1. 選擇bg。

  2. 設定Rect Transform= 1440 x 2560。

  3. 把有關圖片拖放到Source Image內。

  4. 把有關C# Script拖放到bg內,則Add Component。

Unity: Splash Screen
  1. 建立Image物件img,在Inspector區域內就可以把有關圖片拖放到Image物件img內 。

  2. 建立Scene物件mainPage。

  3. 在Start()方法內執行StartCoroutine("FadeIn")。

  4. 當For-Loop Statement執行到yield return時,i的值會被儲存,For-Loop就會被暫停和先跳離FadeIn()方法去同步執行StartCoroutine()方法之後的程式,再繼續For-Loop部分去完成所有i的值

  5. 利用SceneManager.LoadScene()方法把畫面轉到mainPage。

Unity: Splash Screen
  1. 儲存Scene 。

Unity: Splash Screen
  1. 建立一個新Scene,選擇Main Camera。

  2. 設定Camera Orthographic Size = 圖片高度的一半 = 2560/2 = 1280。

Unity: Splash Screen
  1. 建立一個新的Canvas Image mainpage,再選擇Canvas。

  2. 設定Render Mode = Screen Space - Camera。

  3. 把握Main Camera拖放到Render Camera內。

  4. 設定UI Scale Mode = Scale With Screen Size,Reference Resolution = 1440 x 2560和平Screen Match Mode = Expand。

Unity: Splash Screen
  1. 選擇mainpage。

  2. 設定Rect Transform= 1440 x 2560。

  3. 把有關圖片拖放到Source Image內。

Unity: Splash Screen
  1. 儲存Scene 。

Unity: Splash Screen
  1. 在File>Build Setting內加入兩個Scene。

  2. 把Build Settings關上。

Unity: Splash Screen
  1. 執行程式。

3.0 Method 2 - Advance Method 1 Using Animation Curve

方法二是方法一的改良版,利用AnimationCurve類別計算出不同的Color Alpha值,做出Fade In效果,如下圖:

Unity: Splash Screen
  1. 建立一個新Project 。

  2. 把有關圖片拖放到Assets區域內。

  3. 選擇Main Camera,設定Camera Orthographic Size = 圖片高度的一半 = 2560/2 = 1280。

Unity: Splash Screen
  1. 建立一個新的Canvas Image Bg,再選擇Canvas。

  2. 設定Render Mode = Screen Space - Camera。

  3. 把Main Camera拖放到Render Camera內。

  4. 設定UI Scale Mode = Scale With Screen Size,Reference Resolution = 1440 x 2560和Screen Match Mode = Expand。

Unity: Splash Screen
  1. 選擇bg。

  2. 設定Rect Transform= 1440 x 2560。

  3. 把有關圖片拖放到Source Image內。

  4. 把有關C# Script拖放到bg內,則Add Component。

  5. 把bg圖片拖放到C# Script內。

  6. 按Animation Curve。

Unity: Splash Screen
  1. 選擇圖形。

  2. 設定Time = 5。

Unity: Splash Screen
  1. 建立Image物件img,在Inspector區域內就可以把有關圖片拖放到Image物件img內 。

  2. 建立AnimationCurve物件animationCurve。

  3. 在Start()方法內執行StartCoroutine()方法。

  4. 建立IEnumerator FadeIn()方法。

  5. 設定Color Alpha值為animationCurve.Evalutate(Time.time),則用不同的時間(Time.time)計算出animationCurve的值,再代入Color Alpha的值內。

  6. 設定img.color。

  7. 當For-Loop Statement執行到yield return時,i的值會被儲存,For-Loop就會被暫停和先跳離FadeIn()方法去同步執行StartCoroutine()方法之後的程式,再繼續For-Loop部分去完成所有i的值

  8. 利用SceneManager.LoadScene()方法把畫面轉到mainPage。

Unity: Splash Screen
  1. 儲存Scene 。

Unity: Splash Screen
  1. 建立一個新Scene,選擇Main Camera。

  2. 設定Camera Orthographic Size = 圖片高度的一半 = 2560/2 = 1280。

Unity: Splash Screen
  1. 建立一個新的Canvas Image mainpage,再選擇Canvas。

  2. 設定Render Mode = Screen Space - Camera。

  3. 把Main Camera拖放到Render Camera內。

  4. 設定UI Scale Mode = Scale With Screen Size,Reference Resolution = 1440 x 2560和Screen Match Mode = Expand。

Unity: Splash Screen
  1. 選擇mainpage。

  2. 設定Rect Transform= 1440 x 2560。

  3. 把有關圖片拖放到Source Image內。

Unity: Splash Screen
  1. 儲存Scene 。

Unity: Splash Screen
  1. 在File>Build Setting內加入兩個Scene。

  2. 把Build Settings關上。

Unity: Splash Screen
  1. 執行程式。

4.0 Method 3 - Using Animation

方法三利用Animation Controller計算出不同的Color Alpha值,做出Fade In效果,如下圖:

Unity: Splash Screen
  1. 建立一個新Project 。

  2. 把有關圖片拖放到Assets區域內。

  3. 選擇Main Camera,設定Camera Orthographic Size = 圖片高度的一半 = 2560/2 = 1280。

Unity: Splash Screen
  1. 建立一個新的Canvas Image Bg,再選擇Canvas。

  2. 設定Render Mode = Screen Space - Camera。

  3. 把Main Camera拖放到Render Camera內。

  4. 設定UI Scale Mode = Scale With Screen Size,Reference Resolution = 1440 x 2560和Screen Match Mode = Expand。

Unity: Splash Screen
  1. 選擇bg。

  2. 設定Rect Transform= 1440 x 2560。

  3. 把有關圖片拖放到Source Image內。

  4. 把有關C# Script拖放到bg內,則Add Component。

  5. 把bg圖片拖放到Animator內。

Unity: Splash Screen
  1. 選擇Add Property。

  2. 設定Image.Color.a = 0 to 1。

  3. 設定Time = 0:00 to 3:00。

Unity: Splash Screen
  1. 在Start()方法內執行StartCoroutine()方法。

  2. 建立IEnumerator SplashScreen()方法。

  3. 當For-Loop Statement執行到yield return new WaitForSeconds(5)時,等待5秒,i的值會被儲存,For-Loop就會被暫停和先跳離FadeIn()方法去同步執行StartCoroutine()方法之後的程式,再繼續For-Loop部分去完成所有i的值

  4. 利用Application.LoadLevel(1)方法把畫面轉到mainPage,0 = scene,而1 = mainpage。

Unity: Splash Screen
  1. 儲存Scene 。

Unity: Splash Screen
  1. 建立一個新Scene,選擇Main Camera。

  2. 設定Camera Orthographic Size = 圖片高度的一半 = 2560/2 = 1280。

Unity: Splash Screen
  1. 建立一個新的Canvas Image mainpage,再選擇Canvas。

  2. 設定Render Mode = Screen Space - Camera。

  3. 把握Main Camera拖放到Render Camera內。

  4. 設定UI Scale Mode = Scale With Screen Size,Reference Resolution = 1440 x 2560和平Screen Match Mode = Expand。

Unity: Splash Screen
  1. 選擇mainpage。

  2. 設定Rect Transform= 1440 x 2560。

  3. 把有關圖片拖放到Source Image內。

Unity: Splash Screen
  1. 儲存Scene 。

Unity: Splash Screen
  1. 在File>Build Setting內加入兩個Scene。

  2. 把Build Settings關上。

Unity: Splash Screen
  1. 執行程式。