Amo Wu's Blog

團隊開發的網頁遊戲 《末日少女》 已經上市快兩個月了，成績比當初想像中還好，相較於 Gu Morning ，這次《末日少女》的開發學到很多寶貴的經驗，稍微鬆口氣之餘，也有許多需要檢討改善的地方，而《末日少女》Mobile 版其實也已經開發好一陣子了，最近這個專案 只剩下我一個人 交到我手上負責，趁這個機會導入一些新的開發方式，也 PO 上來分享心得。 這篇文章會講什麼？ HtpChat - 開發團隊的 Log 整合中心。 Trello - 團隊的專案管理小白板。 Git flow - 最佳程式開發流程。 Jenkins - CI(持續整合)建構工具。 HipChat HipChat 是一款跨平台團隊溝通工具，為了節省開會浪費的時間，通常會使用 Lync 或 Skype 這類通訊軟體，而 HipChat 除了該有的聊天功能，歷史查詢，附件上傳，@mentions 通知之外，最棒的是它可以整合許多服務，例如 GitHub ， Heroku ， JIRA 等，將所有開發上分散的訊息統一管理，方便團隊隨時瞭解狀況，而接下來這篇文章會講到如何整合 Trello ， GitHub 和 Jenkins 。 Trello 不同於一般市面上複雜的專案管理軟體， Trello 是一個簡單易用的 Scrum board，之前 Development Tools 這篇文章有稍微介紹，而我目前就是使用它來管理新專案，試用兩個月下來，感覺還不錯。 Trello 主要由 Board，List 和 Card 組成，如上圖所示，目前我將開發板分成五個 List： Backlog - 所有企劃開出來的功能會集中在這個 Backlog List，並按照預計完成日期排序。 To Do - Backlog 中的功能如果已經準備好企劃文件和美術檔案，那卡片就會移到 To Do 待命。 Doing - 正在實作中的功能會從 To Do 移至 Doing，建議每個人只留一張卡片在這。 Done (vX.X.X) - 下一版要完成的功能，在 Doing 完成的卡片會移到 Done，待產品發佈後會從 Done 改為 Live。 Live (vX.X.X) - 已經上線的功能 List，可以隨時使用封存，讓開發板保持乾淨...

一般 Flash 程式開發時, 取資源的方式有兩種: .swf .swc .swf 擋屬於 Runtime 時從外部載進來取用的方式, 通常會使用 Loader 來作處理. .swc 擋則是 Compiler 時就會一起包進來, 要取用內部元件通常就直接 new 出來就可以: var component:CLASS_NAME = new CLASS_NAME(); 如果想要動態取得元件的話會碰到一些問題, 一般來講會用 getDefinitionByName(CLASS_NAME:String) 這個 method: 不過編譯完執行後會碰到錯誤, 解決方式如下: Project > Properties Flex Compiler > 加入下面參數 -include-libraries=YOUR_ABSOLUTE_SWC_PATH.swc

Flash Builder 4.7 iOS Debug 這個月剛好玩到 flash on iOS，在部署到 iPad 時碰到些問題，筆記一下最後解決的步驟。 Flash Builder 4.7 提供三種方式部署和測試你的程式: On AIR Simulator On iOS Simulator On device 開發環境: Mac OSX 10.8.2 XCode 4.5.2 Flash Builder 4.7 Premium Adobe AIR SDK 3.5 STEP: 先開啟 Xcode 確定有更新到最新版，否則模擬器會有問題。 到 美國 Adobe官網下載安裝 Flash Builder 4.7 ，可試用兩個月。 前往 /Applications/Flash Builder 4.7/sdk/ 底下。 複製一份 4.6.0 的資料夾命名為 4.6.0_AIR35。 下載最新 AIR SDK 到剛建立的資料夾。 開啟 Terminal cd /Applications/Flash Builder 4.7/sdk/4.6.0_AIR35/ sudo tar -jxvf <下載的AIR SDK> 準備好 Apple Developer 的 .p12 和 .mobileprovision。 Debug your app!! 最後發現 Adobe 還提供一個免費又強力的效能檢測工具 Adobe Scout 。 不過一開始碰到不少問題，Flex 專案沒辦法跟 Scout 連上，最後 Google 到的解決方法: 確定你有安裝 python 的環境。 下載 telemetry-utils 。 開啟 Terminal cd 到 telemetry-utils 資料夾底下。 add-opt-in.py <YOUR FLEX bin .swf file> 然後再 Run 就可以看到 Scout 的結果了。 缺點是每次重新 Build 的時候就失效了，需要再下一次指令，期待之後會改善。

