[{"data":1,"prerenderedAt":136},["ShallowReactive",2],{"\u002F2014-09-28-ue4%E5%AE%98%E6%96%B9ui%E5%BA%93umg%E7%AE%80%E5%8D%95%E8%8F%9C%E5%8D%95%E6%90%AD%E5%BB%BA":3},{"id":4,"title":5,"body":6,"date":112,"description":12,"extension":113,"meta":114,"navigation":117,"path":129,"seo":130,"stem":131,"tags":132,"__hash__":135},"blogs\u002F_legacy\u002F2014\u002F2014-09-28-ue4%e5%ae%98%e6%96%b9ui%e5%ba%93umg%e7%ae%80%e5%8d%95%e8%8f%9c%e5%8d%95%e6%90%ad%e5%bb%ba.md","UE4官方UI库UMG简单菜单搭建",{"type":7,"value":8,"toc":107},"minimark",[9,13,16,23,26,31,34,37,42,45,50,53,58,61,66,69,74,77,82,85,90,93,96,101,104],[10,11,12],"p",{},"UMG在当前UE4版本中仍然是实验功能，不过已经能基本满足日常UI的制作需求了。于是参考官方教程对UMG的UI的制作进行了熟悉。",[10,14,15],{},"首先要做的是在引擎中打开UMG功能：",[10,17,18],{},[19,20],"img",{"alt":21,"src":22},"image","\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fimage_thumb2.png",[10,24,25],{},"打开之后就能在新建菜单中看到UMG相关的项目了，如果看不到的话重启一下引擎就可以了",[10,27,28],{},[19,29],{"alt":21,"src":30},"\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fimage_thumb3.png",[10,32,33],{},"选择Wdiget  BluePrint就可以新建一个UMG的UI了。",[10,35,36],{},"在这里我们先新建一个Slate Blush以作背景用",[10,38,39],{},[19,40],{"alt":21,"src":41},"\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fimage_thumb4.png",[10,43,44],{},"Slate Brush内部很单纯，选择一张已经导入的图片即可。",[10,46,47],{},[19,48],{"alt":21,"src":49},"\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fimage_thumb5.png",[10,51,52],{},"创建完Brush之后到刚刚新建的Wdiget里面，删掉默认添加的元件。按照下面的元件顺序添加即可",[10,54,55],{},[19,56],{"alt":21,"src":57},"\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fimage_thumb6.png",[10,59,60],{},"背景图片的配置在Border的属性中",[10,62,63],{},[19,64],{"alt":21,"src":65},"\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fimage_thumb7.png",[10,67,68],{},"基本上使用起来和普通的UI编辑器没什么大的区别，也就是拖拖调调就可以了。事件的绑定在右边的属性栏里面都能够找到。",[10,70,71],{},[19,72],{"alt":21,"src":73},"\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fimage_thumb8.png",[10,75,76],{},"新建的事件处理函数名称是可以修改的。给Quit按钮绑定退出功能：",[10,78,79],{},[19,80],{"alt":21,"src":81},"\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fimage_thumb9.png",[10,83,84],{},"这样的话UMG菜单部分就完成了。接下来只要找一个合适的时机将菜单弹出即可，可以选择在level blueprint的beginplay弹出。这里选择在Hud里面弹出：",[10,86,87],{},[19,88],{"alt":21,"src":89},"\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fimage_thumb10.png",[10,91,92],{},"这里面有两个需要注意的地方。选中modal可以防止菜单后面的3d界面得到控制权，就是普通ui中的模态。show cursor可以让UI界面中显示鼠标指针，而不用到controller里面去关闭全局的鼠标隐藏。",[10,94,95],{},"完成之后的界面如下，为了直观将背景图片去掉了：",[10,97,98],{},[19,99],{"alt":21,"src":100},"\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fimage_thumb11.png",[10,102,103],{},"以上就是全部的步骤了，最后吐槽下UE的暂停游戏功能。在当前版本下，不使用C++进行处理的情况下，暂停游戏的那行文字提示是去不掉的。不过使用模态来处理的话，基本的应用情境中是不需要暂停游戏的。但是暂停菜单的话……",[10,105,106],{},"总体而言UMG的功能很容易上手，没有想象中的那么复杂。",{"title":108,"searchDepth":109,"depth":110,"links":111},"",2,3,[],"2014-09-28","md",{"layout":115,"status":116,"published":117,"author":118,"author_login":119,"author_email":120,"author_url":121,"wordpress_id":122,"wordpress_url":123,"date_gmt":124,"excerpt":125},"post","publish",true,{"display_name":119,"login":119,"email":120,"url":121},"chaoshikari","chaoshikari@gmail.com","\u002F",1043,"\u002F\u002F?p=1043","2014-09-28 12:55:58 +0000",{"type":7,"value":126},[127],[10,128,12],{},"\u002F2014-09-28-ue4官方ui库umg简单菜单搭建",{"title":5,"description":12},"_legacy\u002F2014\u002F2014-09-28-ue4%e5%ae%98%e6%96%b9ui%e5%ba%93umg%e7%ae%80%e5%8d%95%e8%8f%9c%e5%8d%95%e6%90%ad%e5%bb%ba",[133,134],"UE4","UMG","BQd5f503SbSHEZMn43WMjG44sJksfuBw9wt09EXA-ow",1788763181086]