中文ngui教程示例详解上下合集

引这 引这，，

能掌握NGU插件的程料本以 程料本以示NGUI例详解（上示 现终现下面一步一步实现图接删除新建的场景的Main 层中新建一个GUI层 图接菜单上的NGUI->CreateanewUI,弹出该框，设置如图所示CreateYourUIHierachy把该Anchor命名为Anchor-Bottom，并为该对象添加一个空游戏对象，并命名为offsetreset它的变换。该空游戏对象可以用于它下面子对象与该Anchor之间的偏移量。offsetNGUI->CreatenewWidgetWidgetAddTooffset。这就在offset成一个Label便签，并把的文本改成Bottom，如图所示：以同样的方法在offset中添加一个slicedsprite。记住该对象的深度应该比LabelLabellabel（depth）0，而slicedsprite为-1，并在编辑器中调节该元素的大小，如图所示：最后一步，选择Anchor-Bottom，设置该元素的对齐方式（side）为“Bottom”。选择之后，它会自动把它自己对其到机的最，我们可以通过offset来调节该元件Anchor之间的偏移量。如图所示：齐到不同的位置上，并在编辑窗口中调整offset的位置，其结果如图所示：最后来制作其背景，新建一个空的游戏对象，并最后Panelreseto-oUIthnh，此时该空游戏对象就成为了一个Anchor，并设置对齐方式为centerAnchor-backgourndwindow所示，window游戏对象只是为了方便管理而设置的一个辅助对象而已。接下来，给他添加一个多行Label，同样使用createWidget框，其数如下在其文本内容框中写入需要的文字当然，因为，所以中文是显示不出来的，如图所示，并把深度（depth）改为-2，把LineWidth设置成500，可以字的宽度。如图所示： 一中其一 的该例子，还有上面一个标题，实也是有一个Label和个slicedSrite组成 中其一的得去E标所钮，，是用word写出来后， 方，请各位灌水同仁批评指正。的得去E标所钮，，二、二、xample2– 其最终效果如图示,当点击ShowonHover新 个场景，并把该场景中的MainCamera删除掉，并通过菜单中NGUI>CreateaewUIUI位，变位，变下在下不不

然以后的GUI

它工e首先先使用Createawidget 具创建一个Sprite，并命名为UISprite-Background，并在 的大小，设置其深度为-5，该Sprit用于作为背景，其参 它工e3DUIWindow，下面来制作WindowCreateawidget，使用UITiledSprite，该元素可以等你放大它的范围时，它会以平铺的方式显示，这样可以资源的体积该其参数如下：使用CreateaWidget中的SlicedSprite，创建标题栏，该元素可以在放大范围时，拉伸创建一个按钮，命名为：button-show，设置该按钮的LabelShow，设置为该Button创建一个空的子物体，并命名为Animation，最后对该空物体添加一个Animation组件（Component->Miscellaneous->Animation），并在project窗口中找到NGUI->Examples->Animations->Button，把该添加到Animation组件中的Animation中。（这个Button）接着把ButtonLabel和Background拖到Animation对象上，成为其子对象，如图所示：Ctrl出另外两个，并置它的位置和颜色，最为ICON，把这个图标拖到Ctrl出另外两个，并置它的位置和颜色，最为ICON，把这个图标拖到ICON设+三后终的示文的示文Button，ButtonLabelHIDEbutton-hide即鼠我现在来完成当标放置在按钮上面时 onHover状态时，它的动画效果。们以即鼠我UIButonyAniation组（菜单中Component-NGUI->Inction->ButtonyAnimtion）。添之后，把该按钮下的Animation赋给该组件中的Target变量，设置TrigerUIButonyAniation组（菜单中Component-NGUI->Inction->ButtonyAnimtion）。添之后，把该按钮下的Animation赋给该组件中的Target变量，设置TrigerOnHovr，点击，当把鼠标置在该按钮上时，可以看到已经有动画效果了，此时可以对比未HideUIButtonyAnimaton图所示：t 放i值对Button-

按，口 按，口并戏 对过和着参个空游戏对象，命名为WindowActiveWindowInactive，这两个对象只包含了对象的变换信息（平移、转和缩放）用这个两个空游对象的变换信息来制作窗口在这两个位置间的平滑渡。首先把该两个游戏3DUI并戏 对过和着参

注所注所

