Silverlight 游戲開發小技巧:血條和進度條

作者: nowpaper  來源: 博客園  發布時間: 2011-02-21 10:16  閱讀: 5720 次  推薦: 0   原文鏈接   [收藏]  

  游戲中血條的顯示非常普遍,直觀的看到人物生命狀態,還有看其他人的生命狀態,血條并非只應用在界面當中,玩家自身和怪物的生命值顯示也都會實時的出現在游戲場景當中,好的血條效果可以為游戲增光不少,這次咱們就簡單的制作幾個血條。

0  看著園子里Silverlight越來越繁榮,甚是欣慰,因為就在去年,還仍然在為Silverlight技術感到孤單,如今有了這么多并肩作戰的兄弟們,除了欣慰也甚狂喜,對于Silverlight還是沒有看走眼啊。

  血條的做法有多種,一般來說都是做成一個獨立的控件,這樣方便的放在任何地方,如果深入講起來,一般來說血條可能包含如下屬性:最大值、當前值、狀態等等,而我講講述最基本的做法,更多的擴展應用可以在在此基礎上修改獲得。

  現在打開MainPage,在上面畫一個Rectange:

1  然后將其復制,并編組成Grid:

2  有兩個矩形分別在上下,我們用上面的矩形作為血條的填充物,而下面的做底面:

3  選擇最上層的填充為紅色,我們知道任何控件都是有寬高和顯示寬高,所以要將這兩個屬性用起來,就可以達到效果了。

4  但是我們要考慮邊距問題,所以將水平對齊為考左,如果血條是上下的可以設置對齊上下的范圍。

5  現在只需要控制最上面的矩形Width屬性就能產生增加或減少的血條效果,在后臺代碼控制或綁定屬性也可以,但是這是一個未知最大數字的數值,所以我們需要父容器的ActualWidth屬性來獲取,具體算法并不難:Width = ActualWidth * percent;percent是血條計算出來的,如果將其設計成為獨立的控件時候,可以帶有MaxHP之類的屬性參與運算得到百分比。

  如果想要更多的有趣的效果,可以在其中填充圖片,下面是選定一個矩形時候的圖像畫筆的簡單操作。

6  在最開始的圖片中,可以看到,我已經準備好了一些演示,因為時間倉促也就不做的那么精致,有好的UI設計師來幫忙,可以達到非常不錯的界面體驗。

  有興趣的同學可以直接下載源代碼進行研究,本身并不復雜,用Blend打開就可以預覽和修改,有舉一反三能力的能人,一定會想到血條和進度條的形式很一致,因此只需要簡單的修改就可以當進度條使用,但是需要注意前后臺的UI線程問題。

  本篇工程源代碼下載地址如下:點擊直接下載

0
0
 
標簽:Silverlight
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()