Feathers ui 使用裝置字型

之前提到 Feathers components 的字型 的問題，用了一陣子之後發現她內部提供的 embeded 字型好用，但只有英文字型。

其文件中載明最好使用 bitmap fonts；在效能上 bitmap fonts 最好，embeded fonts 次之，device fonts 最差（呈現出來的效果也最差）。但許多時候，難免會用到英文以外的字型，用 device fonts 是最好的解法。

在 iPhone 上由於 retina resolution 的關係，device font 沒有反鋸齒，效果也不會太差。但 Feathers ui 並沒有一個設定可以由預設的 embeded fonts 直接改用 device fonts。我自己的做法是複製 MetalWorksMobileTheme.as 另存成 MetalWorksMobileThemeDeviceFont.as，直接修改 MetalWorksMobileThemeDeviceFont 類別的內容。

把 regularFontNames 改成我要的 device fonts

const regularFontNames:String = "Heiti TC Light,Heiti SC Light,微軟正黑體,_sans";

接著把所有的

.embedFonts = true;

改成

.embedFonts = false;

字型呈現在 iPhone 上算 OK，但感覺是有點暴力的解法 :P

dispose 時該做些什麼

參考 Starling 論壇: question on dispose()

override public function dispose():void
{
    //dispose bitmapData
    bitmapData.dispose();
    //dispose other object witch need
    aStar.dispose();
    //set var to null, I read it was useless now, but it can t be bad..
    myObject = null;
    //remove all your listener
    removeEventListener(EnterFrame, onEnterFrame);
    //removeChild big layer to help GC to get faster
    removeChild(layer);
    //stop any timer, object, video, connection, nstream etc...
    timer.stop();
    //unregister from object if you use this
    unregisterFrom(objectListen);
    //call manually the gc if it's a big big object in memory.
    //You also can call the gc in the method witch call the object.dispose();
    System.gc();
    //call super.dispose()
    super.dispose();
}

Starling 效能小記

做一個小遊戲的時候遇到生成大地圖的效能問題，用 FarLog 檢視，在 iPad2 各部份花費的時間如下：

0192 ms: 用 Flash MovieClip 拼地圖，未顯示出來，約1200 小片，2000px*2000px。
0031 ms: 建立 BitmapData 物件，尺寸 2000px*2000px，下同。
0094 ms: BitmapData 物件 draw Flash MovieClip。
2974 ms: 由 BitmapData 物件建立 Texture 物件。
0001 ms: 由 Texture 物件建立 Image 物件。

顯然 Texture.fromBitmapData( bitmapData ) 是效能的瓶頸。

後記一: 用 小 Texture 做成 Image 再拼成地圖，建立的全部時間為 356 ms，好很多。But... 執行時地圖要跟著捲動，捲動時效能變得很差。

後記二: Texture.fromBitmapData() 第二個參數 generateMipMaps 設為 false 時，花費時間為原來的 1/10 ~ 1/9，快相當多。MipMaps 有它的好處但大部份時是用不上的。

Puzzle 24 在 iTunes App Store 上架了

之前寫的一些小 App 大都是在 Android 上自己玩玩, 沒有上架問題，"Puzzle 24" 是個人第一個上架的 iOS App（喂～ 慢了別人三年以上，淚）。

玩法是要放在正確的位置上才算完成一個拼圖片，可以從相片裡的照片製作個人拼圖。單一拼圖玩的時間有刷新記錄時，會儲存起了。

為什麼定價為美金 2 元？覺得第一支 App 一定要定個合理的價格，不考慮銷售情況。（另一個原因是免費 App 放廣告也不是不用時間成本，懶）。

"Puzzle 24" 使用 Flash CS6 / AIR 3.8 / Starling / Feathers 開發，效能上不盡人意，主要有兩處。一是載入照片時，在 iPhone 5 上還好；iPhones 4S上有些慢；iPad2 上很快，因為照片尺寸較小。二是建立拼圖時，iPhones 4S上可以感覺到慢， iPhone 5 和 iPad2 還好。實機測試就上述的三台，iPad2、iPhone 4S 和 iPhone 5。在 iPad2 上，螢幕夠大，效果最好。

Feathers components 的字型

Feathers :UI components for Starling Framework
看它的 Demo 感覺滿不錯的，但試玩就處處碰壁。

首先，themes 並不包含在 feathers.swc 裡，必須另外設定 themes 的路徑。themes 和 demo 的原始碼都有包含在下載包裡。

第二，使用某個 theme 時 ( 相信你大概只會想使用 MetalWorksMobileTheme )，在 PC 上測試由於 DeviceCapabilities.dpi 只有 72，字會變得很小，可以改成 326 ( http://forum.starling-framework.org/topic/xscreendpi-and-web-applications-without-air )。

第三，使用某個 theme 之後，components 的字型、大小是不能在建立 components 後更改的，而必須使用繼承的方式設定 ( http://wiki.starling-framework.org/feathers/extending-themes )。

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 啟始畫面

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 大小。這就可以解釋之前的現象了。

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