把s 行数选择Window对象，为其添加一个TweenTransform组件（Compoent->NGUI->Tween->Tranform）Transform后，WindowActveWindowInactiveFromTo件的Enable关掉，使Show按钮控制它的打开，具体参如下，如图所示：把s 行数 c c该组件可以使得Target中的Tween类型的动画进行开关。把Window对象赋值给该组件下的Target，并设置yDirection为Forward，Trigger为OnClick，IfDisabledOny为EnableTheny，表示当该动画时，启动Target中的Tween类型动画。这个组件是关可以看到此时的TweenTransformshow现在来完成当点击Hide按钮时，窗口回到原来的位置，同样给该按钮添加一个UIButtonTween组件，把Window对象赋值给该组件下的Target，Trigger设置为OnClick，yDirection设置为Reverse，IfDisabledOny设置为DoNothing。完成之后，点 以上几步就实现了官网上的Inction中窗口位置的平滑变换效果。关键是UIButtonTween和其他的Tween类型之间的连接。最后，把机调整到其他的角度，（没以上几步就实现了官网上的Inction中窗口位置的平滑变换效果。关键是UIButtonTween和其他的Tween类型之间的连接。最后，把机调整到其他的角度，（没交r本B个现在来制作NUI按钮与场景中的对象的 予brick材质（ Project窗口中，NGUI->Example->Materials->bick）,为该立方体添加一个Spin组件（Component->Examples->Spin）,该脚可以实现物体的旋转。再为其添加一个UIButtonScale组件（Component->In ction->uttonScale该组件可以实现当鼠标位于该物体上面时，对该物体进行缩放。最后为其添加一 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，了作用到父物体上而子物体的动画就播不了。，了大这样就差不 大

