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

第46節 - Adobe Illustrator: Basic Components Part 1

從這一節開始,我會介紹LibGDX的紙牌遊戲 - 21點(Blackjack)。要製作LibGDX的Blackjack遊戲 ,主要分為以下部分:

  1. 用Adobe Illustrator製作BlackJack的圖片,例如: Blackjack Table(桌子)、Cards(紙牌)、Gambling Chips(籌碼)和Scores(分數)等等。

  2. 用LibGDX製作紙牌的動作效果,例如: 洗紙牌動作(Shuffle)、派牌動作、出牌動作和翻牌動作等等。

  3. 用LibGDX製作BlackJack遊戲程式。

  4. 最後加入音效和背景音樂(Audio - Sound & Music)。

BlackJack的草圖

首先我們可以用紙筆設計我們心目中的Blackjack遊戲畫面,如下圖:

Adobe Illustrator: BlackJack Table & Cards

Adobe Illustrator - BlackJack的完成圖片

用Adobe Illustrator製作BlackJack的圖片,我會在下幾節詳細介紹:

注意,圖片製作是參考http://tutsplus.com

Adobe Illustrator: BlackJack Table & Cards

Adobe Illustrator: BlackJack Table & Cards


為甚麼要用Adobe Illustrator?

首先Illustrator是用向量(Vector)方法處理影像,則是所晝出來的圖案是用點、線和面再加上座標所構成的圖案,因為是向量圖,如果我們把圖案放大,圖案不會變得模糊。

在以下例子,Illustrator是用y=x方程式記錄斜線的資料,如果我們把斜線放大,它還是y=x方程式,所以斜線不會變得模糊。

而Photoshop是用點陣(Raster, Bitmap或Pixel)方法處理影像,所以放大後,圖案就會出現鋸齒和模糊。

如下圖:

Adobe Illustrator: BlackJack Table & Cards


Adobe Illustrator的基本技巧

1. 設定單位(Unit)

Adobe Illustrator: BlackJack Table & Cards
  1. 設定單位Pixels (px)。

2. 建立新檔案(New File)

Adobe Illustrator: BlackJack Table & Cards
  1. 建立新檔案,大小為1024x768 px。

3. 顯示格子(Show Grid)

Adobe Illustrator: BlackJack Table & Cards


4. 設定鍵盤的移動值(Keyboard Increment)

Adobe Illustrator: BlackJack Table & Cards
  1. 每按一次鍵盤上下左右鍵,已選擇的物件就會移動1px,這是一個很簡單但十分好用的方法。

5. 新增Pathfinder到右邊的Panel位置

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Window>Pathfinder,Pathfinder panel就會出現,再把Pathfinder拖曳到右邊的Panel位置。

  2. Pathfinder就會出現在右邊的Panel位置。

    注意,其他Panel也可以用相同方法放在右手面的位置。

Adobe Illustrator的特效

以下會介紹一些基本特效,這些特效將會用在我們的BlackJack圖片上。

1. 凹入文字特效(Engraved Text) - 方法1

完成圖:

Adobe Illustrator: BlackJack Table & Cards

開始製作:

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle Tool。

  2. 設定大小為400x200 px。

  3. 設定顏色為R:128, G:130和B:132

  4. Appearance Panel會自動產生Stroke和Fill

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Type Tool。

  2. 設定字體、粗細和大小。

  3. 設定字體顏色。

Adobe Illustrator: BlackJack Table & Cards
  1. 首先別忘記選擇字體,再在Menu中選擇Drop Shadow。

  2. 在Appearance Panel按Drop Shadow。

  3. 設定Drop Shadow,Y Offset=-1代表Shadow向上。

  4. 設定Shadow顏色。

Adobe Illustrator: BlackJack Table & Cards
  1. 再建立一個新的Shadow,首先別忘記選擇字體,再在Menu中選擇Drop Shadow。

  2. 在Appearance Panel按Drop Shadow。

  3. 設定Drop Shadow,Y Offset=1代表Shadow向下。

  4. 設定Shadow顏色。

