2012年3月26日 星期一

[教學] Facebook 應用 (基礎編)

Facebook 提供的API, 對於需要用戶系統(Membership System) 的遊戲來說, 帶來一個簡單方案. 開發者不需建立大量資料儲存, 亦不用提供介面處理登入, 申請和忘記密碼等煩鎖事情.

Adobe 為我們提供一個開發套件 (SDK), 在Action Script 層面與Facebook 進行連結. 不少Facebook 遊戲使用這個SDK (例如: FIFA Superstars).

現在為大家介紹一些常用功能, 並於Mobile App 中應用: (可於iOS 及Android 系統正常運作)


登入Facebook:
登入功能
登入Facebook (使用StageWebView)
  1. 在登入Facebook 前, 首要起始FacebookMobile 這個類別.
    FacebookMobile.init(APP_ID, facebookInitHandler);
    
  2. 當用戶按下"Login" 按鈕, 產生一個StageWebView, 作為Facebook 登入版畫之用.
    var myWebView:StageWebView = new StageWebView();
    myWebView.stage = this.stage;
    myWebView.viewPort=new Rectangle(0,0,stage.stageWidth,stage.stageHeight)
    
  3. 然後呼叫FacebookMobile.login() 登入功能.
    FacebookMobile.login(loginHandler,this.stage,PERMISSION_ARR,myWebView);
    
  4. 回傳登入是否成功.
    private function loginHandler(success:Object, fail:Object):void{
      if(success!=null){
        // <----- success
      }else{
        // <----- fail
      }
    }
    


載入用戶資料:
用戶資料
  1. 登入Facebook 後, 我們可以呼叫FacebookMobile.getSession(), 這個FacebookSession 物件包含一些用戶基本資料.
    var session:FacebookSession = FacebookMobile.getSession();
    if(session!=null && session.user!=null){
      // <----- 用戶名稱
      nameTxt.text = session.user.name;
      // <----- 用戶性別
      genderTxt.text = session.user.gender;
      // <----- 用戶時區
      timezoneTxt.text = session.user.timezone;
      // <----- 用戶的Facebook 連結
      homeBtn.enabled = session.user.link!=null;
    }
    
  2. 載入用戶照片, 我們使用FacebookMobile.getImageUrl().
      // <----- 用戶照片
      userImg.source = FacebookMobile.getImageUrl(session.uid);
    


載入用戶的朋友名單 (Friends List):
朋友名單 (Friends List)
  1. 使用FacebookMobile.api() 來獲取朋友名單中的用戶號碼.
    FacebookMobile.api('/me/friends', friendsHandler);
    
  2. 把回傳的用戶號碼, 結合成FQL, 然後向FacebookMobile.fqlQuery() 查詢用戶的資訊.
    (name 和username)
    private function friendsHandler(response:Object, fail:Object):void{
      // <----- combine friend ids
      var friends:Array = response as Array;
      var friendsIds:Array = new Array();
      var l:uint=friends.length;
      for (var i:int=0; i>friends.length; i++)
        friendsIds.push(friends[i].id);
      
      // <----- get friend info.
      var fql:String = "SELECT uid, name, username FROM user WHERE uid IN (" + friendsIds.join(",") + ")";
      FacebookMobile.fqlQuery(fql, fqlHandler);
    }
    
  3. 把回傳的所有用戶名稱和照片, 利用Image 及Label 物件顯示至介面.
    private function fqlHandler(response:Object, fail:Object):void{
      if(fail){
        // <----- set UI
        loadingLab.text = "Fail.";
      }else{
        var friendDetails:Array = response as Array;
        var str:String = "";
        for (var i:int=0; i<friendDetails.length; i++) {
          var hGroup:HGroup = new HGroup();
          var pic:Image = new Image();
          var name:Label = new Label();
          
          // <----- set friend property
          pic.source = FacebookMobile.getImageUrl(friendDetails[i].uid);
          name.text = friendDetails[i].name;
          
          // <----- add to UI
          hGroup.addElement(pic);
          hGroup.addElement(name);
          vGroup.addElement(hGroup);
        }
        
        // <----- set UI
        loadingLab.text = "Done - "+friendDetails.length+" friend(s)";
      }
    }
    


發佈訊息至Facebook 的Wall Messages:

發佈訊息功能
訊息於Wall Messages 中顯示

  1. 發佈簡單訊息:
    FacebookMobile.postData("/me/feed/", postHandler, {"message":"你的文字"});
    


拍攝照片和上載至Facebook 的相簿 (Album):

上載照片功能
照片於相簿(Album) 中顯示

  1. 啟動照相機, 取得一個BitmapData. (請參考Adobe AIR 啟用預設拍攝模式)
  2. 當用戶按"Submit"按鈕時, 把BitmapData 調整大小, 然後和文字一起傳送至Facebook 相簿.
    // <----- define bitmap
    var MAX_IMAGE_SIZE:int = 300;
    var rate:Number = _bitmapData.width>_bitmapData.height?_bitmapData.width/MAX_IMAGE_SIZE:_bitmapData.height/MAX_IMAGE_SIZE;
    var wdith:int = Math.floor(_bitmapData.width/rate);
    var height:int = Math.floor(_bitmapData.height/rate);
    var bitmapData:BitmapData = new BitmapData(wdith, height);
    var bitmap:Bitmap = new Bitmap(bitmapData);
    var matrix:Matrix = new Matrix();
    matrix.scale(1/rate, 1/rate);
    bitmapData.draw(_bitmapData, matrix);
    
    // <----- post a news feed
    FacebookMobile.postData("me/photos", postHandler, {"image":bitmap,"message":msgTxt.text, "fileName":"IMG_"+(new Date()).valueOf()});
    


