資訊管理系 專題成果報告 行動 APP 製作 節奏遊戲 Rhythm Stars 學生 : 黃政皓 謝瑋良 謝政宏 楊啟杰 李皓揚 本成果報告書經審查及口試合格特此證明 考試委員 : 指導老

Transcription

1 中國科技大學 資訊管理系 專題成果報告 行動 APP 製作 -- 節奏遊戲 Rhythm Stars 學生 : 黃政皓 謝瑋良 謝政宏 楊啟杰 李皓揚 指導老師 : 陳瓊瑤 中華民國 105 年 5 月 中國科技大學

2 資訊管理系 專題成果報告 行動 APP 製作 節奏遊戲 Rhythm Stars 學生 : 黃政皓 謝瑋良 謝政宏 楊啟杰 李皓揚 本成果報告書經審查及口試合格特此證明 考試委員 : 指導老師 : 中華民國 105 年 5 月

3 目錄 目錄... 3 圖目錄... 4 致謝... 1 摘要... 2 第一章前言 APP 的發展與趨勢 研究動機 研究目的... 3 第二章文獻探討 APP 開發工具 節奏遊戲歷史 節奏遊戲介紹... 9 第三章研究探討 研究方法 ANDROID APP 開發工具說明 ANDROID APP 程式架構 ANDROID APP GUI 布局 ANDROID APP/JAVA 應用程式偵錯 第四章 ANDROID APP 音樂遊戲實作 RHYTHM STARS 音樂遊戲架構 畫面設計 程式設計 第五章團隊分工 團隊分工 進度規劃 第六章研究結果與心得 參考文獻 附錄 專題製作會議紀錄... 90

4 圖目錄 圖 1. ANDROID 開發環境... 4 圖 2. 1SIMON... 9 圖 3. REFLEC BEAT... 9 圖 4. MAIMAI 圖 5. 太鼓達人 圖 6. ANY BEATS 圖 7. CYTUS 圖 8. XML 中 LAYOUT 的類型 圖 9. LINEARLAYOUT 的排版 圖 10. TABLELAYOUT 的排版 圖 11. 本專題遊戲 APP 首頁 圖 12. 遊戲畫面 圖 13. 遊戲說明畫面 圖 14. 音樂天地畫面 圖 15. 遊戲成績畫面 圖 16. 註冊畫面 圖 17. 遊戲設定畫面 圖 18. 遊戲設定畫面... 50

5 致謝 感謝專題指導老師陳瓊瑤老師這幾個月下來的幫忙與指導, 我們製作的是音樂的節奏遊戲, 比起做其他類型的專題來的困難與麻煩 因為有她用心的幫我們找尋相關的程式與思考遊戲的配置與建構, 我們的專題作品才能夠完成 也感謝各位評審老師們, 提出你們的意見與鼓勵, 讓我們的專題作品可以改正錯誤的地方, 並且功能更加齊全 -1 -

6 摘要 行動裝置的實用性與便利性, 使得 APP 快速發展, 造就現今社會上的龐大市場, 因此我們希望能夠學習 APP 的製作, 了解 APP 的營運方式與增進 APP 的開發邏輯概念, 搭上這股時代的洪流 APP 目前主要分 IPHONE 及 Android 二大主流, 本專題選擇 Android 開發 Android APP 程式的 IDE 軟體, 簡易的有 App Inventor, 功能較完整的則有 Eclipse 及 Android Studio, 雖然 Google 即將不支援 Eclipse, 但由於圖書館及網路上參考資料仍以 Eclipse 為多, 故本專題選擇使用 Eclipse 作開發工具 遊戲類的 APP 在各大 APP 下載平台的下載量都是最高的, 所以我們以遊戲為出發點, 希望可以製作一款能夠讓大眾在閒暇之餘可以享受節奏快感的音樂遊戲 當實際進行開發後, 才發現其難度超出預期, 許多專業功能並非小組目前能力所能及, 故本專題選擇實現基本功能, 實作一簡單音樂遊戲 :Rhythm Stars -2 -

7 第一章前言 1.1 APP 的發展與趨勢手機軟體從翻天覆地的變化到進入我們的生活僅僅發生在這短短的幾年中 現代社會多數人持有行動裝置 ( 智慧型手機 平板電腦 ), 原習慣透過 Web 上網找 尋資訊的使用者逐漸轉移至行動裝置與 App 上 智能手機及其應用程序已經成為了我們日常生活中的重要組成部分, 並已極短的時間成為了我們幾乎不可缺少的一部分 或許你可以原諒自己上學堂不帶書, 但是你很難接受一個人出門不帶手機的事實 附近有什麼好吃的 路怎麼走 股票現在是漲還是跌? 過去這些當下的需求, 無法立即被滿足, 但是有了行動裝置之後, 立即搜尋 消費成為亟待滿足的新商機 隨著消費者停留在裝置上瀏覽網頁 閱讀 遊戲 社交活動等行為越來越普遍, 行動裝置用戶花在瀏覽 App 的時間已大幅超越網頁瀏覽 近年也出現有線智慧電視, 於目前提供給用戶的 APP 服務內容, 常見的包括影音服務 生活應用 休閒遊戲 股票證券等 身處移動裝置時代的我們, 看似正在被科技分離的更遠, 但實際上我們也正因為科技的進步與革新變得更加緊密, 協作交流更加日常化和便捷化 以下介紹幾種類型的 APP 應用於日常的實例 : 1. 社交性 APP: 讓大家即時掌握朋友現況, 也能立即傳達訊息, 很多公司也都會建立群組來交代事務, 甚至有專門交友的 APP 可以認識新朋友, 增進自己的人脈 2. 生活性 APP: 像是交通運輸的時刻查詢, 新聞與氣象新訊或是旅遊指南等, 現在只要有行動裝置, 這些都能一手掌握 3. 學習性 APP: 從前要利用時間看書 寫試題都要大本小本帶著走, 現在很多提供學習的 APP 可以讓大眾在閒暇之餘也能有效利用時間增進知識, 而且如果介面設計得宜, 也能更快找到重點, 帶來比書本更大的學習效益 4. 創作性 APP: 比如圖片編輯 APP 樂器模擬 APP 繪畫 APP 或是文件處理 APP, 這類 APP 能將一時的靈感記錄下來, 讓大眾可以隨心所欲的創作 有了這類 APP 就不怕錯失靈感, 能為社會增添幾分藝術色彩 5. 遊戲性 APP: 與其他平台的遊戲相比 APP 的客群年齡層相對較廣, 以輕鬆遊玩為主的玩家也比較多,APP 遊戲的小品風格可以讓玩家煞時間得同時能獲得樂趣與成就感 早些年的時候, 行動裝置尚未出現, 我們還很依賴電腦, 但是有一個非常普遍的現象就是, 每台電腦裡都會安裝至少一種殺毒軟體 比起 PC 端的各種應用軟體,APP 的無害化得到驗證, APP 的安全性讓移動終端用戶非常放心, 於是激起 -1 -

8 了 APP 開發者們的創業激情, 因為只要產品做得好, 就不用擔心用戶不下載 在 APP 面前, 每位用戶都是一個主體, 你可以建立帳戶,APP 專為你服務 開發者能夠根據不同的作業系統, 開發出各式各樣的應用程式 使得這些行動裝置, 能夠提供更多的功能 舉凡教育 娛樂 工具等各種多元的應用, 都可以透過開發者的巧思, 讓這些應用能夠執行在行動裝置上, 同時還可帶動硬體銷售 廣告支出與科技創新 面對日益激烈的行業競爭和愈加殘酷的淘汰機制, 儘管 App Store 與 Google Play 行動應用軟體數持續增加, 但並不代表開發人員或是開發團隊可以從中獲取更高利益 App 開發不能只著重於程式端的超高技能, 必須著重於 創意 設計 與 行銷 上, 才能有效開創高獲利的契機 例如 : 品牌業者的行銷預算將逐漸由傳統媒體轉移至行動領域, 利用新型態應用 App 進行實驗, 進而抓住行銷與銷售良機, 才能突破重圍突顯自家產品 提升品牌形象並維繫消費者忠誠度 著名 APP 遊戲 Angry Birds 而言, 售價僅 0.99 美元的小遊戲在世界各地持續發燒, 不僅遊戲下載排名經常佔據 App Store 的 Top25 榜上, 週邊商品與電影動畫也陸續推出, 獲得世界廣大消費者的喜愛 整體而言, 免費為目前最當道的商業模式, 對消費者來說, 不需支付分毫即 可享受 APP 的趣味便利性, 背後倚靠的是 APP 廣告的龐大市場 未來我們該如何 更好的設計和包裝自己的 APP 應用, 便成了很多業界人士最關心的事情之一 在 APP 的種類 數量節節攀升,APP 使用者的時間在被稀釋的同時, 他們的地位也得到了顯著提升, 用戶體驗被放在一個至關重要的位置 例如 :Facebook Android Market 及 App Store 等, 都因其平台開放性, 造就了大量 APP 百花爭豔的高度競爭市場, 不僅成就了平台本身, 開發商 消費者 廣告商, 甚至是第四方的廠商也都因此受惠, 形成了龐大商機 在未來, 這種趨勢依舊會只增不減, 極致的用戶體驗將成為 APP 開發者們的終極奮鬥目標 參考文獻 [1]~[11] 1.2 研究動機因為現在智慧型手機普及化 APP 是時下流行的軟體, 在遊戲類的 APP 下載方 面也是各類遊戲中最多的, 市場非常的龐大, 於是想體驗設計一個簡易 APP 節奏 遊戲,APP 也是很多獨立開發者能自由發揮 [ 創意 ] 的平台, 所以希望能夠正式上架 分享給大家我們的想法與提供大家一個休閒又富有挑戰性的遊戲, 也能藉此增進 自己對 APP 的開發概念, 與邏輯思考的能力, 期望可以透過此專題來更了解 APP 這個領域與這龐大的市場 當實際進行開發後, 才發現其難度超出預期, 許多專 -2 -

9 業功能並非小組目前能力所能及, 故本專題選擇實現基本功能, 實作一簡單音樂 遊戲 :Rhythm Stars 參考文獻 :[12]~[14] [18] 1.3 研究目的本專題計劃其內容包括 : 1. 自製一個手機節奏遊戲 APP 2. 此一 APP 可接受使用者設定音樂, 撥放各種類型的歌曲 3. 可搭配音樂節奏, 進行觸碰式遊戲 4. 遊戲介面包括會員管理 遊戲說明 音樂上傳 遊戲主體 玩家計分 -3 -

10 第二章文獻探討 2.1 APP 開發工具 2.1.1Android 系統 Android 作業系統是一個以 Linux 為基礎的開放原始碼行動作業系統, 要用於智慧型手機和平板電腦, 由 Google 成立的 Open Handset Alliance(OHA, 開放手機聯盟 ) 持續領導與開發中 系統架構 Android 系統是基於 Linux 核心開發, 使用 Java 作程式語言, 使介面到功能, 都有層出不窮的變化 除了核心之外, 則是中介層 資料庫元和用 C/C++ 編寫的 API 以及應用程式框架 Android 的應用程式通常以 Java 資料庫元為基礎編寫, 運行程式時, 應用程式的代碼會被即時轉變為 Dalvik dex-code ( Dalvik Executable), 然後 Android 作業系統通過使用即時編譯的 Dalvik 虛擬機來將其運行 目前 Android 的 Linux kernel 控制包括安全 記憶體管理 行程管理 網路堆疊 驅動程式模型等 下載 Android 源碼之前, 先要安裝其構建工具 Repo 來初始化源碼 Repo 是 Android 用來輔助 Git 工作的一個工具 圖 1. Android 開發環境 參考來源 : Android 開發 app - SlideShare -

