Transcript 課程教材下載 - 東吳大學資訊管理系「線上學習平台」

教育部網路通訊人才培育先導型計畫─課程發展計畫
Android 遊戲設計
郭育政
涂昆源
余執彰
周建興
林旭陽
Android 遊戲設計模組
東吳大學資訊管理系
萬能科技大學資訊工程系
萬能科技大學資訊工程系
淡江大學電機工程系
東吳大學資訊管理系
1
課程目標

本模組課程主要的目的是讓學生瞭解如何在
Android手機開發環境下，設計互動式的手機遊
戲，我們將利用手機的特殊感應裝置(如加速器、
平衡器、GPS與多點觸控等)，設計易於操作與
使用的手機互動式體感遊戲
Android 遊戲設計模組
2
模組實驗規劃
Android UI介面遊戲專題製作：利用Android 手
機UI程式元件，實作UI介面遊戲
 Android動畫遊戲專題製作：利用Android 手機
動畫程式元件，實作動畫遊戲
 Android體感遊戲專題製作：利用Android 手機
體感裝置程式元件，實作體感遊戲
 Android多觸控遊戲專題製作：利用Android 手
機多觸控裝置程式元件，實作多觸控遊戲

Android 遊戲設計模組
3
教學規劃

嵌入式系統
–
–
–
–
年級：大四
修課人數：21人
授課時數：12小時
授課內容：
•
•
•
•
Android 介面 UI
動畫遊戲
體感遊戲
多重觸控
Android 遊戲設計模組
4
Android簡介
Android是Google於2007年11月推出的作業系統
 目前為手機開放聯盟(Open Handset Alliance)發
展推廣，使用於手機與嵌入式平台
 開放式架構，開放程式碼
 系統核心為Linux
 程式開發以Java語言為主

Android 遊戲設計模組
5
Android Time Line
版本
1.1
1.5
1.6
2.0 / 2.1
2.2
2.3
3.0
4.0
發表日期
2009-02-01
Cupcake（杯子蛋糕） 2009-04-30
Donut（甜甜圈）
2009-09-15
Éclair（閃電泡芙）
2009-10-26
Froyo（冷凍憂格）
2010-05-20
Gingerbread（薑餅） 2010-12-06
Honeycomb（蜂巢） 2011-02-22
Ice Cream（冰淇淋）註 Supposed mid 2011
Android 遊戲設計模組
代號
註：尚未證實
6
美國mobile市場佔有率sep.2010
引用自comscore.com
Share (%) of Smartphone Subscribers
Jun-10
Total Smartphone Subscribers
Sep-10 Point Change
100.0%
100.0%
N/A
RIM
40.1%
37.3%
-2.8
Apple
24.3%
24.3%
0.0
Google
14.9%
21.4%
6.5
Microsoft
12.8%
10.0%
-2.8
4.7%
4.2%
-0.5
Palm
Android 遊戲設計模組
引用http://www.comscore.com/Press_Events/Press_Releases/2010/11/comScore_Reports_September_2010_U.S._Mobile_Subscriber_Market_Share/
7
美國mobile市場佔有率dec.2010
引用自comscore.com
Share (%) of Smartphone Subscribers
Sep-10
Dec-10 Point Change
Total Smartphone Subscribers
100.0%
100.0%
N/A
RIM
37.3 %
31.6%
-5.7
Google
21.4 %
28.7%
7.3
Apple
24.3 %
25.0%
0.7
Microsoft
9.9%
8.4%
-1.5
Palm
4.2%
3.7%
-0.5
Android 遊戲設計模組
引用http://www.comscore.com/Press_Events/Press_Releases/2011/2/comScore_Reports_December_2010_U.S._Mobile_Subscriber_Market_Share
8
全球mobile市場佔有率-3Q10
引用自gartner
Company
3Q10
3Q10 Market
3Q09
3Q09 Market
Units
Share (%)
Units
Share (%)
Symbian
29,480.1
36.6
18,314.8
44.6
Android
20,500.0
25.5
1,424.5
3.5
iOS
13,484.4
16.7
7,040.4
17.1
Research In Motion
11,908.3
14.8
8,522.7
20.7
Microsoft Windows Mobile
2,247.9
2.8
3,259.9
7.9
Linux
1,697.1
2.1
1,918.5
4.7
Other OS
1,214.8
1.5
612.5
1.5
80,532.6
100.0
41,093.3
100.0
Total
Android 遊戲設計模組
引用 http://www.gartner.com/it/page.jsp?id=1466313
9
全球mobile市場佔有率-2010
引用自gartner
Company
2010
2010 Market
2009
2009 Market
Units
Share (%)
Units
Share (%)
Symbian
111,576.7
37.6
80,878.3
46.9
Android
67,224.5
22.7
6,798.4
3.9
Research In Motion
47,451.6
16.0
34,346.6
19.9
iOS
46,598.3
15.7
24,889.7
14.4
Microsoft
12,378.2
4.2
15,031.0
8.7
Other Oss
11,417.4
3.8
10,432.1
6.1
296,646.6
100.0
172,376.1
100.0
Total
Android 遊戲設計模組
引用 http://www.gartner.com/it/page.jsp?id=1543014
10
Android執行環境
live-android
 Android-x86 Project - Run Android on Your PC
 Android SDK 開發環境（模擬器）

