NibiruVRXEngine

Development Guide
V.1.2.3

Nanjing RuiYue (Nibiru) Technology co., LTD

NanjingDec2016

1
2
 Legal Notices
All copyright 2016, Nanjing RuiYue Technology co., LTD. All rights reserved.
The content in this document, copyright belongs to Rui Yue information co., LTD

except specifically stated. This document would be protected from "THE COPYRIGHT

LAW OF THE PEOPLE 'S REPUBLIC OF CHINA" and relevant laws and regulations of all

intellectual property rights and China's accession to the protection of the

international treaty. Without our written permission, no unit or individual shall not,

in any way (electronic mechanical, including photocopying) copied or reproduced any

part of this document, otherwise will be regarded as tort. Rui Yue information co.,

LTD. reserves the right to its legal liability shall be pursued in accordance with the law.

Nibiru's all relevant rights belongs to all Rui Yue information technology co., LTD. No

unit or individual shall not, in this document is a reference to decompiled Nibiru SDK

and its related products, modify and redistribute it, otherwise will be regarded as

tort. Rui Yue information technology co., LTD. Reserves the right to its legal liability

shall be pursued in accordance with the law.

This document is not represents the commitment of the supplier or its agents, and

RuiYue information co., LTD., can modify the content of this document without any

declare. Software products involved in this document and its subsequent upgrade

products are produced by Rui Yue information technology co., LTD., and Rui Yue

information co., LTD is responsible for the overall sales. Other companies mentioned

in this document and the product's trademark ownership belongs to the owners.

Rui Yue information technology co.,

LTD Tel: +86 25 89635828
Address: Room 405, Building 4, Software Valley, No.57, Andemen Street, Jiangning,
Nanjing,
China

E-mailsupport@inibiru.com
Webhttp://dev.inibiru.com
Nibiru welcome any Suggestions and comments of users.

3
 Document Updates

Version Updates

1.2.3 1. Optimize framework

2. Add mix controls

3. Fix bugs

1.1 1. Optimize basic framework

2. Add basic controls

3. Add GridView

1.0 1. Basic framework

4
Contents
I. Introduction .......................................................................................................................6

II. Development and Runtime Environments ............................................................7

III. UI Control APIs ...............................................................................................................8

5
I. Introduction

VRXEngine is a VR-App render framework based on Opengl graphics

interface. It uses the advanced NibiruVR OS technology and owns a clear

code structure and perfect functions and work flow, which has provided

a convenient VR-APP development API and tools. It has the following

features:

1 Professional VR graphic rendering service optimizes 3D graphic

rendering process for VR;

2 Provide UI controls for VR and optimize the visual experience of UI

controls in the space dimension;

3 Seamless connection to Nibiru and maximally reduce the

rendering latency;

4 Provide basic supports to various VR APP development.

6
II. Development and Runtime Environments
This framework runs in Nibiru VR system and requires jar package

and so library of Nibiru VR system. To use VRXEngine framework, its jar

package, so library and resources in asserts are required. Before the

development, please read user guides related to Nibiru VR. The

corresponding Demo project has been uploaded to the forum. After the

import of so library and jar package, the resources in asserts should be

copied to the asserts in local project.

For the unclear points, please check the engine demo, consult in the

forum or join in our official QQ group.

Textures in the engine has 3 origins: bitmap in Android system, plist

pictures and pictures in asserts. In the engine, all the textures are

sorted by name, so all of these three kinds of textures cannot share

the same name. Texture plist file is generated by TexturePackerGUI and

its basic usage can be referred to in the official document. Plist file makes

several textures into a large texture sorted by the original names of the

textures. When plist is used in the engine, the configurations of

TexturePackerGUI is as follows:

7
III. UI Control APIs

UI controls include: XSkyBox, XImage, XLabel, XImageText,

XGridView, XEditTextXProgressBar, XCircleProgressBar, XListView,

XListViewSimple, XGazePoint, etc and they are inherited from XActor

class. XBaseScene class manages all the controls.

8
 Here are some rendering samples of different controls:

Different controls are shown in the graph above and GazePoint is a

green point.

1. XBaseScene
XBaseScene is the base class for scenes and manages UI element

XActor. It supports remove and add operations. To realize a Launcher,

users should inherit XBaseScene class. XBaseScene class is the container

