NGUI官网示例详解(下).doc

NGUI官网示例详解 （下）NGUI官网示例8 Scroll View(Camera)在上一个示例中的ScrollView使用到了Shader的处理，而对于一些低端的机器或者移动设备可能会出现显示不正常的结果，所以，NGUI还为我们准备了另外一个处理方式，也就是通过摄像机的移动来达到同样的目的。接下来，这个示例就是告诉大家如何实现这个功能。首先先制作一个普通的GUI界面，这些界面在上面的教程中已经说过，这里就不再赘述，其最终效果如图所示：现在来制作那些可以滚动的Item结构。使用Create a new UI创建一个NGUI基本结构，并调整它们的层次关系，并把UIRoot下的Panel组件删除掉，最终如图所示：新建一个新的空游戏对象，并命名为Offset，并放置在anchor成为它的子物体，并reset一下，同时给它添加一个Panel组件（Component-NGUI-Interation- Panel）,这样，该对象才能放置NGUI元件。如图所示:同NGUI官网示例7- ScrollView讲解一样，创建1个Item元件，然后用Ctrl+D的方法复制出9个来，当然你也可以复制你需要的数量，现在这些Item都是重叠在一起的，最终效果如图所示：选择Offset，为其添加一个Table组件（Component-NGUI-Interaction - Table）。哈，神奇的效果在此出现，只是上一个教程使用Grid组件，这次使用的是Table，这个Table和Grid的不同，可以查下官网的说明。这里不赘述。如图所示：选择第一次创建的GUI结构，选择Window下的TiledSprite，如图所示：在下面创建两个空的游戏对象，并分别命名为BottomRight和TopLeft，这两个空对象用来标记滚动Item的边界，并在场景编辑窗口中放置在对应的位置，最后为该TiledSprite添加一个UIDragCamera组件（Component-NGUI-Interation - DragCamera）如图所示:选择第二个Camera，为其添加一个ViewCamera组件（Component-NGUI-UI- ViewCamera）,并把第一个摄像机赋值给SourceCamera，把TopLeft对象赋值给Top Left，把BottomRight赋值给Bottom Right，然后选择Offset，调整该对象的位置，如图所示：为该摄像机添加一个DraggableCamera组件（Component-NGUI-Interaction- DraggableCamera）,并为其设置参数，如图所示再次选择刚才添加了两个空对象的择Window下的TiledSprite，把第二个Camera赋值给该元件中的DragCamera组件中的DraggableCamera，其结果如下接着同样选择该TiledSprite，为其添加一个Collider，这样，才能接受输入信息（NGUI- Attach a Collider）。哈哈。真好Happy，看结果，结果一个点击播放，成这样了？！虽然能够接受到输入信息，但是，死活拖不动原来，在第二个GUI结构中的Anchor对象中，原来默认组件UIAnchor中的参数UICamera是第二个摄像机，我们现在把它改成第一个摄像机，再点击播放，Well Done！成功了！接着给每个Item添加一个DragCamera组件（Component-NGUI- Interaction - DragCamera）和一个Trigger（Ngui-Attach a Collider）。再为其添加一个ButtonScale组件和一个buttonSound组件（都在Component-NGUI-Interaction中）最后来实现那个Press me按钮。首先，选择Window对象，为其添加一个TweenPosisiton组件（Component-Tween-Position），并关闭它（我们将用按钮来开启它），并设置它的参数，如图所示NGUI官网示例9 QuestLog这个示例展示的是可伸缩的界面，点击没一个Quest，可以把里面的内容展开。如图所示：首先先制作出基本的界面，这里就不再赘述（可以参考我上面的系列教程），在这里提一下，在制作背景时，可以使用Create a Widget创建出一个SimpleTexture，贴上合适的材质之后，不要缩放和移动它，为它添加一个Stretch组件（Component-NGUI-UI - Stretch），该组件可以根据窗口的大小自动调整尺寸。注意该层级结构，最终效果如图所示接下来就是这个示例的重头戏了。选择Quest Log，并为其创建一个新的Panel（NGUI-Create a panel），并命名为SubPanel，如图所示选择SubPanel，创建一个空的游戏对象，作为它的子物体，并命名为Table。该对象将来用于排列它的所有子对象的位置，现在暂时不管。如图所示选择Table对象，创建一个空的游戏对象，作为它的子物体，并命名为Quest1，reset一下。如图所示选择Quest1，为其添加一个Lable和一个SlicedSprite，最终效果如图所示选择Quest1，创建一个空的游戏对象，并命名为Tween，成为它的子对象，reset一下，并在Tween下创建一个Label，并输入文字描述，最终效果如图所示首先先把Tween对象的Enable关掉，再使用同样的方式再制作出三个这样的Quest出来，我这里偷懒，直接使用Ctrl+D复制出2个来，并命名为Quest2和Quest3。不用去管它的位置，如图所示选择Table对象，为其添加一个Table组件（Component-NGUI-Interaction-Table），并设置Colomn参数为1，Direction为Down，Padding的Y为4，Sorted、Hide Inactive和Keep Within Panel勾选上，点击播放之后，其子物体就会自动地排列了，神奇！（大家从英文上应该能看出这些参数的意思吧，这里不赘述了）。如图所示接下来实现点击这些Quest时，会自动展开其下面的说明。选择Quest1下面的Tween对象，为其添加一个TweenScale组件（Component-NGUI-Tween-Scale），并设置其参数如图示选择Quest1下面的SlicedSprite，为其添加一个Trigger组件（NGUI-Attach a collider）用来接收输入事件，接着为其添加一个Button Tween组件（Component- NGUI-Interaction-Button Tween）这个组件很熟悉吧，对其他的几个Quest进行类似的操作，点击播放，鼠标放在Quest上点击，ok，实现了！其参数如下如果你三个Quest同时展开，会发现，此时内容都漏出来了，呵呵，霸气外漏！我们来解决这个问题。选择SubPanel，设置其Panel组件中的Clipping为SoftClip，并设置它的size中x为420，Y为290，softness为X为1，Y为8，然后点击再播放，哈，内容在这个设置的范围内了。如图所示问题又来了，我想看下面的内容呢。那么我们可以给他添加一个ScrollBar滚动条。在Quest Log下创建一个垂直ScrollBar元件，我们现在想当内容超出panel时scollBar才显示出来，我们设置其Alpha为0，最后参数如图所示现在来连接SubPanel和ScrollBar。选择SubPanel，为其添加一个DraggablePanel组件（Component- NGUI-Interaction-DraggablePanel）。然后把ScrollBar对象赋值给VerticalScrollBar，如图所示OK，其拖动功能就搞定了！这个示例当中还有一个拖动窗口的效果，这里效果在以前的教程中已经讲过。NGUI官网示例10 Localization讲解-中英文转换随着游戏国际化的发展，很多游戏都会在多个国家发行，那么其中有一个很重要的工作就是游戏的本土化，包括里面的文字，画面，情节等等都要符合该国的语言和文化以及法律等等。那么在NGUI中，我们的本土化最主要的就是语言的显示。那么，在该教程中，我将根据NGUI的官网教程，实现英文和中文的转换（我们要摒弃那个好像是德文的例子，呵呵，那个德国国旗暂时不改了，等说道制作altas再来了解）。首先先制作一个窗口背景，我这里只用简单的窗口来表示，不关注美术方面的问题，我表示这个界面做得有点丑了！在这里有两点要注意，在创建每一个组件的时候，其Font参数为3699Font字库（该字库点击下载3698font.unitypackage导进Unity中就好了），接着，每一个Label的z轴都要稍微向前平移一些，不然会消失。那个下拉菜单的Option设置成Language，如图所示接着创建两个txt文件，命名为English.txt和Chinese.txt。我们将从这两个txt文件中获取文字描述。我建议不要用monodevelop编辑器来操作，因为它支持中方字体实在太糟糕，我选用UltraEditor编辑器来做，有人说动用visualStudio，这样有点大材小用了。English.txt文件内容如下:Flag = Flag-USLanguage = EnglishEnglish = Englishchinese = 中文Info = Localization exampleSoundMusicDesc = English localizationParagraph = This example shows how to implement localization using NGUI. In order to localize a widget, simply attach 000000UILocalize- script to it. The script will localize the sprite if its a 000000UISprite-, or the text if its a 000000UILabel-. If you want to localize something else, just implement the 000000OnLocalize- function. Either way, the actual data is defined via text assets specified on the 000000Localization- script which must be present in the scene.Chinese.txt内容如下:Flag = Flag-FRLanguage = 中文English = EnglishChinese = 中文Info = 本土化示例Sound = 音效Music = 音乐Desc = 中文本土Paragraph = 老人与海写的是老渔夫桑地亚哥在海上的捕鱼经历，描写老人制服大鱼后，在返航途中又同鲨鱼进行惊险的搏斗，然而作品中的形象却具有很强的象征意蕴。他用大马哈鱼象征人生的理想和人类作为生命本身所不可避免的所具有的欲望，用鲨鱼象征无法摆脱的悲剧命运，用大海象征变化无常的人类社会，而狮子则为勇武健壮，仇视邪恶，能创造奇迹的象征，桑地亚哥则是人类中的勇于与强大势力搏斗的“硬汉子”代表，他那捕鱼的不幸遭遇象征人类总是与厄运不断抗争却无论如何都无法试图去改变命运。这两个txt文件先留着。创建一个空游戏对象，命名为Localization，并为其添加一个Localization组件（Component-NGUI-Internal-Localization）。打开该组件，把Starting Language设置成English，Languages中的size设置成2，把english.txt赋值给Element0，把chinese.txt赋值给Element1。如图所示为每个Label（除了PopupList中的Label）添加一个Localize组件（Component-NGUI-UI- Localize），打开该组件，可以看到该组件下面有一个参数为Key，这个参数就是用来设置关键字的，也就是在txt中“=”号前面的名称。我们把这些label一一中的Key设置成我们需要的关键字（Voice和Music的Label只要添加这个组件，不用为它的Key赋值），例如如图所示选择PopList，为其添加一个LanguageSelection组件（Component-NGUI-Interaction- Select Language）。现在点击播放试试，可以看到，已经可以在两个字体之间转换了现在只剩下国旗没换了，选择国旗的Sprite，也为其添加一个Localize组件，设置其key为Flag。这些key都和txt文件中的key一一对应的。点击播放，ok，成功。现在剩下最后一个问题，当你选择那个下拉菜单时，文字会消失掉，通过观察发现，下拉菜单在点击之后会新建一个名为Drop-down List的新游戏对象，如图所示选择里面的label，会发现，那些label的z轴都在0的数值上，我们前面已经提到，如果要显示中文字体，需要把这些label的位置往外拉出一些，在该例子中将成为负值。我本来想修改下它的源代码，后来发现，只要把窗口的背景往后挪一些就ok了，好，那么我们把这个窗口的背景往后挪1个单位，如图所示Ok，问题解决！还有，我看下拉菜单里面那个chinese太碍眼了，如果那些对英文一窍不通的人，都不知道chinese到底是什么东西，所以，我索性把chinese.txt文件名改成”中文.txt”(没双引号的,不要忘了把改完名的txt文件重新复制给Localization中的element1)。哈哈，居然这样也可以，最后效果如下NGUI官网示例11 Drag ; Drop（图标与物体拖拽放置）游戏中经常会用到储物箱等GUI，GUI的一边是物品的图标，另一边是一个角色，你可以拖动这些图标放置到角色上，为它装配装备。那么我们首先来实现较为简单的Drag;Drop功能。如图所示：首先来制作三维的场景：使用Create a new UI对话框创建一个Advanced3D UI，如图所示：把Panel拖出来，脱离Anchor父物体，然后改名为3D，接着把Camera作为子物体拖动到Panel下面，reset一下Camera对象，最后删除UI Root（3D）对象和Anchor对象，这里删除UIRoot是因为这个对象只是用于调整GUI大小的，而我们这个层级只要显示一个立方体和一个背景而已，如图所示选择Camera，使用WidgetTool对话框在Camera下创建一个SlicedSprite对象，调整其大小和位置，作为其背景，如图所示创建一个空的游戏对象，并命名为stage，该对象用来使得其子物体能够自动旋转，把该游戏对象放置到3D对象下，成为其子物体，并reset一下，如图所示在stage下创建一个Cube，并为该Cube赋予一个brick材质，在project窗中，打开NGUI- Example-brick。并调整它的大小，如图所示选择stage对象，调整它的位置，如图所示再次选择stage对象，为它添加一个spin组件（Component-NUI-Example-spin），这个组件可以旋转自身，并设置其参数，点击播放，可以看到立方体旋转起来了。当然这里大家应该知道，子物体会继承父物体的所有变换（平移、缩放和旋转）。如图所示选择cube对象，为其添加一个SpinWithMouse组件（Component-NGUI-Example-Spin With Mouse）,该组件可以使得物体随着鼠标的拖动而转动，如图所示在3D对象下创建一个Direction Light，这样就把场景照亮了，这样场景就漂亮多了，如图所示接下来，我们来制作GUI部分。使用Create a new UI对话框，创建一个Simple 2D，如图所示把Anchor对象改名为Anchor Bottom，并设置其side参数为Bottom。如图所示选择Panel，改名为Window Panel，使用WidgetTool创建一个SlicedSprite，设置参数，并把该元件改名为background，并调整它的大小和位置，如图所示现在看到视口中间还有一个正方形，这个东西是我们上面那个3D对象层级的背景，我们选择UIRoot（2D）对象包括其子对象，为其添加一个2DGUI layer（如何添加Layer和Layer的作用在unity文档中有描述，这里不再赘述）。选择UIRoot（2D）中的Camera，设置其Culling Mask为2DGUI，也就是说这个摄像机只显示这个Layer中的对象，其他Layer的对象不会在这个摄像机中显示。最后效果如图所示选择WindowPanel，为其添加一个新的Panel（NGUI-create a Panel），并重新命名为ListPanel，如图所示为ListPanel创建一个空的游戏对象，并命名为DragDropContainer，reset一下，并为它添加一个Collider（NGUI-Attach a collider），如图所示为ListPanel创建一个空的游戏对象，并命名为DragDropContainer，reset一下，并为它添加一个Collider（NGUI-Attach a collider），如图所示在DragDropContainer对象下创建一个空的游戏对象，并命名为Item0，并为其添加一个Collider（NGUI-Attach a collider），接着在Item0下创建一个Sprite和一个SlicedSprite，构成了一个图标，并调整它们的大小和位置，如图所示选择Item0，使用Ctrl+D复制出三个来，并重新命名为Item1，Item2和Item3，位置没有关系，并把其中的两个Item中的sprite换个图片，如图所示选择WindowPanel，来设置这个Panel的可见范围。把Clipping设置成SoftClip，参数如下选择DragDropContainer，为其添加一个Table组件（Component-NGUI-Interaction- Table），该组件可以自动排列它的子物体，并调整它的位置，其参数和效果如下接下来，选择Item0，为其添加一个DragDropItem（Component-NGUI-Example-Drag atl+DropItem），这个组件可以跟已经保存好的Prefab连接起来，把NGUI中的对应的prefab拖到它的参数中，如图所示对其他的Item进行相似的操作，只是Prefab的参数不同而已。现在，点击播放，拖动Item，结果没有任何效果。来解决这个问题，第一，选择UIRoot（2D）下的Camera，然后把UICamera组件中的EventReceiverMask中的参数设置成2DGUI，这样这个Camera中的消息就只接受这个Layer中的消息；如下图第二，选择DragDropContainer，修改一下里面的BoxCollider中的Center和Size参数，使其覆盖所有的Item，如下图绿色框所示，接着，选择Item，会发现，其中的Collider中的Center中的Z值，其值与DragDropContainer中的z值相同，都为0.5，这样可能造成消息指发送给DragDropContainer而Item接收不到鼠标消息，所以，把所有Item中的Collider中的Z值往外移动一些，如图所示选择Cube，为其添加一个DragDropSurface组件。现在点击播放，拖动其中的Item，会发现Item在Panel中消失了，然后拖到Cube上，哈，效果达到了。如图所示现在在实现item拖动的效果。在UIRoot（2D）下创建一个空的游戏对象，并命名为Anchor-Center，为其添加一个Anchor（NGUI-Attach a anchor）,并reset一下，如图所示选择Anchor-Center，在其下添加一个Panel（NGUI-Create a panel），并为其添加一个DragDropRoot（Component-NGUI-Example-Drap Drop Root）,请注意UI Root（2D）中的所有对象的Layer都是2DGUI，如图所示点击播放，ok，成功！NGUI官网示例12 Chat Window（聊天对话框，中文输入和显示）聊天对话框是网络游戏中经常会用到的GUI之一，它可以通过用户的键盘输入来获取输入信息并发送到其他的游戏客户端中。当然，聊天对话框的用途还有很多。在NGUI中，也为我们创建聊天对话框提供了方便，如图所示：首先先床架一个窗口层次结构，这里不再赘述，请看前面的教程。在里面的Label中，我使用了中文的字体为3698Font包3698font.unitypackage，如图所示为该窗口创建一个Input元件，该元件用于接收用户的输入，其参数如下创建一个TextList，用于显示用户输入信息之后显示信息。新建一个空的游戏对象，并命名为TextList，并成为Window的子物体，同时reset一下；一个TextList组件（Component- NGUI-UI-Text List），并设置该组件中的Style属性设置成Chat，如图所示为该TextList对象添加一个Label和一个SlicedSprite，注意SlicedSprite和Label之间的深度关系，Label的深度值应该比SlicedSprite大，如Label为2，那么SlicedSprite为2，如图所示选择Input对象，为其添加一个Chat Input组件（Component-NGUI-Interal-chat Input），并把TextList对象赋值给TextList属性，如图所示点击播放，ok！你在输入框中输入中文和英文都可以正常显示！如图所示如果你输入多行，你会发现，其TextList中的文字不会自动往上，现在选择TextList中的Label，然后把其他的Pivot设置成BottomLeft，这样便可以使得随着文字的显示的增加而不断往上升了。如图所示选择Input对象，并把Fill with Dummy Data选项打开，点击播放，这个时候可以通过这个选项来控制是否显示测试文字，如图所示可以看出文字都跑外面去了，选择TextList，在UITextList组件中，设置其MaxWidth和MaxHeight，这个可以设置其显示文本的最大高度和最大宽度。如图所示OK！搞定。中文输入不知道在移动设备中能否支持，希望各位同仁提提意见！NGUI官网示例13 - Character(角色装配与储物箱) 储物箱和角色装配装配在游戏当中可以实现人物外观的自定义，其用途非常广泛，例如魔兽当中的角色自设定，所以NGUI也提供了这样的功能，如图所示：我们将分四步来制作该GUI。第一步，创建基本的游戏背景；第二步，创建储物箱界面；第三步，创建装备拖动图标和装备提示栏；第四步，实现装备的装配。第一步，创建基本的游戏背景创建一个空的游戏对象，并命名为Scene，同时reset一下。接着为其添加一个UIPanel组件（Component - NGUI - UI - Panel）。这样，我们就可以在其地下添加各种NGUI元件了。如图所示：新建一个空的游戏对象，并命名为Pivot，reset一下，并成为Scene的子物体，如图所示在Pivot下创建一个摄像机，并为该摄像机添加一个UICamera（Component - NGUI - UI - Camera），该组件主要控制该摄像机能够接受的输入方式，比如鼠标，键盘等等。如图所示选择Camera，打开Widget Tool对话框，在Camera下创建一个Simple Texture。创建完成之后，在Project窗口中把NGUI - Materials - Backrop材质付给其UITexture组件中的Material，并调整其大小和位置，这样背景就做好了，最后效果如图所示在scene下创建一个空的游戏对象，并命名为Orc Pivot，reset一下。在Project中找到Orc 的Prefab（NGUI - Model - orc），把它拖到场景中，并成为Orc Pivot的子对象。添加完Orc 的Prefab之后，调整摄像机和角色之间的位置，最终效果如图所示大家选择Orc对象，可以看到其组件中有EquipItem组件和InvEquipment组件，这两个组件分别用于装备的转配和卸装。如果要向某个对象装配对象时，需要这两个组件。这里这个Orc模型已经为我们添加了这两个组件。接着再Pivot下创建一个Directional Light灯光，照亮场景，这样，我们的角色和背景就添加完成了，如图所示第二步创建储物箱界面使用UI Tool创建一个Advanced 3D UI结构，Layer 为GUI（如果没有该GUI层，可以在Layer添加面板中添加），如图所示：把Panel和Camera分离出来，接着删除UIRoot（3D）和Anchor对象，并把Camera调整成为Panel的子物体，最后把Panel改名为3DUI，Camera命名为3DUICamera，最后如图所示在3DUI下创建一个空的子物体，并命名为Scale，reset一下，如图所示在Scale下创建一个空的游戏对象，并命名为Shoulders，reset一下。接着在其下创建一个Sliced sprite元件，并命名为Background，其Sprite为Flat Outline，并调整其大小和位置，如图所示接着，同样在Shoulders下，创建一个Label，并命名为Caption，并为其输入Shoulder字样，并调整它的位置，如图所示同样在Shoulders下，创建一个Sprite，sprite为Orc Armor-should，并命名为Icon，并调整它的位置，如图所示使用同样的方法，创建另外两个图标，分别命名为：Boots，Bracers，并修改其Icon和Caption的图片和文字，最终效果如下选择Scale，在其下创建一个Button元件，并命名为Random Button，并设置其Label文本和背景颜色以及整个按钮大小位置，最终效果如图所示在Scale下创建一个空的游戏对象，并命名为Backpack。接着在其下，创建一个Label元件，并把文本设置成Backpack，最后调整Backpack的位置，如图所示第三步创建装备拖动图标和装备提示栏该部分主要是为实现装备在拖动的时候出现拖动图标的效果和当鼠标放置在装备上时提示装备的一些信息而做准备。使用UI Tool创建一个Simple 2D UI层级结构，其Layer为2DGUI，我们通过不同的图层的设置让摄像机只显示我们设定的图层中的对象，有点像photoshop中的图层，如图所示调整该结构，把Panel和Camera从UIRoot（2D）中分离出来，接着删除UIRoot（2D）和Anchor对象，接着把Camera放置到Panel中成为其子物体。并命名Panel为2D UI，Camera命名为2D UI Camera。最后为2DUI添加一个Root组件（Component-NGUI-UI- Root）如图所示制作拖动图标的参考对象。在2DUI对象下，创建一个空的游戏对象，并命名为Anchor-Center，并reset一下，接着为该对象添加一个Anchor组件（NGUI-Attach a anchor）,并把2D UI Camera赋值给该组件下的UI Camera，这样这个Anchor才能找到与这个摄像机对齐， 如图所示在Anchor-Center下面添加一个空的游戏对象，并命名为Cursor，reset一下。接着为其添加一个Sprite组件（Component-NGUI-UI-Sprite）,接着为其添加一个UICursor组件（Component-NGUI-Example-Cursor），这样NGUI才能够识别出将来的拖动图标是使用了哪个对象，如图所示接下来创建装备提示窗口。在Anchor-Center下创建一个空的游戏对象，并命名为Tooltip，reset一下，接着在其下创建一个SliceSprite元件和一个Label元件，并修改这两个元件的Pivot为LeftTop如图所示接着为ToolTip对象添加一个Tooltip组件（Component-NGUI-UI-UITooltip），接着把刚才我们创建的Table和SlicedSprite赋值给该组件中的Text和Background，该组件可以帮助我们实现动态显示装备说明的功能第四步实现装备的装配选择Shoulders对象，为其添加一个EquipmentSlot（Component-NGUI-Example- EquipmentSlot）,并把shoulders中的各个子对象赋值给该组件对应的变量中，再为其添加音效，最后把场景中Orc对象赋值给Equipment，表示要把装备装配到该物体上，接着在slot中选择shoulders，如图所示为该元件添加一个按键动画，选择Shoulders，并添加一个Button Scale（Component- NGUI-Interaction-Button Scale）,并为该按键添加一个Collider（NGUI-）Attach a collider）如图所示为其他的Boots和Bracers做相似的操作选择Random