2. 凹入文字特效(Engraved Text) - 方法2

這個文字特效的結果與方法1相同,但方法2比較複雜,這裡介紹方法2只作參考,建議大家選用方法1。

完成圖:

Adobe Illustrator: BlackJack Table & Cards

開始製作:

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle Tool。

  2. 設定大小為400x200 px。

  3. 設定顏色為R:128, G:130和B:132

  4. Appearance Panel會自動產生Stroke和Fill

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Type Tool。

  2. 設定字體、粗細和大小。

  3. 設定字體顏色。

Adobe Illustrator: BlackJack Table & Cards
  1. 首先別忘記選擇字體,再在Menu中選擇Create Outlines,這樣做可以把Anchor Points建立在字體的輪廓(Outline)上,簡單來說就是把hkprogram.com拆成一個一個獨立的英文字母。

Adobe Illustrator: BlackJack Table & Cards
  1. 別忘記選擇字體,再在Menu中選擇Object>Compound Path>Make,這樣做可以把剛剛建立的獨立英文字母再合併成為一個Compound Path。

Adobe Illustrator: BlackJack Table & Cards
  1. ^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製兩次的意思。

    Compound Path就會在正前方複製兩次。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇最上層的Compound Path。

  2. 按鍵盤向下鍵一次,因為我們在這節開始時已設定Keyboard increment = 1 px

  3. 按鍵盤Shift鍵再選擇第二層的Compound Path,現在已選擇了二層的Compound Path。

  4. 在Pathfinder按Minus Front,把兩個Compound Path物件相

Adobe Illustrator: BlackJack Table & Cards
  1. 把兩個Compound Path物件相後,會產生一個Group物件。

  2. 選擇Add New Fill。

  3. 設定顏色為R:74, G:74和B:74

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇底層的Compound Path。

  2. 設定顏色為R:109, G:110和B:112

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇底層的Compound Path。

  2. 在Menu中選擇Drop Shadow。

  3. 設定Drop Shadow,Y Offset=1代表Shadow向下。

  4. 設定Shadow顏色。

3. 凸出文字特效(Embossed Text) - 方法1

要做出凸出文字特效其實十分簡單,只要把以上例子2的白色Shadow向上,而黑色Shadow向下,就可做出凸出文字特效:

完成圖:

Adobe Illustrator: BlackJack Table & Cards

開始製作:

Adobe Illustrator: BlackJack Table & Cards
  1. 首先別忘記選擇字體,再在Menu中選擇Effect>Stylize>Drop Shadow。

  2. 設定Drop Shadow,Y Offset=-1代表Shadow向上。

  3. 設定Shadow顏色。

  4. 再建立一個新的Shadow,首先別忘記選擇字體,再在Menu中選擇Drop Shadow。

  5. 設定Drop Shadow,Y Offset=1代表Shadow向下。

  6. 設定Shadow顏色。

4. Round Edge Effect - 例子1

完成圖:

Adobe Illustrator: BlackJack Table & Cards

Adobe Illustrator: BlackJack Table & Cards

開始製作:

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle Tool。

  2. 設定大小為400x80 px。

  3. 設定顏色為R:61, G:62和B:64

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle Tool。

  2. 設定大小為400x1 px。

  3. 因為我們想建立一個比底色較深的顏色,所以我們可以把圓圈向下移動,如上圖。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle Tool。

  2. 設定大小為400x2 px。

  3. 因為我們想建立一個比底色較淺的顏色,所以我們可以把H值加大約22

  4. 再把圓圈向上移動,如上圖。

Adobe Illustrator: BlackJack Table & Cards
  1. 最後把兩條直線放在上圖位置。

5. Round Edge Effect - 例子2

完成圖:

Adobe Illustrator: BlackJack Table & Cards

Adobe Illustrator: BlackJack Table & Cards

開始製作:

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle Tool。

  2. 設定大小為400x80 px。

  3. 設定顏色為R:67, G:26和B:20

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle Tool。

  2. 設定大小為400x1 px。

  3. 因為我們想建立一個比底色較深的顏色,所以可以把圓圈向下移動,如上圖。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle Tool。

  2. 設定大小為400x2 px。

  3. 因為我們想建立一個比底色較淺的顏色,所以我們可以把H值加大約22

  4. 再把圓圈向上移動,如上圖。

Adobe Illustrator: BlackJack Table & Cards
  1. 最後把兩條直線放在上圖位置。

6. Button

完成圖:

Adobe Illustrator: BlackJack Table & Cards

開始製作:

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle Tool。

  2. 設定大小為100x40 px。

  3. 設定顏色為R:109, G:110和B:112

Adobe Illustrator: BlackJack Table & Cards
  1. 首先別忘記選擇Rectangle,再在Menu中選擇Round Corners。

  2. 把握Radius設定為5px。

Adobe Illustrator: BlackJack Table & Cards
  1. 在Menu中選擇Object>Expand Appearance,這樣做可以把Anchor Points建立在四個角上,下一步就可以用Offset Path建立出一個相同形狀但面積比較小的圖形,再用Pathfinder的Minus Front,把兩個Rectangle物件相

Adobe Illustrator: BlackJack Table & Cards
  1. 首先別忘記選擇Rectangle,再在Menu中選擇Offset Path。

  2. 設定Offset Path=-2。

    注意,Offset Path不是把原本的Rectangle縮小,而是會自動產生一個新的Rectangle。

Adobe Illustrator: BlackJack Table & Cards
  1. ^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製兩次的意思。

    Path就會在正前方複製兩次。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇最上層的Path。

  2. 按鍵盤向下鍵兩次,因為我們在這節開始時已設定Keyboard increment = 1 px

  3. 按鍵盤Shift鍵再選擇第二層的Path,現在已選擇了二層的Path。

  4. 在Pathfinder按Minus Front,把兩個Path物件相

Adobe Illustrator: BlackJack Table & Cards
  1. 把兩個Path物件相後,會產生一個Path物件。

  2. 設定顏色為R:255, G:255和B:255

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇下一層的Path,則原本的話Rectangle。

  2. ^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製兩次的意思。

  3. Path就會在正前方複製兩次。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇最上層的Path。

  2. 按鍵盤向下鍵五次,因為我們在這節開始時已設定Keyboard increment = 1 px

  3. 按鍵盤Shift鍵再選擇第二層的Path,現在已選擇了二層的Path。

  4. 在Pathfinder按Minus Front,把兩個Path物件相

Adobe Illustrator: BlackJack Table & Cards
  1. 設定Gradient,設定左邊的顏色(任何顏色,因為是完全透明),Opacity=0%,則是完全透明。

  2. 設定Gradient,設定右邊的顏色,Opacity=100%,則是完全不透明。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇剛剛產生的圖形。

  2. ^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製一次的意思。

  3. 用Rotate Tool把圖形迴轉180度,再放置在下方,如上圖。

Adobe Illustrator: BlackJack Table & Cards
  1. 把原本的Rectangle暫時拉出。

  2. 設定Stroke(邊線)=2x,inside。

  3. 再設定Stroke(邊線)的Opacity=20%。

  4. Appearance Panel如上圖。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle。

  2. 設定Fill的Gradient,設定左邊的顏色(任何顏色,因為是完全透明),Opacity=0%,則是完全透明。

  3. 設定Fill的Gradient,設定右邊的顏色,Opacity=100%,則是完全不透明。

Adobe Illustrator: BlackJack Table & Cards
  1. 再設定Fill的Opacity=50%。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇上方較小的Rectangle,並按鍵盤的delete鍵,把較小的Rectangle刪除。

  2. 最後把它們合併。

Adobe Illustrator: BlackJack Table & Cards
  1. 完成圖。

Download above Illustrator file here!