2011年12月23日 星期五

測試Logitech的iPad專用鍵盤

剛收到的禮物,立刻來試用看看。
trace("搭配Dropbox,拿來寫些簡單的文章也沒什麼問題!");
反應速度也很快,所以以後帶個iPad到咖啡廳坐的機會又增加了。

2011年12月13日 星期二

小試一下HTML5與CSS3

自從去年開始看到一些HTML5+CSS3實驗性的範例出來,就一直想找時間來接觸這一塊。今年更多HTML5的網站陸續冒出來,書籍的資料也更多了。於是玩了一下HTML5跟CSS3,紀錄一些些心得。

我想以HTML5的發展來看,大概沒有人會懷疑它是網路上未來的標準。所謂的標準,倒不是"會不會取代Flash"這類膚淺的問題,而是只要製作網站,就得跟它打交道。即使是從過去到現在,開發一個全Flash網站,絕對不是丟幾個.swf檔案到伺服器上面就解決了,少不了還是要處理HTML、CSS、以及Javascript。未來當然也是如此。與其到時候因為一些doctype、meta等等瑣碎的東西搞得焦頭爛額,不如找個時間好好的了解一下。我相信很多人都準備要投入這一塊,只是因為某些因素而暫緩。以下分享幾個我玩了之後的心得,也許還在觀望的人看了會比較想開始接觸HTML5與CSS3。

2011年11月18日 星期五

一起來玩鳥 Starling Framework(9)Particle

最後,來看看Starling裡一個很炫的功能:Particle。Particle屬於extension,所以要另外下載檔案:Starling-Extension-Particle-System。下載之後把檔案複製到Starling的source裡面就可以了。

一起來玩鳥 Starling Framework(8)BitmapFont

所謂BitmapFont,就是事先將我們會用到的字型,會用到的字,輸出成一張圖片,類似Sprite sheet,以及一個xml格式的Data file,然後我們一次將這文字圖片轉成Texture,upload到GPU,當我們要用到某個文字時,再利用Data file對照將Texture貼上。這樣做的好處是比起我們動態的去產生文字的Texture,BitmapFont只做一次upload Texture到GPU的動作,之後重複利用這個Texture,GPU的負擔比較小;相對的,如果我們動態去產生文字的Texture,upload到GPU的次數多,GPU的cost就比較大。缺點是要先決定我們會用到哪些字?最大的字級多少?圖片儲存文字檔案也比較大。

2011年11月17日 星期四

一起來玩鳥 Starling Framework(7)MovieClip

承上一篇,我們接著來講最後一個IAnimatable類別,MovieClip。Starling的MovieClip跟native的MovieClip不太一樣,它只能接收一個Vector.<Texture>,來指定每個frame的貼圖,而不能像native一樣當DisplayObjectContainer,加入一堆東西。不過透過一些工具,我們可以把native做好的MovieClip,輸出成一張Sprite sheet,以及一個XML檔,再將這張圖片與XML匯入Starling產生一個TextureAtlas,最後由這個TextureAtlas轉出Vector.<Texture>給MovieClip使用。

2011年11月16日 星期三

一起來玩鳥 Starling Framework(6)Juggler、Tween、以及DelayCall

這篇開始來講Starling裡的Animation。Juggle是個簡單的Class,用來控制動畫的進行。他負責管理經由add()加進來的實現IAnimatable介面的物件,然後當Juggler的advanceTime()被呼叫時,它會負責去呼叫這些IAnimatable的advanceTime(),讓動畫進行下去;而當某個IAnimatable到達complete狀態時,則會被Juggler踢出去。我們就只要負責每個frame去呼叫Juggler的advanceTime()就好。而Starling class裡有個預設的juggler,當Starling.current正在運行時,Starling.juggler在每個frame時會自動被呼叫advanceTime()。通常我們把遊戲裡的動畫加到Starling.juggler裡,而一些特殊的動畫,例如遊戲暫停時要撥放的動畫,再加到另一個我們新增的Juggler,然後每個frame去呼叫它的advanceTime()。這裡講的每個frame,我們是使用EnterFrameEvent.ENTER_FRAME,而不是Event.ENTER_FRAME,因為EnterFrameEvent可以取得passedTime,這個passTime是指跟上一次事件發生經過的時間,可以傳給Juggle的advanceTime()的第一個參數。用經過時間來播放動畫,這樣就不會受frame數不穩定而影響動畫撥放的時間。