筆記筆記.. 一般在 AS3 要列舉 Object 的 properties 時，通常會用下面這種寫法： 不過在處理 VO (Value Object) 時則會出問題，因為它是 Class，後來在這篇 文章 找到解法：

第一次聽到 PureMVC 的時候大概是兩年前，那時候就對這套 MVC Framework 很感興趣，不過當時對於它的架構是有看沒有懂，就一直拖到了現在。 最近因為工作需要用到的關係，所以又再次學習它，經過閱覽無數前輩分享的文章之後，終於初步了解它的運作模式了，因此分享這邊學習心得筆記。 什麼是 MVC ? 一個設計方法(Design pattern 也稱設計模式)。 想初步了解的朋友可以參考 維基百科的說明 。 網路也有許多相關文章，大略內容就是將程式開發架構分為 Model、View 和 Controller 三個部份的開發方式，建議可以閱讀 深入淺出設計模式 這本書。 什麼是 PureMVC ? 一個跨多語言的 MVC Framework，其中我們要用到的是 Actionscript 3.0 版本，這是他們的 官方網站 。 下圖是他的架構圖，除了 MVC 外，它也用到不少其他 design pattern，第一次看可能會霧煞煞，沒關係，我們下面慢慢介紹。

Flash在網頁上的應用已經越來越普遍了，未來一樣占有一席之位，但是從以前到現在，對於發佈Flash到網頁上常常碰到一些不必要的問題，例如XP SP2更新後，IE瀏覽器上方會出現檔掉的訊息，或是Flash外框出現虛線，需要滑鼠點一下才能開始動作等...，而且使用者並未安裝Flash Player的情況下或版本太低都會無法順利的瀏覽。 最近剛好看到一個不錯的東西，就是這次要介紹的swfobject，一般我們要嵌入swf到HTML時，通常會寫的語法如下: < object id ="FlashID" classid ="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width ="300" height ="120" > < param name ="movie" value ="test.swf" /> < param name ="quality" value ="high" /> < param name ="wmode" value ="opaque" /> < param name ="swfversion" value ="6.0.65.0" /> </ object > 上面的程式碼使用到<object>標籤，早一點的甚至還要再寫<embed>才能動作，因為IE跟其他瀏覽器的種種原因，使得這種寫法不但又臭又長，也不符合標準。 那使用swfobject有什麼好處呢?我們繼續看下去吧。 首先我們得先去swfobject的網頁 http://code.google.com/p/swfobject/ ，然後下載目前的最新版本 swfobject_2_2.zip 。

最近正在寫一個FLASH的相片大頭貼截取程式，碰到了一個複製MovieClip的問題，AS3已經沒有AS2的duplicateMovie() 方法可以用，所以我找了一些解決方法分享上來。 第一種方式是比較好的解決方法，是PTT的CJCAT大提供的，可以直接複製一個相同的Class。 假如場景上面有一個clip_mc，它的class是MyClip，在不使用 new MyClip() 的前提下，以下的code可以生出一個新的MyClip物件。 // 先抓到MyClip的constructor var mcClass:Class = Object(clip_mc).constructor;   // 這樣就生出一個新的MyClip物件了 var clip2_mc:DisplayObject = new mcClass();   // 加入到舞台後就成功了 this .addChild(clip2_mc); 不過上面這個方法我試不出來，不知道是不是哪裡出錯了，所以又找了第二種方法， Copying a Sprite using BitmapData ，這個方法可以將Sprite的畫面複製到另一個DisplayObject上，因為我只是需要複製一個靜態的圖，所以可以不需要使用第一種複製Class的方式。 // 先實體一個clip_mc大小的BitmapData var myBitmapData:BitmapData = new BitmapData(clip_mc.width, clip_mc.height); // 然後繪製一個相同的clip_mc myBitmapData.draw(clip_mc);   // 實體一個複製的Bitmap var clip2_mc:Bitmap = new Bitmap(myBitmapData);   // 加入到舞台後就成功了 this .addChild(clip2_mc); 參考資料: 批踢踢實業坊 KIRUPA.COM ActionScript 3.0 語言和組件參考