Silverlight 游戲開發小技巧:扇形排列元素

作者: nowpaper  來源: 博客園  發布時間: 2011-02-14 22:51  閱讀: 1421 次  推薦: 0   原文鏈接   [收藏]  

  斗地主風靡了大江南北,在春晚都做免費性推廣,棋牌游戲平臺幾乎將其作為標配,但是牌類游戲總是一成不變的樣子——橫向排列,如果扇形排列應該更加符合真實,最近在WP7上玩了一個UNO游戲就是用扇形排列,感覺很不錯,今天咱們照貓畫虎,在Silverlight上實現一個扇形的手牌效果。

0  可能看到這個預覽圖有的朋友就會笑了,這個可以使用RenderTransform實現,前面有講過,只需要將RenderTransformOrigin的原點設置在牌外面就行,然后旋轉,這樣實現倒是可以,可是算起來實在麻煩,要考慮牌數和位置,今天不是炒冷飯,而是使用PathListBox來實現,PathListBox在Silverlight的標準SDK中是沒有的,它是Blend的一個擴展控件,用來實現路徑動畫等效果。

  現在先建立一張牌的控件,這次不用新建,首先在畫布上畫好,如下圖:

1  選擇繪制出來的元素,點擊鼠標右鍵選擇制作成用戶控件的選項:

2  輸入一個名字:

3  這樣就會制作好了一個自定義的控件,此做法可以省去定大小等麻煩,如下圖:

4  現在我們添加一個用戶自定義控件到MainPage看看效果,你需要在Asset(資產)中找到這個用戶控件,如果沒有則需要編譯一下:Ctrl+Alt+B

5  現在繪制一個圓形,在工具中選擇Ellipse:

6  看好規定好的路徑,繪制好位置之后,將這個圓形變成Path路徑,然后在工具欄中選擇Direct Selection,選擇下面的兩條線,這兩條線是我們所不需要的,所以直接按Del按鈕刪除掉:

7  只剩下一個將要作為路徑的Path:

8  選定Path,點擊鼠標右鍵選擇制作成為Layout Path功能,這個其實是一個快捷方式,如果正常操作需要引用dll然后添加對應的控件,我這里以簡單的方式完成:

9  PathListBox此時就會出現在布局中了,并且下面的Path也添加到PathListBox做路徑的基礎。

10  現在拖動Card控件到PathListBox中,你會發現牌已經到了最開始的點了:

11  下面選定PathListBox,把參數設置成如下:

12  現在復制幾個Card出來看看效果吧,怎么樣,很不錯吧。

13  但是這個排列仍然覺得別扭,調整Path就可以達到你的目標,可是有更好的方法來解決,把參數調整成下面的參數:

14  就是說開始的點在30%,而結束的點在40%,你可以動態調整一下,看看效果,非常棒,弄成動畫就更有意思了:)

  最后把黑線去掉,這樣看起來就更加自然了:

15  選擇Path把Stroke的顏色畫筆設置為沒有。

  好了現在已經完成,我為Card做了一個小動畫看起來更加有趣,在這個小技巧的基礎上,相信各位能擴展更多的玩法出來,今天就到此為止吧:)

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

0
0
 
標簽:Silverlight
 
 

文章列表

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

    IT工程師數位筆記本

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