2011年9月28日 星期三

介紹Flash 作品的平台

Flash Rocks
在Facebook 上開設的一個分享平台.
FWA
相信很多Flash 老手和設計師, 一定會在這兒留下不少腳印, 見證過無數出色作品的誕生.
Adobe & Mobile
以Web App 形式顯示, 大家可以使用手機瀏覽, 主力推廣Adobe Flash 及Adobe AIR 在流動電話平台.
Adobe 官方收藏館
官方收藏了不少作品, 可以找到不少高水準作品參考. 當中還展示以最新Adobe AIR Mobile 技術的作品.
ClockMaker.jp
日本PaperVision3D 的作品參考, 雖然內容較舊, 但Paper Vision3D 對硬體要求低, 是值得參考的網頁.

2011年9月27日 星期二

Starling Framework 介紹

在Adobe 發表最新Flash Player 11, 支援硬體3D 計算, 令運行速度大大提升, 很多國外廠商推出支援Stage3D 的引擎. 大家可以利用免費的引擎, 開發3D 遊戲或軟件.

對於大多開發者, 製作一個3D 遊戲或軟件, 開發成本是十分高, 或軟件本質不需動用3D 演繹. 但希望利用Stage3D 的運算速度, 製作2D 作品, 我們可以使用Starling Framework.

Starling Framework 利用Stage3D 的GPU 渲染能力, 提供一個完整結構. 與Adobe 內建的Sprite, MovieClip 及Button 相似的使用方法, 令開發者可以簡單地掌握.



以下範例參考Introducing Starling - rev 1.2.1.pdf 製成:

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

在60 Frame rate 速度下, 使用Event.ENTER_FRAME 不斷改變Image 位置與角度:
var lng:uint = sausagesVector.length;
for (var i:int = 0; i < lng; i++)
{
 // move the sausages around
 var sausage:CustomImage = sausagesVector[i];
 sausage.x -= ( sausage.x - sausage.destX ) * .1;
 sausage.y -= ( sausage.y - sausage.destY ) * .1;
 // when reached destination
 if (Math.abs(sausage.x - sausage.destX) < 1 && Math.abs(sausage.y - sausage.destY))
 {
  sausage.destX = Math.random() * stage.stageWidth;
  sausage.destY = Math.random() * stage.stageWidth;
  sausage.rotation = deg2rad(Math.random() * 360);
 }
}
可惜現在AIR 3.0 未能在流動電話中支援Stage3D, 不能進行測試.
Adobe 會在下一版本Mobile AIR 中加入相關功能.

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

參考資料:
http://www.bytearray.org/?p=3371

http://jamesli.cn/blog/?p=1140