– Windows
– Linux
– Mac OS X (intel)

Android 手機
Android 遊戲設計模組
11
live-android
Android 遊戲設計模組
http://code.google.com/p/live-android/
12
Android-x86
Android 遊戲設計模組
http://www.android-x86.org/
13
Android SDK開發環境建構
安裝 Java JDK
 安裝 Eclipse
 安裝 Android SDK, 設定PATH
 Eclipse中安裝Android Development Tools (ADT)
 安裝 Android SDK Packages
 建立Android Virtual Devices (AVD)

Android環境設定
Android 遊戲設計模組
14
AndroidGame 課程與實驗




Android 2D 遊戲專題製作：
配對記憶遊戲／九宮格
Android 3D動畫遊戲專題
製作：骰子3D／骰子俄羅
斯方塊3D
Android體感遊戲專題製作：
接硬幣／平衡球
Android多觸控遊戲專題製
作：縮放圖片／抓鈔票
Android 遊戲設計模組
15
安裝課程與實習程式



前往 Android 遊戲程式設計 網頁
依據Eclipse環境編碼設定，下載Unicode或Big5編碼
的範例程式壓縮檔
解開壓縮檔後，啟動 eclipse ，利用既有程式產生
Android專案方式，如下面投影片說明
Android 遊戲設計模組
16
產生Android專案
點選File->new->Project->
產生右圖->Android Project
->Next

Android 遊戲設計模組
17
專案選擇既有程式



點選Create project from
existing source
選擇專案所在路徑也就
是Location, 找到範例壓
縮檔解開的目錄
選擇Android Target版本
，課程與實習範例的版
本均為2.2
Android 遊戲設計模組
18
Android程式基本單元
Activity
 Layout
 Intent
 Service
 Menu
 Widget
 SurfaceView

Android 遊戲設計模組
19
Android遊戲開發基本框架
View
 OnDraw
 Canvas
 SurfaceView
 OpenGL ES
 Gesture
 Sensor

Android 遊戲設計模組
20
2D繪圖Graphics
Drawable
 Animation

– Tween Animation 補間動畫
– Frame Animation 頁框動畫
Android 遊戲設計模組
21
遊戲常用的類別 Class

Grpahics
–
–
–
–

Canvas
Paint
Color
Bitmap
SurfaceView
– SurfaceView.getHolder
– SurfaceView.CallBack
Android 遊戲設計模組
22
課程單元一：Android 2D 遊戲
Android UI介面遊戲設計






利用Android 手機UI程式
元件，實作UI介面遊戲
配對記憶遊戲介紹
版面配置Layout (XML)
Random 產生數字1-8
檢查配對正確並顯示結果
配對完成，顯示勝利視窗
Android 遊戲設計模組
23
配對記憶遊戲介紹
在一堆被蓋住圖案的卡片中，找出兩個相同圖
案的卡片。
 若是翻開的兩張卡片圖案不一樣，則卡片會再
次蓋上，直到它被成功配對為止。
 遊戲最終目標是把所有卡片都完成配對。

Android 遊戲設計模組
24
配對記憶遊戲功能

主要功能：
–
–
–
–
以XML 做版面配置
卡片的產生
配對動作表現方式
配對正確性的判斷
Android 遊戲設計模組

次要功能：
– 遊戲計時的功能
– 警示視窗的應用
– 以Menu 做遊戲功能選單
25
版面配置XML


最外層以 “LinearLayout” 編排
內部包含：Chronometer (計時器)、TableLayout
res/layout/main.xml
Android 遊戲設計模組
26
卡片的產生-1


在onCreate()中設定反蓋的卡片圖案
宣告mainTable與main.xml的TableLayout做連結
Android 遊戲設計模組
27
卡片的產生-2