天的 画点点击试试，摄像机就活起来了。天的 画点 （浙江传媒学院- 学院-数字游戏设专业-张si （浙江传媒学院- 学院-数字游戏设专业-张si切换如图所示：1Advanced3DUIPanelPanel-Main，WindowresetWindow对象如图所示：NGUI2-inctionWindowPanel-MinLabelTypewriterEffect接着一个Panel-Main，并改名为Panel-Option，并把其中的元素进行调整，并使用CreateanewWidgetcheckbox，下拉菜单等。这里讲下下拉菜单的制作，该步骤内容，其中左边的图，Difficulty只是一个空的游戏对象，里面包括了一个自己创建的Label和一个PopupListOptionsPanel-option的z1400，并把它的enable接下来，为其添加一个Sprite背景和左边的Label，与以前面的NGUI官网示例2-in tion-讲解的过程制作出该Window的界面,最终的效果如图所示：Panel-OptionAnimation（Component->Miscellaneous->tion）AnimationWindow-backWindow-forward（点击该变量最右边的小圆圈，可以出现左边的窗口），把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（动画翻转，也就是倒着动画）,IfDisabledOny设置为EnableTheny（被控制的对象的Enable打开并开始加在在此对象上的对象），DisablewhenFinished为DisableAfterForward（当前向完成后，关闭对象的Enable）；在另外一个组件中，设置Target为Panel-Main(需要控制的动画对象)，Trigger为OnClick(点击时触发动画)，ClipName输入Window-Forward，这个是关键。IfDisabledOnyer为EnableTheny，DisableWhenFinished选择Panel-Option中的Button-Done，也同样添加两个为其添加两个（菜单中Component-> yAnimation），并设置如下的参数：如图所示：NGUI制作动态的GUI非常方便，而且添加各种Widget的过程都很类似，可以举一反三。同时只要为某个按钮添加一个UIButtonyAnimation组件，然后设置该组件，便可以控制已经加入Animation组件的动画，这些Animation可以使用Unity的曲线或者程序编写或者第软件来制作。并可以实现向前和反向等功能，并能够控制该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。大功告成！现在再点 ，使用盘的上下键选择Option按钮，点击车，进设置窗口，现在设置窗口，现在样使用键盘上的上下键哈哈，功能完全实现，–NGUI lightsand–这在i EZgui里面也可以。这在i法简了， 单例子。法简了，，当边开不了效，当边开不了效创建一个Sprite其参数如图所示：接着选择Panel，在里面把Normals打 盏平行光。这样法线贴图的效果就出 ， 光源把它放在sprite的左，如图所示：选择该点光源，打开动画窗口（window->Animation）角录画文件的窗口为它起名个示aN的窗n中编中动 个示aN的窗n中编中动 光标拖到 光标拖到1秒钟处，再添加一个关键帧，在场景辑窗口中，把点光源移到的右边，此时，Aimation1关闭 照强度，颜色等动画。最后，在点光源把Animation组件关闭，我们用button animtion组件来触发给动画。选择Sprite，在ui菜单中选择Attachacollider ction->ButtonyAnimation）,并设置其参数如下哈哈，点击，看看。大功告成！帅！在改例子中，关键是使用了refractionaltas,打开这个altas看了以上几个，估计大家对NUI的前几个实例有所了解，建议自己做一遍，这样可以gui 在NGUI菜单中，打开CreateanewUI框,在框中设置Camera为Advanced3D,并点击CreateyourUI，此时在Hierarchy窗口中生成了对应的层次结果，如图所示：调整该层次结果，使得CameraPanel脱离，并且CameraPanelUIRoot（3D）AnchorUIRoot（3D），创建一个Scene空的游戏对象，reset3DUI空游戏对象，reset一下，再创建一个Window游戏对象，reset一下，同时Panel也reset一下，最后调整它们之间的层级结构（不断地reset是为了更好地定位各个元件），Window3DUI等这些空物体只是为了方便管理场景中的元素而已，同时把Camera的postionz选择Panel，为其添加一个带有法线贴图的背景，选择Createanewwidget窗口，选择Temte为TiledSprite模板，Sprite为b作为背景，其参数如下，设置完成之后点击Addto，为该gui添加一个TiledSprite，作为景，保证该按钮后面的值为panel：它黑添加TiledSprite之后，把缩放到x=490，y=510，颜色设置 它黑为了看到法线贴图PanelNormals，并为场景添加一盏平行光，调整光效果如图所示： 窗口的边框，选择Createanew 框，选择 teSprit为Sprite，创建完后，选择该SlicedSpriteDept1ColorTint为绿色，大x=498，y=515稍窗口的边缘出现了绿色的边框，如图 示选整择为g终击 栏，选择CeateanewWidget框，设置参数之后，点 AddTo，创建一个SlicedSprite。创建完之后，择该SlicedSprite，调整它的位置和大小，参数和效果如图所： 示选整择为g终击 择CreateanewWidget框，选 为窗口创建一个Label，在Label的文本输入框中输入ExampleDragableWindow，并在场 置为，位置为，位其添加另外一个或者直接使用Ctrl+D出一个出来，修改linewidth调整它的创建Logo图标。选择CreateanewWidg e ，为NGUI，选择 to，为窗添加一个Logo图标，调整它的位 e ， c文c调创建两个Checkbox。同样选择CreateanewWidget 框，选择tem te中的checkbox，backround设置 Dark，Checkmark为X最后点击Adto，为窗口添加一个Checkbox。选择Checkbox中的Label，把本修改为EnableAutoYaw。再选择Chekbox中的Background，把ColorTint选择为蓝色 整该Checkbox的位置。接着，使用 c文c调

面的文本修改为EnableDragTilt，放置在右 o下+图对 Wo下+图对 W。创建两个按钮。选择CreateanewWidget话框，选择temte中的Button，background选择Button，最后点击Addto，为窗口添加一个按钮选择该按下的label修改文本为o，选择其下的backgrund，设置ColorTin为蓝色，放置在合适的位置接着使用CtrlD，出另外一个button，并把其的label的文本设置为orld，放置在合适的位置。最终效果如所示： 制作gui的动态效果和拖拽功到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）。首先来实现窗口的拖拽功能。因为cdpi），DaOet组件 ction->DragObject）window下的TargetSlicedSpriteNGUI->attachacollider（NGUI就是通过碰撞盒中的触发器方式来进行输入的），结果如图所示：现在移动效果。创建一个空的游戏对象，并把它命名为LagPosition，把它拖到Windowwindow的子物体，resetPanel作为LagPosition子物体。接着为LagPositionLagPosition（Component->NGUI->ExampleLagPosition）。resetPanelYawWindowAutoYaw（Component->NGUI->Example->WindowAutoYaw）。现在点击，可以发现，机会自动地进行Yaw操作。参数和结构如图所示：最后，实现窗口的摇摆效果。创建一个新的空游戏对象，命名为DragTile，并把它作为LagPositionresetPanelDragTileDragTile对象添加一个WindowDragTile组件（Component->NGUI->Example->WindowDragTile）。其参数和结构如图所示：LagPosition、WindowAutoYaw和DragTileUpdateOrder属性，用来控制其更新次序的，数字越大，更新排序越后。我们设置LagPosition1，WindowAutoYaw为2，DragTile为3。这样重新，可以看起来，更加自然了。实现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的流光效果。创建一个空的游戏对象，并命 为Logo，拖到Panel下成为其子对象并调整到窗口中logo的中心位置，着，把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材质球赋值给该元件下面的Material中。最后调整这个元件的位和缩放。最后效果如图示：-NGUI-