注意事項:
  • 在Flash Builder 4.5 運行Stage3D, 請安裝Adobe AIR 3.0 SDK (參考安裝方法
  • 瀏覽器必須安裝Flash Player 11 

在Flash Builder 4.5 運行Stage3D

現階段在Flash Builder 4.5 編寫有關Stage3D, 然後進行測試, 我們必需作以下幾點設定:

  • 安裝Adobe AIR 3.0 SDK
    可到Adobe Labs 下載及參考安裝SDK 方法.

  • 安裝Flash Player 11 Incubator
    可到Adobe Labs 下載, 作為製成品的測試對象. (如使用Internet Explorer 請下載active-x 版. 如使用Google Chrome, FireFox, Safari 等請下載plug-in 版)

  • 建立新Flex Project 後, 請在Project Properties 的Flex Compiler 設定:
    Flex SDK version:
       選擇剛剛安裝的AIR SDK, 即Flex 4.5.1 (build 21328) AIR3.0 版本
     Adobe Flash Player options:
       請使用Use a specific version, 設定 11.0.0
     Additional compiler arguments:
       填寫為 -locale en_US -swf-version 13



  • 修改index.template.html
     在文件的第48 行插入params.wmode = "direct"; , 使其完全避開父網頁瀏覽器的渲染


 完成以上步驟, Flex Project 執行將會使用Flash Player 11 進行測試.

2011年9月17日 星期六

TweenLite 介紹

在一般情況下, 我們建議使用Flash IDE 來設計物件動畫.

  • 在時間軸(Timeline) 上設計, 可作細緻調整, 然後配合gotoAndPlay 跳至所需片段播放
  • 對於動畫設計師, 他們可以簡單利用Flash IDE 設計, 不需詳細理解程式內容


不過, 製作複雜動畫, 操控件物移動, 我們還會用上程式計算. 在Adobe Flash 內建的Tween 類別, 由於效能較差, 我們選擇另一個Tweening Engine 來完成工作.

  • TweenLite - 比內建類別速度快上很多, 用法十分簡單

    import com.greensock.*;
    TweenLite.to(mc, 1, {x:65, y:117});
    

以下為TweenLite 對不同引擎速度比較:



以下為TweenLite 程式碼產生器:



2011年9月14日 星期三

Flash 與HTML5 在電話運行速度

雖然Apple 公司在iOS 瀏覽器不提供Adobe Flash Player 支援, 她們提供HTML5 作為開發方案, 原因在於速度與穩定性上. 幸運地, 我們還有Google 公司的Android, 可以運行HTML5 及Flash, 給我們一個正確答案.

國外有很多朋友, 製作一些例子, 證明Flash 與HTML5 執行同一工作時, 它們有一定效能差距.
以下片段可以看到:




當然本人也同意, 現在很多Flash 在電話運行速度不順暢. 原因在於設計者當時, 純粹考慮在電腦運行, 電話仍然未曾普及, 沒有照顧電話硬件上限制.

不要因為Apple 某些公司, 說一些不負責任的說話, 而判定一些技術成敗.
參考資料: http://clockmaker.jp/blog-en/2010/10/butterfly-3d-canvas-javascript/

2011年9月12日 星期一

在iPhone/ iPad 測試Adobe AIR (不需花錢方法)

對於很多開發者, 要在iOS 上純粹測試運作效能, 編寫一個小程式試試看, 發佈至iPhone/ iPad 上執行, 但因為沒有開發者帳號而苦惱. 在Adobe AIR 發佈時, 輸出成ipa 檔案, 需要有以下兩個認證檔案:
  • p12 -  認證檔 iOS Certificate
  • mobileprovision - 描述檔 Provisioning Profile

若大家不希望花費US$ 99 於開發者帳號, 但又想作一個小小的嘗試, 大家可以選擇暫時使用假的認證檔(p12) 和描述檔(mobileprovision). 但使用時, 必需有以下的設備:
  • Adobe Flash Professional CS5.5 或Adobe Flash Builder 4.5
  • 一個裝有iOS 3 或以上版本的系統, 以下任何一種裝置:
       - iPhone 3GS 和 iPhone 4
       - iPod Touch (第三代或第四代皆可)
       - iPad
  • 裝置必須JB (Jail break)
  • 傳送ipa 檔案至iOS 工具

發佈選擇以下設定:
  • 下載 p12.zip 後, 設定p12.p12 和mobileprovision.mobileprovision 檔案作為認證
  • 設定密碼為 1234
  • 描述檔預設 App ID 為 com.gamevil.zenonia2

當完成發佈後, 會生成一個ipa 檔案, 是一個iOS 程式的安裝檔案, 我們可以透過以下其中一個方法, 安裝至iOS 系統 (兩個方法首要條件必須JB):
  • iFile 與Installous - 利用iFile 分享iOS 裝置檔案, 在電腦瀏覽器上載ipa 檔案至iOS 裝置內的/User/Documents/Installous/Downloads/ 路徑. 然後使用Installous 安裝上載後的ipa. 
  • iFunBox - 下載 iFunBox 並且執行(請確定電腦已安裝iTunes), 把PC 與iOS 裝置連線後, 然後按Install App, 選擇合適ipa 檔案, 完成後便可在iOS 裝置內找到程式

2011年9月11日 星期日

[教學] Flash 遊戲製作 (進階編)

以Adobe Flash 製作遊戲, 只要懂得幾個重點, 每個人都能編寫遊戲.
現在為大家介紹, 如何編寫簡單射擊遊戲, 我們會分兩部分說明 (基礎編 及 進階編).
  • 基礎編 - 為大家講解AS3(Action Script 3.0) 基本用法, 構成遊戲的基本元素, 用戶與遊戲之間溝通方法.
  • 進階編 - 把所有遊戲元素物件化, 建構整個遊戲, 最後發佈至iOS 運作.
了解AS3(Action Script 3.0) 基本用法後, 製作一個簡單遊戲, 只要動動腦筋便可完成.
但要有效維護, 減少錯誤發生, 便需要一個完善結構.

Adobe Flash 提供一個既簡單, 又直接方法, 實踐物件導向 (Object-oriented) 功效. 每一個物件可繼承MovieClip, 便可編寫成一個個獨特的物件, 在畫面出現, 彼此產生互動.

在Flash Library 中, 選擇一個合適物件, 然後設定Base Class, 把自行編寫的物件作連結, 這個物件便有著新的獨特功能.

我們可以想像畫面中, 出現的每一個元素, 把它們視為一個物件.
每一個物件有著它們特性(屬性Property 與方法Method), 然後把每個物件都串聯在一起.
現在為大家介紹, 以射擊遊戲作一個簡單說明.

範例功能:
  1. 開始畫面
  2. 遊戲畫面
      - 按下螢幕時, 移動玩家位置
      - 測試玩家是否被擊中
  3. 完結畫面




範例類別說明:
SimpleGame
  功能: 主管整個遊戲流程
  屬性: 擁有一個飛行空間(FlyingArea) 和一個分數版(Scoreboard)
  方法: 可跳至遊戲畫面和完結畫面

FlyingArea
  功能: 提供一個空間, 給所有飛行物件移動, 測試物件之間是否重疊碰撞
  屬性: 擁有多個飛行物件(FlyingObject) 和一個玩家物件(Plane)
  方法: 提供增加和破壞飛行物件

Scoreboard
  功能: 顯示和計算分數
  屬性: 擁有一個分數變數
  方法: 提供重新設定和增加分數

FlyingObject
  功能: 作為所有飛行物件的基礎物件, 所有繼承者都有著它的功能
  屬性: 擁有慣性(inertia) 和加速度(acceleration)
  方法: 提供設定慣性值和加速度方法

Bullet
  功能: 繼承飛行物件

Plane
  功能: 作為玩家和電腦的父係物件
  屬性: 是否自動發炮(autoFire) 和炮彈重射緩衝期(bulletBuffer)
  方法: 提供發射炮彈方法

PlanePlayer
  功能: 由玩家控制的飛行物件

PlaneComputer
  功能: 由電腦控制的飛行物件


範例說明:
當遊戲開始, FlyingArea 會產生一個ENTER_FRAME 事件, 在每一次更新, 會執行以下四個工作:
  • 清除已經離開畫面的飛行物件 (clearObjects)
    private function clearObjects():void {
      for (var i:int = 0; i < _objects.length; i++)
        if (!_availableArea.contains(_objects[i].x, _objects[i].y))
          destoryFlyingObject(i--);
    }
  • 測試飛行物件之間是否重疊碰撞 (hitTestObjects)
    private function hitTestObjects():void {
      // <----- hit test for bullet
      for (var i:int = 0; i < _objects.length; i++)
        for (var j:int = 0; j < _objects.length; j++)
          if(_objects[i]!=null && _objects[j]!=null)
          if (i!=j && _objects[i].hitTestObject(_objects[j]))
            if (_objects[i] is Bullet && _objects[j] is PlaneComputer) {
              destoryFlyingObject(i--);
              destoryFlyingObject(j--);
            }
      
      // <----- hit test for player
      for (var k:int = 0; k < _objects.length; k++)
        if(_objects[k]!=null && _player!=null)
          if (_objects[k].hitTestObject(_player))
            if (_objects[k] is PlaneComputer) {
              destoryFlyingObject(k--);
              _player.destory();
            }
    }
    
  • 按照特定時間產生電腦物件 (createComputer)
    private function createComputer():void {
      var object:FlyingObject;
      if (_currFrame % LAUNCH_COM1 == 0) {
        object = new (getDefinitionByName("PlaneComputer1") as Class)();
        object.x = 0;
        object.y = this.stage.stageHeight / 5 * 1;
        addFlyingObject(object);
      }else if (_currFrame % LAUNCH_COM2 == 0) {
        object = new (getDefinitionByName("PlaneComputer1") as Class)();
        object.x = 0;
        object.y = this.stage.stageHeight / 5 * 2;
        addFlyingObject(object);
      }else if (_currFrame % LAUNCH_COM3 == 0) {
        object = new (getDefinitionByName("PlaneComputer1") as Class)();
        object.x = 0;
        object.y = this.stage.stageHeight / 5 * 3;
        addFlyingObject(object);
      }else if (_currFrame % LAUNCH_COM4 == 0) {
        object = new (getDefinitionByName("PlaneComputer2") as Class)();
        object.x = this.stage.stageWidth;
        object.y = 0;
        addFlyingObject(object);
      }else if (_currFrame % LAUNCH_COM5 == 0) {
        object = new (getDefinitionByName("PlaneComputer3") as Class)();
        object.x = 0;
        object.y = this.stage.stageHeight/5*(Math.floor(Math.random()*4)+1);
        addFlyingObject(object);
      }
    }
    
  • 更新所有飛行物件的位置 (refreshObjects)
    private function refreshObjects():void {
      for (var i:int = 0; i < _objects.length; i++)
        _objects[i].refresh();
      _player.refresh();
    }
當有物件被移除時, FlyingArea 會發動事件給SimpleGame 處理.
如果被移除的物件為電腦, 便會增加分數. 但被移除的物件為玩家, 便會執行遊戲完結.
public function removeHandler(event:FlyingEvent):void {
  if (event.data is PlaneComputer)
    _scoreboard.addScore();
  else if(event.data is PlanePlayer)
    gameover();
}

大家可以 [下載], 然後一齊看看, 動手製作簡單遊戲玩玩.

2011年9月3日 星期六

[教學] Flash 遊戲製作 (基礎編)

以Adobe Flash 製作遊戲, 只要懂得幾個重點, 每個人都能編寫遊戲.
現在為大家介紹, 如何編寫簡單射擊遊戲, 我們會分兩部分說明 (基礎編 及 進階編).
  • 基礎編 - 為大家講解AS3(Action Script 3.0) 基本用法, 構成遊戲的基本元素, 用戶與遊戲之間溝通方法.
  • 進階編 - 把所有遊戲元素物件化, 建構整個遊戲, 最後發佈至iOS 運作.

範例功能:

  1. 開始畫面
  2. 遊戲畫面
     - 按下螢幕時, 移動玩家位置
     - 測試玩家是否被擊中
  3. 完結畫面




範例說明:

Frame Rate - 舞台的影格速率.
預設為24 fps, 即每一秒鐘, 更新24 次, 理論上數字越高, 畫面越流暢.
我們會設定為30 fps, 因為數字越高, 對電腦硬體要求越高, 在流動電話運行不能有太強要求.


gotoAndPlay - 在指定影格開始播放 SWF 檔.
相信不少人知道用法, 我們會利用這個指令, 選擇需要顯示畫面.
假如我們被擊中時, 會改變成火焰, 使用gotoAndPlay 跳到destory 這個影格播放:
gotoAndPlay("destory");

影格 - 影格名字可以在屬性(PROPERTIES) 中設定.


const 常數 - 製作遊戲時, 我們會有一些數字需要定義, 例如移動速度等等...
通常這些常數會以英文大寫定義.
const MOVE_SPEED:int = 4;

event 事件 - 當發生事件時,Event 物件會被當作參數傳遞(dispatch)至事件偵聽程式(listener).
在這個範例中, 我們會使用以下兩個Event:
MouseEvent.CLICK - 當用戶按下按鈕時, 會產生一個事件, 然後傳送至事件偵聽程式.
function startClickHandler(event:MouseEvent):void{
  gotoAndPlay("play_game");
}
startBtn.addEventListener(MouseEvent.CLICK, startClickHandler);
Event.ENTER_FRAME - 這個事件以每一秒產生30 次傳遞至事件偵聽程式. 產生次數與Frame Rate 有直接關係. 我們會利用ENTER_FRAME, 不斷更新和改變實體位置, 亦會測試實體之間是否重疊.
function enterFrameHandler(event:Event):void{
  ...
}
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

MovieClip.x 和 MovieClip.y - 指出實體的座標, 我們可以不斷改變實體位置.
playerMc.x -= _inertiaX;
playerMc.y -= _inertiaY;

hitTestPoint - 評估顯示實體,看它是否與 x 和 y 參數所指定的點重疊或相交.
我們會把用戶滑鼠的位置(mouseX 和mouseY) 測試, 決定實體是否到達目標位置, 然後停止移動.
if(playerMc.hitTestPoint(_clickX, _clickY))
 this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);

hitTestObject - 評估顯示實體的範圍框,看它是否與另一顯示實體的範圍框重疊或相交.
我們會測試用戶與電腦是否重疊, 然後停止所有事件, 播放火焰畫面.
if(playerMc.hitTestObject(computerMc)){
   // <----- remove all listener
   this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
   this.stage.removeEventListener(MouseEvent.CLICK, stageClickHandler);
 
   // <----- play effect
   playerMc.gotoAndPlay("destory");
   computerMc.gotoAndPlay("destory");
}

大家可以 [下載], 然後一齊看看, 動手製作簡單遊戲玩玩.