Forum

Best way to create user interfaces with logic

24 May 2016 18:40
I'm trying to create a user interface that appears per logic triggers and camera placement.

1 ) Simple creating a cube to appear in front of the camera after its movement results in the cube not faced properly. Its basically impossible to place the cube exactly as it should be to display text and buttons to the user.

2 ) We've also tried parenting a cube to the camera, this worked much better for alignment but the shapes are not consistent with the initial desired shape. They are much smaller once rendered.

3 ) Can someone help us understand why our attempts result in such unexpected ways and also recommend methods to create user interfaces that work well with blender logic?

Thanks again.

UPDATE:
Not sure if it's a bug or what but we've gone ahead and built our block "UI" with the parenting to camera method in a completely separate file. Then copy and pasted it into our working project and it is rendering fine. Why would we have to build each part separately, then combine them to work?
24 May 2016 18:55
1)Best way to make user interface it's to use HTML coding over the blend4web 3d viewer.

2)But you can do this: place all your buttons and interface elements in the center of the scene. divede it on elements that must be connected to the front of the camera, then to the left of the camera and so on. Then creade groups like fron, top, left etc, add all elements by groups and then create dupli-groups using this groups. Each Empty objects with dupli-group parent to camera ant set our Blend4Web type of aligment object to the camera. Also need to do clear parent invers of each paranted Empty obcts. Also all scales and rotations must be allpied to inteface elements and objects.
Read about parenting aligment in our documentation.

Blend4web and that kind of thing.
24 May 2016 18:57

Why would we have to build each part separately, then combine them to work?
Is there any scale on the camera?
Blend4web and that kind of thing.
24 May 2016 19:53
Hey Mikhail,

Thanks for responding, I know it's late in Russia. There is no scale on the camera. It's actually a pretty simple project file but I believe we are definitely seeing bug like behavior where building each part separately and bringing it into the main project works when building these things in place does not work.

Thanks for your response on 2: but we're having trouble understanding. Are there any resources for your ideas?

25 May 2016 12:14

Are there any resources for your ideas?
Heres an example for you how it can be made.
interface_example.blend
interface_example.html

So step by step:

1)create buttons
2)place them in one plane
3)add them to group ctr_g
4)create Empty with dupli-group ctr_a>group_instance
5)parent this empty to capera ctr_p
6)clear parent inverse from empty alt_p>clear_parent_invers
7)setup alighment on camera in object preferences
8)choose aligment (for exmaple bottom_right)
9)set distance to 1 (for example)
10)push Fit_to_camera to see how it will look like in engine

Also can you share with us your blend file with example where bug take place?
Blend4web and that kind of thing.
14 August 2017 16:55
I really liked this button creation technique for a user interface. It was perfect here in my project, but I'm having a difficult to assign logic nodes to these empty elements. I'm trying to use inherit material node to modify the color of an object..
How I can do this? Would it be possible only with the use of programming code?


Thanks.
14 August 2017 23:31
You might want to assign your logic nodes to the actual button object, not the empty it is parented to.
For material color, see the Material Code Snippet example.
There is a "View Code" button at the bottom left.
16 August 2017 17:58
Hi Will,

Thank you for your attention. Yes, I'm assigning the select switch node to the empty objects and the node inherit Material, i'm assigning the actual object.

I attached some images. link

The objects 1, 2, 3 and 4 are the empty. (they change the color of building facade on mouse click)
The actual buttons are Plane.098, Plane.099, Plane.100 and Plane.101.

Sorry for my poor english.
17 August 2017 10:31
The objects 1, 2, 3 and 4 are the empty. (they change the color of building facade on mouse click)
The actual buttons are Plane.098, Plane.099, Plane.100 and Plane.101.
If your buttons inside of dupli group at first you need to select an empty of dupli group object then object (plane) inside of it. If your button (plane) only parented to object you need to choose only the button (plane) in the switch select node without an empty to which you parented the button.
Blend4web and that kind of thing.
17 August 2017 21:08
It's working now! Thank you very much, Mikhail.
 
Please register or log in to leave a reply.