愤e择上子景细操NGUI的ScrollViw能够实现鼠标或者手势对图标的滚动操作，现在在很多的游戏中都能够 作在NGUI 现，只要在Panel中加入一个UIDragPanelContents组件，再做些节上的操作就可以了。愤e择上子景细操第们第们

现接，此一片NGUI->CreateanewUI,出UIToolCameraSimple2D，然后点击CreateYourUI，创建原始的GUI不给出截图节约点图。哈哈。构AnchorAnchor-CenterAnchor-Center个空的子名WindowRootreset一下，着把panelPanel-Window，并拖到WindowRoot物体，成为如图所示：现接，此一片现在来完成Panel-Window的制作。创建一个空游戏对象，命名为Background，并成为Panel-Window的子对象，并reset一下。在其下使用Createanewwidget框，创建 b；大小X：770，Y：570；ColorTint为R：255，G：236，B：206，把Atlas为WoodenAtlas，Font为Arimo14，Temte为SlicedSprite，Sprite为Glow-Outer，大X：814，Y614，ColorTintDepth3background件改名为Glow，如图所示：g 得 接下来制作窗口上方Title创建一个空的游戏对象TitleWindowRoot的子对象，要记resetTiledSprite参数为WoodenAtlas，FontArimo14TemteTitedSprie,ColorTintg 得 的SlicedSpriteSpriteGlow-Inner，该元件命为黑色，Depth1，Title的

为Glow，ClorTintbackground ，为。创建一个SlicedSprite，Sprite为Glow-Inner，ColorTint为暗灰色，并命名 调整大小和位置使得它覆盖Title下的background，为。字图最后创建一个Label，参数为Font：Arimo20，Effect为OutLine，颜色为天蓝，这样可 体外框。其文本为ScrollView，最后的结果如 字图o示LabelFont：Arimo18，LineWidth720，Effecto示颜色为黑色，Col颜色为黑色，ColrTint景 创建图标滚动背。创建一个SlicedSprite，参数为 te景 ：Hightlight-Shadow，ColorTint并命名为Outline，如图所示：