2011年11月15日 星期二

一起來玩鳥 Starling Framework(5)Multi-Touch

這篇來談談Starling的Multi-Touch。前一篇也提到,Multi-Touch一樣是監聽TouchEvent.TOUCH,然後由TouchEvent的e.getTouches()取回多點的資訊。通常提到Multi-Touch會想到Gesture,不過Starling目前沒有GestureEvent可用。需要的時候只能自己動手寫。

2011年11月14日 星期一

一起來玩鳥 Starling Framework(4)TouchEvent,Touch,以及TouchPhase

這一篇來介紹一下TouchEvent。我們先來談單點的touch,下一篇再介紹MultiTouch。翻過Starling文件的應該會發現,Starling裡面沒有MouseEvent,而是整合在TouchEvent裡,但使用上有一些些小技巧要注意一下,才能做出MouseEvent.MOUSE_OUT的功能。

2011年11月13日 星期日

一起來玩鳥 Starling Framework(3)Button!

週末夜來介紹個簡單的DisplayObject就好。不論是在電腦上或行動裝置上,跟使用者互動次數最多的,大概就是按鈕了。因此,Starling有個Button類別,來做出這個常用的互動元件。

2011年11月12日 星期六

一起來玩鳥 Starling Framework(2)效能測試以及Image與Texture

上一篇我們放了一個Quad與TextField在舞台上慢慢轉。眼尖的可能會發現轉起來邊緣有點鋸齒,這可以透過設定Starling的反鋸齒來解決,在Main.as裡,新增了_starling之後,可以加上
_starling.antiAliasing = 2;
後面的值可以是0到16間2的次方數(0, 1, 2, 4, 8, 16),預設為0(沒有反鋸齒效果),通常有需要的話也不會設大於2。設其他數值也可以跑,不過應該是自動取了最接近值。這一篇,我們就來測測Starling的效能有多強,另外介紹最基本的圖像Image與Texture。

2011年11月11日 星期五

一起來玩鳥 Starling Framework(1)一定要的Hello World!

雖然已經一堆Hello World的介紹文章跟影片了,但中文資料畢竟是比較少,所以不能免俗的來一篇中文版Hello World。首先開啟一個AS3.0專案,fps不用客氣,設為60,Starling很快的。當然要發佈的版本是Flash Player 11。使用FlashDevelop的需要打開Project->Properties,如下圖的地方加上:-swf-version=13設定輸出的swf版本:
FlashBuilder的使用者請參考官網的介紹影片。

2011年11月10日 星期四

一起來玩鳥 Starling Framework(0)簡介

開場

Starling Framework是一套Flash 2D遊戲開發"工具",是使用Flash最新的Stage3D API建構出來的一套Framework。最大優點在於使用GPU做圖形的運算,讓Flash的效能能夠到之前的1000倍(官方說法)!另一大優點是易學,使用跟Flash native API類似的類別,方法,架構等,讓原本熟悉Flash的開發者可以很快的上手。

2011年7月8日 星期五

第一次上海行


上禮拜有個機會,接了一個上海那邊的案子。至於是哪家公司,雖然不是啥秘密,但也不方便公開來說,所以...不要問。會接這個案子,第一預算多,第二對方老闆很阿莎力的出機票跟住宿的錢拉我過去,第三這樣到外地工作還真的是頭一遭,很多人一輩子可能都碰不到這樣的機會,當然是要好好把握。所以迅速的辦好台胞證,跟對方確定航班,就這麼飛到上海工作10天。

2011年4月14日 星期四

Facebook iOS SDK — 儲存Access Token

上一篇提到使用Facebook iOS SDK的範例,每次登入就會跳出一個授權頁,按了確認後才又回到App.來,這樣的設計對User會很惱人。主要是這個SDK沒有把Access Token紀錄下來。Javascript版會記錄到cookie,ActionScript版會記錄到ShareObject,而iOS版,可以手動記錄到NSUserDefaults。

Facebook iOS SDK — 用範例來學習

