Starling 官方多解析度螢幕的開發指引

" Starling 官方多解析度螢幕的開發指引 ", 這篇對於 Starling 寫的 App 同時符合多種解析度裝置, 有詳細的說明。

簡單來說就是利用 viewPort 的尺寸和 starling.stage.stageWidth, starling.stage.stageHeight 大小來調整內容的縮放比 ( starling.contentScaleFactor )。

例如:

   if (CheckingOS.osIsIOS) {
    Starling.multitouchEnabled = true;
    sy = Capabilities.screenResolutionX; // Landscape
    sx = Capabilities.screenResolutionY; // Landscape
   } else {
    sx = this.stage.stageWidth;
    sy = this.stage.stageHeight;
   }

   Starling.handleLostContext = true;

   switch(sx) {
    case 480: // iPhone 3GS: 320 * 480
     use_iPad_strategy = false;
     viewPort = new Rectangle(0, 0, 480, 320);
     _starling = new Starling(Main, stage, viewPort);
     sx = _starling.stage.stageWidth  = 960;
     sy = _starling.stage.stageHeight = 640;
     break;

    case 960: // iPhone 4S: 640 * 960
    case 1136: // iPhone 5: 640 * 1136
     use_iPad_strategy = false;
     viewPort = new Rectangle(0, 0, sx, sy);
     _starling = new Starling(Main, stage, viewPort);
     _starling.stage.stageWidth  = sx;
     _starling.stage.stageHeight = sy;
     break;

    case 1024: // iPad 2: 768 * 1024
     use_iPad_strategy = true;
     viewPort = new Rectangle(0, 0, sx, sy);
     _starling = new Starling(Main, stage, viewPort);
     _starling.stage.stageWidth  = sx;
     _starling.stage.stageHeight = sy;
     break;

    case 2048: // iPad 3: 1536 * 2048
     use_iPad_strategy = true;
     viewPort = new Rectangle(0, 0, sx, sy);
     _starling = new Starling(Main, stage, viewPort);
     sx = _starling.stage.stageWidth  = 1024;
     sy = _starling.stage.stageHeight = 768;
     break;
   }

上面的程式, iPhone 3GS 的 contentScaleFactor 為 0.5, 縮小為原來一半。iPhone 4、4S、5 和 iPad2 的 contentScaleFactor 為 1。New iPad 的 contentScaleFactor 為 2, 放大一倍。

AIR for iOS 實機測試時的遠端除錯 FarLog

# 2013-06-07 修正：遠端除錯 FarLog 修正

Flash 的 debugging mode 不好用，試了好幾次都沒成功。索性用 Mamp ( Apache, PHP ) 寫了個遠端除錯功能，適合在區域網路內使用。

PHP 簡單三個檔: index.php (顯示), log.php (接收) 和 clear.php (清除)。log.php 接收資料記錄到文字檔裡，由 index.php 顯示文字檔內容。

AIR for iOS 啟始畫面

Default-568h@2x.png 不適合用來當 AIR for iOS 的啟始畫面，因為一閃即逝。

如果是用 Flash CS6 開發的話 (不是用 Flex)，可以在主要的 .fla 第一影格放入一個 MovieClip 物件，待 Starling 某些類別載入啟動後再將該 MovieClip 物件除移。

Starling Texture 的限制

Starling framework 的 Texture 有 2048*2048 的大小限制，製作 Sprite sheet 記得不要超出這個大小。

Camera roll 裡的照片大多超出這個大小，載入後要先縮小。

   var bitmap:Bitmap = _loader.content as Bitmap;
   var bitmapData:BitmapData;
   var matrix:Matrix;
   var myScale:Number = 1;
   if(bitmap.width > 2048 || bitmap.height > 2048) {
    myScale = Math.min(2000/bitmap.width, 2000/bitmap.height);
    bitmapData = new BitmapData( int(bitmap.width*myScale), int(bitmap.height*myScale) );
    matrix = new Matrix;
    matrix.scale(myScale, myScale);
    bitmapData.draw(bitmap, matrix);
   } else {
    bitmapData = bitmap.bitmapData;
   }
   _texture = Texture.fromBitmapData(bitmapData);

以 Flash/AIR/Starling 測試開發 iOS App for iPhone5 的怪現象

※ 2013-05-31 請看 Starling 官方多解析度螢幕的開發指引, 此篇可以略過了 !!!

或許不是怪現象，可能是最近太少寫 Flash/AS3...

為了在 iPhone 5 可以 640*1136 顯示，放了張啟動用圖 Default-568h@2x.png ( 參考 Deploying AIR Apps on iPhone 5 )。AIR SDK 3.7 和 3.8 beta 情況相同。

AIR for iOS settings，設定：

Aspect Ratio: Landscape (橫向)
  勾選 Full screen
  勾選 Auto orientation
Resolution: High

stage (場景) 設定不同時就有怪怪的情況：

stage: 1136*640, FPS:60 -> 一開始執行就卡住
stage: 1136*640, FPS:30 -> 開始幾個畫面位置大跑位，後面的畫面卻正常
stage: 568*320, FPS:30 -> 正常


明明就已經 Full screen 了啊, 花熱發... Orz

2013-05-27 更新 ------------------------------------
應該在判斷是 iOS 後, 使用 Capabilities.screenResolutionX 和 screenResolutionY。

在 document class 放 stage 的 resize 偵聽器發現 ( resolution 設為 high )，一開始 stage 的大小會被調整為原來 stage 大小的兩倍，之後 ( 約 1~ 2 sec ) 會被調整成 screen 大小。這就可以解釋之前的現象了。

Facebook 分享連結製作小工具

小工具: Facebook 分享連結製作

Starling texture repeat background

利用 Texture.repeat 製作重複拼貼的背景
其中 Cover.multiLoader.getDataByKey('bg01').texture 為取得某個 Texture 物件

   // *** background image ***
   var texture:Texture = Cover.multiLoader.getDataByKey('bg01').texture;
   var bgx:int = Math.ceil( this.stage.stageWidth/texture.width );
   var bgy:int = Math.ceil( this.stage.stageHeight/texture.height );
   texture.repeat = true;
   bg_img = new Image(texture);
   bg_img.setTexCoords(1, new Point(bgx, 0));
   bg_img.setTexCoords(2, new Point(0, bgy));
   bg_img.setTexCoords(3, new Point(bgx, bgy));
   bg_img.width *= bgx;
   bg_img.height *= bgy;
   this.addChild(bg_img);

注意: 背景圖邊長必須是 2 的 n 次方, 如 64*64 或 128*128

JavaScript 簡單版的 sprintf

隨手寫了個 JS 版的 sprintf(), 只處理 %s, 沒處理 %% 和其它用法。

function sprintf(t_str) {
  var t_ar = t_str.split('%s');
  var r_str = '';
  var i;
  for(i=0; i < t_ar.length-1; i++) {
    if(arguments[i+1]!==undefined) {
      r_str += t_ar[i] + arguments[i+1];
    } else {
      r_str += t_ar[i];
    }
  }
  r_str += t_ar[i];
  return r_str;
}

Google Drive 當成網頁空間

Google Drive 可當成網頁空間, 存放前端的檔案如 HTML, JS, CSS 和圖檔。

小工具：由 Google Drive 的資料夾共用連結取得 URL