anything related to UI in general, splash screens, UI widgets, input and output etc.

Menu system

Menu system

Postby planetX » 04 May 2017, 18:35

Hi there,

I'm working on a menu, using the html/css way... I've started from the Pearl Diver demo but I'm having trouble trying to hide some elements. In the demo, each menu item has 3 divs, showing/hiding them depending on the mouse event... Those buttons are images, but I'm working with text, so I have something like this in the .rml file:

Code: Select all
         <!-- Item -->
         <div id="item_1" class="menu_item"
         onmouseover="hide(self,item_1_normal);show(self,item_1_hover);"    
         onmouseout="show(self,item_1_normal);"
         onmousedown="hide(self,item_1_normal);hide(self,item_1_hover);show(self,item_1_active);"
         onmouseup="hide(self,item_1_active);show(self,item_1_hover);"
         onclick="lua(UI_script,sound_click,test);lua(UI_script,menu_start,test);">
            <div id="item_1_active" class="item_active">START</div>
            <div id="item_1_hover" class="item_hover">START</div>
            <div id="item_1_normal" class="item_normal">START</div>
         </div>


Everything works fine as soon I mouse over the items, but when the GUI is loaded, I see all the elements visible by default... Is there any way to hide both active and hover elements when the GUI is loaded?

I'm also wondering... do I really need 3 elements to make a simple link? Any clue to make it simpler? :)

Thanks in advance!

My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby SolarPortal » 04 May 2017, 18:58

Ill have a look a little bit later and see if i can replicate the same issue as the the normal and click should be hidden by default if their css contains "display: none;"... i think :)

If you dont need the hover and click events, then the "onclick" should be enough with a simple text, but to have the text change colour if hovered or clicked and no image, then the same "onmouseover" and "onmousedown" should work and make them point at the same div tag and use the event function "setColour()" but it appears to have not been set up yet... :oops:

So yeah, i will have a play a little later and get back to you on this :)
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 4770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3631
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Menu system

Postby planetX » 04 May 2017, 19:41

SolarPortal wrote:Ill have a look a little bit later and see if i can replicate the same issue as the the normal and click should be hidden by default if their css contains "display: none;"... i think :)

If you dont need the hover and click events, then the "onclick" should be enough with a simple text, but to have the text change colour if hovered or clicked and no image, then the same "onmouseover" and "onmousedown" should work and make them point at the same div tag and use the event function "setColour()" but it appears to have not been set up yet... :oops:

So yeah, i will have a play a little later and get back to you on this :)


Hi SP, thanks for quick reply... I didn't know that "display:none;" could work, I'll have a try. ;)

About the event functions, is there any guide that I can use just to know which are the possibilities? Right now I'm totally clueless...

My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby planetX » 04 May 2017, 20:25

"display: none;" works like a charm, thanks! ;)

My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby SolarPortal » 04 May 2017, 21:15

Great that you got it working.. :)

About the event functions, is there any guide that I can use just to know which are the possibilities? Right now I'm totally clueless...

Yes, for the events, the GUI Editor has a help section regarding them. You can find it on the GUI Editor Main Menu > Help > API Help.

When the new panel appears, then click on the events tab and have a good read.
Although, we will be adding in a few extra ones that seem to be missing.

The API tab has all the information that you can call during an event.
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 4770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3631
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Menu system

Postby planetX » 05 May 2017, 13:20

Hi SP,

that helps a lot, thank you very much for the support! :) And sorry for not even looking at the help menu, for some reason I didn't realize that there was such info there... :oops:

My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby planetX » 07 May 2017, 18:11

Hi, have another question... I'm trying to pass a value from the .rml file to the .lua script, but looks like I'm doing something wrong. In the button, I have this code...

Code: Select all
onclick="lua(UI_script,ShowActive,2);"


... trying to pass the "2" value to the "active_page" argument in this function...

Code: Select all
function ShowActive(active_page)
   for i=1,total_pages,1 do
      if (i ~= active_page) then
         gui.hide(page[i],page[i]);
      else
         gui.show(page[i],page[i]);
      end
   end
   active = active_page;
end


... but nothing is passed. Any clue?

My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby SolarPortal » 07 May 2017, 19:30

ok, sure :) A couple of things.

UI_Script should be the the tag name of the entity set in the properties.

active_page as are all arguments passed through the lua command are a string, therefore you will need to use the lua as such:
Code: Select all
if (i ~= tonumber(active_page)) then
-- | or ...
active = tonumber(active_page);


even better, just define it at the top of the function:

Code: Select all
function ShowActive(active_page)
   local actPage = tonumber(active_page);

   for i=1,total_pages,1 do
      if (i ~= actPage ) then
         gui.hide(page[i],page[i]);
      else
         gui.show(page[i],page[i]);
      end
   end
   active = actPage;
end


Hope this helps :D
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 4770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3631
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Menu system

Postby planetX » 07 May 2017, 19:53

Ok... so it was a string, I should not have missed that. :D

SolarPortal wrote:UI_Script should be the the tag name of the entity set in the properties.


