NGUI 學習筆記實戰——制作商城UI界面


  Unity3D的uGUI聽說最近4.6即將推出,但是目前NGUI等UI插件大行其道並且已經非常成熟,所以我們還是先看眼前吧。

一、實現思想

  商城的功能是很多游戲都擁有的,按下一個界面按鈕,彈出一個窗體。

  然后是商城中的商品可以拖動,既可以用手,也可以用滑條等等,至於點擊購買就不單單是UI層的事了。等到實現NDate的時候再進行討論。

二、實現背景

  1、NGUI->Open->Prefab tool bar ,拖一個black widget進去

      2、之后布局如下,這些應該沒什么難度,弄好錨點,depth設好即可

    

UITexture
	—》BG(Sprite)做高亮
	-》 Daimond(UITexture)鑽石欄
		-》CreateDiamond(UITexture)+按鈕
		-》Num(UILable)數量
	Gold(UITexture)
	Hp(UITexture)

    3、然后差不多是這個樣子

   

三、按鈕彈出商城

  1、為了示范我們就做一個商城界面即可,其他的斗大同小異,我一般建議一個新的UI界面就用一個新的Panel,新建一個Panel

  2、添加美工給的背景等等,布局如下,比較麻煩的Scroll View,這個我就不加贅述,大家可以看我的博客,NGUI學習筆記Tutorial 4 http://www.cnblogs.com/chongxin/p/3821118.html

ShopRoot
	-》Bg(Sprite)
	-> Control - Simple Vertical Scroll Bar
	-> Name(Lable)
	-> Return(Sprite button)
	-> Scroll View
		->Grid(垂直列表)
			->Grid(水平列表)
				->Sprite0(商品圖片)
					->Buy
					->CurrentKind
					->Num
				->Sprite1
				->Sprite2
			->Grid
			->Grid

  界面如下:

    

  3、搞定了商城界面,我們需要做一個點擊彈出效果,這個是借助Tween Scale實現的。不得不說NGUI的插件做的真心很好,很多代碼都替我們節省了。

    首先:

     

  然后在ShopRoot 掛載Tween Scale,set active 為false 即可

  

  最后,我們如果要返回的話,需要商城自己的Return來返回,一樣的思想

  

  注意:這里有個問題,我在根節點掛載Tween Scale的時候,有時候會出現UI不見消失不見的情況,不知道什么原因,后來就沒出來了,希望大神指點一下。

四、功能實現

  彈出:

  

  

   基本上就這些,有了UI插件,做UI還是很愉快的,可以專心於UI效果,而不是構造它,祝大家生活愉快。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM