Erin's Blog

之前的版本跟目前 國道計程官網 所列資料誤差很大，這支 App 也一直有人在使用，所以為了答謝愛用者只好做了一次大更新，因為對 CoronaSDK scrollView widget 有點怨言，所以 iOS 版本採用 Swift3 重寫了一遍，不過 Android 版本還是維持著 CoronaSDK 版本： V2.0 更新: 更新地圖資料與國道計程收費官網同步，新增多個服務區、樹林與南雲出入口。 修正快速道路與無計費國道串接點選方式，改採用連續點法，如 苗栗到清水服務區點選順序為：苗栗 ->台中系統 -> 中港系統 -> 清水服務區 更新連假模式價錢基數與修正計程車模式價錢顯示。。 地圖可縮放。=D Universal Version includes iOS and Android

有鑑於 PlayerPrefs 測試與版本更新問題，將大家都愛用的 PreviewLabs.PlayerPrefs 打包起來，製作重點還是以懶人為主，基本上 PlayerPrefs 資料更新與數量並不可能會有強烈衝擊效能的狀況產生，所以為了方便開發，就弄了一個視覺化工具，方便除錯用。 雖然 PreviewLabs.PlayerPrefs 作者都宣告放棄他們的版權，不過為了尊重程式，僅僅加入了兩個公用函式，其他並無更改。 內有： Cookie Manager Cookie 用 DataObject 混合編輯 ScriptableObject 執行階段除錯視窗工具 當然還是有懶人常數檔案輸出 資料版本控制，方便更新版後儲存資料更新 功能其實很多，有興趣的請自行到 Github 下載並參考範例吧！

怕上篇文章越改越長，就直接開新的貼。 erinylin_fsm2.0.unitypackage A finite-state machine (FSM) v2.0, use ScriptObject to preset states. 有限狀態機更新版。本人有強迫症，喜歡將工具不斷改寫。本版本主要是學習到 ScriptableObject and EditorGUI 時改寫的。

絕大部分都是組件，會秉持懶人精神，朝使用便捷的方向製作。每個專案都會附上範例場景。不定時更新 erinylin_fsm.unitypackage lastupdated: 03.03,2016 A finite-state machine (FSM), easy to use also can be set by Inspector window. 有限狀態機  

上週新上架了一個 CoronaSDK transition API helper plugin，主要的目的是為了可以用 string 設定控制所有的動作巨集，方便動作資料預設。 一般來說，如果要使用 transition 達成物件跳躍後往右邊移動，一般語法如下： transition.to( target, {y = target.y-100, transition=easing.outSine, time = 400} ) transition.to( target, {y = target.y+100, transition=easing.inSine, time = 300, delay=400} ) transition.to( target, {x = target.x+300, transition=easing.inSine, time = 600, delay=700} ) 如果改用 tweentrain 就可以寫成： tweentrain.set( target, { "transition:to", {y="-100", transition="outSine", time=400} }, { "transition:to", {y="100", transition="inSine", time=300} }, { "transition:to", {x="300", transition="inSine", time=600} } ) tweentrain.start( target ) 是不是就簡單很多了呢？ View the Document on Github Get it from Corona Plugin Store now. =D

一般可分析 swf 的軟體都是針對 main timeline 做定位，所以直接從 Adobe Flash 的 Library 選單輸出的 MovieClip .swf 對其來說都是不合法的格式，如果一個 app 使用的動畫量並不多的話，將 MovieClip 轉拉到新文件重新輸出到不是太麻煩的一件事，但是...為了秉持懶人精神，當然是用 Adobe JavaScript API 來製作 ，傑克真的太神奇了，想要的格式都可以透過這個修改輸出...說實話，現在一堆手持裝置用 App 的編輯軟體，再如何也沒有 Flash 好用啊！ Flash 大回春！！！！！ 首先完成的是 Export MovieClip For TexturePacker： 可直接將 MovieClip 輸出成 TexturePacker 可以分析的 swf 格式，其他的可分析 swf 的 spritesheet 包裝軟體也可以使用。共有兩種輸出模式，你可以直接將主場景影格1中所有的 MovieClip 實體輸出，或者選擇你要輸出的 MovieClip 實體即可。