That's clear, I got the script running before this issue. But since you said it, is there any way to refer to the Scene script from the .rml? Just curious...

Thanks! Everything is woking now. ;)

My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby SolarPortal » 08 May 2017, 09:50

yes, just use scenescript e.g.

Code: Select all
lua(scenescript, Function, arg1);


Glad your up and running :)
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 4770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3631
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Menu system

Postby epsilonion » 08 May 2017, 16:35

I don't know if this will help you at all, it is a in game pause menu starter that I put together like ages ago its not exactly what your asking but hey ho.. :)
It will give you a starting point on creating menus etc..

RML File
pausemenu.zip
Menu RML file
(1.17 KiB) Downloaded 1951 times

Scene Script
http://www.forum.aurasoft-skyline.co.uk/viewtopic.php?f=38&t=1309

It shows how to hide the cursor, gui.hide, gui.show, onclick="lua(sceneScript,PauseMenuButtonEvent,2)", etc etc

The Pause Menu is in the Scene Script and copied to every scene that I have made (ball ache I know) so that in every game scene you can pause the game show mouse and give the user options such as return to game, settings, exit to main menu and save and exit to desktop as an example.

I made this example ages ago in Gen1, it should work..
User avatar
epsilonion
Skyline Lead Moderator
Skyline Lead Moderator
 
Posts: 874
Joined: 26 Feb 2015, 11:51
Location: Hull, East Yorkshire, England
Skill: Business Manager
Skill: Great creative

Re: Menu system

Postby StarFire » 09 May 2017, 14:12

@epsilonion
Scene Script and copied to every scene that I have made (ball ache I know)

You could save a default scene with this code prepared in it, so that its there every time you click new scene ;)
Dream the Journey, Live the Experience!
User avatar
StarFire
Skyline Founder
Skyline Founder
 
Posts: 1678
Joined: 03 Jan 2012, 18:50
Location: UK
Skill: Great creative
Skill: Programmer
Skill: 3D Modeller
Skill: 2D Artist
Skill: Level Designer

Re: Menu system

Postby planetX » 09 May 2017, 16:34

Hey, sorry for delay... thanks for the bits of information guys, really appreciated. ;)

@epsilonion: if I had that earlier, I probably would have made less questions... :lol:

StarFire wrote:You could save a default scene with this code prepared in it, so that its there every time you click new scene ;)


How can I save a default scene? :oops:

My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby StarFire » 09 May 2017, 16:48

ok to save a default scene please point your mouse to:

File>Save Scene As and save to the Skyline Data\Scenes Default.xSkyScene

This will over right the installed default so if you want to keep it, just save a new scene to your scenes folder as sky_default so you can get it back if needed. ;)
Dream the Journey, Live the Experience!
User avatar
StarFire
Skyline Founder
Skyline Founder
 
Posts: 1678
Joined: 03 Jan 2012, 18:50
Location: UK
Skill: Great creative
Skill: Programmer
Skill: 3D Modeller
Skill: 2D Artist
Skill: Level Designer

Re: Menu system

Postby planetX » 09 May 2017, 18:41

Aha, I was looking for the "Save as default scene" button... :D So you mean that I don't need to rewrite the factory default scene, but just saving the scene as "sky_default.xSkyScene" in my project folder? That helps a lot, thanks.

So I could arrange a simple menu system with a 3d scene as the background. It's just a big black cube with rounded edges. Still fighting with lights, materials and settings here and there, not really sure what I'm doing. ^^ but it's getting shape...

So here are the questions: how can I get a mirror floor? And I was playing with lights but I can't get them working at all, and sometimes crashed, specially spot lights... right now I have a directional light which is the only I can use. Is that still in development?

Cheers!


My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby SolarPortal » 09 May 2017, 19:28

Hi, that video and menu is looking really good... is that skyline?? lol :P ...joking :P

As for the default scene, when the engine loads it load the file:
"$(Skyline)\Data\Scenes\Default.xSkyScene"
Overwriting this file will change the scene that skyline loads with.

Are you running Gen1 or Gen2 skyline as Gen2 next version has much better lights with performance enhancements and point light shadows. We also have Static Shadows being worked on.

Ahh. Mirror floor, now this is not possible yet in Gen2 to have a correct reflection, so the best you can do is either reduce the fresnel amt to the bottom and lower the roughness and apply a reflection.

For Gen1, their is the mirror action, but it is complex to use and never really made it into scenes as it was too complex.
Also, making shiny objects in Gen1 is alot harder than gen2.

In the next version of skyline Gen2, we will have Parallax Corrected cubemaps which are great for taking a snapshot of the room as a probe and using that as the reflection instead and we also have the options of adding Screen space reflections but it takes a lot of performance and needs big cards.

For now, my best advice would be too fake it as best as possible.
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 4770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3631
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Menu system

Postby planetX » 09 May 2017, 19:50

Hi SP, thanks, glad you like it... I'm working in Gen2, totally forgotten Gen1. No problem, I can wait for features, still have a lot to do in many other aspects. Just playing... :D

My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby StarFire » 09 May 2017, 19:54

Nice, very clean pro looking UI. :D