of UI controls in the scenes. It requires rewrite as follows:

public class LauncherMainScene extends XBaseScene{

public void init() { //Initialization

}
public void destory() { //Resource reduction

9
 }
public void onGazeTrigger(Context context, String name) {
//Select operations to be
triggered with gaze
}
public boolean onKeyDown(int keyCode) { //Press OK key on the headset
return false;
}
public boolean onKeyUp(int keyCode) { //Release OK
return false;
}

//This way is to add controls into the scene

public void addActor(XActor actor);
//This way is to add combo box to the specified GridView
public void addGridViewItem(XGridView g, XImageText i, float h, float v);
//Remove elements
removeActor(XActor actor);
}

2. XActor
XActor is the base class for UI elements including properties on

coordinate, rotation and scaling and it supports motion effects and

listener function. The properties include: center point coordinate,

rotation angle and center, scaling size, width and height and listener

events, etc.
public abstract class XActor {
private float alpha = 1; //Transparency
private float centerX, centerY, centerZ; //Central point
private float rotationX, rotationY, rotationZ; //Rotation value
private float rotationCenterX, rotationCenterY, rotationCenterZ;
private float scaleX = 1, scaleY = 1, scaleZ = 1; //Scaling value
private float scaleCenterX, scaleCenterY, scaleCenterZ;
private float width, height; //Width and height
private String name;
private IXActorListener actorListener; //Listener events
protected boolean enabled = true; //Enable symbol

10
}

Properties above have their corresponding get and set function

interfaces.

3. XGridView
Nine panels are used to put XImageText on the sphere arc surface

and display nine panels table. In constructed function XGridView(float

radius), radius is the radius of the sphere arc surface.

Function void setSubSphereBackground(String Name, float begV,

float endV,float beginH, float endH); imageNameTemp is the

background picture and other four parameters define the starting and

the ending coordinates at both the horizontal and vertical levels of the

curved surface.

Heres the sample:

XGridView iconList;
public void XBaseScene::init()
{
iconList = new XGridView(4);
iconList.setCenterPosition(0, 0, 0);
iconList.setSubSphereBackground("black.png", -10, 10, -40, +40);
addActor(iconList);//-10,10,-40,40 are the angles at horizontal and
vertical directions.

XImageText localImageText = new XImageText();

//Set localImageText property

addGridViewItem(iconList, localImageText, -30, 0);//-30, degree

0degree

//Delete from GridView

iconList.removeFromGridView(localImageText);
}

11
4. XSkyBox
XSkyBox class can be used to define sky box and requires to be

added in the way of XBaseScnen::init(). Constructed function

XSkyBox(String imageName, float radius) defines the image name and

the radius of sky box.

Heres a sample:
XSkyBox skybox ;
public void XBaseScene::init()
{
skybox = new XSkyBox("LivingRoom_sence_left.png", 90);
skybox.setRotationY(-90);
addActor(skybox);
}

5. XSkyCubeBox
Ditto, but this sky box accepts 6 image names as the parameters of

the constructed function.

Heres a sample:
XSkyCubeBox skycubebox;
public void XBaseScene::init()
{

ArrayList<String>imagename = new ArrayList<String>();

imagename.add(0, "ThickCloudsWaterRight2048.png");
imagename.add(1, "ThickCloudsWaterLeft2048.png");
imagename.add(2, "ThickCloudsWaterDown2048.png");
imagename.add(3, "ThickCloudsWaterUp2048.png");
imagename.add(4, "ThickCloudsWaterBack2048.png");
imagename.add(5, "ThickCloudsWaterFront2048.png");
skycubebox = new XSkyCubeBox(imagename, 60);
addActor(skycubebox);
}

12
6. XGazePoint
This class is the gaze drawn in the center of the scene. It is inherited

from XActor and added into the scene through addActor.

Heres a sample:
public void XBaseScene::init()
{
XGazePoint whitePoint = new XGazePoint();
whitePoint.setCenterPosition(0, 0, -20);
addActor(whitePoint);
}

7. XImage
Image class is to display a picture in the scene and is applicable to

display static images but doesnt support targeting selection.

Constructed function XImage(String imageName) is the name of the

specified image.

