引這 引這，，

能掌握NGU插件的程料本以 程料本以示NGUI例詳解（上示 現(xiàn)終現(xiàn)下面一步一步實現(xiàn)圖接刪除新建的場景的Main 層中新建一個GUI層 圖接菜單上的NGUI->CreateanewUI,彈出該框，設置如圖所示CreateYourUIHierachy把該Anchor命名為Anchor-Bottom，并為該對象添加一個空游戲?qū)ο?，并命名為offsetreset它的變換。該空游戲?qū)ο罂梢杂糜谒旅孀訉ο笈c該Anchor之間的偏移量。offsetNGUI->CreatenewWidgetWidgetAddTooffset。這就在offset成一個Label便簽，并把的文本改成Bottom，如圖所示：以同樣的方法在offset中添加一個slicedsprite。記住該對象的深度應該比LabelLabellabel（depth）0，而slicedsprite為-1，并在編輯器中調(diào)節(jié)該元素的大小，如圖所示：最后一步，選擇Anchor-Bottom，設置該元素的對齊方式（side）為“Bottom”。選擇之后，它會自動把它自己對其到機的最，我們可以通過offset來調(diào)節(jié)該元件Anchor之間的偏移量。如圖所示：齊到不同的位置上，并在編輯窗口中調(diào)整offset的位置，其結(jié)果如圖所示：最后來制作其背景，新建一個空的游戲?qū)ο螅⒆詈驪anelreseto-oUIthnh，此時該空游戲?qū)ο缶统蔀榱艘粋€Anchor，并設置對齊方式為centerAnchor-backgourndwindow所示，window游戲?qū)ο笾皇菫榱朔奖愎芾矶O置的一個輔助對象而已。接下來，給他添加一個多行Label，同樣使用createWidget框，其數(shù)如下在其文本內(nèi)容框中寫入需要的文字當然，因為，所以中文是顯示不出來的，如圖所示，并把深度（depth）改為-2，把LineWidth設置成500，可以字的寬度。如圖所示： 一中其一 的該例子，還有上面一個標題，實也是有一個Label和個slicedSrite組成 中其一的得去E標所鈕，，是用word寫出來后， 方，請各位灌水同仁批評指正。的得去E標所鈕，，二、二、xample2– 其最終效果如圖示,當點擊ShowonHover新 個場景，并把該場景中的MainCamera刪除掉，并通過菜單中NGUI>CreateaewUIUI位，變位，變下在下不不

然以后的GUI

它工e首先先使用Createawidget 具創(chuàng)建一個Sprite，并命名為UISprite-Background，并在 的大小，設置其深度為-5，該Sprit用于作為背景，其參 它工e3DUIWindow，下面來制作WindowCreateawidget，使用UITiledSprite，該元素可以等你放大它的范圍時，它會以平鋪的方式顯示，這樣可以資源的體積該其參數(shù)如下：使用CreateaWidget中的SlicedSprite，創(chuàng)建標題欄，該元素可以在放大范圍時，拉伸創(chuàng)建一個按鈕，命名為：button-show，設置該按鈕的LabelShow，設置為該Button創(chuàng)建一個空的子物體，并命名為Animation，最后對該空物體添加一個Animation組件（Component->Miscellaneous->Animation），并在project窗口中找到NGUI->Examples->Animations->Button，把該添加到Animation組件中的Animation中。（這個Button）接著把ButtonLabel和Background拖到Animation對象上，成為其子對象，如圖所示：Ctrl出另外兩個，并置它的位置和顏色，最為ICON，把這個圖標拖到Ctrl出另外兩個，并置它的位置和顏色，最為ICON，把這個圖標拖到ICON設+三后終的示文的示文Button，ButtonLabelHIDEbutton-hide即鼠我現(xiàn)在來完成當標放置在按鈕上面時 onHover狀態(tài)時，它的動畫效果。們以即鼠我UIButonyAniation組（菜單中Component-NGUI->Inction->ButtonyAnimtion）。添之后，把該按鈕下的Animation賦給該組件中的Target變量，設置TrigerUIButonyAniation組（菜單中Component-NGUI->Inction->ButtonyAnimtion）。添之后，把該按鈕下的Animation賦給該組件中的Target變量，設置TrigerOnHovr，點擊，當把鼠標置在該按鈕上時，可以看到已經(jīng)有動畫效果了，此時可以對比未HideUIButtonyAnimaton圖所示：t 放i值對Button-

按，口 按，口并戲 對過和著參個空游戲?qū)ο?，命名為WindowActiveWindowInactive，這兩個對象只包含了對象的變換信息（平移、轉(zhuǎn)和縮放）用這個兩個空游對象的變換信息來制作窗口在這兩個位置間的平滑渡。首先把該兩個游戲3DUI并戲 對過和著參

注所注所

把s 行數(shù)選擇Window對象，為其添加一個TweenTransform組件（Compoent->NGUI->Tween->Tranform）Transform后，WindowActveWindowInactiveFromTo件的Enable關掉，使Show按鈕控制它的打開，具體參如下，如圖所示：把s 行數(shù) c c該組件可以使得Target中的Tween類型的動畫進行開關。把Window對象賦值給該組件下的Target，并設置yDirection為Forward，Trigger為OnClick，IfDisabledOny為EnableTheny，表示當該動畫時，啟動Target中的Tween類型動畫。這個組件是關可以看到此時的TweenTransformshow現(xiàn)在來完成當點擊Hide按鈕時，窗口回到原來的位置，同樣給該按鈕添加一個UIButtonTween組件，把Window對象賦值給該組件下的Target，Trigger設置為OnClick，yDirection設置為Reverse，IfDisabledOny設置為DoNothing。完成之后，點 以上幾步就實現(xiàn)了官網(wǎng)上的Inction中窗口位置的平滑變換效果。關鍵是UIButtonTween和其他的Tween類型之間的連接。最后，把機調(diào)整到其他的角度，（沒以上幾步就實現(xiàn)了官網(wǎng)上的Inction中窗口位置的平滑變換效果。關鍵是UIButtonTween和其他的Tween類型之間的連接。最后，把機調(diào)整到其他的角度，（沒交r本B個現(xiàn)在來制作NUI按鈕與場景中的對象的 予brick材質(zhì)（ Project窗口中，NGUI->Example->Materials->bick）,為該立方體添加一個Spin組件（Component->Examples->Spin）,該腳可以實現(xiàn)物體的旋轉(zhuǎn)。再為其添加一個UIButtonScale組件（Component->In ction->uttonScale該組件可以實現(xiàn)當鼠標位于該物體上面時，對該物體進行縮放。最后為其添加一 TweenPosition組件交r本B個D （Coponent->Twen->position）MethodEaseInOut，urationD 制，，該為起始位置，To為最終位 制，，該

物體，然后確定該位置并記錄下來FromToFromToCubes并把這兩個CubeCubes3DUI不過可以方便管理，讓Hierarchy好看點。最后把Cubesenable關掉，如圖所示：其添加一個UIButtonTween，方法與第19CubesTweenTarget，Trigger為OnClick，yDirection為Forward，IfDisableOny為EnableTheny。Hide20TweenTargetCubesDisableWhenFinished設置成DisableAfterReverse，呵呵，一看就知道什么意思，就是當完成之后，把TweenTargetIncludeChildren，了作用到父物體上而子物體的動畫就播不了。，了大這樣就差不 大

天的 畫點點擊試試，攝像機就活起來了。天的 畫點 （浙江傳媒學院- 學院-數(shù)字游戲設專業(yè)-張si （浙江傳媒學院- 學院-數(shù)字游戲設專業(yè)-張si切換如圖所示：1Advanced3DUIPanelPanel-Main，WindowresetWindow對象如圖所示：NGUI2-inctionWindowPanel-MinLabelTypewriterEffect接著一個Panel-Main，并改名為Panel-Option，并把其中的元素進行調(diào)整，并使用CreateanewWidgetcheckbox，下拉菜單等。這里講下下拉菜單的制作，該步驟內(nèi)容，其中左邊的圖，Difficulty只是一個空的游戲?qū)ο?，里面包括了一個自己創(chuàng)建的Label和一個PopupListOptionsPanel-option的z1400，并把它的enable接下來，為其添加一個Sprite背景和左邊的Label，與以前面的NGUI官網(wǎng)示例2-in tion-講解的過程制作出該Window的界面,最終的效果如圖所示：Panel-OptionAnimation（Component->Miscellaneous->tion）AnimationWindow-backWindow-forward（點擊該變量最右邊的小圓圈，可以出現(xiàn)左邊的窗口），把yAutomatically關掉，如圖所示：使用同樣的方法，在Panel-Main中，也添加一個Animation組件（Component->Miscellaneous->Animation）AnimationWindow-backWindow-forward選擇Button-Option按鈕，為其添加兩個（菜單中Component->NGUI->Inction->ButtonyAnimation），在第一個組件中，設置Target為Panel-Options（Animation）直接Panel-Options拖到里面就好了，ClipName輸入Window-Back，這個是關鍵（記得剛才設置兩個window都設置了兩個動畫吧，這個用來其中的一個動畫，只要動畫的名稱不出錯）。Trigger為OnClick，yDirection為Reverse（動畫翻轉(zhuǎn)，也就是倒著動畫）,IfDisabledOny設置為EnableTheny（被控制的對象的Enable打開并開始加在在此對象上的對象），DisablewhenFinished為DisableAfterForward（當前向完成后，關閉對象的Enable）；在另外一個組件中，設置Target為Panel-Main(需要控制的動畫對象)，Trigger為OnClick(點擊時觸發(fā)動畫)，ClipName輸入Window-Forward，這個是關鍵。IfDisabledOnyer為EnableTheny，DisableWhenFinished選擇Panel-Option中的Button-Done，也同樣添加兩個為其添加兩個（菜單中Component-> yAnimation），并設置如下的參數(shù)：如圖所示：NGUI制作動態(tài)的GUI非常方便，而且添加各種Widget的過程都很類似，可以舉一反三。同時只要為某個按鈕添加一個UIButtonyAnimation組件，然后設置該組件，便可以控制已經(jīng)加入Animation組件的動畫，這些Animation可以使用Unity的曲線或者程序編寫或者第軟件來制作。并可以實現(xiàn)向前和反向等功能，并能夠控制該Target的Enable。中秋到了，估計這兩天不會更新。預祝大家中秋過得開心愉快！Example4–ControlIerNGUI插件中，你可以設置該GUI的輸入方式，例如通過鼠標、鍵盤、手柄等方式來控制元素的選擇。在示例的Example4–Input中，展示了鼠標輸入，改為通過鍵盤方向組件，把其中的UseMouseUseTouch（Component->NGUI->Inction->ButtonKeys）,該組件中的StartsSelected表示gui的初始選擇元件，SelectOnUp表示當前在你選擇這個按鈕之后，你按下向上鍵時，下一個選擇的元件是哪個對象，SelectOnDown表示當當前在你選擇這個按鈕之后，你按下向下鍵時，下一個選擇的元件是哪個對象，分別為這兩個變量附上Button-exit和Button-option兩個gui元件（注意，先必須分別給這兩個元件添加上ButtonKeys組件，Button-ExitButton-OptionButtonKeysSelectOnUp和SelectonDown變量。最后，選擇Button-y元件，把StartsSelected勾上。點車的 車的的 enable，關閉Panel-Man的enable，同樣為Panel-的行注， 行注，達 u 一個slide添加一個BttonColor 達 u 并ponent->NGI- 并ponent->NGI-g圖成青綠色，并把TweenTargetsliderbackround，如g圖，示果 出來滑動條被選中的效，示果Panel-OptionenablePanel-Main的enable，選擇Button-OptionbuttonKeysselectonClickPanel-OptionButton-done（button-done），如圖需 ：你同，鍵如當-被 要給button-done按鈕的buttonkys組件中的selectonClck變量需 ：你同，鍵如當-被值為Button-Options值為Button-OptionspanelmainOk。大功告成！現(xiàn)在再點 ，使用盤的上下鍵選擇Option按鈕，點擊車，進設置窗口，現(xiàn)在設置窗口，現(xiàn)在樣使用鍵盤上的上下鍵哈哈，功能完全實現(xiàn)，–NGUI lightsand–這在i EZgui里面也可以。這在i法簡了， 單例子。法簡了，，當邊開不了效，當邊開不了效創(chuàng)建一個Sprite其參數(shù)如圖所示：接著選擇Panel，在里面把Normals打 盞平行光。這樣法線貼圖的效果就出 ， 光源把它放在sprite的左，如圖所示：選擇該點光源，打開動畫窗口（window->Animation）角錄畫文件的窗口為它起名個示aN的窗n中編中動 個示aN的窗n中編中動 光標拖到 光標拖到1秒鐘處，再添加一個關鍵幀，在場景輯窗口中，把點光源移到的右邊，此時，Aimation1關閉 照強度，顏色等動畫。最后，在點光源把Animation組件關閉，我們用button animtion組件來觸發(fā)給動畫。選擇Sprite，在ui菜單中選擇Attachacollider ction->ButtonyAnimation）,并設置其參數(shù)如下哈哈，點擊，看看。大功告成！帥！在改例子中，關鍵是使用了refractionaltas,打開這個altas看了以上幾個，估計大家對NUI的前幾個實例有所了解，建議自己做一遍，這樣可以gui 在NGUI菜單中，打開CreateanewUI框,在框中設置Camera為Advanced3D,并點擊CreateyourUI，此時在Hierarchy窗口中生成了對應的層次結(jié)果，如圖所示：調(diào)整該層次結(jié)果，使得CameraPanel脫離，并且CameraPanelUIRoot（3D）AnchorUIRoot（3D），創(chuàng)建一個Scene空的游戲?qū)ο?，reset3DUI空游戲?qū)ο螅瑀eset一下，再創(chuàng)建一個Window游戲?qū)ο螅瑀eset一下，同時Panel也reset一下，最后調(diào)整它們之間的層級結(jié)構(gòu)（不斷地reset是為了更好地定位各個元件），Window3DUI等這些空物體只是為了方便管理場景中的元素而已，同時把Camera的postionz選擇Panel，為其添加一個帶有法線貼圖的背景，選擇Createanewwidget窗口，選擇Temte為TiledSprite模板，Sprite為b作為背景，其參數(shù)如下，設置完成之后點擊Addto，為該gui添加一個TiledSprite，作為景，保證該按鈕后面的值為panel：它黑添加TiledSprite之后，把縮放到x=490，y=510，顏色設置 它黑為了看到法線貼圖PanelNormals，并為場景添加一盞平行光，調(diào)整光效果如圖所示： 窗口的邊框，選擇Createanew 框，選擇 teSprit為Sprite，創(chuàng)建完后，選擇該SlicedSpriteDept1ColorTint為綠色，大x=498，y=515稍窗口的邊緣出現(xiàn)了綠色的邊框，如圖 示選整擇為g終擊 欄，選擇CeateanewWidget框，設置參數(shù)之后，點 AddTo，創(chuàng)建一個SlicedSprite。創(chuàng)建完之后，擇該SlicedSprite，調(diào)整它的位置和大小，參數(shù)和效果如圖所： 示選整擇為g終擊 擇CreateanewWidget框，選 為窗口創(chuàng)建一個Label，在Label的文本輸入框中輸入ExampleDragableWindow，并在場 置為，位置為，位其添加另外一個或者直接使用Ctrl+D出一個出來，修改linewidth調(diào)整它的創(chuàng)建Logo圖標。選擇CreateanewWidg e ，為NGUI，選擇 to，為窗添加一個Logo圖標，調(diào)整它的位 e ， c文c調(diào)創(chuàng)建兩個Checkbox。同樣選擇CreateanewWidget 框，選擇tem te中的checkbox，backround設置 Dark，Checkmark為X最后點擊Adto，為窗口添加一個Checkbox。選擇Checkbox中的Label，把本修改為EnableAutoYaw。再選擇Chekbox中的Background，把ColorTint選擇為藍色 整該Checkbox的位置。接著，使用 c文c調(diào)

面的文本修改為EnableDragTilt，放置在右 o下+圖對 Wo下+圖對 W。創(chuàng)建兩個按鈕。選擇CreateanewWidget話框，選擇temte中的Button，background選擇Button，最后點擊Addto，為窗口添加一個按鈕選擇該按下的label修改文本為o，選擇其下的backgrund，設置ColorTin為藍色，放置在合適的位置接著使用CtrlD，出另外一個button，并把其的label的文本設置為orld，放置在合適的位置。最終效果如所示： 制作gui的動態(tài)效果和拖拽功到Button-o上，成為其子物體，把該按鈕下面的兩個子對象拖到Animation空對象上，AnimationAnimation（Component->Miscellaneous->animation）,添加完成之后，在該組件種的animation屬性animation曲線窗口中編輯保存的。把yautomatically取消掉，最終如圖所示：選擇Button-o，為其添加一個buttonyanimation組件（Component- ction->buttonyanimation）。把該按鈕下的animation對象拖到該組件的Target上，設置Trigger為OnHover（當鼠標放置在該按鈕上時，Target上的動畫）。對Button-world進行同樣的操作，最后點擊，當鼠標放置在該按鈕上時，就會按鈕使用同樣的方法制作OK。窗口中按鈕和checkbox的鼠標停留效果就做好了。點擊看看下面開始制作窗口的拖拽效果，其中還三個輔助功能，一個是機跟隨（Cameraaw）、移動延遲（Pston）以及窗口搖擺（DaTile）。首先來實現(xiàn)窗口的拖拽功能。因為cdpi），DaOet組件 ction->DragObject）window下的TargetSlicedSpriteNGUI->attachacollider（NGUI就是通過碰撞盒中的觸發(fā)器方式來進行輸入的），結(jié)果如圖所示：現(xiàn)在移動效果。創(chuàng)建一個空的游戲?qū)ο?，并把它命名為LagPosition，把它拖到Windowwindow的子物體，resetPanel作為LagPosition子物體。接著為LagPositionLagPosition（Component->NGUI->ExampleLagPosition）。resetPanelYawWindowAutoYaw（Component->NGUI->Example->WindowAutoYaw）?，F(xiàn)在點擊，可以發(fā)現(xiàn)，機會自動地進行Yaw操作。參數(shù)和結(jié)構(gòu)如圖所示：最后，實現(xiàn)窗口的搖擺效果。創(chuàng)建一個新的空游戲?qū)ο?，命名為DragTile，并把它作為LagPositionresetPanelDragTileDragTile對象添加一個WindowDragTile組件（Component->NGUI->Example->WindowDragTile）。其參數(shù)和結(jié)構(gòu)如圖所示：LagPosition、WindowAutoYaw和DragTileUpdateOrder屬性，用來控制其更新次序的，數(shù)字越大，更新排序越后。我們設置LagPosition1，WindowAutoYaw為2，DragTile為3。這樣重新，可以看起來，更加自然了。實現(xiàn)Checkbox控制WindowAutoYaw和DragTile的開關。選擇Checkbox-Yaw，為其添加一個CheckboxControlledComponent（Component->NGUI->In ction->Checkbox開開 Drag

關。接著，對CheckBox-Tile

Targe賦值為動這樣窗口的 動

，加色設置它的Range0.3，Color，Intensity8。把P，加色圖子置s時對成為Button-o按鈕下Background的 物體，并reset一下位，接著再把它的位置放在按鈕前面。如所示：圖子置s時對為Button- o按鈕添加一個ButtonColor組件（Component->NGUI->In ButtonColor）。接著把pointlight賦值給Target，同時把Pres后面的顏色換成黑色。其中Target用于確定需要控制的對象，Hover表示該象當鼠標放在該按鈕上 操o 操o只看到其最后的效果Button-World只button-World上面

作，只是pintlight接 制作Logo的流光效果。創(chuàng)建一個空的游戲?qū)ο?，并?為Logo，拖到Panel下成為其子對象并調(diào)整到窗口中l(wèi)ogo的中心位置，著，把Sprite（NGUI）拖到它的下面成為接

它放到Log下，同樣成為它的子 屬該一為燈光添加一個Animation組件（Component->Miscellaneous->Animation）， 把該組件中的Animation 性設置為Logo動畫文件，同時關閉 屬該一范 范

Component-Ngui->Intenal->Active：：

選組）置w口個拖加u把所置示o選擇Logo對象，在菜單欄中擇NGUI->AttachaCollider，為其添加一個碰撞盒，接ButtonyAnimation件（Component->NGUI->Inction->buttonyanimation。把targetpointlightlgo上面的那個點光源，接著Trigger設成OnHoverTrue。點解，ok，完成！如圖所：選組）置w口個拖加u把所置示o 修飾作用的背景。選擇Createane Widget窗，在tem 選擇SimpleTextre。點擊Addto，為其添 到Camera下面成為其子物體，接著，backdrop材質(zhì)球賦值給該元件下面的Material中。最后調(diào)整這個元件的位和縮放。最后效果如圖示：-NGUI-

憤e擇上子景細操NGUI的ScrollViw能夠?qū)崿F(xiàn)鼠標或者手勢對圖標的滾動操作，現(xiàn)在在很多的游戲中都能夠 作在NGUI 現(xiàn)，只要在Panel中加入一個UIDragPanelContents組件，再做些節(jié)上的操作就可以了。憤e擇上子景細操第們第們

