跳转至

11. 用户界面

用户交互

VRP 3D引擎的交互界面是VRP作品中非常重要的一个元素,一个漂亮且功能多样的界面往往能带给用户非常舒服的视觉享受和很人性化的功能操作。

属性列表

属性 属性名 类型 默认值/可选值 说明
层级 layer number 1~100 必须有两个二维物体才可以实现层级功能 层级高在上,层级低在下
尺寸 size Vector2 { x: 150, y: 150 } 支持修改UI尺寸。
位置 PosScale Vector2 { x: 0.10, y: 0.5 } 支持修改UI位置。
字体 UIFont string 支持修改UI字体。
字体大小 fontSize string 支持修改UI字体大小。
字体颜色 fontColor string rgba(213,213,213,1) 支持修改UI字体颜色。
标注物体 tagObject string 根据需要选择标注物体。
VR VREnabled boolean true、false 根据需要选择是否开启VR。
内容 Data string 根据需要输入要展示的UI内容。当UI类型为层级时没有该属性。
变换类型 backgroundType number 0、1 支持颜色和图片两种类型,用于控制按钮在原始状态、选中状态以及按下按钮时的变换类型。当UI类型为按钮时有该属性。0=颜色,1=图片。
标准/移入/按下的背景色 background string 支持修改UI图标的颜色。当UI类型为标签、文本、图片时有该属性。标准:可修改按钮在原始状态时展示的形式。当UI类型为按钮时有该属性;移入:可修改按钮在被选中时展示的形式。当UI类型为按钮时有该属性;按下:可修改按钮在被按下时展示的形式。当UI类型为按钮时有该属性。
标准/移入/按下的背景图片 backgroundImage string
选中 isCheck boolean true、false 点击后选中
###示例代码
        // 修改尺寸|size
        button_Actor.size = { x: 200, y: 150 };
        // 修改位置|PosScale
        button_Actor.PosScale = { x: 0.03769, y: 0.04135 };
        // 修改字体|UIFont
        button_Actor.UIFont = "宋体";
        // 修改字体大小|fontSize
        button_Actor.fontSize = "20";
        // 修改字体颜色|fontColor
        button_Actor.fontColor = "rgba(0,0,0,1)";
        // 修改标注物体|tagObject
        button_Actor.tagObject = "Box";