11 Android 系統中的 Activity 等同於 J2ME 的 MIDlet, 一個 Activity 類別負責建立視窗, 一個活動中的 Activity 就是在 foreground( 前景 ) 模式, 背景執行的程式叫做 Service 兩者之間透過由 Service Connection 和 AIDL 連結, 達到複數程式同時執行的效果 如果執行中的 Activity 全部畫面被其他 Activity 取代時, 該 Activity 便被停止, 甚至被系統清除 View 等同於 J2ME 的 Displayable, 程式人員可以透過 View 類別與 XML layout 檔將 UI 放置在視窗上, 並可以利用 View 打造出所謂的 Widgets, 其實 Widget 只是 View 的一種, 所以可以使用 xml 來設計 layout 至於 ViewGroup 是各種 layout 的基礎抽象類別,ViewGroup 之內還可以有 ViewGroup View 的建構函式不需要在 Activity 中呼叫, 但是 Displayable 的是必須的, 在 Activity 中, 要通過 findviewbyid() 來從 XML 中取得 View,Android 的 View 類的顯示很大程度上是從 XML 中讀取的 View 與事件息息相關, 兩者之間透過 Listener 結合在一起, 每一個 View 都可以註冊 event listener, 例如 : 當 View 要處理使用者觸碰的事件時, 就要向 Android 框架註冊 View.OnClickListener 另外還有 Image 等同於 J2ME 的 BitMap 中介軟體作業系統與應用程式的溝通橋樑, 並用分為兩層 : 函式層和虛擬機器器 Bionic 是 Android 改良 libc 的版本 Android 包含了 Chrome 瀏覽器引擎 Surface flinger 是就 2D 或 3D 的內容顯示到螢幕上 Android 使用工具鏈為 Google 自製的 Bionic Libc Android 採用 OpenCORE 作為基礎多媒體框架 OpenCORE 可分 7 大塊 :PVPlayer PVAuthor Codec PacketVideo Multimedia Framework(PVMF) Operating System Compatibility Library(OSCL) Common OpenMAX Android 使用 Skia 為核心圖形引擎, 搭配 OpenGL/ES Skia 與 Linux Cairo 功能相當, 但相較於 Linux Cairo,Skia 功能還只是陽春型的 2005 年 Skia 公司被 Google 收購,2007 年初,Skia GL 源碼被公開, 目前 Skia 也是 Google Chrome 的圖形引擎 Android 的多媒體資料庫採用 SQLite 資料庫系統 資料庫又分為共用資料庫及私用資料庫 使用者可透過 Content Resolver 類別取得共用資料庫 Android 的中間層多以 Java 實作,4.4 版之前使用特殊的 Dalvik 虛擬機器器 Dalvik 虛擬機器器是一種 暫存器型態 的 Java 虛擬機器器, 變數皆存放於暫存器中, 虛擬機器器的指令相對減少 5.0 版起改用 Android Runtime(ART) Dalvik 虛擬機器器可以有多個例項, 每個 Android 應用程式都用一個自屬的 Dalvik 虛擬機器器 -5 -

12 來執行, 讓系統在執行程式時可達到最佳化 Dalvik 虛擬機器器並非執行 Java 位 元組碼, 而是執行一種稱為.dex 格式的檔案 目前的 Android 作業系統具有以下幾個功能 : 顯示布局 Android 作業系統支援更大的解像度,VGA,2D 顯示,3D 顯示都給予 OpenGL ES 3.0 標準規格 (4.3 版本開始支援 OpenGL ES 3.0), 並且支援傳統的智慧型手機 資料存儲 Android 作業系統內置 SQLite 小型關聯式資料庫管理系統來負責存儲資料 網路 Android 作業系統支援所有的網路制式, 包括 GSM/EDGE IDEN CDMA TD-SCDMA EV-DO UMTS Bluetooth Wi-Fi LTE NFC 和 WiMAX 資訊作為原設計給智慧型手機使用的作業系統,Android 作業系統原生支援簡訊和信件, 並且支援所有的雲端資訊和伺服器資訊 語言 Android 作業系統支援多語言 瀏覽器 Android 作業系統中內建的網頁瀏覽器基於 WebKit 核心, 並且採用了 Chrome V8 引擎 在 Android 4.0 內置的瀏覽器測試中,HTML5 和 Acid3 故障處理中均獲得了滿分, 並且於 2.2 版至 4.0 版之前能原生支援 Flash,4.0 版本後去除對 Flash 的支援 支援 Java 雖然 Android 作業系統中的應用程式大部分都是由 Java 編寫的, 但是 Android 卻是以轉換為 Dalvik executables 的檔案在 Dalvik 虛擬機上執行的 由於 Android 中並不自帶 Java 虛擬機, 因此無法直接執行 Java 程式 不過 Android 平台上提供了多個 Java 虛擬機供用戶下載使用, 安裝了 Java 虛擬機的 Android 系統可以執行 Java_ME 的程式 5.0 版 (Lolipop) 開始以 Android Runtime(ART) 取代 Dalvik 虛擬機 媒體支援 Android 作業系統本身支援以下格式的音訊 / 視訊 / 圖片媒體 :WebM H.263, H.264 (in 3GP or MP4 container) MPEG-4 SP AMR, AMR-WB(in 3GP container) AAC, HE-AAC(in MP4 or 3GP container) MP3 MIDI Ogg Vorbis FLAC WAV JPEG PNG GIF BMP 如果用戶需要播放更多格式的媒體, 可以安裝其他第三方應用程式 流媒體支援 Android 作業系統支援 RTP/RTSP(3GPP PSS, ISMA) 的流媒體以及 (HTML5 <video>) 的流媒體, 同時還支援 Adobe 的 Flash, 在安裝了 RealPlayer 之後, 還支援蘋果 -6 -

13 公司的流媒體 硬體支援 Android 作業系統支援識別並且使用視頻 / 相片攝像頭, 多點電容 / 電阻觸控螢幕, GPS, 加速計, 陀螺儀, 氣壓計, 磁力儀 ( 高斯計 ), 鍵盤, 滑鼠,USB Disk, 專用 的遊戲控制器, 體感控制器, 遊戲手把, 藍牙裝置, 無線裝置, 感應和壓力感測 器, 溫度計, 加速 2D 位位塊傳輸 ( 硬體方向, 縮放, 像素格式轉換 ) 和 3D 圖形 加速 多點觸控 Android 支援原生的多點觸控, 在最初的 HTC Hero 智慧型手機上即有這個功能 該功能是內核級別 ( 為了避免對蘋果公司的觸控螢幕技術造成侵權 ) 藍牙 Android 支援 A2DP,AVRCP, 發送檔案 (OPP), 存取電話簿 (PBAP), 語音撥號和 方送智慧型手機之間的聯繫 同時支援鍵盤, 滑鼠和搖桿 (HID) 多工處理 Android 作業系統支援原生的多工處理 語音功能 除了支援普通的電話通話之外,Android 作業系統從最初的版本開始就支援使用語 音操作來使用 Google 進行網頁搜尋等功能 從 Android 2.2 開始, 語音功能還可以用來輸入文字 語音導航等功能 無線共享功能 Android 作業系統支援用戶使用本機充當 無線路由器, 並且將本機的網路共享 給其他智慧型手機, 其他機器只需要通過 WiFi 尋找到共享的無線熱點, 就可以上 網 而在 Android 2.2 之前的作業系統則需要通過第三方應用或者其他定製版系 統來實現這個功能 截圖功能 從 Android 4.0 開始,Android 作業系統便支援截圖功能, 該功能允許用戶直接抓 取智慧型手機螢幕上的任何畫面, 用戶還可以通過編輯功能對截圖進行處理, 還 可以通過藍牙 / / 微博 / 共享等方式發送給其他用戶或者上傳到網路上, 也可 以拷貝到電腦中 eclipse Eclipse 是由 Open Source Community 所創建的開發軟體, 並被廣泛地使用在 許多不同的領域 例如 : 可作為 Java 應用程式與 Android App 的開發環境 大多數人都知道 Eclipse 是 Java 的 Integrated Development Environment(IDE) 至今, 它已佔據超過全世界 Java 開發環境市場的 50% Eclipse 計畫是由 Eclipse 基金會所管理 Eclipse 基金會是一個非營利性的組織, 大多由以科技公司為背景的成員所組成 -7 -

14 Eclipse 可由額外的附加功能擴充, 目前已有幾個 open source 的計劃案與公 司, 將額外的附加元件擴充至 Eclipse 中, 例如 :Android 開發 Eclipse 也可被 用在一般性用途的應用程式開發上 Eclipse 的優點 : 1. 從編寫 查錯 編譯 幫助等等各方面爲 Java 語言貼身定做 2. 可無限擴展的強大插件功能 3. 衆多公司 廠商 組織的鼎立支持 4. 開放, 自由, 免費 2.2 節奏遊戲歷史音樂遊戲是電子遊戲類型的一種 玩家配合音樂與節奏做出動作 ( 依畫面指 示按鈕 踏舞步 操作模仿樂器的控制器等 ) 來進行遊戲 通常玩家做出的動作 與節奏吻合即可增加得分, 相反情況下則會扣分或不計分, 部分作品甚至會因為 有類似血量限制的設定, 倘若失誤過多, 會強制結束遊戲 (Game Over) 此外某 些遊戲會要求一定的得分, 若無法達成則會結束遊戲 第一款 演奏音樂 的遊戲, 是電子遊戲之父拉爾夫 貝爾在 1978 年發明的一款叫做 Simon 的玩具 Simon 的每個按鍵對應一個固定的聲音, 在其發音後玩家需要根據記憶以同樣的順序按下對應的按鍵 音樂的三要素包括節奏 旋律 和聲, 只是通過記憶音素似乎並不能稱為真正的 音樂遊戲 真正被公認為音樂遊戲始祖的, 則是 1996 年 PS 平台上的啪啦啪啦啪 ( パラッパラッパー ), 這款遊戲確立了 根據節奏做出動作 的概念, 至今為止幾乎被所有的音樂遊戲所沿用 隨後 KONAMI 於 1997 年在街機平台推出 Beatmania 1998 年推出 pop'n music Dance Dance Revolution 等作品形成了 Bemani 系列, 使得音樂遊戲開始大眾化, 同時也慢慢走上核心道路 在音樂遊戲複雜化和高難度化的趨勢下,Namco( 現 BNGI) 於 2001 年推出了太鼓達人, 以其簡單的操作和可愛的角色在各地造成迴響 家用機和掌機方面也出現了 Mad Maestro 應援團 節奏天國等, 這些作為正統的音樂遊戲雖然都保留了核心的要素, 但在操作上已經越來越簡化 與此同時, 類似於 Cytus 這種面向普通玩家的非核心向休閒遊戲, 以及 Deemo 偶像大師 學園偶像祭等以音樂遊戲為外殼的其他類型遊戲也開始流行 [12]~[14][26] -8 -