現(xiàn)接，此一片NGUI->CreateanewUI,出UIToolCameraSimple2D，然后點擊CreateYourUI，創(chuàng)建原始的GUI不給出截圖節(jié)約點圖。哈哈。構(gòu)AnchorAnchor-CenterAnchor-Center個空的子名WindowRootreset一下，著把panelPanel-Window，并拖到WindowRoot物體，成為如圖所示：現(xiàn)接，此一片現(xiàn)在來完成Panel-Window的制作。創(chuàng)建一個空游戲?qū)ο螅麨锽ackground，并成為Panel-Window的子對象，并reset一下。在其下使用Createanewwidget框，創(chuàng)建 b；大小X：770，Y：570；ColorTint為R：255，G：236，B：206，把Atlas為WoodenAtlas，F(xiàn)ont為Arimo14，Temte為SlicedSprite，Sprite為Glow-Outer，大X：814，Y614，ColorTintDepth3background件改名為Glow，如圖所示：g 得 接下來制作窗口上方Title創(chuàng)建一個空的游戲?qū)ο骉itleWindowRoot的子對象，要記resetTiledSprite參數(shù)為WoodenAtlas，F(xiàn)ontArimo14TemteTitedSprie,ColorTintg 得 的SlicedSpriteSpriteGlow-Inner，該元件命為黑色，Depth1，Title的

為Glow，ClorTintbackground ，為。創(chuàng)建一個SlicedSprite，Sprite為Glow-Inner，ColorTint為暗灰色，并命名 調(diào)整大小和位置使得它覆蓋Title下的background，為。字圖最后創(chuàng)建一個Label，參數(shù)為Font：Arimo20，Effect為OutLine，顏色為天藍，這樣可 體外框。其文本為ScrollView，最后的結(jié)果如 字圖o示LabelFont：Arimo18，LineWidth720，Effecto示顏色為黑色，Col顏色為黑色，ColrTint景 創(chuàng)建圖標滾動背。創(chuàng)建一個SlicedSprite，參數(shù)為 te景 ：Hightlight-Shadow，ColorTint并命名為Outline，如圖所示：