###示例案例
    // 1-按钮
    ui_Button_Demo() {
        // 获取按钮
        let button_Actor = gVrpManager.Scene().FindUiActor("Button");
        // 修改界面属性
        // 修改层级|layer   
        // 必须有两个二维物体才可以实现层级功能   层级高在上,层级低在下             
        button_Actor.layer = 66;
        // 修改尺寸|size
        button_Actor.size = { x: 200, y: 150 };
        // 修改位置|PosScale
        button_Actor.PosScale = { x: 0.03769, y: 0.04135 };
        // 修改字体|UIFont
        button_Actor.UIFont = "宋体";
        // 修改字体大小|fontSize
        button_Actor.fontSize = "20";
        // 修改字体颜色|fontColor
        button_Actor.fontColor = "rgba(0,0,0,1)";
        // 修改标注物体|tagObject
        button_Actor.tagObject = "Box";
        // 是否打开VR|VREnabled
        button_Actor.VREnabled = "false";
        // 修改内容|Data
        button_Actor.Data = "这是一个按钮!";
        // 变换类型|backgroundType  颜色=0,图片=1
        button_Actor.backgroundType = 0;
        // 变换类型为颜色的标准/移入/按下的颜色|background
        button_Actor.background = "rgba(255, 183, 183, 1.00)|rgba(68,99,181, 1.00)|rgba(26, 115, 235, 1.00)";
        // 变换类型为图片的标准/移入/按下的图片|backgroundImage
        button_Actor.backgroundImage = "";
    }

    // 2-标签
    ui_Label_Demo() {
        // 获取标签
        let label_Actor = gVrpManager.Scene().FindUiActor("Label");
        // 修改界面属性
        // 修改层级|layer 
        label_Actor.layer = 100;
        // 修改尺寸|size
        label_Actor.size = { x: 200, y: 150 };
        // 修改位置|PosScale
        label_Actor.PosScale = { x: 0.03769, y: 0.04135 };
        // 修改字体|UIFont
        label_Actor.UIFont = "宋体";
        // 修改字体大小|fontSize
        label_Actor.fontSize = "20";
        // 修改字体颜色|fontColor
        label_Actor.fontColor = "rgba(0,0,0,1)";
        // 修改标注物体|tagObject
        label_Actor.tagObject = "Box";
        // 是否打开VR|VREnabled
        label_Actor.VREnabled = "false";
        // 修改内容|Data
        label_Actor.Data = "这是一个标签!";
        // 变换类型|backgroundType  颜色=0,图片=1
        label_Actor.backgroundType = 0;
        // 变换类型为颜色的背景色|background
        label_Actor.background = "rgba(212, 41, 41, 1.00)|rgba(68, 99, 181, 1.00)|rgba(26, 115, 235, 1.00)"
        // 变换类型为图片的背景图片|backgroundImage
        label_Actor.backgroundImage = "";
    }

    // 3-文本
    ui_TextField_Demo() {
        // 获取文本
        let textField_Actor = gVrpManager.Scene().FindUiActor("TextField");
        // 修改界面属性
        // 修改层级|layer   
        // 必须有两个二维物体才可以实现层级功能   层级高在上,层级低在下             
        textField_Actor.layer = 100;
        // 修改尺寸|size
        textField_Actor.size = { x: 200, y: 50 };
        // 修改位置|PosScale
        textField_Actor.PosScale = { x: 0.84, y: 0.27 };
        // 修改字体|UIFont
        textField_Actor.UIFont = "宋体";
        // 修改字体大小|fontSize
        textField_Actor.fontSize = "20";
        // 修改字体颜色|fontColor
        textField_Actor.fontColor = "rgba(32, 28, 28, 1.00)";
        // 是否打开VR|VREnabled
        textField_Actor.VREnabled = "false";
        // 修改内容|Data
        textField_Actor.Data = "这是一个文本!";
        // 背景色|background
        textField_Actor.background = "rgb(255, 238, 117)";
    }

    // 4-图片
    ui_Image_Demo() {
        // 获取图片
        let image_Actor = gVrpManager.Scene().FindUiActor("Image");
        // 修改层级|layer   
        // 必须有两个二维物体才可以实现层级功能   层级高在上,层级低在下             
        image_Actor.layer = 100;
        // 修改尺寸|size
        image_Actor.size = { x: 200, y: 50 };
        // 修改位置|PosScale
        image_Actor.PosScale = { x: 0.84, y: 0.27 };
        // 修改标注物体|tagObject
        image_Actor.tagObject = "Box";
        // 是否打开VR|VREnabled
        image_Actor.VREnabled = "false";
        // 获取文件
        image_Actor.background = "rgba(86, 86, 86, 1.00)"
        // 修改背景色
        image_Actor.backgroundImage = "";
    }

    // 5-列表
    ui_List_Demo() {
        // 获取标签
        let list_Actor = gVrpManager.Scene().FindUiActor("List");
        // 修改界面属性
        // 修改层级|layer 
        list_Actor.layer = 100;
        // 修改尺寸|size
        list_Actor.size = { x: 200, y: 150 };
        // 修改位置|PosScale
        list_Actor.PosScale = { x: 0.03769, y: 0.04135 };
        // 修改字体|UIFont
        list_Actor.UIFont = "宋体";
        // 修改字体大小|fontSize
        list_Actor.fontSize = "20";
        // 修改字体颜色|fontColor
        list_Actor.fontColor = "rgba(0,0,0,1)";
        // 修改标注物体|tagObject
        list_Actor.tagObject = "Box";
        // 是否打开VR|VREnabled
        list_Actor.VREnabled = "false";
        // 修改内容|Data
        list_Actor.Data = "这是一个列表!";
        // 修改背景色|background
        list_Actor.background = "rgba(218, 0, 0, 1.00)";
    }

    // 6-面板
    ui_Layout_Demo() {
        // 获取面板
        let layout_Actor = gVrpManager.Scene().FindUiActor("Layout");
        // 修改界面属性
        // 修改层级|layer 
        layout_Actor.layer = 100;
        // 修改尺寸|size
        layout_Actor.size = { x: 200, y: 150 };
        // 修改位置|PosScale
        layout_Actor.PosScale = { x: 0.03769, y: 0.04135 };
        // 修改标注物体|tagObject
        layout_Actor.tagObject = "Box";
        // 是否打开VR|VREnabled
        layout_Actor.VREnabled = "false";
        // 修改背景色|background
        layout_Actor.background = "rgba(211, 17, 17, 1.00)";
    }

    // 7-组合框
    ui_Combo_Demo() {
        // 获取组合框
        let combo_Actor = gVrpManager.Scene().FindUiActor("Combo");
        // 修改界面属性
        // 修改层级|layer 
        combo_Actor.layer = 100;
        // 修改尺寸|size
        combo_Actor.size = { x: 200, y: 150 };
        // 修改位置|PosScale
        combo_Actor.PosScale = { x: 0.03769, y: 0.04135 };
        // 修改字体|UIFont
        combo_Actor.UIFont = "宋体";
        // 修改字体大小|fontSize
        combo_Actor.fontSize = "20";
        // 修改字体颜色|fontColor
        combo_Actor.fontColor = "rgba(0,0,0,1)";
        // 修改标注物体|tagObject
        combo_Actor.tagObject = "Box";
        // 是否打开VR|VREnabled
        combo_Actor.VREnabled = "false";
        // 修改内容|Data
        combo_Actor.Data = "";
        // 修改背景色|background
        combo_Actor.background = "rgba(218, 0, 0, 1.00)";
    }


    // 8-复选框
    ui_Check_Demo() {
        // 获取复选框
        let check_Actor = gVrpManager.Scene().FindUiActor("Check");
        // 修改界面属性
        // 修改层级|layer 
        check_Actor.layer = 100;
        // 修改尺寸|size
        check_Actor.size = { x: 200, y: 150 };
        // 修改位置|PosScale
        check_Actor.PosScale = { x: 0.03769, y: 0.04135 };
        // 修改字体|UIFont
        check_Actor.UIFont = "宋体";
        // 修改字体大小|fontSize
        check_Actor.fontSize = "20";
        // 修改字体颜色|fontColor
        check_Actor.fontColor = "rgba(0,0,0,1)";
        // 修改标注物体|tagObject
        check_Actor.tagObject = "Box";
        // 是否打开VR|VREnabled
        check_Actor.VREnabled = "false";
        // 修改内容|Data
        check_Actor.Data = "复选框";
        // 是否选中
        check_Actor.isCheck = false;
        // 修改背景色|background
        check_Actor.background = "rgba(218, 0, 0, 1.00)";
    }