15 電子遊戲之父拉爾夫 貝爾發明的一款叫做 Simon 的玩具 圖 2. 1Simon 參考來源 :Simon says game, 節奏遊戲介紹 REFLEC BEAT RB 並非是對特定樂器或音樂器材的模擬遊戲 而是引入了觸摸屏以及對戰的 要素 這也是 Bemani 系列裡首款使用觸摸螢幕設備的遊戲系列 融合了音樂遊戲以及氣墊球的遊戲理念, 配合音樂節奏, 將畫面上朝己方判 定線飛來的節奏標靶以觸控方式打回給對方, 以獲得的分數來與對手一較高低 [27] 我們所製作的節奏遊戲, 有很大的一部分是參考這款遊戲的星形判定 原本我們打算用它球到處亂彈跳的界面, 但是看似亂數的球彈到正確的位置, 有一定難度, 不過我們的星型判定, 最剛開始的原型是從這遊戲判定的中間三個點發想, 我們想要在一般的譜面上, 在多一點花樣於是參考於此 這遊戲的優點是他具有對戰功能, 能夠透過網路連線的方法和其他玩家共用 一個畫面, 一邊是藍色一邊是紅色, 勝者可以獲得比較多的獎勵, 裡面也有可以 擾亂對手的殺球這個特殊判定, 十分具有挑戰與趣味性 缺點是譜面十分複雜, 對於新手來說在對戰中會不斷敗北, 可能會因為挫敗 而不想玩, 當然複雜的畫面也是遊戲特色, 彈初學者會較難上手 -9 -

16 圖 3. Reflec Beat 參考來源 : Maimai MAIMAI 又稱洗衣機或舞萌, 是一款由 SEGA 開發的街機音樂遊戲, 對應智慧卡 為 Aime 機台的螢幕呈圓形, 玩家可以通過觸碰螢幕或按鍵來遊玩, 遊玩時圖形會從螢幕中心向外移動, 種類分別是環形的 TAP 兩個環形同時出現, 黃色的 EACH 角條形的 HOLD 和星條形的 SLIDE, 分數達 80% 以上便可以通關, 而遊玩時動作自然變得與跳舞一樣, 機台亦附設攝錄功能, 只要通過自設網站 maimainet 便可以將遊玩過程上載至 niconico 動畫 [31] -10 -

17 我們的譜面設計概念, 從中央飛出球體的概念是參考這款遊戲, 原本是想照 RB 的亂數彈跳去執行, 在製作過程中發現實行有難度, 才採取 maimai 球會從中心 點移動到判定點的做法 優點是它具有錄影功能, 可以錄製自己遊玩的畫面, 很少有大型機台會記錄 自己的遊玩畫面, 是很新穎的設計, 而且在遊玩時可以看到歌曲 PV, 使背景更生 動有趣 缺點是由於此遊戲太多滑動的動作, 會讓玩家玩久了以後感到手部的不適, 雖然有很多專業人士會戴上手套預防傷害, 但也因此讓沒玩過的人有這遊戲沒戴 手套玩不行的想法, 導致此遊戲的玩家增加量減少 圖 4. Maimai 參考來源 : 動漫新聞 太鼓之達人系列太鼓達人是一款於 2001 年起由南夢宮萬代 ( 原南夢宮 ) 發售的業務用街機音樂遊戲系列作品 遊戲玩法與科樂美的 Bemani 系列類似, 玩家需要配合音樂, 敲打機台上的日本傳統樂器 太鼓 的框體, 從而打出正確的節奏 這個系列後來還在 PlayStation 2 PlayStation Portable PlayStation Vita 任天堂 DS Wii 任天堂 3DS Wii U ios 上推出了家用版, 一般使用手柄按鍵進 -11 -

18 行遊戲, 但在 ios PlayStation 2 和 Wii 上也有專門推出的家庭用太鼓 (Tatacon) 操控設備, 使玩家可以在家庭中感受到街機的遊玩效果 [30] 太鼓達人可以說是一款適合全家大小的節奏遊戲, 可愛有趣的畫面 簡易的操作介面 各種類型的歌曲, 讓太鼓達人在節奏遊戲界有著超高人氣 我們也希望製作的節奏遊戲可以有各種類型的歌曲, 讓各個年齡層的人都可以體會遊戲樂趣 裡面我們有參照這遊戲的設定功能, 因為太鼓達人有家用主機的版本, 而且 歷史悠久, 設定功能適切的提供玩家需求 優點是操作簡單只有藍紅按鍵, 可以說是目前最適合全家遊玩的節奏遊戲, 在 wii 裡還能提供最多 4 人對戰, 而且每人都能選擇自己適合的難度 畫面會隨分數的改變而不同, 甚至還用成 RPG 的模式, 在對戰中電腦會干擾你的譜面畫面, 讓玩家措手不及, 還收入許多家喻戶曉 膾炙人口的歌曲, 增加遊戲的吸引力, 而且遊戲整體有種祭典的歡愉氣氛 缺點是因為歌曲數量多, 如果都要版稅, 成本會很高, 所以歌唱的聲音都會 另外錄製, 不是原版的歌聲, 我覺得這是很可惜的地方 參考來源 : 電玩巴士 PSV 中文網 圖 5. 太鼓達人 Any Beats Any Beats 是個網頁遊戲, 使用者可以用自己的 MP3 檔, 單純享受音樂遊戲的 快樂 完全不用自己設計, 網站會直接生成一個譜面給玩家遊玩, 十分方便 -12 -

19 玩法其實和上面 Dance Dance Revolution 一樣, 對應上面的四向箭頭, 抓對 節拍來遊玩的遊戲 也可以隨意更改判定譜面的出現方式與速度 [19] 打完以後, 也可以直接用 Twitter 或 Facebook 分享自己的成績跟曲目名稱 我們期望能像這遊戲一樣能夠分享自己的分數, 因為我們的開發程式也能連結 Twitter, 所以打算嘗試這項功能 優點是它可以上傳 mp3, 可以用玩家自己喜歡的歌, 遊戲背景的圖也可以自己 找, 譜面速度與按鍵出現方式也能自己設定, 而且這網站完全免費 缺點在因為是讀取 mp3 自動生成, 這種方式做出來的譜面, 通常會對不太到 音樂, 常常會有音樂與譜面是分開的玩起來就比較沒有爽快與成就感, 趣味性大 大降低 圖 6. ANY BEATS 參考來源 : ANY BEATS 截圖 Cytus 是由台灣雷亞遊戲 (Rayark) 開發的一款音樂遊戲 遊戲的 ios 版本於 2012 年 1 月 12 日在全球的 App Store 上架 玩家需要隨著遊戲介面中, 上下移動的掃 -13 -

20 描線來適時演奏對應音符 遊戲中有三種拍點按鈕 : 點擊音符 (Click Note), 長 按音符 (Hold Note) 和拖動音符 (Drag Note) [29] 這款遊戲可以說是我們打算做節奏遊戲 APP 的啟蒙, 因為平台一樣是手機, 也是首款質量如此優越的節奏手遊, 在遊戲界面的布置, 有些部分也是參考於這 款遊戲 優點是每首歌曲都是原創或改編的, 能帶有新鮮感, 而且插圖都很漂亮, 很 有藝術性, 在視覺衝擊上加分很多, 而且有些歌曲插圖還有隱藏要素, 也是節奏 遊戲前所未見的獨特設定 缺點是不知為何, 有時在遊玩時都會有按鍵比歌曲快的感覺, 在玩其他的節 奏遊戲比較沒有這種感覺, 可能是譜面判定的時間有點問題, 還有遊戲被分類為 十個章節, 而且選曲歌曲都要一個一個滑, 在章節與歌曲選擇時比較麻煩 圖 7. Cytus 資料來源 :Youtube 截圖

21 第三章研究探討 3.1 研究方法 3.2 Android APP 開發工具說明 SDK 說明 ( 軟體開發工具組 ) 是用來幫一個產品或平台開發應用程式的工具組, 由產品的廠商提供給開發者使用的 通常是某一家廠商針對某一平台或系統或硬體所發佈出來用以開發應用程式 的工具組, 在這個工具包裡面, 可能包含了各式各樣的開發工具, 模擬器等 API 說明 ( 應用程式介面 ) 以功能為導向的 " 方法 " 或 " 函式 " 清單, 每個 API 主要都是為了達成某特定功能所設計的 在同一個平台下的兩個不同東西 ( 程式 or 系統 ), 能取用對方的功能等等, 所以一個程式寫了一組函式, 讓同一平台的其他程式取用程式的功能, 那組函式就可以說是那個程式 or 某個函式庫, 對外開放的 API 通常 SDK 裡也會帶有很多 API, 用來調用一些系統平台程式提供的功能 例如說 : 視窗顯示, 圖形特效等等 3.3 Android APP 程式架構 src 目錄 : 存放著該專案執行時所需的 Java 程式檔案 res 目錄 : 專案所需的資源 ( 例如 : 文字 圖形與聲音檔案等 ) 以及與 Ul 設定有 關的 layout 檔案接存於 res 目錄的對應子目錄中, 要特別注意的是在此目錄內的 檔案名稱只能為小寫字母 數字 _( 底線 ).( 點 ) 以規則運算式來表示即為 : [a-z0-9_.] gen 目錄 : 存放著 R.java 檔案, 該檔案是根據 res 目錄內容而自動產生 ; 開發者 就是透過此檔案取得 res 目錄內的相關資訊, 無須修改 R.java 檔案, 因為 res 目 錄內的檔案內容一有更動, 就會重新產生改檔案 raw 目錄 : 存放音樂 音效相關的 mp3 檔案 drawable 目錄 : 提供圖形相關資源, 例如圖形檔案 ( 支援 PNG JPG GIF 檔案 ) layout 目錄 : 專門存放與 Ul 設計有關的 layout 檔案 ( 預設為 main.xml) values 目錄 : 存放 Ul 所需用到的文字 ( 預設為 string.xml) -15 -

22 3.4 Android APP GUI 布局行動裝置提供各種不同應用的程式, 讓使用者可以隨時執行一些工作 瀏覽 網頁和玩一些遊戲 因為螢幕尺寸的關係, 它不會像一般個人電腦上的應用程式, 需要設計一些很複雜的操作畫面 透過觸控螢幕的操作, 行動裝置應用程式提供 簡單與直覺的操作畫面, 通常不需要使用說明書, 就可以讓使用者順利的使用應 用程式 Android 是一個開放的作業系統, 這表示所有廠商都可以設計與製造各種使用 Android 作業系統的行動裝置, 這些裝置的螢幕尺寸和內建的設備, 並不是固定的 尤其是螢幕的尺寸和解析度, 會讓 Android 應用程式的畫面設計, 跟其它技術比較不一樣 一個設計良好的應用程式, 在螢幕是 3.4 吋 解析度是 480X800 的裝置上執行, 還有在螢幕是 4.7 吋 解析度是 1920X1080 的裝置上執行, 應用程式的畫面看起來應該是一樣的 Android 應用程式的畫面設計, 採取一種比較靈活的方式, 作法也跟其它技術 比較不一樣 這一章說明設計應用程式畫面的重要概念與方式, 學習使用各種 Android 畫面控制項和版面配置元件 設計使用者介面一般的 Android 應用程式, 通常需要提供一些畫面, 讓使用者執行操作或瀏覽資料 應用程式的畫面是使用一些 Android API 中的畫面物件組合起來的, 這些畫面 API 主要在 android.widget 套件下, 這個套件提供各種畫面元件的類別, 例如在應用程式畫面上的一個按鈕, 就是一個 Button 類別的物件 認識基本的畫面元件以後, 在規劃與設計應用程式的畫面時, 就可以製作規劃資料裡面, 可以決定使用哪些畫面元件, 例如用來顯示文字的 TextView 元件, 或是讓使用者輸入文字用的 EditText 元件 針對整個畫面的安排, 也會決定控制元件排列方式的畫面配置元件, 例如這個畫面適合使用 RelativeLayout 這種畫面配置元件 像按鈕或輸入這類元件, 需要在程式碼中設計按鈕的工作與讀取輸入的內容, 所以需要為它們取一個名稱, 這個工作也可以在規劃應用程式的畫面時就決定好元件的名稱, 在設計畫面與撰寫程式的時候, 會使用這些名稱執行一些設定 Android 跟畫面相關的元件在 android.view 和 android.widget 兩個套 件中 下圖顯示主要的套件和部份的元件類別 : -16 -