724，Y為26，并調(diào)整的位置Foreground為Button，Direction為Horizontal所示：這樣就創(chuàng)建好基本的窗口了。窗上選擇NGUI->CreateaPanelWindowRoot創(chuàng)建一個新的Panel，并命名為PanelClipView。如圖所示：創(chuàng)建一個空的游戲?qū)ο?，命名為UGridPllpiwrt新建一個空的游戲?qū)ο?，命名為Item1。并作為UIGrid的子對象，并reset一下。如圖所接著，使用我們先前學過的創(chuàng)建Widget（這里不再贅述），使用Ctrl+D的方式出9個Item，位置不要緊，等會為UIGrid加上一個組件之后e些后一動t 。樣，如 現(xiàn)在選擇UIGrid，為它添加一個Grid組件（Componen->NGUI->Ineraction->rid）,這時候神奇的效果出現(xiàn)了，真佩服NGUI的功能，它會自 e些后一動t 。樣，如 因為NGUI的 響應是通過Trigger來實現(xiàn)的，所以選擇所有的Item(在hierarchy里選擇Item1，然按住shift鍵，再點擊Item9，這 就連選了所有的Item元件)，為它們添加一個Trigger，（NGUI->Attachacollider）然后再為它們添加一個DragPanelContnt組件（Component->NGUI->In ction->DragPanelContnts），加這個組件之后就表明這 item是DragPanel的部分（必須添加的）。 ），問動個上 選擇PanelClipView，為其添加 Draggablepanel組），問動個上 ），（Coponent->NGI-> ），標終于可以通過鼠標現(xiàn)在這里有一個現(xiàn)在這里有一個題，如果你鼠標左右 下移動時，這些 如圖所示PanelClipViewDraggablePanelScaleY和Z設置為0，這樣，就可以把拖動方向限制在x軸上。如圖所示：最后，大家還記得我們已經(jīng)做了一個滾動條在下方，我們可以用它來控制item的滾動，很簡單，把這個元件賦值給PanelClipView的DraggablePanel組件下的HorizontalScrollBar，就可以了，如上圖。點擊，現(xiàn)在你可以使用那個滾動條來對item進行滾動了！這樣，我們就實現(xiàn)了圖標的滾動了。分為三步，第一步是使用GridItem進行排列；第二部是為為PanelDraggablePanelItemTrigger和DragPanelContent。有一個是實現(xiàn)窗口旋轉(zhuǎn)的功能。還有右上角的LogoCamera下創(chuàng)建一個panel。并在這個Panel下創(chuàng)建一個空游戲?qū)ο?，并命名為Anchor-Bottom，reset一下，為其添加一個Anchor（Ngui->AttachaAnchor），把UIAnchor組件中的Side參數(shù)設置成Bottom。在這個Anchor-Bottom下創(chuàng)建一個Checkboxcheckbox下的backgroundColorTintcheckmark,設置其ColorTint顏色為綠色，Label的文本為CenteronItem，最終效果如圖所示：k給值首那閉gR調(diào)關還k給值首那閉gR調(diào)關還t創(chuàng)之選擇Panel-Window，為其添加一 背景。在Panel-window 建一個元件參數(shù)為 te為SlicedSpriteSprite大owOutlinex158，y258，ColorTint為 整它的位置，最終效果圖所示設置Checkbox。先選擇checkbox，把UICheckbox組件中的StarsChecked消掉。為checbox添加 ponent組件（Component->NGUI- ction->Compnent）,把UIGrid賦值該組件的TargetponentcedSrite（RowOutline）賦給它的Taret，這樣可以打開或者閉該對象。點 現(xiàn)在可以通過checkbox控制 UIGridCenterOnChild（Component->NGUIInction再 時組個G再們CentrOnChild）并關閉它，（這里有一細節(jié)，checkboxcontrollercomponenttargt對象的組開關時，它只對第一個件進行控制，所以，我UICenterOnChildUIGridUIrid，然后添加CenterOnChild，再添加UIGrid，把UIGridCheckbox的CheckboxControlComponent再 時組個G再們使用Ctrl+DAnchor-Bottom，改名為Anchor-BottomRight,刪除掉其下的checkbox，Side設置成BottomRight。接著，為其添加一個Button元件，并設置它的參數(shù)和調(diào)整它先選擇WindowRoot，為其添加一個TweenRotation組件（Component->NGUI->Tween->Rotation），同時關閉該組件。并設置該組件的屬性（這樣便給WindowRoot設置了一個旋轉(zhuǎn)的Tween動畫，用按鈕來觸發(fā)）如圖所示：選擇ButtonButtonTween（ComponentNGUIInctionButtonTween），把WindowRoot賦值給該組件的Target，yDirection為Toggle（可以實現(xiàn)翻轉(zhuǎn)，不然你用forward只能點一次了，就再也回不去，可以試試）。注意，Animation用ButtonyAnimation組件，Tween動畫用ButtonTween組件。如圖所示：現(xiàn)在點擊，點擊ClickMeClickme下面來實現(xiàn)Logo的彈出與彈入效果。使用Ctrl+D一個Anchor-BottomRight，并把名Anchor-TopRightButtonSideTopRight。如圖創(chuàng)建一個SpritespriteTweenPosition（Component->NGUI->Tween->position），為SpriteButtonTween（Component->NGUI->InctionButtonTween）。設置參數(shù)為TweenTarget為Sprite，Trigger為OnClick，yDirection為Toggle，如圖最后，為該Sprite添加一個Collider（NGUI->AttachaCollider）。點擊，哈哈LogoNGUI8Scroll例的SlViw到了Sar備，NI作一個普通的GUIItemCreateanewUINGUI并調(diào)整它們的層次關系，并把UIRootPanel組件刪除掉，最終如圖所示：新建一個新的空游戲?qū)ο?，并命名為Offset，并放置在anchor成為它的子物體，并reset一下，同時給它添加一個Panel組件（Component->NGUI->Intion->Panel）,這樣，該對象才能放置NGUI元件。如圖所示:NGUI7ScrollView1個ItemCtrl+D制出9個來，當然你也可以你需要的數(shù)量，現(xiàn)在這些Item都是在一起的，最終效OffsetTable（Component->NGUI->InctionTable）。哈，神奇的效果在此出現(xiàn)，只是上一個使用Grid組件，這次使用的是Table，這個TableGrid的不同，可以查下官網(wǎng)的說明。這里不贅述。如圖所示：選擇第一次創(chuàng)建的GUI結(jié)構(gòu)，選擇Window下的TiledSprite在下面創(chuàng)建兩個空的游戲?qū)ο?，并分別命名為BottomRight和TopLeft，這兩個空對象用來標記滾動Item的邊界，并在場景編輯窗口中放置在對應的位置，最后為該TiledSprite添UIDragCamera（Component->NGUI->Intion->DragCamera）如圖所示:并把第一個機賦值給SourceCamera，把TopLeft對象賦值給TopLeft，把BottomRight賦值給BottomRight，然后選擇Offset，調(diào)整該對象的位置，如圖所示：為該機添加一個DraggableCamera組件（Component->NGUI->Inction->再次選擇剛才添加了兩個空對象的擇Window下的TiledSprite，把第二個Camera賦值給該元件中的DragCamera組件中的DraggableCamera，其結(jié)果如下接著同樣選擇該TiledSprite，為其添加一個Collider，這樣，才能接受輸入信息（NGUI->AttachaCollider）。哈哈。真好Happy，看結(jié)果，結(jié)果一個點擊，成這樣了？！雖然GUIAnchorUIAnchor是第二個機，我們現(xiàn)在把它改成第一個機，再點擊，WellDone！接著給每個Item添加一個DragCamera組件（Component->NGUI->Inction->DragCamera）和一個Trigger（Ngui->AttachaCollider）。再為其添加一個ButtonScale組件和一個buttonSound組件（都在Component->NGUI->Inction中）最后來實現(xiàn)那個Pressme按鈕。首先，選擇Window對象，為其添加一個TweenPosisiton>Position，NGUI9這個示例展示的是可伸縮的界面，點擊沒一個Questn不示窗可本添里。我o其效Gn不示窗可本添里。我o其效G首先先制作出基的界面，這就不再贅述（首先先制作出基的界面，這就不再贅述（可以參考上面的系列在制作背景時，以使用CreateaWidget創(chuàng)建出一個SimpleTexture該組件可以根據(jù)口的大小自動調(diào)整尺寸注意該層級結(jié)構(gòu)，最終果如圖所示QuestLogPanelNGUIapael），SubPanel選擇SubPanelTable。該對象將來用于一建一建

Tween，成為它的個Label

