Graphical User Interface in play mode


#1

Hi everybody !
I can code with Blockly in CoSpaces for about one year.
In play mode, the user can interact with a space in two ways:

  • the user clicks on an object, “on activate” detects this event
  • the user hovers over an object, “on hover” detects this event.

The possibilities of interactions therefore remain very limited.

How can I do so that the user can easily vary different numerical parameters (from 0 to 100 for example)?

I would like to be able to integrate into a space a graphical user interface accessible in play mode that would look like this interface of CoSpaces:

image


#2

Hi Daniel,

at the moment you need to define such a user interface yourself using objects as buttons or sliders and hook them up to some custom code. I think you already did this a couple of times in your demos. But I agree that this method is quite limited (using only Blockly).

Having such a customizable user interface available in play mode is something we’re thinking of as well and we’re planning to work on internal prototypes.


#3

Hi Benny,
It’s okay, but my method was complicated. How can I do this with a simpler solution?


#4

Can you share a specific example with me so I can better understand what you’re trying to do?


#5

Hi Benny,
Here are two examples:


Thanks for your help


#6

Hi Daniel,

actually, I think these are very good examples on how to build interactive user interfaces using Blockly :slight_smile: But I understand that it can be difficult and it’s not always clear how to use such interfaces in VR mode. Therefore we’re looking into other solutions for this.


#7

Hi Benny,
I would like to have this kind of interactivity with a HUD type interface, which is still facing the camera. But it gets even more complicated.


#8

This can be implemented using JavaScript. But I guess it won’t really work in VR cardboard mode because the HUD elements would move away from the reticle when moving and/or rotating the camera.


#9

Hi,
I would still be interested to see an example in JavaScript.


#10

You can position a HUD element in front of the camera and then in script you can make it a child of the camera.

JavaScript (replace item IDs with yours):

const cam = Scene.getItem('y9b0V7ts4f');
const panel = Scene.getItem('oNIOX9Cxx1');

cam.add(panel);


Portal Like Game
#11

Hi. Thank you Benny for this example. I tested by putting the code in Blockly. HUD works without the word const.
But can I drag the buttons on the HUD?


#12

Hi Daniel,

yes you can add a button to it when you use the marker from the “Graphics” category. First adjust the objects position as needed in front of the camera and then use some JavaScript like in the example above.

const cam = Scene.getItem('cam');
const panel = Scene.getItem('panel');
const btn = Scene.getItem('btn');

btn.addMoveOnItemInteraction(panel);
cam.add(panel);
cam.add(btn);


#13

Hi, thank you for this code. I will try in my case with Blockly. Can you share a link to your space (your example) to test this GUI ?


#14

I did a slider example here: https://cospac.es/edu/lUdr


#15

Thanks. I suppose it use the same code in JS but you replaced the panel with a cylinder.


#16

Apparently, the dragging works on a cuboid as well, but only on the “top” side. So I used it instead of the marker because then we have more control over the dimensions. Then I grouped the button and this cuboid so I can adjust the whole component to the camera. Here is the code used in this example:

const cam = Scene.getItem('cam');
const panel = Scene.getItem('panel');
const btn = Scene.getItem('btn');

const group = Scene.getItem('group');

btn.addMoveOnItemInteraction(panel);

cam.add(group);