利用ArrayList儲存各種卡片圖片
Android 遊戲設計模組
28
卡片的產生-3


產生卡片圖案
產生卡片編號(用來判斷配對)
Android 遊戲設計模組
29
卡片的產生-4



在mainTable中加入
「列」
每列產生定量的卡片
(以Button作為卡片)
對卡片做初始設定
Android 遊戲設計模組
30
卡片的產生-5

產生編號步驟：
– 1. 加入卡片編號1~16
到ArrayList
– 2. 從ArrayList中隨機
取出號碼
– 3. 取得此號碼除以8
的餘數後，存入
"cards"二維陣列
Android 遊戲設計模組
31
遊戲初始畫面





遊戲計時器，提供遊戲
經過時間
使用TableLayout放置4*4
個按鈕，隨機產生數字18各兩個
顯示短暫時間並檢查配
對是否正確
使用Toast 顯示配對結果
判斷是否完成並使用
Dialog顯示勝利視窗
Android 遊戲設計模組
32
配對動作表現方式-1


定義Button的OnClickListener的class
取得被按下的Button位置，並進行翻轉動作
Android 遊戲設計模組
33
配對動作表現方式-2



將按鈕圖案改為對
應編號的圖案
用Timer製造卡片圖
案暫留的效果(或是
使用Thread的sleep
方法)
用handler判斷卡片
是否配對正確
Android 遊戲設計模組
34
配對正確性的判斷-1


定義Handler的class來處理卡片的配對檢查
checkCards為檢查配對正確性的副程式，後面解說
Android 遊戲設計模組
35
配對正確性的判斷-2




定義一個新的class
“Card”
存放卡片位置(x, y)
存放Button狀態
將用於暫存需要比較
的兩張卡片內容
Android 遊戲設計模組
36
配對正確性的判斷-3


checkCards比較兩個位置的卡片編號是否相同
若是相同，則直接將這兩個按鈕設為「無法動作」
Android 遊戲設計模組
37
配對正確性的判斷-4


若是不同，則將兩張卡片的圖案恢復(反蓋)
清空兩個用來比較的暫存位置
Android 遊戲設計模組
38
遊戲計時的功能-1


宣告一個"chronometer"物件，並與main.xml內的
chronometer做結合。
設定計時器顯示格式( “%s” 即為計時器所顯示的時間)
Android 遊戲設計模組
39
遊戲計時的功能-2


設定計時器時間的初始值
啟動計時器
Android 遊戲設計模組
40
警示視窗的應用-1

用Toast訊息顯示配對狀況
Android 遊戲設計模組
41
警示視窗的應用-2



統計配對個數，若
大於等於總共可配
對數，則停止計時
與產生勝利畫面。
用Dialog作為勝利
提示視窗
加入可點選關閉視
窗的按鈕
Android 遊戲設計模組
42
配對記憶遊戲畫面
Android 遊戲設計模組
43
以Menu 做遊戲功能選單


重新遊戲：呼叫
initilizeGame()副程式
結束遊戲：
this.finish();
Android 遊戲設計模組
44
配對記憶遊戲Menu畫面


按手機上的 “Menu” 按鈕
就會出現
遊戲進行中、遊戲結束
後皆可操作
Android 遊戲設計模組
45
Android UI介面遊戲實習：九宮格



九宮格遊戲
隨機產生1到8的數
字排列，數字按照
畫面順序排列即完
成
使用Menu,
SurfaceView,
OnTouchEvent
Android 遊戲設計模組
46
課程單元二：Android 3D動畫遊戲
骰子3D



利用Android 手機
動畫程式元件，
實作3D動畫遊戲
骰子3D遊戲，碰
觸時隨機旋轉
OpenGL ES
Android 遊戲設計模組
47
OpenGL ES

OpenGL for Embedded System

GLSurfaceView
–
–
–
–
connect OpenGL ES to the View system.
make OpenGL ES work with the Activity life-cycle.
easy to choose an appropriate frame buffer pixel format.
Creating and managing a separate rendering thread to enable
smooth animation.
Android 遊戲設計模組
48
骰子3D程式架構:共分為四個class




RussiaCube:用OpenGL ES描述骰子如何繪製。
GLRenderer:用OpenGL ES設定光線與繪製骰子本身。
Dice3D:用RussiaCube此class產生物件，並控制其變數與遊戲介面與
設定(例:manu,觸控)，以進行遊戲。
GLView
Android 遊戲設計模組
骰子方塊的定義

Vertex ( Vertices), Edge ,Face