724，Y为26，并调整的位置Foreground为Button，Direction为Horizontal所示：这样就创建好基本的窗口了。窗上选择NGUI->CreateaPanelWindowRoot创建一个新的Panel，并命名为PanelClipView。如图所示：创建一个空的游戏对象，命名为UGridPllpiwrt新建一个空的游戏对象，命名为Item1。并作为UIGrid的子对象，并reset一下。如图所接着，使用我们先前学过的创建Widget（这里不再赘述），使用Ctrl+D的方式出9个Item，位置不要紧，等会为UIGrid加上一个组件之后e些后一动t 。样，如 现在选择UIGrid，为它添加一个Grid组件（Componen->NGUI->Ineraction->rid）,这时候神奇的效果出现了，真佩服NGUI的功能，它会自 e些后一动t 。样，如 因为NGUI的 响应是通过Trigger来实现的，所以选择所有的Item(在hierarchy里选择Item1，然按住shift键，再点击Item9，这 就连选了所有的Item元件)，为它们添加一个Trigger，（NGUI->Attachacollider）然后再为它们添加一个DragPanelContnt组件（Component->NGUI->In ction->DragPanelContnts），加这个组件之后就表明这 item是DragPanel的部分（必须添加的）。 ），问动个上 选择PanelClipView，为其添加 Draggablepanel组），问动个上 ），（Coponent->NGI-> ），标终于可以通过鼠标现在这里有一个现在这里有一个题，如果你鼠标左右 下移动时，这些 如图所示PanelClipViewDraggablePanelScaleY和Z设置为0，这样，就可以把拖动方向限制在x轴上。如图所示：最后，大家还记得我们已经做了一个滚动条在下方，我们可以用它来控制item的滚动，很简单，把这个元件赋值给PanelClipView的DraggablePanel组件下的HorizontalScrollBar，就可以了，如上图。点击，现在你可以使用那个滚动条来对item进行滚动了！这样，我们就实现了图标的滚动了。分为三步，第一步是使用GridItem进行排列；第二部是为为PanelDraggablePanelItemTrigger和DragPanelContent。有一个是实现窗口旋转的功能。还有右上角的LogoCamera下创建一个panel。并在这个Panel下创建一个空游戏对象，并命名为Anchor-Bottom，reset一下，为其添加一个Anchor（Ngui->AttachaAnchor），把UIAnchor组件中的Side参数设置成Bottom。在这个Anchor-Bottom下创建一个Checkboxcheckbox下的backgroundColorTintcheckmark,设置其ColorTint颜色为绿色，Label的文本为CenteronItem，最终效果如图所示：k给值首那闭gR调关还k给值首那闭gR调关还t创之选择Panel-Window，为其添加一 背景。在Panel-window 建一个元件参数为 te为SlicedSpriteSprite大owOutlinex158，y258，ColorTint为 整它的位置，最终效果图所示设置Checkbox。先选择checkbox，把UICheckbox组件中的StarsChecked消掉。为checbox添加 ponent组件（Component->NGUI- ction->Compnent）,把UIGrid赋值该组件的TargetponentcedSrite（RowOutline）赋给它的Taret，这样可以打开或者闭该对象。点 现在可以通过checkbox控制 UIGridCenterOnChild（Component->NGUIInction再 时组个G再们CentrOnChild）并关闭它，（这里有一细节，checkboxcontrollercomponenttargt对象的组开关时，它只对第一个件进行控制，所以，我UICenterOnChildUIGridUIrid，然后添加CenterOnChild，再添加UIGrid，把UIGridCheckbox的CheckboxControlComponent再 时组个G再们使用Ctrl+DAnchor-Bottom，改名为Anchor-BottomRight,删除掉其下的checkbox，Side设置成BottomRight。接着，为其添加一个Button元件，并设置它的参数和调整它先选择WindowRoot，为其添加一个TweenRotation组件（Component->NGUI->Tween->Rotation），同时关闭该组件。并设置该组件的属性（这样便给WindowRoot设置了一个旋转的Tween动画，用按钮来触发）如图所示：选择ButtonButtonTween（ComponentNGUIInctionButtonTween），把WindowRoot赋值给该组件的Target，yDirection为Toggle（可以实现翻转，不然你用forward只能点一次了，就再也回不去，可以试试）。注意，Animation用ButtonyAnimation组件，Tween动画用ButtonTween组件。如图所示：现在点击，点击ClickMeClickme下面来实现Logo的弹出与弹入效果。使用Ctrl+D一个Anchor-BottomRight，并把名Anchor-TopRightButtonSideTopRight。如图创建一个SpritespriteTweenPosition（Component->NGUI->Tween->position），为SpriteButtonTween（Component->NGUI->InctionButtonTween）。设置参数为TweenTarget为Sprite，Trigger为OnClick，yDirection为Toggle，如图最后，为该Sprite添加一个Collider（NGUI->AttachaCollider）。点击，哈哈LogoNGUI8Scroll例的SlViw到了Sar备，NI作一个普通的GUIItemCreateanewUINGUI并调整它们的层次关系，并把UIRootPanel组件删除掉，最终如图所示：新建一个新的空游戏对象，并命名为Offset，并放置在anchor成为它的子物体，并reset一下，同时给它添加一个Panel组件（Component->NGUI->Intion->Panel）,这样，该对象才能放置NGUI元件。如图所示:NGUI7ScrollView1个ItemCtrl+D制出9个来，当然你也可以你需要的数量，现在这些Item都是在一起的，最终效OffsetTable（Component->NGUI->InctionTable）。哈，神奇的效果在此出现，只是上一个使用Grid组件，这次使用的是Table，这个TableGrid的不同，可以查下官网的说明。这里不赘述。如图所示：选择第一次创建的GUI结构，选择Window下的TiledSprite在下面创建两个空的游戏对象，并分别命名为BottomRight和TopLeft，这两个空对象用来标记滚动Item的边界，并在场景编辑窗口中放置在对应的位置，最后为该TiledSprite添UIDragCamera（Component->NGUI->Intion->DragCamera）如图所示:并把第一个机赋值给SourceCamera，把TopLeft对象赋值给TopLeft，把BottomRight赋值给BottomRight，然后选择Offset，调整该对象的位置，如图所示：为该机添加一个DraggableCamera组件（Component->NGUI->Inction->再次选择刚才添加了两个空对象的择Window下的TiledSprite，把第二个Camera赋值给该元件中的DragCamera组件中的DraggableCamera，其结果如下接着同样选择该TiledSprite，为其添加一个Collider，这样，才能接受输入信息（NGUI->AttachaCollider）。哈哈。真好Happy，看结果，结果一个点击，成这样了？！虽然GUIAnchorUIAnchor是第二个机，我们现在把它改成第一个机，再点击，WellDone！接着给每个Item添加一个DragCamera组件（Component->NGUI->Inction->DragCamera）和一个Trigger（Ngui->AttachaCollider）。再为其添加一个ButtonScale组件和一个buttonSound组件（都在Component->NGUI->Inction中）最后来实现那个Pressme按钮。首先，选择Window对象，为其添加一个TweenPosisiton>Position，NGUI9这个示例展示的是可伸缩的界面，点击没一个Questn不示窗可本添里。我o其效Gn不示窗可本添里。我o其效G首先先制作出基的界面，这就不再赘述（首先先制作出基的界面，这就不再赘述（可以参考上面的系列在制作背景时，以使用CreateaWidget创建出一个SimpleTexture该组件可以根据口的大小自动调整尺寸注意该层级结构，最终果如图所示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点击之后，其子物就会自动地排列了，神奇！（大家从英文上应该能出这些参数的意思吧，里不赘述了）。如图所示这Quest明Quest1Tween下面的件 ，接着为其添加一个ButtonTween组件（Component-件-o，NGUI>In ctin->ButtonTween）这个组件很熟悉吧，对其他的几个Quest 操作点击 鼠标放在Quest上点击，ok，实现了！其参数如下-o，时， 时，置 置图中x为420，Y为290，softness为X为1 的范围内了。如所示图下创建一个垂直ScrollBar元件，我们现在想当内容超出panel时scollBar才显示出来，我们设置其Alpha为0，最后参数如图所示SubPanelScrollBarSubPanelDraggablePanel（ComponentNGUI- VerticalScrollBar NGUI10–Localization随着游戏的发展，很多游戏都会在多个国家，那么其中有一个很重要的工作就是游altas）。个界面做得有点丑了！在这里有两点要注意，在创建每一个组件的时候，其Font3699Font字库（该字库点击3698font.unitypackage导进Unity中就好了），接着，每一个Label的z轴都要稍微向前平移一些，不然会。那个下拉菜单的Option设置成接着创建两个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文件先留着。创建一个空游戏对象，命名为Localization，并为其添加一个Localization组件（Component->NGUI->Internal->Localization）。打开该组件，把StartingLanguageEnglish，Languagessize2english.txtElement0，把.txt赋值给Element1。如图所示是 了 件把为每个Label（除PopupListLabel）Localize（Component->NGUI->UI->Locaize），打该组件，可以看到该组下面有一个参数为Key，这个参数就是用来设置关键字的，也就txtlabel是 了 件把