23 上面的類別圖形只有顯示少數幾個元件, 在 android.view 套件下的 View 類別, 是所有畫面元件的父類別 同樣在這個套件下的 ViewGroup 是所有畫面配置元件的父類別 它們各自有很多子類別, 提供各種畫面和配置元件 大部份的 Android 應用程式設計, 應該使用 XML 格式的畫面配置檔為 Activity 元件設計畫面, 它放在 res\layout 目錄下, 這是在這裡說明的主要設計方式 畫面元件的基本設定 Android 的畫面元件是 View 和 ViewGroup 的子類別, 提供各種應用程式畫面需要的元件 在畫面配置檔中設計應用程式的畫面, 是採用與這些與元件類別名稱一樣的標籤, 再依照需要加入一些設定, 所以跟程式設計的作法很不一樣 畫面配置檔一定要放在 res/layout 目錄, 檔案名稱必須是小寫的字母和底線, 副檔名一定是.xml 一個基本的畫面配置檔內容會像這樣: <?xml version="1.0" encoding="utf-8"?> <!-- 使用 Button 標籤, 設定整個畫面只有一個按鈕元件 --> <!-- xmlns:android="..." 這個設定一定要加在第一個標籤, 後面還有其它標籤的話, 就不用再加入這個設定 --> <Button xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:text="hello! GUI!" /> 這個畫面配置檔只有在畫面中加入一個按鈕元件, 它使用的是 Button 標 籤, 在 API 裡面也有一個名稱為 Button 的類別 設計好需要的畫面配置檔, -17 -

24 就可以在 Activity 元件的 oncreate 方法中, 呼叫 setcontentview 指定元件 使用指定的畫面資源 : public class TestActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // 設定畫面配置資源 // 指定的參數在 R.layout. 後面是檔案名稱 setcontentview(r.layout.activity_test); 不管是設計一個簡單或複雜的畫面, 對放到畫面中的元件, 都有一些基本而 且通用的設定, 在大部份的情況下, 一定要為畫面元件加入下列決定大小的設定 : android:layout_width: 設定畫面元件的寬度 android:layout_height: 設定畫面元件的高度 因為各種 Android 裝置的螢幕尺寸與解析度並不是一樣的, 所以在設定畫面元件的大小時, 應該要設定為 matchparent 或 wrapcontent 例如把元件的寬度設定為 matchparent 時, 這個畫面元件的寬度就會佔滿所用的空間 設定為 wrapecontent 的話, 會根據這個畫面元件自動調整為足夠顯示內容的空間 如果畫面中只有一個按鈕元件, 不同的設定組合會有不同的效果 : 這樣的設定方式, 讓應用程式的畫面在不同尺寸與解析度的螢幕顯示的時候, 看起來會是一樣的 你也可以為畫面元件指定固定的寬與高, 在設定的時候使用這些單位, 例如 android:layout_width= "120sp" : px: 螢幕畫素 dp: 每英吋畫面,160dp 為一英吋 sp: 和 dp 一樣, 不過會根據裝置設定的字型大小自動調整 in: 英吋 mm: 公厘 決定畫面元件的大小以後, 你可能需要設定與其它元件的間隔距離, 這個設定在畫面有比較多元件的時候, 可以讓所有元件不會黏成一團, 畫面看起來會好一些 這些是用來執行與其它元件的間隔距離設定, 使用上面說明的單位設定需要的間隔 : -18 -

25 android:margintop: 設定上方的間隔 android:marginbottom: 設定下方的間隔 android:marginleft: 設定左側的間隔 android:marginright: 設定右側的間隔 android:margin: 設定上 下 左 右為同樣的間隔 你還可以控制畫面元件內容的間隔距離設定, 讓一個元件的內容與它使用的空間有一點間隔, 元件本身看起來就不會那麼擁擠 這些是用來執行元件內容間隔距離的設定 : android:paddingtop: 設定內容上方的間隔 android:paddingbottom: 設定內容下方的間隔 android:paddingleft: 設定內容左側的間隔 android:paddingright: 設定內容右側的間隔 android:padding: 設定內容上 下 左 右為同樣的間隔 畫面元件還有一個可以控制內容位置的設定, 設定名稱是 android:gravity, 可以讓你比較容易把內容設定為需要的位置 下面是它的設定值 : top bottom left right: 設定畫面元件的內容對齊上 下 左 右 centervertical centerhorizontal: 設定畫面元件的內容對齊垂直或水平的中央 center: 設定畫面元件的內容對齊垂直與水平的中央 fillvertical fillhorizontal: 設定畫面元件的內容佔滿垂直或水平空間 fill: 設定畫面元件的內容佔滿垂直與水平空間 這些設定值也可以使用組合的方式, 例如希望把內容對齊下方的右側, 就可以設定為 bottom right, 多個設定值之間使用 隔開 這是一個設定效果的範例, 它使用一個佔滿整個畫面的 TextView 元件, 如果沒有設定的話, 預設的內容位置是在左上方, 使用一些不同的設定控制內容的位置 : 如果是可以顯示文字內容的畫面元件, 例如文字 (TextView) 按鈕 (Button) 或輸入 (EditText) 元件, 可以為它們加入文字內容與樣式設定 : android:text: 設定畫面元件的文字內容 android:textsize: 設定文字的大小 android:textappearance: 使用系統的預設值設定文字的大小, 設定的格式為?android:attr/ 設定值, 有 textappearancelarge ( 大 ) textappearancemedium( 中 ) 和 textappearancesmall( 小 ) 三種設定值 android:textcolor: 設定文字的顏色 -19 -

26 android:background: 設定背景顏色 使用畫面配置元件就算是一個簡單的 Android 應用程式, 大部份都會在一個畫面中使用多個畫面元件, 組合成應用程式需要的畫面, 一個畫面只有一個畫面元件的情況應該是不多的 所以你在規劃與設計應用程式的畫面時, 除了知道要使用哪一些畫面元件, 也要規劃好畫面使用配置方式, 就是決定所有需要的元件如何在畫面上排列 因為各種 Android 實體裝置的螢幕尺寸與解析度並不是一樣的, 所以畫面元件的排列 位置與大小也應該不是固定的, 應用程式在不同裝置運作的時候, 畫面看起來才會一樣 所以 Android 建議你應該使用 Layout 來設計畫面元件的排列方式,Layout 是 ViewGroup 的子類別,ViewGroup 是一種容器元件, 可以把其它元件放在這些元件裡面, 組合成需要的畫面 在規劃與設計應用程式畫面的時候, 應該就可以決定它們該使用哪一種 Layout Android 在 android.widget 套件中提供的 LinearLayout 和 RelativeLayout 是基本的 Layout 元件 LinearLayout 可以設定為依照水平 (horizontal) 或垂直 (vertical) 排列 RelativeLayout 使用畫面元件相對的位置來排列, 適合用在比較不規則的畫面元件配置 畫面元件放在這兩種 Layout 中的效果會像這樣 : 圖 8. Xml 中 Layout 的類型如果應用程式的畫面比較複雜一些, 這樣的 Layout 應該就不夠用了, 所以使用這些 Layout 的時候, 可以使用巢狀的方式組合成一個複雜的排列 例如這個畫面的排列方式, 在最外層使用垂直排列的 LinearLayout, 裡面又包含上下兩個 LinearLayout, 它們也可以依照自己的需求, 設定為垂直和水平排列 : -20 -

27 圖 9. LinearLayout 的排版 ViewGroup 還提供一種很常使用的 TableLayout, 它可以把畫面切割為表格, 你可以依照畫面的需求設定為像是 2X4 的區塊, 每一個區塊都可以放一個畫面元件, 如果需要的畫面不是一個固定的表格, 也可以調整它們的區塊 使用 TableLayout 排列的畫面會像這樣 : 圖 10. TableLayout 的排版 LinearLayout LinearLayout 可以提供比較簡單的畫面配置, 你可以設定它依照水平 ( 由左到右 ) 或垂直 ( 由上往下 ) 排列畫面元件 如果需要使用這種排列方式, 在畫面配置檔中加入 LinearLayout 標籤, 使用 android:orientation 設定排列的方式, horizontal 為水平, vertical 為垂直: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical 或 horizontal" > // 放在這裡的畫面元件會依照指定的方式排列 -21 -

28 </LinearLayout> 放在 LinearLayout 裡面的元件, 還可以設定它們佔用的空間比例, 這樣就可以讓這種看起來很單純的排列方式, 變得比較靈活一些 要設定元件佔用的空間比例, 使用 android:layout_weight=" 比例 ", 依照 LinearLayout 設定為水平或垂直排列, 設定元件的比例後, 它的寬或高就由比例來決定, 所以應該把元件的寬或高設定為 0dp 如果其中有一個元件沒有設定比例, 它會依照自己寬與高的設定決定大小, 其它空間再由比例決定各自的大小 搭配使用這些設定, 就可以很靈活的設定各種畫面的配置 : RelativeLayout 應用程式需要的畫面, 可能不會都是很規則的排列, 如果畫面元件的位置與排列比較複雜與不規則的時候, 就比較適合使用 RelativeLayout 這種排列方式 它可以讓你決定元件在畫面上位置, 還有設定元件與元件之間的相關位置與對齊方式 這種配置方式使用 RelativeLayout 標籤: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" > // 使用關聯的方式排列畫面元件 </RelativeLayout> 放在 RelativeLayout 標籤中的畫面元件, 可以依照畫面的需求, 決定自己在 畫面中的位置, 也可以設定自己與其它元件的相對位置 這些是在 RelativeLayout 標籤中的畫面元件可以使用的設定 : android:layout_ 位置 ="@id/ 元件名稱 ": 決定自己在指定元件的相對位置, 格式中的 位置 可以使用 above below toleftof 或 torightof, 依照順序表 示把自己放在指定元件的上方 下方 左邊或右邊 -22 -

29 android:layout_align 對齊 元件名稱 ": 決定自己和指定元件的對齊 方式, 格式中的 對齊 可以使用 Top Bottom Left 或 right, 依照順序表示把 自己的上 下 左或右對齊指定的元件 android:layout_alignparent 對齊 ="true flase": 決定自己與容器的對齊 方式, 格式中的 對齊 可以使用 Top Bottom Left 或 right, 設定為 true 的 時候, 依照順序表示把自己對齊容器的上 下 左或右 android:layout_center 對齊 ="true flase": 決定自己與容器對齊中央的方 式, 格式中的 對齊 可以使用 Horizontal Vertical 或 InParent, 設定為 true 的時候, 依序表示將自己對齊容器的水平中央 垂直中央或容器中央 搭配使用這些 RelativeLayout 提供的設定, 就算是比較複雜或不規則的畫面, 也可以很容易完成設計的工作 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout > <TextView android:id="@+id/account" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="account: " android:textsize="24sp" /> <!-- 把自己放在 account 元件的右邊 --> <EditText android:id="@+id/account_value" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_torightof="@id/account" android:paddingleft="6sp" /> <!-- 把自己放在 account_value 元件的下方, 而且對齊容器右邊 --> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" -23 -

