NGUI官网示例3--Menu讲解

你的名字 2022-04-14 03:28 240阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <a href="http://game.ceeger.com/forum/read.php?tid=4172" rel="nofollow"><span style="color:#0070af">NGUI官网示例3--Menu讲解</span></a> 
      <br> NGUI例子制作过程，由笔者参照NGUI的例子重新自己做了一遍，以加深对NGUI用法的理解。（建议先看下官网的基础教程，对NGUI有初步了解之后，再看这个帖子。）该贴需要前面我写的内容，请有兴趣的童鞋先熟悉前面的做法，再看本帖。哈哈 
      <br> Example3-Menu 
      <br> 其最终效果是窗口中的Label文字出现打字效果，当按下Options按钮时，两个窗口会来回切换，如图所示： 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/thumb/Mon_1209/16_7487_2709035f2af5628.png?176" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:1.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 按照前面三个帖子的前几步，制作出基本的Advanced3D类型的UI，并把Panel重命名为Panel-Main，并为其添加一个空的游戏对象，命名为Window，最后reset下那个Window空对象，如图所示： 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/Mon_1209/16_7487_3b354d909b6a987.png?13" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:2.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 接下来，以前面的NGUI官网示例2-interaction-讲解的过程制作出该Window的界面（此处有点偷懒，不过步骤与上面的论坛一样，所以也省略了一些，而且再加上一个帖子的图片个数有限，所以尽量节约图片，这里给出地址 
      <a href="http://game.ceeger.com/forum/read.php?tid=4179" rel="nofollow"><span style="color:#0070af">http://game.ceeger.com/forum/read.php?tid=4179</span></a> ），如图所示： 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/Mon_1209/16_7487_85c1f105854e413.png?148" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:3.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 
      <br> 同时，为Panel-Main中的文字Label添加一个TypewriterEffect组件，这样一步就能实现打字效果，可以点击运行试试看。是不是很帅！ 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/thumb/Mon_1209/16_7487_98309a2eb85ad54.png?256" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:12.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 接着复制一个Panel-Main，并改名为Panel-Option，并把其中的元素进行调整，并使用Create a new Widget添加拖动条，checkbox，下拉菜单等。这里讲下下拉菜单的制作，该步骤与添加其他的Widget一样，只是在参数中，可以使用该组件中的Option参数设置下拉菜单的内容，其中左边的图，Difficulty只是一个空的游戏对象，里面包括了一个自己创建的Label和一个PopupList，在左边的Options参数中设置了四个选项，前面中括弧括起来的是该选项的颜色，如图所示： 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/thumb/Mon_1209/16_7487_e3c3e2580ac5030.png?81" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:4.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> Panel-Option最后的效果，如图所示： 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/Mon_1209/16_7487_c92a77c0b1c3c93.png?193" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:5.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 设置完成之后，把该Panel-option的z轴的值设置成1400，并把它的enable关掉，如图所示： 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/Mon_1209/16_7487_20e4f1357ac3990.png?10" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:6.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 接下来，为其添加一个Sprite背景和左边的Label，与以前面的NGUI官网示例2-interaction-讲解的过程制作出该Window的界面（此处有点偷懒，不过步骤与上面的论坛一样，所以也省略了一些，而且再加上一个帖子的图片个数有限，所以尽量节约图片，这里给出 
      <a href="http://game.ceeger.com/forum/read.php?tid=4179" rel="nofollow"><span style="color:#0070af">http://game.ceeger.com/forum/read.php?tid=4179</span></a> ）最终的效果如图所示： 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/thumb/Mon_1209/16_7487_0f8371e3d71ab2d.png?331" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:7.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 
      <br> &nbsp;&nbsp; 
      <span style="font-family:宋体">在</span> 
      <span style="font-family:Calibri">Panel-Option</span> 
      <span style="font-family:宋体">中，为其添加一个</span> 
      <span style="font-family:Calibri">Animation</span> 
      <span style="font-family:宋体">组件（</span> 
      <span style="font-family:Calibri">Component-&gt;Miscellaneous-&gt; Animation</span> 
      <span style="font-family:宋体">），<span style="color:#ff0000">并把</span></span> 
      <span style="color:#ff0000"><span style="font-family:Calibri">Animation</span><span style="font-family:宋体">的变量设置成</span><span style="font-family:Calibri">Window-back</span><span style="font-family:宋体">动画和</span><span style="font-family:Calibri">Window-forward</span></span> 
      <span style="font-family:宋体"><span style="color:#ff0000">动画</span>（点击该变量最右边的小圆圈，可以出现左边的窗口），把</span> 
      <span style="font-family:Calibri">Play Automatically</span> 
      <span style="font-family:宋体">关掉，如图所示：</span> 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/Mon_1209/16_7487_bd15489aa616a53.png?28" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:8.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 使用同样的方法，在Panel-Main中，也添加一个Animation组件（Component-&gt;Miscell aneous-&gt;Animation）， 
      <span style="color:#ff0000">并在Animation变量中设置为Window-back和Window-forward动画</span>，如图所示： 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/Mon_1209/16_7487_02d2ff9516381e8.png?18" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:9.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 
      <span style="font-size:14px">选择Button-Option按钮，为其添加两个（菜单中Component-&gt;NGUI-&gt;Interaction-&gt;Button Play Animation），在第一个组件中，设置Target为Panel-Options（Animation）直接把Panel-Options拖到里面就好了，<span style="color:#ff0000">Clip Name输入Window-Back，这个是关键（记得刚才设置两个window都设置了两个动画吧，这个用来播放其中的一个动画，只要动画的名称不出错）</span>。Trigger为OnClick，PlayDirection为Reverse（动画播放翻转，也就是倒着播放动画）, If Disabled On Play 设置为EnableThenPlay（被控制的对象的Enable打开并开始播放加在在此对象上的对象），Disable when Finished为DisableAfterForward（当前向播放完成后，关闭对象的Enable）；在另外一个组件中，设置Target为Panel-Main(需要控制的动画对象)，Trigger为On Click(点击时触发动画)，<span style="color:#ff0000">Clip Name输入Window-Forward，这个是关键</span>。If Disabled On Player为EnableThenPlay，Disable When Finished为DisableAfterForward。如图所示：</span> 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_1426e74b137dae8.png?44" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:13.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 选择Panel-Option中的Button-Done，也同样添加两个为其添加两个（菜单中Component-&gt;NGUI-&gt;Interaction-&gt;Button Play Animation），并设置如下的参数：如图所示： 
      <br> 
      <span><span style="display:inline-block"><img src="http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_86195daf76d03fd.png?45" alt="" style="max-width:726px; max-height:700px"></span> </span> 
      <div style=""> 
       <div style="z-index:1; position:absolute"> 
        <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
         <p><span>图片:14.png</span></p> 
        </div> 
       </div> 
      </div> 
      <br> 这样便大功告成了！点击运行试试看。总结上面的三个帖子，可以想象得出，使用NGUI制作动态的GUI非常方便，而且添加各种Widget的过程都很类似，可以举一反三。同时只要为某个按钮添加一个UIButton PlayAnimation组件，然后设置该组件，便可以控制已经加入Animation组件的动画，这些Animation可以使用Unity的曲线或者程序编写或者第三方软件来制作。并可以实现向前播放和反向播放等功能，并能够控制该Target的Enable。国庆中秋到了，估计这两天不会更新。预祝大家中秋国庆过得开心愉快！ 
      <br> 
      <span style="font-family:宋体">（浙江传媒学院-新媒体学院-数字游戏设计专业-张sir）</span> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
     </div> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <ul> 
       <li><span><img src="http://game.ceeger.com/forum/attachment/Mon_1209/16_7487_366016bb4dfb8de.png?30" alt="" style="max-width:726px; max-height:700px"></span> 
        <div style=""> 
         <div style="z-index:1; position:absolute; margin-top:-13px"> 
          <div style="border-bottom:#ffffff 1px solid; border-left:#ffffff 1px solid; padding-bottom:5px; padding-left:10px; padding-right:10px; background:#f3f9fb; border-top:#ffffff 1px solid; border-right:#ffffff 1px solid; padding-top:5px"> 
           <p><span>图片:10.png</span> </p> 
          </div> 
         </div> 
        </div> </li> 
       <li><span><img src="http://game.ceeger.com/forum/attachment/Mon_1209/16_7487_6f826396abe6f81.png?34" alt="" style="max-width:726px; max-height:700px"></span></li> 
      </ul> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>