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

第47節 - Adobe Illustrator: Basic Components Part 2

這一節會繼續介紹Adobe Illustrator的一些基本特效和元件, 下一節會開始製作Adobe Illustrator 的Blackjack Table(桌子)、Cards(紙牌)、Gambling Chips(籌碼)和Scores(分數)等等。

1. 材質 (Texture) No.1 - Blackjack Table Felt Cover

完成圖:

Adobe Illustrator: BlackJack Table & Cards

開始製作:

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

  2. 設定大小為500x400 px。

  3. 設定顏色為R:45, G:131和B:47

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Add New Fill。

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

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

  3. 再設定Opacity=50% Overlay。

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

  2. 選擇Rectangle,再在Menu中選擇Film Grain。

  3. 在Appearance Panel內設定Film Grain的數值。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Add New Fill,再新增一個Fill,設定Fill的顏色。

  2. 設定Fill的Opacity=10% Multiply。。

  3. 選擇Rectangle,再在Menu中選擇Sponge,再設定Sponge的數值。

2. 材質 (Texture) No.1 - Metal Texture

完成圖:

Adobe Illustrator: BlackJack Table & Cards

開始製作:

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

  2. 設定大小為300x212 px。

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

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

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Add New Fill。

  2. 設定Fill的Gradient,設定顏色和Opacity。

  3. 設定Fill的Opacity=15%。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Add New Fill,再新增一個Fill,設定Fill的顏色。

  2. 選擇Rectangle,再在Menu中選擇Colored Pencil,再設定Colored Pencil的數值。

  3. 設定Fill的Opacity=5% Multiply。

3. Slot No.1 for Chips

完成圖:

Adobe Illustrator: BlackJack Table & Cards

Adobe Illustrator: BlackJack Table & Cards

開始製作:

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

  2. 設定大小為600x100 px。

  3. 設定顏色。

Adobe Illustrator: BlackJack Table & Cards
  1. 再選擇Rectangle Tool,新增一個Rectangle。

  2. 設定大小為500x300 px。

  3. 設定顏色。

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

  2. 設定四個角的Radius=3 px。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Rectangle,再在Menu中選擇Expand Appearance,這樣做可以把Anchor Points建立在四個角上,下一步就可以用Pathfinder的Minus Front,把兩個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:57, G:219和B:74

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

  2. 設定Fill的Gradient,設定顏色和Opacity。

  3. 設定Fill的Opacity=80% Color Burn。

Adobe Illustrator: BlackJack Table & Cards
  1. 選擇Add New Fill,再新增一個Fill。

  2. 設定Fill的Gradient,設定顏色和Opacity。

Adobe Illustrator: BlackJack Table & Cards
  1. 設定Stroke(邊線)=1x,inside,再設定Stroke(邊線)的顏色。

Adobe Illustrator: BlackJack Table & Cards
  1. 最後把它們合併,完成圖。

4. Slot No.2 for Chips

完成圖:

Adobe Illustrator: BlackJack Table & Cards

Adobe Illustrator: BlackJack Table & Cards

開始製作:

Adobe Illustrator: BlackJack Table & Cards
  1. 用以上介紹過的例子2 - Metal Texture材質用作底部。

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

  2. 設定大小為34x152 px。

  3. 設定Fill的Gradient,設定顏色和Opacity。

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

  2. 設定四個角的Radius=3 px。

Adobe Illustrator: BlackJack Table & Cards
  1. 再選擇Rectangle,再在Menu中選擇Inner Glow。

  2. 設定Inner Glow的數值。

Adobe Illustrator: BlackJack Table & Cards
  1. 設定Stroke(邊線)=3x,inside,再設定Stroke(邊線)的顏色。

  2. 設定Stroke(邊線)的Opacity=10% 。

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

  2. 設定Drop Shadow,Y Offset=1代表Shadow向下,再設定Shadow顏色。

Adobe Illustrator: BlackJack Table & Cards
  1. 再選擇Rectangle,再在Menu中選擇Effect>Stylize>Drop Shadow。

  2. 設定Drop Shadow,X Offset=-1代表Shadow向左。,再設定Shadow顏色。

Adobe Illustrator: BlackJack Table & Cards
  1. 再選擇Rectangle,再在Menu中選擇Transform。

  2. 新增五個Rectangle,每個相距38 px,則否copy=5, Move Horizontal=38 px。

5. Using External Scripts - Round Any Corner

Adobe Illustrator的功能雖然強大,但有時都會欠缺一些方便的功能,Adobe Illustrator有一個Scripts功能,讓大家設計自己的功能,以下Round Any Corner就是其中一個。

Adobe Illustrator的Round Corners功能只可以一次過設定四個角的圓形,不能選擇其中的一個或多個,下載Round Any Corner Scripts就可以做到。

完成圖:

Adobe Illustrator: BlackJack Table & Cards

下載Scripts:

Adobe Illustrator: BlackJack Table & Cards
  1. 在以上網址下載Scripts。

  2. 點擊下載。

Adobe Illustrator: BlackJack Table & Cards
  1. 把下載完成的Round Any Corner.js儲存在電腦的任何位置。

開始製作:

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

  2. 選擇圖片下方的兩個角。

  3. 按鍵盤Shift鍵可以連續選擇。

  4. 在Menu中選擇Other Scripts,選擇已下載完成的Round Any Corner.js

  5. 設定Radius=10 px。

Download above code and sample pictures here!