由於手上有個案子會使用到大量的動畫，之前與客戶配合時為了方便客戶製作，素材都是採用 Flash 或 PhotoShop 輸出 TexturePacker 可打包格式做 sprite sheet 使用。不過為了打包需要輸出大量的 swf，雖然可以使用 Flash 製作 app 用動畫已經簡化的很多步驟，但是某程度上還是有點不便，於是簡單研究了一下 Flash CS6+ 的內建輸出 Sprite Sheet 功能，並分析其輸出的 JSON-Array 格式給 CoronaSDK 使用。 不過嚴格說起來， Flash 打包 Sprite Sheet 的算法並沒有很好，尤其是有些時候，判定整個 MovieClip 範圍的長寬會有錯誤，這時候就是調整一下 MovieClip 後重新打包，也許就會正確，但是其判定規則因為沒有多加研究，所以目前不明，請有發現的朋友們告知一下，謝謝。

反正就是為了降低失智症發生機率所產生的遊戲...XD 認識我的朋友都知道，我的腦記憶體 80% 都是用在工作上，所以日常生活常常呈現一種失智的狀態，為了避免朋友們的擔心，所以花了些時間製作了一個 App 來幫助其他人與自己多活動腦部細胞，來吧！大家一起來運動...腦細胞！！ 魔方網製作的影片介紹：（大感恩啦！！！！） 遊戲速播：（大感恩啦！！！！） 佛心評測： ＊重灌狂人： 超刺激！「1Sec.-一秒反應王」在一秒間腦力瞬間爆發（iPhone, Android） ＊app01： 只有1秒鐘！超刺激「1Sec.-一秒反應王」活化你的大腦！ ＊魔方網： 《1Sec. 一秒反應王》考驗你的反應跟耐心 專訪： ＊魔方網： 絕不要變痴呆！《1Sec. 一秒反應王》專訪 Universal Version includes iOS and Android

視覺化快選國道里程費用計算。 跟上個壽司比起來，這個App真的幸福太多了...短短不到一週含上架就完成了，如果您操作上發現問題的話，請不吝於告知，我會儘快處理的，謝謝。 佛心評測： ＊ PunPop ： 【國道計程收費速算器】算好錢才不會弄錯錢。 ＊ 硬式要學 ： 計程收費怎算？「國道計程收費速算器 」3 秒算給妳 Universal Version includes iOS and Android

這個大概是我做過最悲情的遊戲了吧.... Universal Version includes iOS and Android 佛心評測： ＊ punapp.com ： 【Sushi Master-壽司達人】可惡，想吃。 ＊ Free4u FB粉絲團： 【APP推介】看著肚子都要餓了哦~~~！

JoSi FXGtoLayout v0.3.0, Adobe AIR 3 runtime 這個又是一個 "就是" 系列懶人小工具，主要是針對 Adobe fxg 格式做分析轉成 Mobile 開發用的視圖程式碼，加速畫面配置使用。 為什麼會製作這個工具，原因主要是本人在使用的 Corona SDK 與 Titanium SDK 都沒有好用的視覺化編輯工具。一般設計師產出 layout 檔會使用 PhotoShop 來製作，在不多花錢的原則下，畫面對齊的基準就是其輸出的 fxg 資料做對應，如果要一筆一筆將資料鍵入，做久也是會膩的，所以花了點時間將這個工具做出來...

詳請請看上篇     [AIR] JoSiResize - Mobile 開發小工具 目前版本 0.7.0 feature: 修正批次輸出檔名錯置的 bug 下載位置相同，完畢！

這個報價系統雖然是兩三年前的作品，一年前應客戶要求更新並改版到 v2.5，目前線上說明書也趨近完備，所以在這邊分享一下。 Optilink雲端報價系統線上說明書： http://optiland.asia/help/index.html 相關文章： [作品]Flex 3.4 + PureMVC 的企業級 RIA 應用