VoiceMuicLabelKey）选选择PopList，为其添加一个anguageSelction组件Component->NGUI->In SeletLanguage）。现在点 试试，可以看到，经可以在两个字体之间换了没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 框创建一个Advanced3DUI如图所示l已只r a其，象m把Panel拖出来脱离Ancho父物体，然后改名为3D，接着把Caera作为子物体拖动到Pane下面，reset一下Camea对象，最后删除UIRoot（3D）对 删除UIRoot是因为这个对象 是用于调整GUI大小的而我们这个层级只要显示一个立方体和一个背景而，如图所示选择Camera，使 框在Cmera下创建一个SlicedSprite对象调整其大小和位置，作为背景，如图所示 一戏为所下打创建一个空的游对象，并命名为stage，该对象用来使得其子物体能够自动旋转，把该游戏对象放置到3D对象下，成 其子物体，并reset一，如图所示 一戏为所下打Examle->brick并调整它的大小，如图示，选择stage，

身对 身对 体换拖pI 体换拖pI选择cube对象为其添加一个SpinWithMouse组件（Comonent->NGU->Example->SpinWithMous）,该组件以使得物体随着鼠标的 3DDirectionLight景照亮了，这样场景就漂亮多了，如制制

作GUI部分。使用CreateanewUI框， 一个Simple2D，如建建AnchorAnchorBottomsideBottomPanel，WindowPanelWidgetToolSlicedSprite并调整它的大小和位是i图像现在看到视口中间还有一个正方形，这个东西是我们上面那个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下创建一个Sprite和一个 的0e 为它所SlicdSprite，成了一个图标，并调 们的大小和位置，如图 为它所选择Item0，使用Ctrl+D出三个来，并重新命 两个 两个 选择Windonel，来设置这个Panel的可见范围。把Clip设置成SoftClip，参数如e列的C e列的C Tabl），该组件可以自动排它的子物体，并调整它位置，其参数和效果如接下来，选择Item0，为其添加一个DragDropItem（Component->NGUI->Example-应ropItem应拖到它的参数中如图所示作作后受结 如参第的现在点击，拖动Item，果没有任何效果。来解决这个问题，一，选择UIRoot（2D）下的Camera，然UICamera组件中的EventReceiverMask数设置成2DGUI，这样这个Camera中的消息就只接这个Layer中的消息；下图后受结 如参第的第二选择DragDropContainr，修改一BoxCollider中CenterSize使其覆盖所有的Item，如下图绿色框所示中的z值相同，都为0.5，这样可能造成消息指发送给DragDropContainer而Item接收不以，把所有Item中的Collider中的Z一些，如图所示选择Cube，为其添加一个DragDropSurface组件。现在点击，拖动其中的Item，会发现Item在Panel中了，然后拖到Cube上，哈，效果达到了。如图所示个。戏item在UIRoot（2D）下创建一个空的游个。戏oAnchr-Center，为其添加一o

