AS3 Rect & java Rect 傻傻分不清~

今天在看android用canves畫圖案，有用到drawRect跟drawRoundRect這兩個方法，一個是畫矩形的另一個也是畫矩形的不過可以再多畫圓角。
這兩個方法都要帶一個Rect進去，想說Rect這東西在AS3的時候就用過很多次了，就覺得這四個值分別是帶x、y、width、height，然後就這樣帶進去了，想當然是畫出很奇怪的型狀或是根本沒圖形。在試驗很多次之後才發現原來AS3的Rect跟java的Rect是不一樣的阿~~

AS3裡如果是帶Rect(100,100,200,200)的值的話，會在x 100，y 100的地方畫一個寬200高200的矩形，不過在java裡這四個值分別是起始點與結束點，前面兩個值是起始點，後面兩個值是結束點，所以跟上面一樣帶Rect(100,100,200,200)的值的話，其實畫出來的會是在x 100，y 100的地方畫一個寬100高100得值，因為第三個值-第一個值=寬，第四個值-第二個值=高。

結案 !

starling-AssetManager使用方法

在starling 1.3版中多增加了許多功能其中一個就是AssetManager。

AssetManager顧名思義就是用來管理素材的class

這邊就來記錄一下要如何使用


1.用Embed素材加入Texture

//先Embed圖片
[Embed(source="assets/bg.jpg")]
public static const BG:Class;

//先實體化AssetManager
vra am:AssetManager = new AssetManager();

//再把圖片加入AssetManager中
//第一個參數是這個texture在AssetManager中所註冊的名字
//第二個參數當然就是要放進AssetManager的texture
am.addTexture("BG", Texture.fromBitmap(new BG()));


//要從AssetManager抓取texture使用的話就使用getTexture方法
//參數就帶當初註冊名字
am.getTexture("BG");

//另外如果想知道所有有註冊的texture的名字可以使用getTextureNames方法
//這個方法會列出所有註冊過的名字
am.getTextureNames();

已經註冊的名字是不能重複註冊的，不然會報Error。

add的方法除了addTexture外還有addSound、addTextureAtlas

其實使用的方法都大同小異只是差在要丟什麼類型素材而已。




2.用enqueue方法加入素材，enqueue方法可以一次塞很多參數進去

也就是一次可以載入很多素材，就像他的名字一樣用列隊的方式依序載入

素材，而且enqueue是很強大的，它除了可以使用檔案路徑之外還可以

使用靜態的類別，甚至是可以搜尋整個資料夾路徑並且分門別類的幫你

自動載入自動註冊(AIR)，下面就繼續記錄用不同的參數類型來使用enqueue載入素材。




第一種方法使用路徑載入檔案，使用檔案路徑的方式載入素材時比較要注意的地方是

AssetManager會自動使用檔案的檔名來註冊，例如是載入assets/bg.jpg這個

路徑裡的圖片，就會用bg這個名字來註冊，所以要用getTexture()方法取texture時

也是要用這個名字。

//一樣還是先實體化AssetManager
var am:AssetManager = new AssetManager();


am.enqueue("assets/bg.jpg");

//也可以一次給很多路徑中間用逗號格開就好
am.enqueue("assets/1.jpg","assets/2.jpg","assets/3.jpg");

第二種方法使用靜態類別載入，下面有一個用來embed檔案的靜態類別

package src.embed
{
 /**
  * ...
  * @author kuro
  */
 public class EmbedAsset 
 {
   
   //textureAtlas的圖片
   [Embed(source = "assets/lee.png")]
   public static const lee:Class;
   //textureAtlas的xml
   [Embed(source = "assets/leeXml.xml" , mimeType = "application/octet-stream")]
   public static const LeeAtlasXml:Class;
   
   //圖片
   [Embed(source="assets/bg.jpg")]
   public static const BGG:Class;
   
   //聲音
   [Embed(source="assets/yours.mp3")]
   public static const bgSound:Class;
   
   //字型
   [Embed(source="assets/font.png")]
   public static const font:Class
   [Embed(source="assets/font.fnt", mimeType="application/octet-stream")]
   public static const FontXml:Class
 }

}

使用靜態類別當作素材來源時要注意的地方是，AssetManager是用class名稱來註冊的

當要embed動畫所需要的textureAtlas素材的時候要注意一件事那就是

textureAtlas素材的圖片名稱跟embed的class名稱要一樣

但xml的名稱就不一定要跟embed的class名稱一樣了。


如果有去看過原始碼的話，就會發現AssetManager是先把class的lee先註冊到了

texture的Dictionary裡，之後載入textureAtlas的xml之後發現被註冊到

