找尋JavaScript的UML塑模工具中

UML是物件導向程式語言用來塑模(modeling)的好工具，但是卻很少應用在同樣也是物件導向的JavaScript上。

最近心血來潮又摸起了JavaScript，碰巧看到了一些與UML相關的契機，於是花點時間來找找看有沒有JavaScript與UML塑模之間的解決方案。

可惜，找到現在還是達不到我的理想成果。這篇就記錄我找到現在的一些過程與發現，以及我覺得該怎樣做會是最好的理想成果。

StarUML產生的程式碼樣板

在我撰寫論文系統的時候，最常用的UML塑模工具就是開放原始碼的自由軟體StarUML。那個時候嘗試用StarUML輸出JavaScript程式，但是失敗了。

現在有人開發出了適合JavaScript的樣板(template)提供下載，我嘗試看看，其實結果也挺為理想。安裝方法是將上述網頁中的樣板檔案下載解壓縮到[StarUML安裝資料夾]/modules\staruml-generator\templates之中。

你可以在StarUML中繪製class。

然後利用StarUML Generator功能，選擇Javascript樣板，

中間我略過一些步驟，不是很重要，總之就是產生程式碼。StarUML會在指定的資料夾位置產生「Book.js」的檔案，以下是檔案的內容：

/**
*@namespace 
*/


/**
* 
* 
* @author Marten Olgaard
* @created 17/9/2012
* @copyright Adnuvo
* @todo 
* @class Book
*/
var Book = Book || {};
Book = {
        
    /**
    * 
    * @property {*} pages
    */
    pages : null,
    /**
    * 
    * @property {*} height
    */
    height : null,
    /**
    * 
    * @property {*} width
    */
    width : null,
    /**
    * 
    * @property {*} length
    */
    length : null,
    /**
    * 
    * @property {*} weight
    */
    weight : null,
        
    /**
    * 
    * @method open
    */
    open : function(){
        
        //Stub code - to be removed
        alert("the function 'open' has been called  ")
        
    },
    /**
    * 
    * @method close
    */
    close : function(){
        
        //Stub code - to be removed
        alert("the function 'close' has been called  ")
        
    }
        
}

好的，現在我們看到的是個物件導向寫法的JavaScript程式語言，而且有著良好的註解。

儘管很多細節上的問題我還沒有深入去探究，像是繼承要怎麼實作？（JavaScript的繼承有很多種樣式）介面(interface)又要如何實作呢？更重要的是，要產生怎樣的JavaScript程式內容，才能讓IDE正確地剖析呢？

這些問題可以透過修改樣板檔案的內容來調整。要憑空打造一個UML轉換成JavaScript的樣板對我來說難度太高，不過要修改別人寫好的內容，這倒不是太大的問題。

儘管如此，只是透過樣板來將UML轉換成JavaScript，這樣是不夠的。我需要的是能夠直接整合IDE的UML工具，可以畫UML來擬定程式架構，又可以將程式轉換成UML來檢視各程式之間的關係，所以我又繼續找了下去。

整合Eclipse的plugin: JS/UML

整合IDE的UML工具真的存在嗎？萬能的Eclipse還真的有JS/UML這個plugin，而以Eclipse為基礎的Aptana Studio 2也當然可以使用……雖然我是這樣想的，實際上到目前為止我只有成功安裝過JS/UML 0.8.2版而已。

如果安裝0.8.4版本的話，就會出現以下的錯誤訊息：

Your original request has been modified.
  "JS/UML" is already installed, so an update will be performed instead.
Cannot complete the install because one or more required items could not be found.
  Software being installed: JS/UML 0.8.4 (org.jsuml.eclipse.feature.group 0.8.4)
  Missing requirement: JS/UML 0.8.4 (org.jsuml.eclipse.feature.group 0.8.4) requires 'org.eclipse.uml2.uml 3.2.100' but it could not be found

安裝了JS/UML，並開啟他提供的範例檔案來看看之後，會發現它並沒有出現想像中的類別圖(Class Diagram)，而是XML的樹狀結構，如下圖。

雖然這樣的樹狀結構也可以當成釐清程式架構的一種簡單工具了，不過修改節點內容之後，似乎還是無法修改檔案？這之間的對應我還摸得不夠透徹就是了。

結語：JavaScript真的有理想的UML工具嗎？

就我目前所知，理想的UML工具應該要能做到與程式碼之間的雙向轉換，並有著正確的註解供IDE剖析。

不過，在考慮是否有這種UML工具之前，我卻碰到了一個更根本的問題：JavaScript真的能夠這樣順利地透過UML塑模嗎？畢竟JavaScript並非完整的物件導向，其運作也跟傳統的C或Java有所差異，到目前為止坊間討論UML的書也沒有一本是以JavaScript為主題。我想，這個疑惑應該會隨著我對UML的認知，而逐漸豁然開朗吧。

不知道大家還有沒有什麼推薦的JavaScript輔助工具呢？歡迎提出你的看法喔！

(more...)

從戰場女武神DUEL來看跨平台開發

日本遊戲公司SEGA著名的遊戲「戰場女武神（戦場のヴァルキュリア）」 系列最新作品「戰場女武神DUEL（戦場のヴァルキュリアDUEL）」一改以往的戰略動作遊戲型態，以網頁遊戲(Web Game)堂堂登場。

然而比起遊戲遊戲本身更讓我在意的是，他不僅僅是一個透過網頁瀏覽器就可以啟動的遊戲，戰場女武神DUEL現在也可以在Android執行，未來甚至會支援到iOS。一個遊戲可以在不同平台上獲得相同的遊戲體驗並進行延續的遊戲記錄，這就是我對戰場女武神DUEL感到興趣的特色。

遊戲簡介：一天只要五分鐘的隊長業務？