30 24 android:layout_alignparentright="true" android:text="ok" /> 27 <!-- 把自己放在 ok 元件的左邊, 而且上方也對齊它 --> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="cancel" /> </RelativeLayout> 這個畫面配置檔呈現的畫面會像這樣 : TableLayout ViewGroup 還提供一種很常使用的 TableLayout 畫面排列方式, 它可以把畫面切割為表格, 你可以依照畫面的需求, 把畫面切割為像是 2X4 的區塊, 每一個區塊都可以放一個畫面元件, 如果需要的畫面不是一個固定的表格, 也可以調整它們的區塊 這種畫面配置使用 TableLayout 標籤, 搭配 TableRow 標籤建立需要的表格 TableLayout 會控制畫面元件的寬與高, 所以在這個標籤中的畫面元件都不需要設定寬與高, 就算加入設定也不會有效果 : 1 2 <?xml version="1.0" encoding="utf-8"?> <TableLayout -24 -

31 xmlns:android=" id" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- 第一列 --> <!-- TableRow 不需要設定寬與高 --> <TableRow> <!-- 所有的元件都不需要設定寬與高 -->... </TableRow> <!-- 第二列 --> <TableRow>... </TableRow> </TableLayout> TableLayout 會管理與控制畫面元件的大小, 預設的情況, 畫面元件的寬度都 是 wrap_content 的效果 你可以在 TableLayout 標籤中加入這些設定, 執行 元件的寬度與是否隱藏的設定 : android:stretchcolumns: 放大指定的欄位寬度 第一個欄位是 0, 可以設定 多個欄位, 例如 1,3,5 ; 設定為 * 表示所有欄位 android:shrinkcolumns: 寬度不夠顯示所有內容的時候, 指定的欄位會自動 縮小 第一個欄位是 0, 可以設定多個欄位, 例如 1,3,5 ; 設定為 * 表示所 有欄位 android:collapsecolumns: 隱藏指定的欄位 第一個欄位是 0, 可以設定多 個欄位, 例如 1,3,5 ; 設定為 * 表示所有欄位 在 TableLayout 中加入 android:stretchcolumns 的設定, 可以讓指定的欄位 佔用較大的空間 -25 -

32 5-3-4 結合多種畫面排列元件以上 LinearLayout RelativeLayout 和 TableLayout, 單獨使用的時候, 在設計一些比較複雜的畫面時, 就比較不符合需求 不過只要是 Layout 元件都可以搭配使用, 所以在規畫與設計應用程式的畫面時, 如果想要設計一個比較複雜的畫面, 應該要把畫面上所有的元件切割成適合的區塊, 為每一個區塊挑選一個合適的排列方式, 最後再把它們結合起來 例如像這個計算機應用程式的畫面, 就會依照它們的需求使用 LinearLayout 和 TableLayout 組合成這樣的畫面 : 建立記事本應用程式主畫面 瞭解 Android 應用程式畫面的設計方式後, 現在要回到記事本應用程式, 為 它設計一個用來顯示所有資料的主畫面 : -26 -

33 這個畫面的需求並不會太複雜, 使用 LinearLayout 畫面配置元件就可以了, 安排畫面元件的時候, 最好幫它們設定邊界, 元件才不會擠在一起 開啟 res/values/dimens.xml, 加入需要的尺寸資源 : <resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> <dimen name="default_padding">6dp</dimen> <dimen name="title_txt_size">24sp</dimen> <!-- 加入邊界尺寸資源設定 --> <dimen name="default_margin">2dp</dimen> </resources> 接下來開啟 res/layout/activity_main.xml 檔案, 把它改為下面的內容 : <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <ListView android:id="@+id/item_list" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:layout_margin="@dimen/default_margin" -27 -

34 android:dividerheight="1sp" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" </LinearLayout> 執行這個應用程式, 看看它在模擬裝置中顯示的畫面 這個畫面中的 ListView 是用來顯示資料列表的元件, 目前還沒有為它設定任何資料, 所以看起來是空白 的 指定資料的工作必須在 Activity 元件的程式碼執行, 所以在畫面配置檔為 ListView 元件使用 android:id 為它設定一個名稱 開啟專案的 MainActivity.java, 修改為下面的內容 : package net.macdidi.at2; import android.os.bundle; import android.support.v7.app.actionbaractivity; import android.view.menu; import android.widget.arrayadapter; import android.widget.listview; public class MainActivity extends ActionBarActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); // 為 ListView 元件設定三筆資料 -28 -