texture的Dictionary裡的lee是作為textureAAtlas需要的素材，所以就把

texture的Dictionary裡的lee移除掉，然後重新用lee這個名字去textureAAtlas的

Dictionary裡註冊，所以當textureAtlas註冊名字之後，你用getTexture()方法去

找lee的這個texture是找不到的，你只能用lee這個名字並且使用getTextureAtlas()這個方法

找到已經加入的textureAtlas素材。

//使用的話就這樣使用
var am:AssetManager = new AssetManager();

am.enqueue(EmbedAsset);

var lee:MovieClip = new MovieClip(mAssetManager.getTextureAtlas("lee").getTextures("lee_idle"), 24);
Starling.juggler.add(lee);
addChild(lee);

剛剛有說了註冊的名字是使用class名稱，所以如果是用靜態類別載入素材的話

要取得bg.jpg這張圖片就要用BGG的這個名稱。


如果是要取得聲音的話

可以用AssetManger裡的playSound("註冊的名字")取得聲音並且播放

playSound方法是會返回一個soundChannel，在呼叫這個方法時還可以帶

有關soundChannel的參數給他可給可不可。



如果是字型的話AssetManager會自動註冊字型到textField裡面，不用再呼叫

TextField.registerBitmapFont()註冊字型，而且也沒有方法可以抓取

載入進來的bitmapFont圖片，另外跟textureAtlas比較不一樣的地方是

要使用的時候不是用class的名稱，是要用這個字型的名稱，那字型的名稱

要去哪裡找呢?請把.fnt的這個檔案打開，其實裡面也是xml的結構

在第二行的地方會看到face="Brisk"，這個face的地方就是字型的名稱

所以就要用Brisk這個名字，下面是使用方法

var text:TextField = new TextField(700, 100, "", "Brisk", 50, 0x000000, false);
   
text.hAlign = HAlign.LEFT;
text.text = "This is Bitmap Font Generator Test !";
addChild(text);

再來就是要講使用AIR在行動裝置上時要怎麼AssetManager

用AIR的話第一個還是可以使用上面所說的靜態類別的方法因為

那是把素材內嵌至swf裡比較沒有路徑的問題，但如果沒有要用embed的話

可以先把素材一起放在app的資料夾底下需要的時候在叫來用就好了

那要怎麼把宿才放在app資料夾底下呢?這邊我是用flash cs6所以我就來

講一下怎麼做。

第一步：選取檔案/android設定(如果是ios的話就是ios設定)

第二步：會看到下面有一個包含的檔案，然後會有三顆按鈕分別是

加入檔案、刪除檔案、加入資料夾，如果是只有幾個檔案的話可以

選擇加入檔案，但如果是有很多素材在同一個資料夾裡的話就可以選

加入資料夾，這樣這個資料夾裡的素材就都會被加入了

加入了檔案之後就要來看程式要怎麼寫了

//使用File類別，然後用applicationDirectory的屬性取得app根目錄
var appDir:File = File.applicationDirectory;

//之後再使用File的resolvePath()方法取得相對路徑
//如果是直接寫檔案路徑的話就會找到app/assets/bg.jpg;
am.enqueue(appDir.resolvePath("assets/bg.jpg"));

//這邊也可以直接寫資料夾名稱，AssetManager會自動搜尋可以用的
//全部素材並且載入註冊，非常的方便
am.enqueue(appDir.resolvePath("assets"))

再來講一下如何抓取檔案讀取的進度，AssetManager裡有一個loadQueue()

這也是呼叫AssetManager開始異步載入列隊裡的素材，這個方法必須帶一個function

給他，以便AssetManager callBack回來載入的進度

mAssetManager.loadQueue(onProgress);

private function onProgress(number:Number):void {
 var percent:int = Math.round(number * 100);
 trace("progress = " + percent + " %");
 if (number == 1) {
      (mStarling.root as Game).start(am);
 }
}

另外AssetManager 也可以載入網路上的資源下來，就把路徑換成http路徑就好了

還有載入的方法可以混著用類似像是下面這樣

//可以同時擺路徑也可以擺靜態類別
am.enqueue("asset/bg,jpg",EmbedAsset);

有關AsetManager的document可以來這邊看

AssetManager

2013/07/17更新

後來又自己鬼打牆遇到了一些問題，就再來記錄一下

1.用enqueue()放入要載入的檔案後，要記的要用loadQueue()載入檔案阿 !
就算沒有要知道載入進度也是一樣

