沒辦法，只好拿工作的時間來玩了。
去年年底工作上有需要協助開發一個安裝程式的使用者介面，由於可以練習到GUI介面以及版面LAYOUT，所以也就很樂意的接下了。就在我正被各種LAYOUT搞得死去活來的時候，某次的開會提出了"畫面中需要一個安裝流程圖"的意見，也因此產生了這次的練習。
這是一個分散式系統的安裝程式，有點雲端的概念，安裝過程中需要輸入雲端電腦群的相關資訊，以及此電腦群中擔任控制台的電腦的相關資訊。因此，安裝流程圖必須引領使用者，第一是要看到整個分散式系統的簡單構造圖，第二是要能夠讓使用者知道目前正在進行哪一個步驟的資料輸入。開出這些需求之後，最初也是最重要的步驟，就是去跪求美工大姐的協助orz，否則以我貧弱的美工能力大概什麼都畫不出來。要到各種元件的圖片資源以後，就開始準備搞怪了。
P.S 其實要做到這樣的流程圖，直接使用JAVA基本的ImageIcon等物件應該也能夠達成，所以這次又只是我個人想趁機練習使用一下自己的東西而已，簡單來說就是貪玩吧。
使用之前的遊戲框架，可以很簡單的建立背景以及角色人物。在這次的應用中，不需要決定輸贏，只是一個單純的介面，因此一些跟PLAYER相關的東西幾乎都是NULL，也不需要碰撞判斷等，這些都可以用繼承SGameUnit的方式來修改達成，不會動到原本的程式碼。
背景的部分，由於是個雲端概念的安裝系統，因此自己手動畫了三朵雲，然後加上藍天的背景試著做出"雲端"的效果。
我是雲A
您好，在下是雲B
嗨! 咱是雲C
利用在背景物件的update function不斷更新雲的移動，並給予每朵雲不同的速度，做出有層次的感覺。結果雖然不能說完美，但也已經可以接受了。下載程式碼執行後，可以拉大畫面看到"畫面外雲的動作"，這樣會比較容易了解整個原理。
流程圖中需要各種不同的元件：使用者的電腦、雲端系統的管理電腦、以及雲端中各個運算電腦。所有的元件都會因為使用者安裝進行到不同的階段，而呈現"開"或"關"兩種不同的狀態。撰寫了一個DrawingUnit繼承SGameUnit後加入Activated這個boolean參數，用來設定元件的開或關，並在getNowImg()中根據Activated給予"開狀態時的圖"以及"關狀態時的圖"，這樣就能夠讓流程圖中的元件呈現兩種不同的動畫。
電腦關狀態時的圖
電腦開狀態時的動畫分割圖
到這邊為止，基本的元件都算可以做到了，接著是這次練習比較新的部分。為了區別出使用者的電腦以及整個分散式系統的電腦群，我們希望電腦群能夠有一個框框去框住，區隔出"內"與"外"的概念，同時，群內的電腦希望能有"線"來連接，表示出群內各電腦的連繫關係。
前半部的"框"比較直接也容易達成，只要找出群內各電腦的最外框，畫出一個像矩形的框架就可以達到，問題是後半部的"線"。"線"的概念必須存在於元件與元件之間，因此一條線會關連到兩個不同的元件，如果採用原本的方式先畫好圖讓程式載入，會因為不同的角度的線而須要繪製多張的圖，甚至元件位置改變時，畫好的圖也可能需要重畫。
還好，Canvas物件裡的Graphics2d把這一切都解決了!
有些人應該會有這樣的想法：「既然都已經有了繪圖指令來把圖繪製在Canvas上，難道就不能轉個角度繪製嗎?」一開始在寫遊戲框架的時候這個就是我很想問的問題，找了一些相關的資料後，才知道Graphics2d早就都寫好了！
跟OpenGL一樣，Graphics2d可以改變繪圖原點的角度、位置、比例，也可以利用複製Graphics的方式來模擬原點變更矩陣的堆疊。舉例來說，當我的遊戲角色需要"變高2倍並旋轉90度"時，不需要另外準備另外一張圖，只需要先用create()複製Graphics2d物件，接著將複製出來的Graphics2d物件y軸比例放大成為2倍，座標軸旋轉90度，如此一來使用複製的Graphics2d畫出來的圖便會是變高2倍且旋轉90度的狀態。之所以要先複製的原因是，如果直接修改原本的Graphics2d，那邊在繪製完後必須將座標軸轉回原樣，否則在這之後畫出來的所有東西都會呈現旋轉放大的狀態。詳細做法可以在DrawingLine.java的程式碼裡看到。
坐標軸變化示意圖
這樣一來，就可以自己定義一個新的繪圖物件，會根據兩個不同的物件之間的位置關係位移、旋轉、縮放，而不需要準備各種不同的圖。最後，所有拼湊起來的畫面如下。
安裝流程圖
因為還加入了滑鼠動作，所以畫面中各個元件可以拖拉移動，也就可以看到線會隨著兩端元件位置改變而跟著改變，半透明的外框也會跟隨內部元件移動而放大或縮小。有興趣的人可以下載回去玩玩看。
DOWNLOAD ( GOOGLE SITE ) ※需要這篇網誌裡的ShootingWorld程式碼
由於刪除掉了一些工作上無法公開的程式，所以可能在載入時須要重新調整注意一下，但跑這個範例會用的到資源與主要程式都附在裡面了。
最後的最後，附上此畫面被放進安裝程式後的部分畫面，可以看到根據安裝的步驟以及滑鼠指標所在位置(這部分影片中看不出來)的不同，流程圖會有不同的呈現方式。
安裝流程影片
花了那麼多時間搞一個流程圖，自己也覺得有點神經病，總之，希望下一次能夠把這些心力都花在開發自己的遊戲上
希望能有時間!!
沒有留言 :
張貼留言