JoSiResize v0.6.0,Adobe AIR 3 runtime 之前開發 tool app 的時候並沒有很深刻的體認到圖片素材的 resize 是一個很麻煩的事情...畢竟圖片使用量並不大，等到開發遊戲類的 app 才發現光處理不同螢幕尺寸的圖片素材是一個相當折磨人的工作。 因此 JoSiResize app 誕生了~~~原理是採用最小 scale 長寬比例不變的方式進行放大縮小。使用方法非常簡單，設定好變更的尺寸，接下來，將需要處理的圖片檔案全選直接拖曳到視窗內，畫面即會跳出預備儲存的檔案夾選擇畫面，確認後即開始轉檔。

今天是十三號星期五怎麼樣也要來貼一篇... 本專案原理參考自 dbankier/TiShadow 。目前版本功能僅提供瀏覽器鍵入程式片段傳送至包含 Ti.Meow Module 的 Titanium Mobile app 之 Android 或 iOS 手持裝置做即時預覽。操作影片拍攝不易，就請麻煩看一下照片想像一下吧...XD dbankier 的 TiShadow 相當完整，所以有興趣的朋友可以自行去參考。會製作這個專案僅僅為學習使用 Node.js ，在不採用其他 open source 的外掛模組下，也撇除因 Android 瀏覽器版本不支援 HTML5 WebSocket，就是以最簡單的連接方式做即時更新。

View in iTunes 這個是最近的作品~~ Titanium Mobile 真的是一個很容易學的跨平台手持裝置開發工具，主要是使用 JavaScript 來編寫。 有興趣可以參考： 阿修的部落格 最近幾篇文章都有介紹 ＝）

其實這個 app 早在三月的時候就已經寫好了，只是剛好本人的廢人病發作就一直拖到今天才送審上架...XD 先前的 Star Joker 版本是用 Flash CS5 寫的，而這個版本是使用 Corona SDK 開發。 玩法跟 Star Joker 一樣，只是多加了一個 Bounce Stage。 一開始先選擇你的 Bet 數目，然後點選 Deal & Draw。 發牌後，選擇你要保留的牌，然後再次點選 Deal & Draw 會將沒保留的牌重新換一次， 如果有贏牌的話，可以選擇 Collect 將錢收下來又或者是進入到 Bounce stage 去翻倍。

下午剛好有位朋友問了我一個問題..「 PureMVC Utility AsyncCommand 有沒有辦法等待 proxy 做反應？」，因為先前沒研究過此 Command 所以稍微花了些時間看一下它的運作邏輯。雖然最後討論的結果是設好 proxy call back 應該是可以等待 proxy 做完工作再執行下一個 subCommand，但是嚴格說起來，真正實作專案後發現，比較需要的是非同步 Notification 的處理。 由於 proxy 一些動作通常都是 onResult 後直接送出 Notification，光一個畫面可能會有好幾支 proxy 需要有順序性的完成資料讀取後，才可以將最終的 data 送到畫面內。這時候順序動作的 Command 就很浪費空間，因為可能一次要處理五六個 proxy 的 call back，這樣等於要等待幾個就需要寫幾支 Command.... 為了解決這種非同步順序型的處理現有的 Notifications，就花了點時間弄了一支 AsyncNotifier 來用用囉~~ Project Name: pureMVC Utility - AsyncNotifier Version: 1.0.0 Project Owner: Erin Lin Description: An utility is under pureMVC for AS3. Download: Standard & MultiCore versions pureMVC website: http://puremvc.org/ 先製作 AsyncHandleCommand 重點就是將你要處理的 Notifications 一次列在同一張 Command 的 execute 內（不需要事前註冊喔）： public class AsyncHandleCommand extends SimpleCommand implements ICommand { override public function execute(notification:INotification):void switch( notification.getName() ){ case FirstNotificationName: // break; case S...