int vertices[] = {-half, -half, half};
//宣告一點，依其順序分表代表
X
,Y
,Z

int vertices[] = {-half, -half, half, half, -half ,half};
宣告兩點
X ,Y ,Z ,X ,Y ,Z

gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);
決定用剛剛的vertices陣列繪製成點，線或面
Android 遊戲設計模組
繪製方式-1

GL_POINTS
GL_LINES
GL_TRIANGLES
繪製方式-2

GL_LINE_STRIP
GL_LINE_LOOP

GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN
Android 遊戲設計模組
骰子方塊的定義Code 1/2
Android 遊戲設計模組
53
骰子方塊的定義Code 2/2
Android 遊戲設計模組
54
光線的設定

在RussiaCube我們定義了何謂骰子？但此時我們還沒設定光線與實
際進行繪製的動作
Android 遊戲設計模組
55
骰子方塊的描繪-1



我們在物件中每個方塊的每個面都有
寫一個draw()與loadTexture()函式
因此我們可以在不同的面貼上不同的
紋理圖，也可以單獨畫出物件的某個
面
另外我們可用glTranslatef來移動，
GlRotatef來旋轉，再draw出我們所
需的圖片
Android 遊戲設計模組
56
骰子方塊的描繪-2



gl.glRotatef(90f,
gl.glRotatef(90f,
gl.glRotatef(90f,
角度
Android 遊戲設計模組
1.0f,
0.0f,
0.0f,
x
0.0f,
1.0f,
0.0f,
,y
0.0f);
0.0f);
1.0f);
,z
骰子方塊的描繪-3

接著我們可以將許多個不同的面的物件組成方塊，再將許多
方塊物件組成俄羅斯方塊物件，最後組成一個簡單的draw()
放到public void onDrawFrame(GL10 gl)中就完成，以下我
們draw出所有arraylist中的物件
Android 遊戲設計模組
58
骰子方塊的產生與控制-1

1.以物件的方式產生，需先寫RussiaCube類別，當需要新方塊
時 new 一個新的方塊然後加入arraylist或linklist，既可以
簡單控制多個物件。
RussiaCube a= new RussiaCube();
GLCubeL.add(a); GLCubeL.add(a);
GLCubeL.add(a);
代表GLCubeL這個arraylist中已放置三個物件：
GLCubeL.get(0).number=5;
GLCubeL.get(1).number=3;
GLCubeL.get(2).number=6;
可以控制這三個物件中的變數或執行物件中funtion
Android 遊戲設計模組
59
骰子方塊的產生與控制-2

2.使用thread控制物件中的變數或函數，進而依時間改變
方塊的旋轉角度或位移方向。
例:thread的控制：
thread.run();
thread.sleep(1000);
thread.stop();

3.使用隨機函數產生下一次旋轉方向。
例:
myRandomX = new Random();
R3 = (int) Math.abs(myRandomX.nextInt()%7);
Android 遊戲設計模組
60
方塊的控制Code 1/2
Android 遊戲設計模組
61
方塊的控制Code 2/2
Android 遊戲設計模組
62
偵測螢幕解析度
DisplayMetrics dm = new DisplayMetrics();
 getWindowManager().getDefaultDisplay().getMetr
ics(dm);
 int screenWidth = dm.widthPixels;
 int screenHeight = dm.heightPixels;

Android 遊戲設計模組
63
Android 3D動畫遊戲實習-骰子俄羅
斯方塊3D


點選骰子可旋轉本
身
當骰子落底可計算
分數並標示分數
Android 遊戲設計模組
64
課程單元三：Android體感遊戲：接
硬幣





利用Android 手機體感
程式元件，實作多觸
控遊戲接硬幣遊戲
全螢幕的使用方法
加速感應器的應用
小豬撲滿的產生
錢幣拋物線掉落
Android 遊戲設計模組
65
接硬幣遊戲介紹
畫面中會隨機落下無數的硬幣
 硬幣有三種不同的面值顏色
 藉由偵測手機的傾斜角度來移動小豬撲滿並接
硬幣
 遊戲目的是比較誰能接到最高面額的硬幣

Android 遊戲設計模組
66
全螢幕的作法
Android 遊戲設計模組
67
全螢幕的作法-1



方法：step 1.消除手機狀態的Bar
使用getWindow(). setFlag()函式來設定視窗屬性
屬性以WindowManager.LayoutParams.FLAG_FULLSCREEN
設定為全螢幕
Android 遊戲設計模組
68
全螢幕的作法-2