to fake a reflection just make a copy of the mesh and invert it and make the floor transparent, old skool style ;)
Dream the Journey, Live the Experience!
User avatar
StarFire
Skyline Founder
Skyline Founder
 
Posts: 1678
Joined: 03 Jan 2012, 18:50
Location: UK
Skill: Great creative
Skill: Programmer
Skill: 3D Modeller
Skill: 2D Artist
Skill: Level Designer

Re: Menu system

Postby SolarPortal » 09 May 2017, 20:13

ahh cool to hear your using Gen2 and your getting good results. exciting times then :) Gen1 does feel like an engine of the past to us now lol :P

Cant wait to get every other user using gen2 instead of gen1 o_O
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 4770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3631
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Menu system

Postby planetX » 09 May 2017, 20:44

StarFire wrote:to fake a reflection just make a copy of the mesh and invert it and make the floor transparent, old skool style ;)


That's clever, but... can I mirror a mesh in skyline? I don't want to import an extra mesh just for that.

My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby StarFire » 09 May 2017, 21:29

No sadly you would have to make a special mesh for it to be accurate, obviously it can be lower polly for perf reasons. if push comes to shove you can use the orig mesh if its roughly symmetrical, this with a semi transparent floor so you only get a hint of the reflection. May be enough to fool the viewer.
Dream the Journey, Live the Experience!
User avatar
StarFire
Skyline Founder
Skyline Founder
 
Posts: 1678
Joined: 03 Jan 2012, 18:50
Location: UK
Skill: Great creative
Skill: Programmer
Skill: 3D Modeller
Skill: 2D Artist
Skill: Level Designer

Re: Menu system

Postby SolarPortal » 09 May 2017, 21:46

We have just done a couple of tests and if you put "-1,-1,-1" in the scale property of the entity(not the translation utility), then create a second material and apply it, you will get a mirrored model.

In that second material (*.skymat), change the line
Code: Select all
 "cull_mode" : "clockwise"
to
Code: Select all
 "cull_mode" : "anticlockwise"
to render the vertices in the other direction to stop the material looking inside out.

This will allow you to mirror a model without creating a second mesh.

p.s. i thought this was passed in the material editor, but it doesn't appear to be. So we will add it asap.
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 4770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3631
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Menu system

Postby planetX » 10 May 2017, 17:51

Hi SP, thanks for the trick! ;)

I've spawned all the car meshes and cloned them via script, also applied the negative scale. But I'm having problems trying to apply the mirrored materials to the meshes. I'm using this function:

Code: Select all
entity.setMaterialName(obj, "Proto_Red_adv");


... but it doesn't work, or maybe I am doing something wrong... I've also tried to change the name of the material (.skymaterial) around this line:

Code: Select all
"pbs" :
   {

      "material_name" :  <-- THE NAME?
      {
         "macroblock" : "Macroblock_0",
         "blendblock" : "Blendblock_0",
         "shadow_const_bias" : 0.01,
         "workflow" : "specular_ogre",


but nothing happens. Any clue?

My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Re: Menu system

Postby SolarPortal » 10 May 2017, 18:19

ok :) maybe i can shed some light on things.

The entity.setMaterialName no longer need the _adv or _deferred tags and Gen2 does not use or need these. Pass your material name as it is called :)
To set a submaterial, then use the "entity.setSubMaterialName(id, subID, materialname);"

In your examples case; call "entity.setMaterialName(obj, "Proto_Red");" as the material is called "Proto_Red".

Q) Have you added the *.material and *.skymat to the resources. Go to the asset manager > Navigate to the directory > Either:
* Click on the folder and click yes to add the new materials.
or
* Right click on the Explorer folder > Resource Manager > Add to resources.

It will need to be added in order to load at all :)

Also, there is no need to change the material_name at all unless you are renaming the actual file also. e.g. file is called "my_material.skymat" so the material inside the file should be called "my_material".

Further to it all, it is awkward at the moment to visualise a *.skyMat file in the asset manager as we see the .material and load and display the *skyMat. So it is best to have a simple material representation of the *.skyMat in order to see the material in the asset manager. This is something to be done and is quite important :)

Hope this sheds some light and if it doesnt help, then im sure there are more things to try :)
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 4770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3631
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Menu system

Postby planetX » 10 May 2017, 21:16

Hi, thanks for the info... everything was in place as you said but still not working, until I've realized that I was doing something wrong in the lua script... :oops: Finally solved it and got all the meshes nicely mirrored. Still needs some tweaking but I'm getting there. :D

I'd like to have nice shadows as well, but for some reason can't get them working... I can fake them though ^^


My specs: Windows 10 - Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz - 16 Gb ram DDR4 - NVIDIA GeForce GTX 960M 4 Gb

planetX
Skyline Contributor
Skyline Contributor
 
Posts: 210
Joined: 28 Nov 2016, 18:27
Skill: 3D Modeller
Skill: Level Designer
Skill: Concept artist
Skill: Great creative
Skill: Programmer

Next

Return to UI

Who is online

Users browsing this forum: No registered users and 3 guests

cron