認識 Erin 的人都知道， Erin 最懶得寫作品集相關的文章，但是這個案子比較有趣，所以特別提出來聊一下囉！ 廚櫃業某公司內部軟體，目前系統尚在 Beta 階段，所以下面圖片皆有模糊化處理。 [可擴充功能面板首頁，後台皆包含在管理系統內（有 iPhone 的 fu）] 這個案子是幫一家傳統公司做的專用軟體線上化，想要開發企業級 RIA 想當然爾就是使用 Flex 來處理囉！ 整個案子前端是以 Flex SDK 3.4 + Flex Builder3, PureMVC MultiCore for AS3 , Utility - AS3 StateMachine 以及先前 Erin 所發表的 WidgetsConsole 來處理整個系統的轉換。 整個系統包含前後台共七大系統，分別是：估價，客戶，店面管理，貨品上架，會員管理，分店系統以及權限系統。超級管理員可以利用權限系統分別開出不同職級的權限，然後使用者透過同一入口，依照權限區分，畫面會顯示不同的功能。整個系統最複雜的部份當然是估價系統，由於櫥櫃的建立是透過選擇資料即時演算出來，更何況櫥櫃類的 BOM 表階層是怪物般的可怕...所以在 DB 的建置與前端資料整合的部分著實費了我們一番苦心。 [櫥櫃 BOM 表編輯視窗及櫥櫃 BOM 單物件材質指定] 此外，在 UI 設計上也特別花了一些心思。本案子 Target User 是管理者、店長與公司旗下的業務群，此公司成員年齡約 30-60 歲，皆為一般電腦使用者，所以 UI 設計及操作 Flow 必須比一般線上 RIA 更加友善，才能幫助縮減公司的人事教育花費。如放大整個系統的標準字 size；新增資料時不能碰的快速鍵會鎖定；產品類縮圖雙點擊即可觀看放大圖；操作 flow 皆以左上至右下結束以及利用畫面引導使用者操作都是一些設計上的巧思。 [新增估價單] [簡單易用的業務員用客戶系統] 此外這個專案在實作 PureMVC 過程當然是相當的快樂，因為它的彈性與權職切分實在太令人滿意了！不管是擴充性，Rich Data 管理又或者除錯都非常的容易。當然本人早就已經是 PureMVC 的忠實粉絲了...=P 快來加入 Flex + PureMVC 的行列吧~~ 結果這篇到最後變成 PureMVC 的勸進文...XD

Project Name: pureMVC Utility - WidgetsConsole Version: 1.0.0 Project Owner: Erin Lin Description: An utility is under pureMVC Multicore that has Flex only and AS3 two versions. Demo: WidgetsConsole Live Demo with source code Demo source code Download: WidgetsConsole Open Source Project Home pureMVC website: http://puremvc.org/ 沒想到我第一個 google code open source project 就獻給 pureMVC 了... 套用 pureMVC 到 Flex 專案第一個遇到的問題就是 view components 的控制，Flex 專案的 view 總類太多：有 Modules, UIComponent, external swf and pop-up view...etc. 整個專案作下來光 view 就可能換上幾十個頁面，先前分享了運用 StateMachine 來處理 view 的轉換，中大型專案作下來 code 的複雜度也是非常可觀。我在今年二月分享了 [Flex] pureMVC MultiCore with Modules 就開始著手將其概念包裝成 pureMVC 的工具包，使用到目前為止整個架構還是挺完善，所以在這邊與大家分享。 WdigetConsole 顧名思義是「 相同目的 views 組合 = Widget 」 的中央控制中心，將程式內加入 WidgetsConsole 的 widget 統一控管，最終只需要 sendNotification 就可以達到 view 的新增跟刪除（因為我是懶人工具的愛好者，懶人工具的定義就是以最低的限度達到所需要的效果，所以這個工具包的自由度很高！） 以下是簡單講解 WidgetsConsole 是什麼： Widget 的定義： View component(s) + WidgetMediator + WidgetCommand 實作的 WidgetCommand:...