Menu system

[planetX]

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!

[SolarPortal]

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...

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

[planetX]

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...

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...

[planetX]

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

[SolarPortal]

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.

[planetX]

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...

[planetX]

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?

[SolarPortal]

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

[planetX]

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

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.

[SolarPortal]

yes, just use scenescript e.g.

Code: Select all

lua(scenescript, Function, arg1);

Glad your up and running

[epsilonion]

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 2504 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..

[StarFire]

@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

[planetX]

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...

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?

[StarFire]

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.

[planetX]

Aha, I was looking for the "Save as default scene" button... 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!

[SolarPortal]

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

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.

[planetX]

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...

[StarFire]

Nice, very clean pro looking UI.

to fake a reflection just make a copy of the mesh and invert it and make the floor transparent, old skool style

[SolarPortal]

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

Cant wait to get every other user using gen2 instead of gen1 o_O

[planetX]

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.

[StarFire]

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.

[SolarPortal]

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.

[planetX]

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?

[SolarPortal]

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

[planetX]

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... Finally solved it and got all the meshes nicely mirrored. Still needs some tweaking but I'm getting there.

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