子子接對，o體，這看件為 式TweenEnable再制作出三個這樣的Qust我這里偷懶，直使用Ctrl+D出2個來，并命名Quest2和uest3。不去管它的位置如圖所示接對，o體，這看件為 式選擇Table為其添加一個Table組（Component->NGUI->Inction->Table），并設置Colomn1，DirectionDown，PaddingY4，Srted、HideInactiveKeepWithinPanel點擊之后，其子物就會自動地排列了，神奇?。ù蠹覐挠⑽纳蠎撃艹鲞@些參數(shù)的意思吧，里不贅述了）。如圖所示這Quest明Quest1Tween下面的件 ，接著為其添加一個ButtonTween組件（Component-件-o，NGUI>In ctin->ButtonTween）這個組件很熟悉吧，對其他的幾個Quest 操作點擊 鼠標放在Quest上點擊，ok，實現(xiàn)了！其參數(shù)如下-o，時， 時，置 置圖中x為420，Y為290，softness為X為1 的范圍內(nèi)了。如所示圖下創(chuàng)建一個垂直ScrollBar元件，我們現(xiàn)在想當內(nèi)容超出panel時scollBar才顯示出來，我們設置其Alpha為0，最后參數(shù)如圖所示SubPanelScrollBarSubPanelDraggablePanel（ComponentNGUI- VerticalScrollBar NGUI10–Localization隨著游戲的發(fā)展，很多游戲都會在多個國家，那么其中有一個很重要的工作就是游altas）。個界面做得有點丑了！在這里有兩點要注意，在創(chuàng)建每一個組件的時候，其Font3699Font字庫（該字庫點擊3698font.unitypackage導進Unity中就好了），接著，每一個Label的z軸都要稍微向前平移一些，不然會。那個下拉菜單的Option設置成接著創(chuàng)建兩個txt文件，命名為English.txt和.txt。從這兩個txt文件中獲用UltraEditor編輯器來做，有人說動用visualStudio，這樣有點大材小用了。English.txtFlag=Flag-USEnglish=English=中文Info=LocalizationexampleDesc=EnglishParagraph=ThisexampleshowshowtoimplementlocalizationusingNGUI.Inordertolocalizeawidget,simplyattach[000000]UILocalize[-]scripttoit.Thescriptwilllocalizethespriteifit'sa[000000]UISprite[-],orthetextifit'sa[000000]UILabel[-].Ifyouwanttolocalizesomethingelse,justimplementthe[000000]OnLocalize[-]function.Eitherway,theactualdataisdefinedviatextassetsspecifiedonthe[000000]Localization[-]scriptwhichmustbepresentintheFlag=Flag-FRLanguage=中文=中文Sound=音效Music=音樂Desc=中文本土這兩個txt文件先留著。創(chuàng)建一個空游戲?qū)ο螅麨長ocalization，并為其添加一個Localization組件（Component->NGUI->Internal->Localization）。打開該組件，把StartingLanguageEnglish，Languagessize2english.txtElement0，把.txt賦值給Element1。如圖所示是 了 件把為每個Label（除PopupListLabel）Localize（Component->NGUI->UI->Locaize），打該組件，可以看到該組下面有一個參數(shù)為Key，這個參數(shù)就是用來設置關鍵字的，也就txtlabel是 了 件把

VoiceMuicLabelKey）選選擇PopList，為其添加一個anguageSelction組件Component->NGUI->In SeletLanguage）?，F(xiàn)在點 試試，可以看到，經(jīng)可以在兩個字體之間換了沒Flag。這些沒

Sprite，也為其都和txtkey

添。o點 ，k，成功添。oc新個y，拉戲Le（ 建一個名為Drop-downList的新游 c新個y，拉戲Le（子要顯示中文字體，需要把這些label的位置往外拉出一些，在該例代窗口的背景往后挪一些就這個窗口的背景后挪1個單位，如圖所示子

oo還有，我看下拉菜單里面那個太礙眼了，如果那些對英文一竅不通的人，都不知道到底是什么東西，所以，我索性把.txt文件名改成”中文.txt”(沒雙引號的,了把改完名的txt文件重新給Localization中的element1)。哈哈，居然 放NGI1DragDrop（圖標與物體拖拽置 放到 圖簡 儲物箱等GUI，GUI的一邊是物品 到 圖簡

的的l已只r a其，象m使用Createanew 框創(chuàng)建一個Advanced3DUI如圖所示l已只r a其，象m把Panel拖出來脫離Ancho父物體，然后改名為3D，接著把Caera作為子物體拖動到Pane下面，reset一下Camea對象，最后刪除UIRoot（3D）對 刪除UIRoot是因為這個對象 是用于調(diào)整GUI大小的而我們這個層級只要顯示一個立方體和一個背景而，如圖所示選擇Camera，使 框在Cmera下創(chuàng)建一個SlicedSprite對象調(diào)整其大小和位置，作為背景，如圖所示 一戲為所下打創(chuàng)建一個空的游對象，并命名為stage，該對象用來使得其子物體能夠自動旋轉(zhuǎn)，把該游戲?qū)ο蠓胖玫?D對象下，成 其子物體，并reset一，如圖所示 一戲為所下打Examle->brick并調(diào)整它的大小，如圖示，選擇stage，

身對 身對 體換拖pI 體換拖pI選擇cube對象為其添加一個SpinWithMouse組件（Comonent->NGU->Example->SpinWithMous）,該組件以使得物體隨著鼠標的 3DDirectionLight景照亮了，這樣場景就漂亮多了，如制制

