1. 程式人生 > >unity手遊UI介面開發之商店等介面

unity手遊UI介面開發之商店等介面

商店在手遊中是不可缺少的一部分。通常會有幾種商店,比如公會商店,遠征商店等。

這時候就設計到商店介面重用的問題。嗯,跟我後面要做的基於MVC的揹包系統也有一點思路相同之處。

首先整個大的商店介面Panel,做不做成prefab隨便你,做也可以,不過我覺得大部分商店的外觀還是有點不同,但是商店的種類不多,直接做一個介面也行,就幾分鐘。至於是不是便於維護,拓展什麼的不太重要。因為商店的介面數量太少。

但重點來了,一個商店裡面肯定有商品欄

而這個是可以重用的,不同商店只是道具名不同,道具圖片不同,道具金額及金額型別不同。


所以思路就是把商品框設定成prefab,而剛剛提到的元素都是在這個prefab生成時隨機生成物體id(或固定物體id),再根據id動態載入對應資料(或固定資料)。

商品框講完,再講這個商店中商品欄的滑動效果,通過滑動或者點選(下一頁按鈕)來檢視更多的商品。而手遊,首選的互動肯定是滑動。

滑動則是運用到UGUI中scrollview。把裡面的content當成是商品欄,把商品框放入商品欄並給content新增grid layout,即可實現這樣的UI效果。

當然,這些商品是可以點選並彈出相關的細節,如下:

所以商品框這個prefab應當加上button部件。當然,這個button上掛個指令碼,被點時告訴GameManager指令碼,當前所點的商品id是什麼,萬一玩家點選買了就要進行更新。然後在製作這個detailsPanel的時候。它的原理其實跟之前的一樣,根據你所點的商品id,動態的賦值給這個detailsPanel上的圖片內容,文字內容,金額及型別內容。

當然,記錄了所點的商品id,是為了玩家買了後能在後臺更新資料,並在揹包中進行更新。在下篇文章,我將會記錄開發揹包介面的過程。

還有,當商品被購買:


把一張售罄的圖片(當然是一個prefab啦)instantiate在這個商品框上,並把商品框中button的interactable設定為false 大功告成;

嗯,還有個重新整理的按鈕(坑錢必備啊),由於商品框都是prefab,且是動態生成內容的,想實現重新整理就非常方便啦。只要把content中的所有子物體destroy,再instantiate隨機個商品框即可。

詳細程式碼就不貼了,畢竟開發每個不同遊戲的商店介面都會有點不同,重點是思路要對,跟著思路寫指令碼也是特別快的,就怕一頭霧水地去寫指令碼。