2.在air的時候如果要用enqueue()掃資料夾的檔案的時候
要記得資料夾要跟fla檔案放在一起(用flash ide編譯的話)
這樣用appDir.resolvePath("assets")才會找的到檔案
千萬不要放在不同層，因為就算在路徑上加上../
air應用程式在找的時候也是從app路徑下開始找
所以還是找不到

Starling-用setTexCoords-裁切圖片

在starling的教學範例Hungry Hero裡，遊戲下方的街景以及遊戲背景的滾動方式是用

兩張圖片不斷的輪流交替來產生背景滾動的效果，不過要滾動背景的話其實還有

另一種方式是改變圖片的頂點位置以及紋理的UV坐標，在starling中預設的DisplayObject

都是四邊形，圖形的UV作標點分別為下圖所示

0  ─ ─ ─ 1

│            │

│            │

│            │

2  ─ ─ ─ 3

設置頂點位置以及紋理的UV坐標可以達到許多效果，例如上述所說的滾動視圖達到

橫向捲軸遊戲裡的無限延伸背景的效果，另外也可以拿來作裁切圖片和無接縫圖片的

背景延伸等等等 . . . .下面就來示範一下怎麼分別達成這些效果

1.裁切圖片

下面這邊有一張圖

如果要裁切這張圖片的右下角1/4的圖的話要怎麼做呢?

我們可以用Image裡的setTexCoords方法裁切

var image:Image = new Image(texture);
addChild(image);
var point:Point = new Point();

//第一個點
point.x = 0.5;
point.y = 0.5;
image.setTexCoords(0, point);

//第二個點
point.x = 1;
point.y = 0.5;
image.setTexCoords(1, point);

//第三個點
point.x = 0.5;
point.y = 1;
image.setTexCoords(2, point);

//第四個點
point.x =1;
point.y = 1;
image.setTexCoords(3, point);

解釋一下上面程式碼的意思

假設圖片的四邊長分別都為1

那要裁切圖片的1/4右下角的話

第一個點當然是圖片的正中心拉

假設圖片的四邊長分別都為1

最左上角坐標為(0,0)，右上角坐標為(1,0)，左下角坐標為(0,1)，右下角坐標為(1,1)，

那要裁切圖片的1/4右下角的話第一個點當然是圖片的正中心拉

所以會看到第一個點是設在(0.5,0.5)的位置上，第二個點就會在(1,0.5)

以此類推就會推出上面所設的座標位置拉

裁切出來之後你應該會發現裁切出來的部分被放大成原圖片的大小，以上圖為例

圖片為256*256裁切出來的右下角應該要是128*128，可是卻被放大為256*256了

因此會變得有點模糊，所以如果要裁切後不被放大的話就手動把圖片縮回來就好了

image.width = image.width >> 1;
image.height = image.height >> 1;

//

設置

AS3-Vector 初始化

1.
var vec1:Vector.<int> = new Vector.<int>(5);
//第二個參數boolean代表是否能夠修改長度
//var vec1:Vector.<int> = new Vector.<int>(5,true);  
for(i = 0;i<vec1.length;i++){  
    vec1[i] = i;  
}  

2.
var vec2:Vector.<int> = Vector.<int>([1, 2, 3]);  

3. 
var vec3 = new <int>[1, 2, 3];   

starling framework (一)