大家可以 [下載] 範例試試看.

參考資料: http://www.adobe.com/devnet/facebook/samples.html
API 參考: http://facebook-actionscript-api.googlecode.com/svn/release/current/docs/index.html

注意事項: 由於使用Facebook API, 需要有一個APP ID, 所以大家請到Facebook 申請.
申請位置
複製你的APP ID

2012年3月24日 星期六

載入網路資源 (Image, Video, HTML, SWF 及 Text)

作者對Adobe AIR 載入網路資源功能, 進行一個簡單測試. 分別於網路載入五類資源(Image, Video, HTML, SWF 及 Text), 以下是在iOS 及Android 運行所得的測試結果:



Image:

成功載入JPG 及PNG 圖案.

對於PNG 的透明功能可完全支援.

Video:

成功載入FLV 影片檔案.

實例簡單地利用MediaPlayer 物件載入. 若大家對於影片播放
有更高要求, 可考慮效能更佳的 StageVideo 物件播放.

HTML:

成功載入網頁內容.

StageWebView 物件 於Adobe AIR 2.5 開始被加入. 速度
與原生瀏覽器極為相近, 功能十分全面. 對比過去的htmlText
功能, StageWebView 更為強勁和實用. 而且Adobe AIR 可直
接控制網頁中的內容, 作出雙向溝通.
(請參考StageWebView 介紹)

SWF:

iOS 載入SWF 檔案後, 不能正常顯示.
Android 成功載入SWF 檔案.


雖然iOS 可以載入SWF 檔案, 但不能執行SWF 檔案內的
ActionScript 指令. 若大家不需作實時下載, 可考慮利
用SWC 嵌入至Apps 中. (請參考SWC 介紹)

Text:

成功載入XML 和JSON 文件.

對於資料內容, 我們會使用XML 或JSON 作為傳送格式. 我們
可以載入一些Web Service, Servlet, ASP 或PHP 等資料.

大家可以 [下載] 範例試試看.

注意事項: 若大家以手機測試, 請小心數據用量會增加.

2012年3月11日 星期日

黑白棋

這個黑白棋遊戲, 是作者多年前的作品, 使用Action Script 1.0 完成. 現在作者把它轉換為Action Script 3.0 (請不要深究當中內容, 因為很爛), 並利用Adobe AIR 發佈至Android 運行 (大家可以嘗試發佈至iOS 中). 把它包裝成mobile apps 確實是一件簡單工作.

請按 [觀看]

希望大家喜歡這個小遊戲.
大家可以 [下載] 範例試試看.

注意事項: 請確定已更新Adobe Flash Professional CS5.5 及Adobe AIR 2.7 或以上, 若不更新發佈時會出現問題.

2012年3月7日 星期三

Starling 圖像引擎 + Nape 物理引擎

最近Adobe 發佈AIR 3.2, 可以看到越來越多示範展現. 在Adobe Gaming 其中一個示範, 把Starling Framework 和Nape 物理引擎結合. 作者把它發佈至iOS 和Android 中運行, 效能十分理想.

請按 [觀看] (需要安裝Flash Player 11)

大家可以 [下載] 範例試試看.

參考來源: http://gaming.adobe.com/getstarted/

2012年3月4日 星期日

Adobe AIR 3.2 rc

二月二十七日, Adobe 發佈最新的AIR 3.2, 當中加入Stage3D 功能, 為Mobile 提供硬體渲染加速.
在片段中, 大家可以看到它的強大渲染能力.



資料來源: http://blogs.adobe.com/flashplatform/2012/02/mobile-gaming-gets-a-performance-boost-adobe-air-3-2-with-2d-and-3d-hardware-acceleration-announced.html

在電話運行AIR 3.2 的Stage3D

Adobe 的 Stage3D 已經發佈一段日子. 已經有不少3D 引擎相繼出現.
早期為大家介紹的Starling Framework, 以硬體渲染加速, 作為編寫2D 遊戲的引擎.
現在可以在Mobile 中實現, 雖然Mobile 相對於PC 效能較低, 但以硬體渲染加速, 運行效果亦相當理想. 我們只需作以下設定, 便可以發佈至iOS 和Android:


  • 建立Flex Project 後, 請在Project Properties 的Flex Compiler 設定:
    Flex SDK version:
      選擇已安裝的AIR 3.2 SDK
    Additional compiler arguments:
      填寫為 -locale en_US -swf-version 15

  • 修改app.xml
    在文件的第104 行開啟並設設定為<renderMode>direct</renderMode>

完成以上步驟, Flex Project 將會執行AIR 3.2 的Stage3D.
大家可以 [下載] 範例試試看.

注意事項:
  • 下載AIR 3.2 後, 安裝SDK 請參考
  • 發佈至iOS 請參考
  • 如果沒有以上設定, 大家會見到這個錯誤喔:
    VerifyError: Error #1014: Class flash.display::Stage3D could not be found.

    This application is not correctly embedded (wrong wmode value)