网站首页 > 开源技术 正文
目标:UE5在Runtime下现实UI拖拽三维物体--Actor,拖拽结束后生成Actor物体
先看效果
步骤1. 创建UE5工程
新建UE5的C++空白项目,记得选择C++,初学者包可以根据自己需要选择是否勾选,命名为UIDragActor
新建文件夹UIdragDrop,本期借此机会学习一个GamePlay游戏框架。
步骤2. 创建一个新的GameMode
在WorldSettings面板中点击GameMode override右边的+号,创建新的GameMode
这种创建方式,系统会自动使用新创建的BP_UIGameMode。
步骤3. DefaultPawnClass在这里直接第三人称BP_ThirdPersonCharacter.
拷贝系统的第三人称BP_ThirdPersonCharacter放到新建的文件夹中,并且BP_UICharater。
步骤4.创建HUD用于UI交互
点击右边+号创建HUD,命名为BP_HUD
步骤5.创建Player Controller Class
同样创建BP_UIPlayerController
步骤6.创建UI
创建主UIWBP_Main,然后在BP_HUD中创建并且显示出来
步骤7.创建拖拽UI
创建拖拽图标UI并且放到主界面WBP_Main中
步骤8.创建拖拽预制体
创建Actor命名为BP_Cube作为我们的模型物体,为BP_Cube增加静态网格组件Static Mesh
选择立方体网格,为它创建一个你喜欢的材质
步骤9.编写拖拽UI的交互代码
1:在WBP_DragUI蓝图中重载,首先要检测到鼠标移动到UI图标上面,所以重载
OnMouseButtonDown函数,
2:检测鼠标的拖拽事件,并且判断是鼠标左键
3:判断到左键拖拽事件以后,接下来需要接受拖拽信息
拖拽UI运行结果:
步骤10.拖拽结束后生成Actor
1:重载取消拖拽事件EventOnDragCancelled
2:获取鼠标在视口中的位置,并且把屏幕位置转化成世界位置
3:使用射线检测LineTraceByChannel
运行看一下结果,射线是出来了,但是位置不准确有偏差,偏差的原因是分辨率引起的,解决方法是增加
4:通过鼠标在屏幕中位置乘以视口分辨率,来矫正位置,结果就应该是正确的
步骤11.通过打点的位置生成物体Actor
1:既然位置现在是正确了,接下来在这个位置上生成物体即可
2:运行看到第一种方式拖拽UI可以正确生成Actor了
- 上一篇: 移动端 Vue 项目中实用组件有哪些?
- 下一篇: 避免冲突,开发说这个设计实现不了?
猜你喜欢
- 2024-10-16 移动端 Vue 项目中实用组件有哪些?
- 2024-10-16 Cube 技术解读 | Cube 小程序技术详解
- 2024-10-16 目前流行前端几大UI框架(前端流行的ui框架)
- 2024-10-16 Vue.js十大常用UI框架,你用过几个?| 程序员节盘点
- 2024-10-16 怎样给自己的产品制作一套交互设计规范
- 2024-10-16 Cube UI - 滴滴出品的精致前端 UI 组件库
- 2024-07-08 一个Golang的Gateway(golang实现网关)
- 2024-07-08 一个非常不错的开源Docker管理工具-DockerUI
- 2024-07-08 vue都有哪些不错的ui框架(vue好用的ui框架)
- 2024-07-08 灵感专题—2019年优秀电商网站设计作品赏析#5月
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论,来添加一个吧(●'◡'●)