作GUI部分。使用CreateanewUI框， 一個Simple2D，如建建AnchorAnchorBottomsideBottomPanel，WindowPanelWidgetToolSlicedSprite并調(diào)整它的大小和位是i圖像現(xiàn)在看到視口中間還有一個正方形，這個東西是我們上面那個3D對象層級的背景，我們選擇UIRoot（2D）對象包括其子對象，為其添加一個2DGUIlayer（如何添加Layer和Layer的作用在unity文檔中有描述，這里不再贅述。選擇UIRoot（2D）中的Camera，設置其CullngMask為2DGUI，也就說這個 機只顯示這個Layer中的對象，其他Layer的對象不會在這個攝機中顯示。最后效果如所示是i圖像選擇Windonel，為其添加一個新的Panel（NGUI->createaPanel），并重新命名為ListPanelDragDropContainer，reset添加一個Collider（NGUI->Attachacollider），如圖所示加一個Collider（NGUI->Attachacollider），如圖所示 的0eDragDropContainerItm0，并為其添加一個Collder（NGUI-Attachacollider），接著在Item下創(chuàng)建一個Sprite和一個 的0e 為它所SlicdSprite，成了一個圖標，并調(diào) 們的大小和位置，如圖 為它所選擇Item0，使用Ctrl+D出三個來，并重新命 兩個 兩個 選擇Windonel，來設置這個Panel的可見范圍。把Clip設置成SoftClip，參數(shù)如e列的C e列的C Tabl），該組件可以自動排它的子物體，并調(diào)整它位置，其參數(shù)和效果如接下來，選擇Item0，為其添加一個DragDropItem（Component->NGUI->Example-應ropItem應拖到它的參數(shù)中如圖所示作作后受結(jié) 如參第的現(xiàn)在點擊，拖動Item，果沒有任何效果。來解決這個問題，一，選擇UIRoot（2D）下的Camera，然UICamera組件中的EventReceiverMask數(shù)設置成2DGUI，這樣這個Camera中的消息就只接這個Layer中的消息；下圖后受結(jié) 如參第的第二選擇DragDropContainr，修改一BoxCollider中CenterSize使其覆蓋所有的Item，如下圖綠色框所示中的z值相同，都為0.5，這樣可能造成消息指發(fā)送給DragDropContainer而Item接收不以，把所有Item中的Collider中的Z一些，如圖所示選擇Cube，為其添加一個DragDropSurface組件?，F(xiàn)在點擊，拖動其中的Item，會發(fā)現(xiàn)Item在Panel中了，然后拖到Cube上，哈，效果達到了。如圖所示個。戲item在UIRoot（2D）下創(chuàng)建一個空的游個。戲oAnchr-Center，為其添加一o

Anchor（NGUI->Attachaanchor）,reset 成t選擇Anchor-Center，Panel（NGUI->Createapanel），并為添加一個DragropRoot（Cmponent->NGUI->Example->DrapDropRoot）,請注意UIRoo（2D）中的所有對象的Layer都是2DGUI，如圖所示 成t，ok，功！為窗絡：聊贅個于多輸以為窗絡：聊贅個于多輸以數(shù)NGUI官網(wǎng)示例12–ChatWindow（聊 框，中文入和顯示 游戲中經(jīng)常會用到的GUI之一，它可通過用戶的鍵盤輸入來獲取輸入信 。在NGUI 包 信創(chuàng)建一個TextLit，用于顯用戶輸入信息之后顯 信 性tNGUI>UI->Textist），并置該組件中的Style屬設置成 性t

Label2，，并把TextListTextList屬性，

如果你輸入多行，你會發(fā)現(xiàn)，其TextListTextListLabel，然后把其他的Pivot設置成BottomLeft，這樣便可以使得隨著文字的顯示的增加而選擇Input對象，并把FillwithDummyData選項打開，點擊，這個時候可以通過個選項來控制是能 --Character(角色裝配與儲物箱定，所以NGUI如圖所示：制作該GUI第一步，創(chuàng)建基本的游戲背景；第二步，創(chuàng)建儲物箱界面；第三步創(chuàng)建裝備拖動圖標和裝備提示欄；第四步，實現(xiàn)裝備的裝配。第一步，創(chuàng)建基本的游背景戲）SceneresetUIPanel戲） 件（

NGUIUIPanel

NGUI，n 并成為Scee的子物體如圖所，n 一入制該在Pivot下創(chuàng)建 添加一個UCamera（Coponent->GUI-> 一入制該a->Cmera），該組件主要控a

一模的象e某 效要一模的象e某 效要iscene下創(chuàng)建個空的游戲?qū)ο螅⒚鼮镺rcPivt，resetProjectOrcPrefab（NGUIMode->orc），把它拖到場景中，并成OrcPivot添加完Orc的Prfab之后，調(diào) 機和角色之間的位置，最終scene下創(chuàng)建個空的游戲?qū)ο螅⒚鼮镺rcPivt，resetProjectOrcPrefab（NGUIMode->orc），把它拖到場景中，并成OrcPivot添加完Orc的Prfab之后，調(diào) 機和角色之間的位置，最終果如圖所Orc對，可以看到其組件中有EquipItemInvEqupment組件這兩個組 開調(diào)了c 圖創(chuàng)接著再Pivot下圖創(chuàng)

界第二步創(chuàng)建儲物箱界UITool一個Advanced