方法：step 2.消除應用程式的標題
使用requestWindowFeature函式來去掉應用程式標題
屬性以Window.FEATURE_NO_TITLE，就可以去掉應用程式的
標題
Android 遊戲設計模組
69
全螢幕的作法-綜合
Android 遊戲設計模組
70
小豬撲滿的產生

設定一個新的Bitmap的箱子box放小豬撲滿圖形
Android 遊戲設計模組
71
小豬撲滿的偵測移動


以sensor的加速度Accelerometer來做Gy軸的偵測
假如加速度Gy大於2的話，箱子就往右移動5格，
假如小於5的話，就往左移動5格
Android 遊戲設計模組
72
小豬撲滿接取硬幣

如果硬幣的左邊及右邊介於箱子的裡面且硬幣的高度
低於箱子的話，就reset硬幣並加分
Android 遊戲設計模組
73
加速感應器Accelerometer





Android加速感應器分X,Y,Z三軸
X軸向右、Y軸向上、Z軸向前是正的，反方向是負的
SensorEvent.value[0]：X軸
SensorEvent.value[1]：Y軸
SensorEvent.value[2]：Z軸
Android 遊戲設計模組
74
硬幣的掉落


藉由物理公式：X軸水平方向上位移是x=Vot
Y軸垂直方向上的速度V=gt，位移y=0.5gt²。
以此來做硬幣的拋物線運動。
Android 遊戲設計模組
75
接硬幣遊戲畫面-1
Android 遊戲設計模組
76
接硬幣遊戲畫面-2
Android 遊戲設計模組
77
課程單元四：Android多觸控遊戲：
縮放圖片

利用Android 多重觸控
程式元件，實作兩點
距離縮小放大縮放圖
片遊戲
Android 遊戲設計模組
78
縮放圖片功能介紹


用手指拖曳圖片
用雙指距離縮小放
大來縮放圖片
Android 遊戲設計模組
79
縮放圖片版面安排

以View作為程式主體
Android 遊戲設計模組
80
縮放圖片圖形繪製


在onDraw() 中做畫面的繪圖處理
translate(), scale(), drawBitmap()
Android 遊戲設計模組
81
螢幕觸碰
onTouchEvent(MotionEvent event)
 event.getAction() /* event的Action判斷 */

– MotionEvent.ACTION_DOWN /*手指接觸銀幕*/
final float x = ev.getX(); /*取得座標*/
final float y = ev.getY();
– MotionEvent.ACTION_UP /*手指離開銀幕*/
– MotionEvent.ACTION_MOVE /*手指移動*/
Android 遊戲設計模組
82
用手指拖曳圖片-1


用 onTouchEvent() 偵測動作
在手指第一次觸碰時先記錄該點
Android 遊戲設計模組
83
用手指拖曳圖片-2


記錄觸碰點移動時
的座標
與先前記錄的觸碰
點做比較，算出移
動距離
Android 遊戲設計模組
84
縮放圖片程式執行畫面
Android 遊戲設計模組
85
兩指縮放圖片


用ScaleGestureDetector偵測雙指縮放動作
限制縮放大小
Android 遊戲設計模組
86
程式執行畫面
Android 遊戲設計模組
87
程式執行畫面 - 移除註解版
Android 遊戲設計模組
88
Android體感遊戲實習：平衡球


改變手機傾斜角度，
移動藍色球，落入
紅色洞則成功，落
入黑色洞則失敗
手機震動
Android 遊戲設計模組
89
Sensor種類
方位 ORIENTATION
 加速度 ACCELEROMETER
 磁場 MAGNETIC _FIELD
 溫度 TEMPERATURE

Android 遊戲設計模組
90
Sensor感測器
/* 取得感測器服務 */
mSensorManager
=(SensorManager)getSystemService(Context.SENSOR_SERVICE);
 /* 註冊加速度監聽器，並可設定感測器類型及其它設定 */
mSensorManager.registerListener(mSensorListener,mSensorManager.getDefaultSens
or(Sensor.TYPE_ACCELEROMETER),
SensorManager.SENSOR_DELAY_FASTEST);
 /*使用重力加速度感應器*/
private final SensorEventListener mSensorListener = new SensorEventListener()
{ public void onSensorChanged(SensorEvent se)
{ }}

Android 遊戲設計模組
91
Android多觸控遊戲實習-抓鈔票



不同面額鈔票落下
兩指對鈔票做出抓取動
作（縮小動作）即可得
到該面額錢數
一分鐘內能夠抓取多少
錢
Android 遊戲設計模組
92
THE END