NGUI官方实例—ControlIerInput讲解

拼搏现实的明天。 2022-04-14 03:28 118阅读 0赞

在NGUI插件中，你可以设置该GUI的输入方式，例如通过鼠标、键盘、手柄等方式来控制元素的选择。在官方示例的Example4 – Input中，展示了屏蔽鼠标输入，改为通过键盘方向键来控制元件选择的功能。该示例以前一个示例作为基础。 [http://game.ceeger.com/forum/read.php?tid=4187][http_game.ceeger.com_forum_read.php_tid_4187]  
首先屏蔽鼠标事件。选择UI Root（3D）下的Camera对象，在Inspector窗口中找到UICamera组件，把其中的Use Mouse和Use Touch关掉，如图所示：  
![16_7487_707615e89a2a1c5.png_24][]

描述:请输入描述

图片:1.png

为每个GUI元件添加键盘监听组件，选择Button-Play，为其添加一个ButtonKey组件（Component->NGUI->Interaction->ButtonKeys）,该组件中的Starts Selected表示gui的初始选择元件，Select On Up表示当前在你选择这个按钮之后，你按下向上键时，下一个选择的元件是哪个对象，Select On Down表示当当前在你选择这个按钮之后，你按下向下键时，下一个选择的元件是哪个对象，分别为这两个变量附上Button-exit和Button-option两个gui元件（注意，先必须分别给这两个元件添加上ButtonKeys组件，不然不能拖进去），如图所示：  
 ![16_7487_28826eecca8ee10.png_25][]

描述:请输入描述

图片:2.png

依次对Button-Exit和Button-Option添加上ButtonKeys组件之后，分别设置其Select On Up和Select on Down变量。最后，选择Button-Play元件，把Starts Selected勾上。点击运行，可以看到，鼠标已经不起作用，而当你按下键盘上的上下键时，可以同样实现按钮的选择,在Option按钮上按下键盘上的回车键，可以实现鼠标点选的效果。如图所示：  
 ![16_7487_00d89c5e66fb52e.png_83][]

描述:请输入描述

图片:3.png

接下来，打开Panel-option的enable，关闭Panel-Main的enable，同样为Panel-option中的各个元件进行类似的设置，此时应该注意这个组件的添加位置，如图所示：  
 ![16_7487_5ac3d7989e9b7fc.png_28][]

描述:请输入描述

图片:4.png

点击运行之后，你点击键盘上的左右键，会发现，滑动条虽然被选择了，可是没有显示出显示的状态。为了达到显示出选择效果，为每一个slider添加一个ButtonColor组件（component->NGUI->Interaction->ButtonColor），并在该组件中的Press中的颜色设置成青绿色，并把TweenTarget设置成该slider的background，如图所示：  
![16_7487_fd7d2e9a3864c28.png_18][]

描述:请输入描述

图片:5.png

现在再点击运行，可以发现，还是没有显示出来滑动条被选中的效果！  
![16_7487_6328b1affb359a8.png_150][]

描述:请输入描述

图片:6.png

不要着急，接下来，把 Panel-Option 的 enable 关掉，打开 Panel-Main 的 enable ，选择 Button-Option 按钮，在 buttonKeys 组件中的 selectonClick 参数中，把 Panel-Option 中的 Button-done 赋值给它（表示当按下该按钮时，下一个被选中的元件是 button-done ），如图所示： ![16_7487_a978dd1f68af79f.png_35][]

描述:请输入描述

图片:7.png

最后一步，同样需要给 button-done 按钮中的 buttonkeys 组件中的 selectonClick 变量赋值为 Button-Options ，这样，当范围 panel-main 窗口时，元件才能被正确选择。如图所示：  
![16_7487_7a2bdd12624aef7.png_36][]

描述:请输入描述

图片:8.png

Ok 。大功告成！你现在再点击播放，使用键盘的上下键选择 Option 按钮，点击回车，进入设置窗口，现在同样使用键盘上的上下键，哈哈，功能完全实现，如图所示：  
![16_7487_a9ccae38cdc2f4a.png_365][]

描述:请输入描述

图片:9.png

[http_game.ceeger.com_forum_read.php_tid_4187]: http://game.ceeger.com/forum/read.php?tid=4187
[16_7487_707615e89a2a1c5.png_24]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_707615e89a2a1c5.png?24
[16_7487_28826eecca8ee10.png_25]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_28826eecca8ee10.png?25
[16_7487_00d89c5e66fb52e.png_83]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_00d89c5e66fb52e.png?83
[16_7487_5ac3d7989e9b7fc.png_28]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_5ac3d7989e9b7fc.png?28
[16_7487_fd7d2e9a3864c28.png_18]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_fd7d2e9a3864c28.png?18
[16_7487_6328b1affb359a8.png_150]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_6328b1affb359a8.png?150
[16_7487_a978dd1f68af79f.png_35]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_a978dd1f68af79f.png?35
[16_7487_7a2bdd12624aef7.png_36]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_7a2bdd12624aef7.png?36
[16_7487_a9ccae38cdc2f4a.png_365]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_a9ccae38cdc2f4a.png?365