Anchor（NGUI->Attachaanchor）,reset 成t选择Anchor-Center，Panel（NGUI->Createapanel），并为添加一个DragropRoot（Cmponent->NGUI->Example->DrapDropRoot）,请注意UIRoo（2D）中的所有对象的Layer都是2DGUI，如图所示 成t，ok，功！为窗络：聊赘个于多输以为窗络：聊赘个于多输以数NGUI官网示例12–ChatWindow（聊 框，中文入和显示 游戏中经常会用到的GUI之一，它可通过用户的键盘输入来获取输入信 。在NGUI 包 信创建一个TextLit，用于显用户输入信息之后显 信 性tNGUI>UI->Textist），并置该组件中的Style属设置成 性t

Label2，，并把TextListTextList属性，

如果你输入多行，你会发现，其TextListTextListLabel，然后把其他的Pivot设置成BottomLeft，这样便可以使得随着文字的显示的增加而选择Input对象，并把FillwithDummyData选项打开，点击，这个时候可以通过个选项来控制是能 --Character(角色装配与储物箱定，所以NGUI如图所示：制作该GUI第一步，创建基本的游戏背景；第二步，创建储物箱界面；第三步创建装备拖动图标和装备提示栏；第四步，实现装备的装配。第一步，创建基本的游背景戏）SceneresetUIPanel戏） 件（

NGUIUIPanel

NGUI，n 并成为Scee的子物体如图所，n 一入制该在Pivot下创建 添加一个UCamera（Coponent->GUI-> 一入制该a->Cmera），该组件主要控a

一模的象e某 效要一模的象e某 效要iscene下创建个空的游戏对象，并命为OrcPivt，resetProjectOrcPrefab（NGUIMode->orc），把它拖到场景中，并成OrcPivot添加完Orc的Prfab之后，调 机和角色之间的位置，最终scene下创建个空的游戏对象，并命为OrcPivt，resetProjectOrcPrefab（NGUIMode->orc），把它拖到场景中，并成OrcPivot添加完Orc的Prfab之后，调 机和角色之间的位置，最终果如图所Orc对，可以看到其组件中有EquipItemInvEqupment组件这两个组 开调了c 图创接着再Pivot下图创

界第二步创建储物箱界UITool一个Advanced