組成牌組

戰場女武神DUEL（以下簡稱「戰場D」）將初代到三代當中的各種角色化成了一張一張的卡片，而卡片上保留了戰場女武神系列原有的遊戲設定，諸如指令（オーダー，指揮官使用的強力技能）、潛能（ポテンシャル，一定機率提高或樣低屬性的技能）、相性（角色之間的情誼可以提高戰鬥能力）、職業等，化作卡片中的屬性。

戰鬥時是以一位指揮者與四位主力角色組合成共五位的主力部隊，以及八位提供HP、移動、索敵、攻擊、命中、防禦、迴避、回復各不同屬性的支援部隊，共13張組成一個牌組來與其他玩家或電腦組成的牌組來對戰。

建立設施

另一方面，玩家也要在基地中建立各種設施，以提高戰鬥的能力、促進基地建設的效率等效果。玩家在靠戰鬥得到的TP或特殊券購買的卡片、組成牌組（部隊編成）、然後再用合成來提高卡片的屬性。玩家也可以與他人組成連合（公會的意思），連合成員彼此之間可以執行「敬禮」動作（傳訊息）來獲得TP，或與其他玩家討論遊戲的戰略目標。

等待資源補給

遊戲中每一個動作都必須消耗資源。資源包括建設所需的DCT、糧食、鐵礦石、ラグナイト（戰場女武神系列裡面的特殊礦石）、進行對戰時所需的燃料、進行頭目戰時所需的彈藥。通常資源等待一定時間就會自動補給，玩家也可以靠花錢購來的道具提昇這些資源的補給速度。

上述這點就是網頁遊戲最大的特徵：等待。玩家可以選擇當個一天五分鐘的隊長，每天下班回家之後執行一下業務；也可以隨時設定倒數計時器，每隔三十分鐘就提醒自己回到遊戲中進行下一個動作。戰場D雖然有著影響獎品獲得的排名機制，但是競爭要素並不強，每個玩家都可以用自己的步調慢慢地進行遊戲。

特色：不只是網頁遊戲，還是跨平台的網頁遊戲

儘管我也是個喜歡戰場女武神系列的粉絲玩家，但是當戰場女武神DUEL以網頁遊戲登場時，並沒有引起我多大的興趣。反而是當它推出Android版本之後才激起我對它的好奇心。

我試著把它裝到之前購買的Ainol Novo 7領先版上（如果Play不能直接裝，你也可以下載apk檔案來安裝），令人驚訝的是，不僅運作起來還算順暢，重要的是在Android上幾乎是可以獲得跟電腦瀏覽器上的操作體驗！

仔細一看，戰場D在電腦瀏覽器推出時，似乎就已經為跨足行動裝置平台做好了準備。以下讓我感到興趣的三個特點：

類似行動裝置大小的固定畫面

是的，戰場D的視窗畫面是固定的──只有800*480的大小，你不能自由的放大或縮小遊戲的畫面。而這種寬螢幕的解析度正是許多手機或平板電腦的配置。

然而，優使性(usability)原則要求的是畫面可因應螢幕解析度來做調整，而並非固定大小。我想應該也是因為這樣子，戰場D首先推出的是普遍使用寬螢幕的Android，而不是使用3:2比例的iOS（可是iPhone 5又變成寬螢幕囉）。

兼具適合觸控與滑鼠的操作介面

一開始進入戰場D時，往往會對這些又大又清楚的按鈕感到突兀。但是在Android的觸控螢幕進行遊戲時，這些按鈕卻是恰到好處。而遊戲本身不僅支援觸控螢幕上的雙指縮放(pinch-zoom)、滑動換頁(slide scrolling)，也支援用滑鼠操作的中鍵縮放與中鍵換頁（中鍵真是萬能）。

這時優使性原則就會跳出來問：那只能使用鍵盤的玩家呢？注重滑鼠與觸控螢幕，卻捨棄的鍵盤的操作，這是否意味著未來遊戲的走向呢？

跨平台遊戲的技術功臣：Unify

讓戰場D能在電腦瀏覽器與Android上擁有同樣體驗，達到一種遊戲多個平台的目標，那背後的功臣就是Unity。Unity是一個開發遊戲的引擎，或著說是一種開發工具，最近。它不僅讓開發者能夠建立華麗的遊戲畫面，更能將成品製成適合各種不同平台的遊戲，而不必為了每一種平台各別開發遊戲。

在電腦瀏覽器執行戰場D時，玩家必須先安裝unity web player；而在Android中，unify似乎就包含在apk裡面。在遊戲開始時，玩家可以選擇讓Android裝置透過登入Hangame帳號來與PC進行連動。此後不論是從電腦瀏覽器、還是Android的APP，開啟戰場D的時候都會是同樣的遊戲進度。

結語：跨平台是終極的目標

戰場女武神DUEL以Unity製作出跨平台的網頁遊戲，不管是在電腦瀏覽器上還是在Android裝置中都可以獲得相同的遊戲體驗，這讓我看到了製作一種遊戲就能橫跨不同平台的一個成功的範例。

儘管利用Unity製作遊戲並不是我的目標，但是開發一套能夠在不同的平台中運作的工具仍是許多人的夢想。HTML 5是一個不錯的開始，不過有一套IDE、開發引擎的工具會更好。不僅只有遊戲，市面上跨平台的開發引擎也非常多，我也在持續關注中，希望未來有機會時能好好地研究一番。

然而無法對應不同大小的螢幕解析度、捨棄鍵盤使用者等違背優使性原則的設計，成了跨平台下的犧牲品。這些都應該是我們程式設計師在開發時必須要注意的問題，不是只有網頁要求無障礙，各種應用也別忘了優使性原則喔。

(more...)