35 15 String[] data = { 16 " 關於 Android Tutorial 的事情 ", 17 " 一隻非常可愛的小狗狗!", 18 " 一首非常好聽的音樂!"; 19 int layoutid = android.r.layout.simple_list_item_1; 20 ArrayAdapter<String> adapter = 21 new ArrayAdapter<String>(this, layoutid, data); 22 ListView item_list = (ListView) findviewbyid(r.id.item_list); 23 item_list.setadapter(adapter); public boolean oncreateoptionsmenu(menu menu) { 27 // Inflate the menu; this adds items to the action bar if it is 28 present. 29 getmenuinflater().inflate(r.menu.menu_main, menu); return true; 執行這個應用程式, 檢查 ListView 元件是否顯示三筆資料 : -29 -

36 3.5 Android APP/Java 生命週期 資源分配 (Create/Destroy) 完整的 Activity 生命週期由 Create 狀態開始, 由 Destroy 狀態結束 建立 (Create) 時分配資源, 銷毀 (Destroy) 時釋放資源 可見與不可見 (Start/ReStart/Stop) 當 Activity 運行到 Start 狀態時, 就可以在螢幕上看到這個 Activity 相反地, 當 Activity 運行到 Stop 狀態時, 這個 Activity 就會從螢幕上消失 當使用者按下 Back 按鈕回到上一個 Activity 時, 會先到 Restart 狀態, 再到一般的 Start 狀態 使用者能否直接存取螢幕 (Resume/Pause) 當有個 Toast AlertDialog 簡訊 電話等訊息亂入時, 原來的 Activity 會進入 Pause 狀態, 暫時放棄直接存取螢幕的能力, 被中斷到背景去, 將前景交給優先級高的事件 當這些優先級高的事件處理完後,Activity 就改進入 Resume 狀態, 此時又直接存取螢幕 oncreate 在 Activity 物件被第一次創建時調用, 即通常用來做程式的初使化動作 onstart 當 Activity 變得可見時調用該函數 onresume 當 Activity 開始準備與用戶交互時調用該方法, 即把保存的資料拿回來使用 -30 -

37 onpause 當系統即將啟動另外一個 Activity 之前調用該方法, 即把需要保存的資料保存 onstop 當前 Activity 變得不可見時調用該方法 ondestroy 當前 Activity 被銷毀之前將會調用該方法, 即通常都拿來把 oncreate() 時的資料做釋放的動作 onrestart 當一個 Activity 再次啟動之前將會調用該方法 一般 Android Application 遵循的動作流程 : (1) 一般啟動 oncreate à onstart à onresume 啟動一個 Activity 的基本流程是 : 分配資源給這個 Activity(onCreate), 然後將 Activity 內容顯示到螢幕上 (onstart), 在一切就緒後, 取得螢幕的控制權 (onresume), 使用者可以開始使用這個程式 (2) 呼叫另一個 Activity onpause(1) à oncreate(2) à onstart(2) à onresume(2) à onstop(1) 先凍結原本的 Activity, 再交出直接存取螢幕控制權 (onpause) 的過程 直到 Activity 2 完成一般啟動流程後,Activity 1 才會被停止 (3) 回復原 Activity onpause(2) à onrestart(1) à onstart(1) à onresume(1) à onstop(2) à ondestroy(2) 按 Back 鍵可以回到原本的 Activity (4) 退出 / 結束 onpause à onstop à ondestroy 如果程式中有直接呼叫 finish 函式來關閉 Activity 的話, 系統會暫停 (onpause) 後停止 (onstop), 然後才是銷毀 (ondestroy) (5) 回收後再啟動 oncreate à onstart à onresume 被回收掉的 Activity 一旦又重新被呼叫時, 會像一般啟動一樣再次呼叫 Activity 的 oncreate 函式 多活動 (MultiActivity) 間之轉換設定 java 對應每個 xml setcontentview(r.layout.main); 然後取得每個 button btn_1 = (Button) findviewbyid(r.id.btn_1); 加上每個 button 對應的表單 case R.id.btn_1: -31 -

38 { Intent intent = new Intent(); intent.setclass (mainactivity.this, activity_a.class); startactivity(intent); 聲音播放 Android 中播放音樂有二類,SoundPool 與 MediaPlayer SoundPool 主要是用在極短聲音的音效, 利如遊戲中之撞擊聲 而播放音樂歌曲則是使用 MediaPlayer, 簡單說明如下 : 使用 MediaPlayer 播放音樂播放 Audio 檔案 將 Audio 檔案放到 res/raw 目錄內 呼叫 MediaPlayer.create() 來建立 MediaPlayer 的物件實體, 然後再呼叫 start() 即可播放 audio 檔案 //ring:audio 檔案名稱, 不用加副檔名 MediaPlayer mp = MediaPlayer.create(context,R.raw.ring) ; Mp.start(); 如欲暫停播放, 可以呼叫 pause() ; 暫停後如欲繼續播放可以再次呼叫 start(), 就會從上次的暫停點繼續撥放 如欲停止播放, 呼叫 stop(), 如果不再播放, 應該呼叫 release() Public class PlayResAudio extends Activity{ private MediaPlayer mp; // 播放器 private TextView tvinfo; // 訊息方塊 private Button btnplay; // 播放 按鈕 private Button btnpause; // 暫停 按鈕 private Button btnstop; // 停止 按鈕 private Boolean isstoped = true; //true Public void oncreate(bundle savedinstancestate) { -32 -

39 Super. oncreate(savedinstancestate); setcontentview(r.layout.main); findviews(); Private void findviews() { tvinfo = (TextView) findviewbyid(r.id.tvinfo); btnplay = (Button) findviewbyid(r.id.btnplay); btnpause = (Button) findviewbyid(r.id.btnpause); btnstop = (Button) findviewbyid(r.id.btnstop); // 按下 播放 按鈕 btnplay.setonclicklistener(new View.OnClickListener() { public void onclick(view view) { if(mp == null isstoped) { mp = MediaPlayer.create(PlayResAudin.this,R.raw.ring); isstoped = false; tvinfo.settext(getstaring(r.string.audiosource) + getstaring(r.raw.ring)); mp.start(); ); // 按下 暫停 按鈕 btnpause.setonclicklistener(new View.OnClickListener() { public void onclick(view view) { if(mp == null isstoped) return; mp.pause(); ); // 按下 停止 按鈕 btnstop.setonclicklistener(new View.OnClickListener() { public void onclick(view view) { if(mp == null isstoped) return; mp.stop(); -33 -

40 Protected void onpause() { Super.onPause(); If(mp!= null) { mp.release(); mp = null; 使用 SoundPool 播放音效建立 SoundPool 第一個參數 :SoundPool 不像 MediaPlayer 一個實體管理一個音樂檔案, SoundPool 可以一個實體管理多個檔案第二個參數 : 串流類型第三個參數 : 取樣品質, 預設用 0 SoundPool sound = new SoundPool(10, AudioManager.STREAM_MUSIC, 5); int OK = sound.load(this, R.raw.ok, 1); int OO = sound.load(this, R.raw.oo, 1); Step3: 播放音效 -> play() // 第二 三參數分別為左右喇叭的音量, 可用 0 到 1 // 第四參數固定用 0 // 第五個參數為播放次數,0 為不重複,-1 為無限重複 // 第六個參數為播放速度, 可用 0.5 到 2 sound.play(this.ok, 1, 1, 0, 0, 1); sound.play(this.oo, 1, 1, 0, 0, 1); Android 的服務連接 Service 本身是個無介面, 只單純提供功能讓其他元件 (Activity) 呼叫使用的元件, 如果有需要長時間執行的程序, 可以寫成 Service 元件提供其他人呼叫使用 -34 -

41 Service 本身並非一個獨立的 Process, 也不會脫離 Main Thread 獨立運作, 如果需要做長時間的運算, 為了不影響到主程式運作, 可以在 Service 內產生 Thread, 讓 thread 幫你作一些工作,Service 的子類別 IntentService 即是一個有自己 Thread 的 Service,Service 並無直接與使用者互動的介面 當 Service 元件被產生時, 一定會執行其 oncreate(), 如果有需要產生 Thread, 則同時產生新的 thread 當 Service 有被設定在 Manifest 上時, 就可以被自己與其他的 Activity 做存取, 也可以被其他 APP 使用 service, 此種情況需在他自己 App 的 Manifest 內的 uses-permission 作宣告 執行 Service 功能的兩種方式 startservice 當有元件呼叫 Context.startService(), 系統會讀取被呼叫的 Service( 產生 instance 並執行其 oncreate()), 然後將 client 所傳進來的 intent 帶進 Service 的 onstartcommand(intent, int, int) 內 這 service 會一直執行, 直到有人呼叫 Context.stopService() 或內部呼叫 stopself() 而停止 無論 Context.startService() 被呼叫了多少次, 如果要停止 Service, 只要執行一次 Context.stopService(), 或在 Service 內執行 stopself(), 就會被停止 如果是在 Service 內使用 stopself(int), 可以保證 intent 已經有被處理了, 才會被停止 對於已被啟動的 Service, 如果需要有不同的 Service 執行模式, 可以在 override onstartcommand() 時, 設定不同的回傳值 這回傳值常數已經被定義好 在 Service Class 內 1.START_STICKY: 當 Service 在執行時被砍掉後, 若沒有新的 intent 進來, Service 會停 留在 started state, 但 intent 資料不會被保留 2.START_NOT_STICKY 或 START_REDELIVER_INTENT: 當 Service 在執行時被砍掉後, 若沒有新的 intent 進來, service 會離 開 started state, 若沒有很明確的再啟動, 將不會產生新的 service 物件 3.bindService -35 -

42 Client 可以利用 Context.bindService() 去建立與 service 持續性的連線, 如果建立連線時, 還沒產生 Service instance, 會自動產生並呼叫執行 oncreate 與 startservice 不同的地方是, 接下來並不會呼叫 onstartcommand 要執行 bindservice, 首先要先建立一個 serviceconnection 物件, 把這 conection 物件當作參數放到 bindservice 內讓 Context 與 Service 建立連線, Context.bindService(Intent service, ServiceConnection conn, int flags) flags 參數預設是 Context.BIND_AUTO_CREATE, 也就是 bind 的時候會自動產生 service 當連線成功後, 會自動呼叫執行這個 connection 內的 onserviceconnected(componentname classname, IBinder service) function, 在這 function 會接收到由 service 內的 onbinde() 所丟出來的 Ibinder 物件 利用這 IBinder 物件取得 Service 物件, 就可以直接操作 Service 內各個 public 的 method 三.Service Process 重要性判斷 系統會盡量保持 Service 的 Process 運作, 但若需要刪除 Process, 以下是 重要性判斷準則 1. 正在執行 oncreate(), onstartcommand() 或 ondestroy() 的 Service 會被當成前景執行程序, 不會被刪除 2. 假若這 ervice 已經被啟動 (started), 那這 service 所在的 process 的重要性, 會是在 visible process 與 hide process 之間 3. 如果 service 所在的 Process 上有元件是 visible, 那這 Service 的重要性就相當於是 visible 4. 一個已經 started 的 service 可以利用 startforeground(int, Notification) 放在比較重要的前景執行狀態, 在記憶體少的時候比較不會被刪除 當記憶體不足 Service 被刪除後, 它稍後還是會被重新啟動產生出來, 但通常重新啟動後, 原本的 intent 並不會被保留, 如果需要在重新啟動後, 再重發 intent 給 Service, 必須在 override onstartcommand() 時 return START_REDELIVER_INTENT 讓重新啟動的程序裡的 onstartcommand(intent intent, int flags, int startid) 內的 flags 值 =START_FLAG_REDELIVERY -36 -

43 MusicService.java 程式參考碼如下 : package com.cutemis.rhythmmusic; import android.app.service; import android.content.intent; import android.media.mediaplayer; import android.media.mediaplayer.oncompletionlistener; import android.os.binder; import android.os.bundle; import android.os.ibinder; import android.util.log; public class MusicService extends Service implements OnCompletionListener { private MediaPlayer mplayer; private final IBinder msbinder=new public IBinder onbind(intent intent) { return msbinder; public class MusicServiceBinder extends Binder { MusicService getservice() { return public void oncreate() { mplayer = MediaPlayer.create(this, R.raw.breeze); mplayer.setoncompletionlistener(this); -37 -

44 @Override public int onstartcommand(intent intent, int flags, int startid) { if (!mplayer.isplaying()) { mplayer.start(); return START_STICKY; mplayer.setoncompletionlistener(new MediaPlayer.OnCompletionListener() { public void oncompletion(mediaplayer mp) { finish(); // finish current activity public void ondestroy(){ if (mplayer.isplaying()) { mplayer.stop(); mplayer.release(); mplayer public int onstartcommand(intent intent, int flags, int startid) {Log.v(TAG,"onStartCommand"); if(!mplayer.isplaying()) {mplayer.start(); return START_STICKY; //return super.onstartcommand(intent, flags, startid); public void PauseMusic() { -38 -

45 if(mplayer.isplaying()) {mplayer.pause(); public void ResumeMusic() { if(!mplayer.isplaying()) {mplayer.start(); public boolean IsPlayNow() { return mplayer.isplaying(); 下拉式選單先在 xml 先宣告一個 Spinner <Spinner android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/myspinner" /> 接著初始化 Spinner private Spinner spinner; private ArrayAdapter<String> arraylist; private Context mcontext; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); mcontext = this.getapplicationcontext(); spinner = (Spinner)findViewById(R.id.mySpinner); 宣告一個陣列, 是你想要放進去 Spinner 理面的資料 private String[] lunch = {"00001", "00002", "00003"; 使用 ArrayAdapter 把它指定給 Spinner private String[] stringdata = {"00001", "00002", "00003"; -39 -

46 arraylist = new ArrayAdapter<String>(SpinnerDemo.this, android.r.layout.simple_spinner_item, stringdata); spinner.setadapter(arraylist); 離開程式使用 onrelease onrelease = function() { 我們將此用在離開程式上, 當要離開時跳轉回首頁點選下方得離開按鈕, 我們用 onrelease 叫用執行離開程序的函式 Android 平台上, 我們可以使用 Log 函數, 來達到自己在程式碼中加入一個個 記錄點 或 檢查點, 並可以通過開發環境中的 LogCat 工具來查看記錄 當程序流程每次運行到 記錄點 時, 相應的 記錄點 就會在開發工具記錄中輸出一條除錯用的訊息 開發者通過分析這些記錄, 來檢查程序執行的過程 使用到的參數, 是否與我們期望的結果符合 依此來判斷程式碼中可能出錯的區域, 以便對症根治造成問題的程式區段 3.6 應用程式偵錯手機模擬 : 有時候覺得開模擬器太慢 程式又跑很久才出來, 如果要長時間使用的話其 實是很浪費時間的一件事情, 就可以考慮使用智慧型手機來模擬 使用手機來模擬的時候必須先成為開發人員, 並且把 USB 偵錯 和允許模擬 地點打勾, 這樣手機設定部分就完成了 -40 -

47 定 如果要開始模擬 APP 程式的話, 可以到 Run/Run Configurations 裡面去做設 進入後在 Target 下的 Launch on all compatible devices/avd s 裡面設定為 Active devices, 之後點選 Run 就可以成功模擬了 -41 -

48 -42 -

49 3-7spoton 使用到的功能與應用 1. 補間 View 動畫 2. 影格 View 動畫 3.Button 4.Interpolator : 使得基本的動畫效果 (α, 規模化, 平移, 旋轉 ) 來加速, 減速, 重複等 5.imageView : <?xml version= 1.0 encoding= utf-8?> <ImageView xmlns:android= > </ImageView> 當建立遊戲中的每個新原點時, 會以動態方式來擴展及設定這個 ImageView 6.LinearLayout : 顯示剩餘的生命 <?xml version= 1.0 encoding= utf-8?> <ImageView xmlns:android= ><ImageView> 7.resetGame : 將遊戲還原至其初始狀態以 animationtime= INITIAL_ANIMATION_DURATION;// init animation length spotstouched= 0; // reset the number of spots touched score = 0; // reset the score level =1 ; // reset the level gameover=false;//the game is not over 重設用來管理此遊戲的實體變數 9.animationTime : 指定每個關卡的長度 10.spotsTouched : 協助判斷何時到達新關卡 11.score : 存放著目前的分數 12.level : 存放著目前的關卡 13.gameOver : 表示遊戲是否結束 14.touchedSpot : 使用者每次觸碰到代表圓點的 ImageView 時被呼叫 15.missedSpot : 每次圓點還沒被使用者碰到前就結束其動畫時被呼叫 -43 -

50 第四章 Android APP 音樂遊戲實作 4.1 Rhythm Stars 音樂遊戲架構 4.2 畫面設計良好背景圖片可增加玩家對遊戲情境的感受, 本遊戲計劃分別設計二款適合 熱門音樂及優雅音樂的畫面, 並可切換選擇不同色調, 可供配合不同音樂及玩家 喜好 圖 11. 本專題遊戲 APP 首頁 進入遊戲後可以看到遊戲首頁的畫面, 有上列選項可以選擇, 玩家選擇之後 就會針對選擇的項目跳轉到對應的功能介面 -44 -

51 圖 12. 遊戲畫面開始遊戲之後背景音樂就會自動撥放, 玩家可以隨著音樂點選黃色和粉色的星星, 隨著玩家點擊的星星越多等級就會越高, 星星的分數也會提高, 遊戲一開始有三個愛心, 如果沒有點到或是點錯的話就會扣分和減少愛心, 當愛心歸零時遊戲就結束, 並儲存遊戲的分數, 或更新最高分紀錄 -45 -

52 圖 13. 遊戲說明畫面 玩家第一次接觸遊戲時可以先來遊戲說明的畫面來看, 可以讓玩家更快的熟 悉了解這個遊戲的功能和玩法 -46 -

53 圖 14. 音樂天地畫面 音樂天地提供音樂試聽的功能, 玩家在遊玩之前可以來這裡聽遊戲的音樂, 點播放就可以聽到音樂, 點停止就會關閉撥放 -47 -

54 圖 15. 遊戲成績畫面 如果玩家想要看到之前遊玩的最高分紀錄, 可以進入遊戲成績裡看到歷史的 最高分 -48 -

55 圖 16. 註冊畫面 玩家可以來這裡註冊帳號, 只需輸入簡單的一些基本資料就可以完成註冊, 74 頁會有更詳細的介紹 -49 -

56 圖 17. 圖 18. 遊戲設定畫面 這裡可以提供一些客製化的功能設定, 像是遊戲等級設定 ( 如上圖 ), 還有遊 戲主題設定 以及背景音樂設定, 讓玩家能根據自己的喜好來設置 4.3 程式設計 Rhythm Star 主畫面與活動轉換 Rhythm Star 主畫面與活動轉換之程式碼如下 : Main.java: package com.cutemis.rhythmmusic; import android.app.activity; import android.content.intent; import android.os.bundle; import android.view.view; import android.widget.button; -50 -

57 public class Main extends Activity { public Button b1, b2, b3, b4, b5, protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); // 取得 main.xml 上的 Button 介面元件 b1 = (Button) findviewbyid(r.id.btn_1); b2 = (Button) findviewbyid(r.id.btn_2); b3 = (Button) findviewbyid(r.id.btn_3); b4 = (Button) findviewbyid(r.id.btn_4); b5 = (Button) findviewbyid(r.id.btn_quit); b6 = (Button) findviewbyid(r.id.btn_music); // 設定多按鈕元件 onclick 共用一個 Listener b1.setonclicklistener(mylistener); b2.setonclicklistener(mylistener); b3.setonclicklistener(mylistener); b4.setonclicklistener(mylistener); b5.setonclicklistener(mylistener); b6.setonclicklistener(mylistener); private Button.OnClickListener mylistener = new Button.OnClickListener() { public void onclick(view v) { switch(v.getid()) { case R.id.btn_1: { Intent intent = new Intent(); intent.setclass (Main.this,RhythmMusic.class); -51 -

58 startactivity(intent); break; case R.id.btn_2: { Intent intent = new Intent(); intent.setclass (Main.this, ActivityB.class); startactivity(intent); break; case R.id.btn_3: { Intent intent = new Intent(); intent.setclass (Main.this, ActivityC.class); startactivity(intent); break; case R.id.btn_music: { Intent intent = new Intent(); intent.setclass (Main.this, MusicActivity.class); startactivity(intent); break; case R.id.btn_4: { Intent intent = new Intent(); intent.setclass (Main.this, SettingGame.class); startactivity(intent); break; case R.id.btn_quit: { Intent intent = new Intent(); intent.setclass (Main.this, ActivityEnd.class); startactivity(intent); -52 -

59 break; protected void onstart() { protected void onrestart() { protected void onresume() { protected void onpause() { protected void onstop() { protected void ondestroy(){ super.ondestroy(); -53 -

60 Main.xml 檔內容如下 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="fill_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingbottom="@dimen/vertical_margin" android:paddingleft="@dimen/horizontal_margin" android:paddingright="@dimen/horizontal_margin" android:paddingtop="@dimen/vertical_margin" > <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparenttop="true" android:layout_centerhorizontal="true" android:layout_margintop="15dp" android:text="@string/welcome" android:textalignment="center" android:layout_weight="2" android:textsize="25sp" /> <Button android:id="@+id/btn_1" android:layout_width="215dp" android:layout_height="wrap_content" android:layout_below="@+id/textview1" android:layout_centerhorizontal="true" android:layout_margintop="15dp" android:text="@string/goto1" android:textalignment="center" android:padding="5dp" -54 -

61 android:textsize="18sp" android:layout_weight="1" android:background="#998877" /> <Button android:layout_width="215dp" android:layout_height="wrap_content" android:layout_margintop="15dp" android:padding="5dp" android:textsize="18sp" android:layout_weight="1" android:background="#999999" /> <Button android:layout_width="215dp" android:layout_height="wrap_content" android:layout_margintop="15dp" android:padding="5dp" android:textsize="18sp" android:layout_weight="1" android:background="#779988" /> <Button android:layout_width="215dp" android:layout_height="wrap_content"

62 android:layout_marginbottom="34dp" android:layout_margintop="15dp" android:textsize="18sp" android:padding="5dp" android:layout_weight="1" android:background="#888888" /> <Button android:layout_width="130dp" android:layout_height="wrap_content" android:layout_margintop="15dp" android:padding="5dp" android:layout_weight="1" android:textsize="18sp" android:background="#aabbaa" /> <Button android:layout_width="215dp" android:layout_height="wrap_content" android:layout_margintop="50dp" android:layout_weight="1" android:background="#aaaaaa" android:padding="5dp" android:textsize="18sp" /> -56 -

63 <Button android:layout_width="130dp" android:layout_height="wrap_content" android:layout_margintop="35dp" android:layout_weight="2" android:background="#c0c0c0" android:padding="5dp" android:textalignment="center" android:textsize="18sp" /> </RelativeLayout> Manifest.xml 檔如下 : <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="com.cutemis.rhythmmusic" android:versioncode="1" android:versionname="1.0" > <uses-sdk android:minsdkversion="19" android:targetsdkversion="23" /> <application android:allowbackup="true" android:icon="@drawable/icon" android:theme="@android:style/theme.notitlebar"> > <activity android:name=".main" android:label="@string/app_name" android:configchanges="orientation keyboardhidden" android:theme="@android:style/theme.notitlebar" > > -57 -

64 <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> <activity android:name=".musicactivity" > </activity> <activity android:name=".activityb" > </activity> <activity android:name=".activityc" > </activity> <activity android:name=".settinggame" > </activity> <activity android:name=".activityend" > </activity> <activity android:name=".rhythmmusic" > </activity> <activity android:name=".spotonview" > </activity> <service android:name="com.cutemis.rhythmmusic.boundmusicservice" android:enabled="true"> <intent-filter> <action android:name="com.cutemis.rhythmmusic.boundmusicservice" /> /> <category android:name="android.intent.category.default" </intent-filter> </service> </application> -58 -

65 </manifest> 節奏音樂遊戲主體 程式 rhythmmusic.java 內容如下 : package com.cutemis.rhythmmusic; import android.app.activity; import android.content.componentname; import android.content.context; import android.content.intent; import android.content.serviceconnection; import android.media.mediaplayer; import android.os.bundle; import android.os.ibinder; import android.util.log; import android.view.view; import android.widget.button; import android.widget.relativelayout; import android.widget.toast; public class RhythmMusic extends Activity implements View.OnClickListener { private SpotOnView view; Button btn[]=new Button[4]; private MusicService mserv; RelativeLayout layout; MediaPlayer oursong; //Bind music services private Boolean isbound; public BoundMusicService ms; public Intent intent; private String TAG; private ServiceConnection sc = new ServiceConnection() { -59 -

66 public void onserviceconnected(componentname name, IBinder service) { BoundMusicService.LocalBinder binder = (BoundMusicService.LocalBinder)service; ms = binder.getservice(); Log.v(TAG,"Service connedted with "+name); isbound =true; public void onservicedisconnected(componentname name) { ms = null; isbound=false; Log.v(TAG,"Service is Disconnected from" +name ); public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.spotgame); layout= (RelativeLayout) findviewbyid(r.id.gamefield); // create a new SpotOnView and add it to the RelativeLayout view = new SpotOnView(this, getpreferences(context.mode_private), layout); layout.addview(view, 0); btn[0]=(button)findviewbyid(r.id.btn_playgame); btn[1]=(button)findviewbyid(r.id.btn_pausegame); btn[2]=(button)findviewbyid(r.id.btn_resumegame); btn[3]=(button)findviewbyid(r.id.btn_stopgame); for (int i=0; i<3; i++) { btn[i].setonclicklistener(this); -60 -

67 public void onclick(view v){ Intent imusic = new Intent(); imusic.setclass(getapplicationcontext(), MusicService.class); switch(v.getid()) { case R.id.btn_playgame: startservice(imusic); // 加入音樂 oursong= MediaPlayer.create(this, R.raw.breeze); oursong.start(); break; case R.id.btn_pausegame: onpause(); mserv.pausemusic(); break; case R.id.btn_stopgame: onstop(); oursong.stop(); mserv.stopmusic(); break; case R.id.btn_resumegame: onresume(); mserv.resumemusic(); break; case View.NO_ID: default: startservice(imusic); break; -61 -

68 // called when this Activity moves to the background protected void onstart() { super.onstart(); Intent intent = new Intent(this, BoundMusicService.class); bindservice(intent, sc, Context.BIND_AUTO_CREATE); isbound=true; Toast.makeText(getBaseContext(), "service is binded succeddfully", public void onpause() { super.onpause(); view.pause(); // end method onpause // called when this Activity is brought to the public void onresume() { super.onresume(); public void onstop() { super.onstop(); finish(); public void ondestroy() { -62 -

69 super.ondestroy(); // end class RhythMusic 遊戲進行中的 SpotOnview.java 程式碼如下 : package com.cutemis.rhythmmusic; import java.util.hashmap; import java.util.map; import java.util.random; import java.util.concurrent.concurrentlinkedqueue; import java.util.queue; import android.animation.animator; import android.animation.animatorlisteneradapter; import android.app.alertdialog; import android.app.alertdialog.builder; import android.content.componentname; import android.content.context; import android.content.dialoginterface; import android.content.intent; import android.content.serviceconnection; import android.content.sharedpreferences; import android.content.res.resources; import android.media.audiomanager; import android.media.mediaplayer; import android.media.soundpool; import android.os.handler; import android.os.ibinder; import android.util.log; import android.view.layoutinflater; import android.view.motionevent; import android.view.view; import android.widget.imageview; import android.widget.linearlayout; -63 -

70 import android.widget.relativelayout; import android.widget.textview; import android.widget.toast; public class SpotOnView extends View { // constant for accessing the high score in SharedPreference private static final String HIGH_SCORE = "HIGH_SCORE"; private SharedPreferences preferences; // stores the high score // variables for managing the game private int spotstouched; // number of spots touched private int score; // current score private int level; // current level private int viewwidth; // stores the width of this View private int viewheight; // stores the height of this view private long animationtime; // how long each spot remains on the screen private boolean gameover; // whether the game has ended private boolean gamepaused; // whether the game has ended private boolean dialogdisplayed; // whether the game has ended private int highscore; // the game's all time high score // collections of spots (ImageViews) and Animators private final Queue<ImageView> spots = new ConcurrentLinkedQueue<ImageView>(); private final Queue<Animator> animators = new ConcurrentLinkedQueue<Animator>(); private TextView highscoretextview; // displays high score private TextView currentscoretextview; // displays current score private TextView leveltextview; // displays current level private LinearLayout liveslinearlayout; // displays lives remaining private RelativeLayout rlayout; // displays spots private Resources resources; // used to load resources private LayoutInflater layoutinflater; // used to inflate GUIs -64 -

71 // time in milliseconds for spot and touched spot animations private static final int INITIAL_ANIMATION_DURATION = 6000; private static final Random random = new Random(); // for random coords private static final int SPOT_DIAMETER = 100; // initial spot size private static final float SCALE_X = 0.25f; // end animation x scale private static final float SCALE_Y = 0.25f; // end animation y scale private static final int INITIAL_SPOTS = 5; // initial # of spots private static final int SPOT_DELAY = 500; // delay in milliseconds private static final int LIVES = 3; // start with 3 lives private static final int MAX_LIVES = 7; // maximum # of total lives private static final int NEW_LEVEL = 10; // spots to reach new level private Handler spothandler; // adds new spots to the game // sound IDs, constants and variables for the game's sounds private static final int HIT_SOUND_ID = 1; private static final int MISS_SOUND_ID = 2; private static final int DISAPPEAR_SOUND_ID = 3; private static final int SOUND_PRIORITY = 1; private static final int SOUND_QUALITY = 100; private static final int MAX_STREAMS = 4; private SoundPool soundpool; // plays sound effects private int volume; // sound effect volume private Map<Integer, Integer> soundmap; // maps ID to soundpool private Intent i; // constructs a new SpotOnView public SpotOnView(Context context, SharedPreferences sharedpreferences, RelativeLayout parentlayout) { super(context); // load the high score preferences = sharedpreferences; -65 -

72 highscore = preferences.getint(high_score, 0); // save Resources for loading external values resources = context.getresources(); // save LayoutInflater layoutinflater = (LayoutInflater) context.getsystemservice( Context.LAYOUT_INFLATER_SERVICE); // get references to various GUI components rlayout = parentlayout; liveslinearlayout = (LinearLayout) rlayout.findviewbyid( R.id.lifeLinearLayout); highscoretextview = (TextView) rlayout.findviewbyid( R.id.highScoreTextView); currentscoretextview = (TextView) rlayout.findviewbyid( R.id.scoreTextView); leveltextview = (TextView) rlayout.findviewbyid( R.id.levelTextView); spothandler = new Handler(); // used to add spots when game starts // end SpotOnView constructor // store SpotOnView's protected void onsizechanged(int width, int height, int oldw, int oldh) { viewwidth = width; // save the new width viewheight = height; // save the new height // end method onsizechanged // called by the SpotOn Activity when it receives a call to onpause public void pause() -66 -

73 { gamepaused = true; soundpool.release(); // release audio resources soundpool = null; cancelanimations(); // cancel all outstanding animations // end method pause // cancel animations and remove ImageViews representing spots private void cancelanimations() { // cancel remaining animations for (Animator animator : animators) animator.cancel(); // remove remaining spots from the screen for (ImageView view : spots) rlayout.removeview(view); spothandler.removecallbacks(addspotrunnable); animators.clear(); spots.clear(); // end method cancelanimations // called by the SpotOn Activity when it receives a call to onresume public void resume(context context) { gamepaused = false; initializesoundeffects(context); // initialize app's SoundPool if (!dialogdisplayed) resetgame(); // start the game // end method resume // start a new game public void resetgame() { -67 -

74 spots.clear(); // empty the List of spots animators.clear(); // empty the List of Animators liveslinearlayout.removeallviews(); // clear old lives from screen animationtime = INITIAL_ANIMATION_DURATION; // init animation length spotstouched = 0; // reset the number of spots touched score = 0; // reset the score level = 1; // reset the level gameover = false; // the game is not over displayscores(); // display scores and level // add lives for (int i = 0; i < LIVES; i++) { // add life indicator to screen liveslinearlayout.addview( (ImageView) layoutinflater.inflate(r.layout.life, null)); // end for // add INITIAL_SPOTS new spots at SPOT_DELAY time intervals in ms for (int i = 1; i <= INITIAL_SPOTS; ++i) spothandler.postdelayed(addspotrunnable, i * SPOT_DELAY); // end method resetgame // create the app's SoundPool for playing game private void initializesoundeffects(context context) { // initialize SoundPool to play the app's three sound effects soundpool = new SoundPool(MAX_STREAMS, AudioManager.STREAM_MUSIC, SOUND_QUALITY); -68 -

75 // set sound effect volume AudioManager manager = (AudioManager) context.getsystemservice(context.audio_service); volume = manager.getstreamvolume(audiomanager.stream_music); // create sound map soundmap = new HashMap<Integer, Integer>(); // create new HashMap // add each sound effect to the SoundPool soundmap.put(hit_sound_id, soundpool.load(context, R.raw.hit, SOUND_PRIORITY)); soundmap.put(miss_sound_id, soundpool.load(context, R.raw.miss, SOUND_PRIORITY)); soundmap.put(disappear_sound_id, soundpool.load(context, R.raw.disappear, SOUND_PRIORITY)); // end method initializesoundeffect // display scores and level private void displayscores() { // display the high score, current score and level highscoretextview.settext( resources.getstring(r.string.high_score) + " " + highscore); currentscoretextview.settext( resources.getstring(r.string.score) + " " + score); leveltextview.settext( resources.getstring(r.string.level) + " " + level); // end function displayscores // Runnable used to add new spots to the game at the start private Runnable addspotrunnable = new Runnable() { public void run() { addnewspot(); // add a new spot to the game // end method run -69 -

76 ; // end Runnable // adds a new spot at a random location and starts its animation public void addnewspot() { // choose two random coordinates for the starting and ending points int x = random.nextint(viewwidth - SPOT_DIAMETER); int y = random.nextint(viewheight - SPOT_DIAMETER); int x2 = random.nextint(viewwidth - SPOT_DIAMETER); int y2 = random.nextint(viewheight - SPOT_DIAMETER); // create new spot final ImageView spot = (ImageView) layoutinflater.inflate(r.layout.untouched, null); spots.add(spot); // add the new spot to our list of spots spot.setlayoutparams(new RelativeLayout.LayoutParams( SPOT_DIAMETER, SPOT_DIAMETER)); spot.setimageresource(random.nextint(2) == 0? R.drawable.green_spot : R.drawable.red_spot); spot.setx(x); // set spot's starting x location spot.sety(y); // set spot's starting y location spot.setonclicklistener( // listens for spot being clicked new OnClickListener() { public void onclick(view v) { touchedspot(spot); // handle touched spot // end method onclick // end OnClickListener ); // end call to setonclicklistener rlayout.addview(spot); // add spot to the screen // configure and start spot's animation spot.animate().x(x2).y(y2).scalex(scale_x).scaley(scale_y).setduration(animationtime).setlistener( new AnimatorListenerAdapter() -70 -

77 public void onanimationstart(animator animation) { animators.add(animation); // save for possible cancel // end method onanimationstart public void onanimationend(animator animation) { animators.remove(animation); // animation done, remove if (!gamepaused && spots.contains(spot)) // not touched { missedspot(spot); // lose a life // end if // end method onanimationend // end AnimatorListenerAdapter ); // end call to setlistener // end addnewspot method // called when the user touches the screen, but not a public boolean ontouchevent(motionevent event) { // play the missed sound if (soundpool!= null) soundpool.play(miss_sound_id, volume, volume, SOUND_PRIORITY, 0, 1f); score -= 15 * level; // remove some points score = Math.max(score, 0); // do not let the score go below zero displayscores(); // update scores/level on screen return true; // end method ontouchevent // called when a spot is touched -71 -

78 private void touchedspot(imageview spot) { rlayout.removeview(spot); // remove touched spot from screen spots.remove(spot); // remove old spot from list ++spotstouched; // increment the number of spots touched score += 10 * level; // increment the score // play the hit sounds if (soundpool!= null) soundpool.play(hit_sound_id, volume, volume, SOUND_PRIORITY, 0, 1f); // increment level if player touched 10 spots in the current level if (spotstouched % NEW_LEVEL == 0) { ++level; // increment the level animationtime *= 0.95; // make game 5% faster than prior level // if the maximum number of lives has not been reached if (liveslinearlayout.getchildcount() < MAX_LIVES) { ImageView life = (ImageView) layoutinflater.inflate(r.layout.life, null); liveslinearlayout.addview(life); // add life to screen // end if // end if displayscores(); // update score/level on the screen if (!gameover) addnewspot(); // add another untouched spot // end method touchedspot // called when a spot finishes its animation without being touched public void missedspot(imageview spot) -72 -

79 { spots.remove(spot); // remove spot from spots List rlayout.removeview(spot); // remove spot from screen if (gameover) // if the game is already over, exit return; // play the disappear sound effect if (soundpool!= null) soundpool.play(disappear_sound_id, volume, volume, SOUND_PRIORITY, 0, 1f); // if the game has been lost if (liveslinearlayout.getchildcount() == 0) { gameover = true; // the game is over // if the last game's score is greater than the high score if (score > highscore) { SharedPreferences.Editor editor = preferences.edit(); editor.putint(high_score, score); editor.commit(); // store the new high score highscore = score; // end if cancelanimations(); // display a high score dialog Builder dialogbuilder = new AlertDialog.Builder(getContext()); dialogbuilder.settitle(r.string.game_over); dialogbuilder.setmessage(resources.getstring(r.string.score) + " " + score); dialogbuilder.setpositivebutton(r.string.reset_game, new DialogInterface.OnClickListener() { -73 -

80 public void onclick(dialoginterface dialog, int which) { displayscores(); // ensure that score is up to date dialogdisplayed = false; resetgame(); // start a new game // end method onclick // end DialogInterface ); // end call to dialogbuilder.setpositivebutton dialogdisplayed = true; dialogbuilder.show(); // display the reset game dialog // end if else // remove one life { liveslinearlayout.removeviewat( // remove life from screen liveslinearlayout.getchildcount() - 1); addnewspot(); // add another spot to game // end else // end method missedspot -74 -

81 4.3.2 APP 會員登入與註冊之寫法 圖 18. 會員管理畫面正宗的作法是要連線到伺服器管理網站去將資料寫入資料庫, 所以執行上較為複雜一點, 不過現在很多資訊服務都已經發展的很便利, 所以伺服器管理上較以往容易多了. 首先步驟上是要取得一個網頁空間, 再建立一個 DataBase, 然後使用管理工 具存取資料. 網頁空間 : 申請一個 000webhost 免費空間, 依網路說明操作. 即可 在 webhost 中建立一個 mysql 的 DB. 在 Cpanel 下使用 myphpadmin 去管理 DB. 順便地, 為了傳輸檔案需要使用 ftp 軟體, 建議下載免安裝版之 filezella

82 本專題申請一網頁空間, username:a ; 網址 : androidleaner.net16.net, 有 1500MB 的儲存空間 第一次進入時需將資料一律放在網址中的 public_html 資料夾下, 並先刪除 default.php 檔, 再加入自已的檔案 為建立程式中的會員管理功能, 在 public_html 下建立一資料夾 app, 專放本 遊戲程式之 php 程式及會員資料庫以及音樂檔 建立一個 Database 命名為 a rmusic, 使用者 :a _dancer01 會員表單為 :userdata;server: localhost 第一次進入時需將資料一律放在網 址中的 public_html 資料夾下, 並先刪除 default.php 檔, 再加入自已的檔案 -76 -

83 -77 -

84 為建立程式中的會員管理功能, 在 public_html 下建立一資料夾 webapp, 專 放本遊戲程式之 php 程式及會員資料庫以及音樂檔 建立一個 Database 命名為 a member, 使用者 :a _student 會員表單為 :userdata;$server_name = "mysql11.000webhost.com" 伺服器上與會員管理的程式共有三個 : login.php, register.php 以及 init.php 分別如下 : login.php 檔內容如下 : <?php error_reporting(0); require "init.php"; $name = $_POST["name"]; $password = $_POST["password"]; //$name = "sdf"; //$password = "sdf"; $sql = "SELECT * FROM `user_info` WHERE `name`='".$name."' AND `password`='".$password."';"; $result = mysqli_query($con, $sql); $response = array(); while($row = mysqli_fetch_array($result)){ $response = array("id"=>$row[0],"name"=>$row[1],"password"=>$row[2]," "=>$ro w[3]; echo json_encode(array("userdata"=>$response));?> Login.php 檔如下 : <?php -78 -

85 error_reporting(0); require "init.php"; $name = $_POST["name"]; $password = $_POST["password"]; $ = $_POST[" "]; //$name = "sdf"; //$password = "sdf"; //$ = "sdf@r54"; $sql = "INSERT INTO `user_info` (`id`,`name`, `password`, ` `) VALUES (NULL, '".$name."', '".$password."', '".$ ."');"; if(!mysqli_query($con, $sql)){ echo '{"message":"unable to save the data to the database."';?> Init.php 檔如下 : <?php $con = mysql_connect("mysql11.000webhost.com", "a _student", "password"); //password 暫不公開 if(!$con){ die('connection Error...'.mysql_error()); echo'connection success!'; mysql_close($con);?> 上網測試 : 連線成功 -79 -

86 在 Android 這一端程式碼 : MainActivity 檔內容 : package com.example.registration; import java.io.ioexception; import java.io.inputstream; import java.io.outputstream; import java.net.httpurlconnection; import java.net.malformedurlexception; import java.net.url; import org.json.jsonexception; import org.json.jsonobject; import android.app.activity; import android.content.context; import android.content.intent; import android.os.asynctask; import android.os.bundle; import android.view.view; import android.widget.edittext; public class MainActivity extends Activity { -80 -