玩Objective-C跟iOS兩個多禮拜,大概搞懂程式語法跟專案架構後,就想找些範例來練習一下。因為接下來想寫個跟Facebook有關的應用,就找了Facebook iOS SDK來試試。這篇就來紀錄一下一些設定的方法,免得過幾天又忘了。

2011年3月14日 星期一

Progression 4 自訂Command

Progression裡面的Command相當好用,內建有許多很實用的Command。但如果還不夠用的話,可以來動手自訂Command。自訂Command其實相當簡單,不管是用Flash IDE裡的面板或者FlashDevelop的Template,都有個叫MyCommand.as的樣版,複製它或使用它來新增一個as檔,裡面已經有_execute與_interrupt兩個私有方法,分別是執行與中斷Command要做的事情,而原本_execute裡有一行executeComplete(),是當Command執行完要呼叫的方法,必須依據我們的Command搬到適當的結束地方。另外還有一個覆寫公有方法clone(),複製這個Command的所有參數。還有,建構式該輸入的參數也依照我們的Command來開設。這幾點都做好了,一個自訂Command就完成了。

2011年2月13日 星期日

2011年1月5日 星期三

Facebook ActionScript Graph API ( 4 ) Dialogs

這一篇簡直是在考驗debug與找solution的功力!Dialog是用來彈出對話框,讓user與其互動,例如發布post到塗鴉牆,或是彈出extended permissions讓user同意等。因為user必須與其互動(按下同意按鈕之類)才會有反應,所以不需要特別的permission。例如不需要publish_stream權限也可以使用Feed Dialog去發post。目前文件裡面列出三種Dialog可用:Feed DialogFriends Dialog以及OAuth Dialog。而在這個API是使用Facebook.ui()來呼叫。很不幸的,這個method雖然可以正常呼叫,不過有點小bug,就是callback function無法正常呼叫,詳情見這篇

2011年1月4日 星期二

Facebook ActionScript Graph API ( 3 ) FQL、Old REST API以及picture

這三個東西篇幅不大,因此放在一起講。我們繼續擴充這個測試App.,首先在使用者介面新增三個TextField與三個Button,個別用來呼叫這三個method,類似這樣:

而程式主要是使用Facebook.fqlQuery(),Facebook.callRestAPI(),以及Facebook.getImageUrl()。

Facebook ActionScript Graph API ( 2 ) Graph API的GET、POST與DELETE

完成授權與登入後,接下來呼叫API的方式不管是外部Web連結Facebook,或者是IFrame App.,都沒有差別。由於等等我們要測試自動發布到塗鴉牆的功能,所以login的時候請多加上"publish_stream"這個extended permission,並確定重新執行一次login。然後我們做一個介面類似這樣:

由上而下放了三個TextField:
apiRequest_txt:輸入Graph API Request用的,例如:/me/friends。
params_txt:當使用POST時,需要帶的參數。這裡因為AS的Object不方便用String去轉,因此我們設計讓user輸入JSON encoded的String,然後再用as3corelib的JASON.decode將它解回Object。輸入例如:{"message":"test message!"}。
result_txt:將回傳的結果顯示出來。這裡可以將result轉成JSON encoded String之後顯示出來。
左邊放個名為btnApi的Button在輸入完後去呼叫。另外放個method_cb的ComboBox來選擇要用GET、POST或是DELETE。

Facebook ActionScript Graph API ( 1 ) 取得認證與授權,以及登入

首先準備幾件事:第一,下載Adobe ActionScript 3 SDK for Facebook Platform API,裡面有原始檔,SWC,Docs,Examples,是個規模還算小的API,所以其實花點時間就看完了。第二,雖然Adobe上面有一系列介紹文章,建議可以先開發AIR應用,再將程式碼改為WEB App.,但我試過好像也沒多方便,所以還是習慣丟到網站上測試。要在網路上測試,當然要安裝Flash Player Debug版,還要有個可以讀取Flash Log的工具,例如Vizzy Flash Tracer。第三,開一個測試App.,在"網站"裡面設定好Site URL,以及"Facebook整合"裡面的Canvas Page與Canvas URL,我們等等會練習一般Web連結Facebook,以及Facebook上IFrame App.的認證授權與登入。最後將"應用程式 ID"複製下來,接下來會用到。