Heres a sample:
XImage batteryIconImg;
public void XBaseScene::init()
{
batteryIconImg = new XImage("power_run.png");
batteryIconImg.setCenterPosition(0, 0.95f, -3.90f);
batteryIconImg.setSize(0.3f, 0.15f);
batteryIconImg.setRenderOrder(9);
addActor(batteryIconImg);
}

8. XLabel
It is used in the text display and supports dynamic text replacement

but doesnt support targeting selection. Similar to ImageText,

setArrangementMode ( XArrangementMode m) is used to set font mode.

Function setAlignment(XAlign align) is used to set alignment.

13
Heres a sample:
XLabel timeLabel;
public void XBaseScene::init()
{
timeLabel = new XLabel(LauncherHelper.getCurTimeStr());
timeLabel.setTextColor(Color.WHITE);
timeLabel.setCenterPosition(-0.8f, 0.95f, -4);
timeLabel.towardOrigin();
timeLabel.setSize(0.6f, 0.2f);
timeLabel.setName("time_label");
addActor(timeLabel);
}

9. XImageText
Combo box is displayed with the image on the top and the text on

the bottom in the scene. When image name is set to null, only text like

XLabel will be displayed and the targeting selection is supported now.

When text is set to null, only image like XImage will be displayed and the

targeting selection is supported now. Function setImgName(String

imgNameSelected, String imgNameUnSelected) is used to set selected

and not-selected images. Funciton setSeletedArrangeMode

( XArrangementMode mode) is used to set multi-row and single row

modes of font in the selected status.