最近開始想記錄一下starlin的學習過程也算是複習，不然老了很多事都記不得了(咳!

starling是什麼呢?

相信google會很清楚的告訴你的，但這邊還是簡單的一句話介紹一下

就是使用stage3D的GPU加速的2D引擎。

如果有聽沒有懂的話，直接看結果會比較清楚。

以下有兩個swf，滑鼠每click一次會產生一百隻鳥不斷的移動


上面的是沒有使用starling的，只是單純的產生bitmap然後不斷移動

下面的是使用starling，可以比較一下個別產生的物件數及FPS

要分開測試喔!先點清除按鈕清除其中一個內容，不要點了上面的又去點下面的這樣不管怎麼點都會慢唷 !








下面這邊有各種2D引擎的效能比較可以參考看看

2D引擎效能比較

我自己手邊的裝置有測過的

htc desire he  約600

SAMSUNG GALAXY Tab 7.0 700

ipad2 約700

new ipad 約1000

以上的數量是FPS維持在30左右的數目

as3-vector sort

在as3裡，vector可以透過sort()函數來進行排序
跟array比較不同的是，array的sort可以不帶參數或是用定義好的參數帶入
例如:
Array.CASEINSENSITIVE：這個選項會忽略大小寫限制加以排序。例如，小寫字母 b 會排在大寫字母 D 之前。

Array.DESCENDING：這會反轉預設的依遞增順序排序。例如，字母 B 會排在字母 A 之前。

Array.UNIQUESORT：這會在發現兩個相同的值時，中止排序作業。

Array.NUMERIC：這會進行數值排序，因此 3 會排在 10 之前。
在vector的sort裡一定要帶入一個自訂義用來執行排序的function，或是也可以使用上面的參數帶入
例如:vector.sort(Array.CASEINSENSITIVE);
如果今天有5個MovieClip要進行名字的排序的話，就可以用自定義的涵式來執行了。

import flash.display.MovieClip;
import flash.text.TextField;

//先建立5個MovieClip
var mc1:MovieClip = new MovieClip();
var mc2:MovieClip = new MovieClip();
var mc3:MovieClip = new MovieClip();
var mc4:MovieClip = new MovieClip();
var mc5:MovieClip = new MovieClip();
//命名
mc1.name = "mc_1";
mc2.name = "mc_2";
mc3.name = "mc_3";
mc4.name = "mc_4";
mc5.name = "mc_5";
//此時在mcVector裡的MovieClip已經不是按照mc_1、mc_2 ...的順序排列了
var mcVector:Vector.<MovieClip>  = new Vector.<MovieClip>();

mcVector[0] = mc3;
mcVector[1] = mc5;
mcVector[2] = mc1;
mcVector[3] = mc4;
mcVector[4] = mc2;
trace(showName(mcVector));
//output mc_3,mc_5,mc_1,mc_4,mc_2
mcVector.sort(vectorSortFunction);
trace(showName(mcVector));
//output mc_1,mc_2,mc_3,mc_4,mc_5

function vectorSortFunction(firstMc:MovieClip , secandMc:MovieClip)
{
  //先把名字後面的數字拆出來
  var number1:int = int(firstMc.name.split("_")[1]);
  var number2:int = int(secandMc.name.split("_")[1]);
  //之後在用數字去作排序
  if (number1 > number2)
  {
    //這邊返回1的意思是，如果前面的數字大於後面的數字，前面的對象就要往後排
    return 1;
  }
  else if (number1 < number2)
  {
    //返回-1的意思是，如果前面的數字小於後面的數字，前面的對象就要往前排
    return -1;
  }
  else
  {
    //返回0的意思是，一樣的話就不變動順序
    return 0;
  }
}

function showName(vector:Vector.<MovieClip>):String
{
  var _txt:TextField = new TextField();;
  for each (var mc:MovieClip in vector)
  {
    
    _txt.appendText(mc.name+",");
  }
  
  return _txt.text;
}

Alternativa3D 8.17.0 環境設置

1.先到Alternativa的官網下載Alternativa3D 8.17.0的SWC。

2.下載FlashPlayer11 Standalone Debuggers找到Flash Player 11.2 Beta 32-bit Standalone Debuggers，
點選Download standalone for Windows (EXE, 9.0 MB)，這個連結是windows的如果是其他作業系統的話請至adobe labs下載。

3.下載Flash Player 11.2 Beta Global SWC，一樣可在adobe labs下載。

4. 到此路徑Adobe Flash CS5.5\Common\Configuration\ActionScript 3.0底下新建一個資料夾名稱取為FP11，再將下載的 Flash Player 11.2 Beta Global SWC放到資料夾裡並且更改檔名為playerglobal.swc。

5. 新增FlashPlayer11.xml
至此路徑下Adobe Flash CS5.5\Common\Configuration\Players先複製一份FlashPlayer10_2.xml，並且更名為FlashPlayer11.xml，之後打開文件修改，將第三行修改為
<player id="FlashPlayer11" version="13" asversion="3">，第四行修改為 <name>Flash Player 11</name>，第8行<playerDefinitionPath>標籤裡的as3屬性修改為"$(AppConfig)/ActionScript 3.0/FP11/playerglobal.swc" 這邊的路徑就是第四點新增資料夾的路徑。

6. 放置debugger，將第二點下載的FlashPlayer11 Standalone Debuggers修改檔名為
 FlashPlayerDebugger.exe放到此路徑下Adobe Flash CS5.5\Players\Debug。

7.開啟flash，點選編輯/偏好設定/ actionScript/actionScript3.0設定，在元件庫路徑下新增第一點下載的Alternativa3D 8.17.0的SWC。

 8.打開A3D的DEMO檔案，記得A3D要發布的時候要按住ctrl+shift+enter用Debugger的player發布才會有stage3D,如果單點swf檔也要用flashPlayer11看的話來這下載吧連結，下載 Windows Flash Player 11.1 Projector content debugger (EXE, 8.91MB)這個檔案，然後指定swf永久用這個player開啟就可以了~