Heres a sample:
XGridView iconList;
public void XBaseScene::init()
{
//iconList initialization etc.
XImageText toolImageText = new XImageText();
toolImageText.setImgName("ic_focused.png", "ic_default.png");
toolImageText.setTitle("", "");//Display title name
toolImageText.setTitleColor(Color.WHITE, Color.BLACK);
toolImageText.setName("tool");

14
 toolImageText.setSize(0.5f, 0.5f);
toolImageText.setActorListener(itemActorListener);
toolImageText.setSeletedAlign(XAlign.Center);
toolImageText.setSeletedArrangeMode(XArrangementMode.MultiRow);
addGridViewItem(iconList, toolImageText, 30, 0);
toolImageText.updateUnSelectedTitle("Update not selected Title");
toolImageText.updateSelectedTitle("Update selected Title");
toolImageText.updateUnSecletedImage("Update selected Image.png");
toolImageText.updateSelectedImage("Update not selected
Image.png");
}

7.1 Icon
public enum IconAttachStrategy
{
AttachStrategy_UnSelectedBack , //Icon appears after the not selected
image
AttachStrategy_UnSelectedFront, //Icon appears before the not selected
image
AttachStrategy_SelectedBack, //Icon appears after the selected image
AttachStrategy_SelectedFront //Icon appears before the selected image
}
//Call after addActor() and addGridViewItem()
public void addImageIcon(String imagename, IconAttachStrategy iconType,
boolean isActive);
public void addImageIcon(String imagename, IconAttachStrategy iconType,
float sizeRatioX, float posOffsetX,
float posOffsetY, float frontRatio,
boolean isActive);

The added Icon size:

Width: sizeRatioX * the width of the original App icon
Height: the width-to-height ratio of Icon * sizeRatioX * the width of the
original App icon
Center point: Vec3 (center point of the original APP icon) + Vec3 (Offset
X, Offset Y, Offset Z)
Among them: Offset X = posOffsetX * Up direction of the original APP icon
* Width;
Offset Y = posOffsetY * Right direction of the original APP icon * Height
Offset Z = IconAttachStrategy*ratioFront * Front direction of the original
APP icon;

Set whether ImageText icon is displayed:

public void setSelectIconActive(boolean active);

15
 public void setUnSelectIconActive(boolean active);

7.2 Set the listener of Icon

public interface IXImageTextIconListener

{
public void onGazeEnter(XActor actor);// Enter by targeting
public void onGazeExit(XActor actor);// Exit by targeting
public void onGazeTrigger(XActor actor);//Select by targeting and click to
trigger
}

public void setIconListener(IXImageTextIconListener icListener)

7.3 Add background

The same as Icon.
public void addImageBackGround(String imagename, AttachStrategy iconType,
boolean isActive);
public void addImageBackGround(String imagename, AttachStrategy iconType,
float sizeRatioX, float posOffsetX,
float posOffsetY, float frontRatio,
boolean isActive)
Set whether its displayed:
public void setUnSelectBackGroundActive(boolean active)
public void setSelectBackGroundActive(boolean active)
The specific parameters are the same with Icon.

7.4 Set font alignment

Among them, XAlign defines the font alignment in XImageText.

XArrangementMode defines font modes. They have the following

enumeration values:
public enum XAlign {
Left, //Left alignment
Right, //Right alignment
Center, //Center
Side //Justify
}

public enum XArrangementMode{

SingleRowMove, //Scroller

16
 SingleRowNotMove, //Single row regardless
of length
MultiRow, //Multi-row
SingleRowClip //Intercepted length
}
Example:

toolImageText.setSeletedAlign(XAlign.Center);
toolImageText.setSeletedArrangeMode(XArrangementMode.MultiRow);
label.setSeletedAlign(XAlign.Right);
label.setSeletedArrangeMode(XArrangementMode.MultiRow);

Set front size:

toolImageText.setWeightRatio(1);//This value displays the width ratio
with APP image
toolImageText.setHeightRatio(1);//This value displays the height ratio
with APP image

10. XEditText
The input box is used to accept texts entered by users. Constructed

function XEditText(String str) displays strings by default. Click XEditText

and XInputMethod will pop-up.

Example:
XEditText editText;
public void XBaseScene::init()
{
editText = new XEditText("Please enter the content");
editText.setCenterPosition(0, -1.0f, -3.85f);
editText.setSize(1.6f, 0.4f);
addActor(editText);
}

11. XInputMethod

17
 Input keyboard is used for users to enter characters. This class has a

global object. Show() and dismiss() is to enable and disable the input

keyboard.

Sample:
XInputMethod globalInputMethod;

public XInputMethod getGlobalInputMethod()

{
if (globalInputMethod == null)
{
globalInputMethod = new XInputMethod();
}
return globalInputMethod;
}

12. XProcessBar
Process bar control is used to display a rectangle process bar

through rendering in the scene. This function accepts the process

parameter during initialization, the background image name and the

foreground image name.

Example:
public void XBaseScene::init()
{
XProcessBar pbar = new XProcessBar(0.5f, "bg.png", "fg.png");
//Background image, foreground image
addActor(pbar);
pbar.setProcess(0.8f); //Set the display percentage
}

13. XCircleProcessBar
Circle process bar control is used to display a circle process bar

through rendering in the scene. This function accepts the process

18
parameter during initialization, the background image name and the

foreground image name.

Example:
XProgressBar pbar = new XProgressBar(0.0f, "x1.png", "x2.png",
"x2_Btn.png");
pbar.setProgressBarListener(new IXProgressBarListener()
{
@Override
public void onProgress(XProgressBar progressBar, float progress)
{
int p = (int)(progress * 100);
progressBar.setProcess(progress); //Set the display
percentage
}
});
pbar.setSize(2, 0.2f);
pbar.setCenterPosition(0, 0.2f, -4);
addActor(pbar);

14. XVideoPlayer
3 kinds of players: rectangle, sphere, semi-sphere players. APIs are
as follows:
boolean initWithRectInfo(int showType, int texID,XSpaceRect rect)
boolean initWithSubSphereInfo(int showType, int texID,
XVec3 center,float radius,
float beginVertical, float endVertical,
float beginhorizontal, float endhorizontal)
//Start with vertical direction, end with vertical
direction
//Start with horizontal direction, end with
horizontal direction

boolean initWithSphereInfo(int showType, int texID,

XVec3 center,float radius)
Among them boolean setTexMat(float[] texMatrix); is to set UV matrix.

Public void XBaseScene::init()
{
XVideoPlayer player = new XVideoPlayer();

19
 player.initWithRectInfo(....);
}

15. ListView
ListView function is similar to that in Android.

Among them, 1 and 2 are common XActor::XImageText class, the listener of

which triggers Pagedow and Pageup of listView. 3 and 4 are XListViewitem container
and 5, 6 and 7 are common XActor.

The usage is as follows:

XListView listview = new XListView("black.png");//Set the background color
of listView
listview.setAdapter(listviewadapter);
addActor(listview);
Among them, the interface prototype of adapter:
public interface IXListViewAdapter
{
public int getCounter();
public XListViewItem getView(int pos, XListViewItem view);
}

getCounter() returns the number of item; in getView(), when new exported

XListViewItem objects are pushed into XActor, XListViewItem objects will be the
return values. Among them, the parameter of XListViewItem object is float type
in the range of 0-1, and it shows the ratio of the overall item height value
and the overall ListView height value. To push XActor value in XListViewItem,
setSizeInListView and setOffsetInListView are required to set size and offset.

20
This value should also between 0 and 1. Other properties of XActor can be set
by the original function. For example:

public int getCounter() {

return 7; //Reture the number of item
}

public XListViewItem getView(int pos, XListViewItem view) {

if(pos == 0)
{
float s = 1.0f/4.0f;
XListViewItem mview = new XListViewItem(s);

XLabel timeLabel = new XLabel("L: "+ pos);

timeLabel.setTextColor(Color.WHITE);
timeLabel.setOffsetInListView(0.1f, 0.1f);//Offset in listView
timeLabel.setSizeInListView(0.2f, 0.2f); //Size in listView
timeLabel.setName("time_label");
mview.pushXActor(timeLabel);

XImage bmage;
bmage = new XImage("ic_bluetooth.png");
bmage.setOffsetInListView(0.5f, 0.4f);
bmage.setSizeInListView(0.1f, 0.2f);
mview.pushXActor(bmage);

XImageText panoImageText = new XImageText();

panoImageText.setImgName("ic_panoramic_video_focused.png",
"ic_panoramic_video_default.png");
panoImageText.setTitle("HAHAHA", "");
panoImageText.setTitleColor(Color.RED, Color.BLACK);
panoImageText.setName("panoxx");
panoImageText.setOffsetInListView(0.6f, 0.3f);
panoImageText.setSizeInListView(0.3f, 0.6f);
mview.pushXActor(panoImageText);
return mview;
}
else if
{
float s = 1.0f/6.0f;
XListViewItem mview = new XListViewItem(s);

XLabel timeLabel = new XLabel("L: "+ pos);

timeLabel.setTextColor(Color.WHITE);

21
 timeLabel.setOffsetInListView(0.1f, 0.1f);
timeLabel.setSizeInListView(0.2f, 0.2f);
timeLabel.setName("time_label");
mview.pushXActor(timeLabel);
}
}

16.XGridViewSimple
XGridViewSimple has packaged common functions.

In the graph above, 1 refers to four XGridViewSimplePage classes. These

four Page objects are created by XGridViewSimple. 2, 3 and 4 are

elements, of which the types are label, image and imagetext

respectivelyl.

Constructed function:
public XGridViewSimple(float gapAngle, float radius, int showPageNum, float
beginVerAngle, float endVerAngle, float beginhorAngle, float endhorAngle) ;

public XGridViewSimple(float gapAngle, float radius, int showPageNum, float

beginVerAngle, float endVerAngle, float beginhorAngle, float endhorAngle,
List<XActor> actorlist); These parameters correspond to the gap degree among
the four pages, radius and displayed number of pages(total pages returns in
IXGridViewAdapter), vertical starting and ending angles, horizontal starting
and ending angles and the list required to be added into XGridViewSimple.
XGridViewSimple.pushXAcotr(List<XActor>list), Add elements

22
XGridViewSimple.removeXActor(XActor actor), Remove single element
XGridViewSimple.pageUp()Rotate entirely to the left
XGridViewSimple.pageDown()Rotate entirely to the right
XGridViewSimple.updateLayOut()Update the element layout
XGridViewSimple.clearPage(int pageIndex) Clear all the elements in a page
XGridViewSimple.clearPage(XGridViewSimplePage page)Clear all the elements in
a page
XGridViewSimple.setAdapter(IXGridViewAdapter adapter) Set adapter, among which
the prototype of IXGridViewAdapter is as follows:
public interface IXGridViewAdapter
{
public int getCounter();
public XGridViewSimplePage getView(int pos, XListViewItem view);
}
getCounter() returns the number of pages.
getView() sets properties of XGridViewSimplePage object and returns.
XGridViewSimplePage inherits XAcotor and its features are: In constructed
function XGridViewSimplePage(int hnum, int vnum, String bk), these two values
define the number of elements in the horizontal direction and the vertical
direction and bk defines the background color.
XGridViewSimplePage needs to define XActorListener in order to define different
behaviors.

23