In this document you will how use the EGE system.


We use a multi-step thread that allow use to wait asynchronous process to make sure everything is loaded.

This example is take from the Do Not Answer (Alpha 0.0.1) - Main Menu.



Download file:




Initialization


The first thing we do is calling all module from EE than we going to need then we call the EE.LaunchGE() function and as a callback out main thread (See bellow).



  1. EE0_3.Call(EE0_3.modulesList.UTIL_LOADCHECK, function(){
  2.    EE0_3.Call(EE0_3.modulesList.ARRAY_GRID2D, function(){ //Launching Game Engine                
  3.       EE0_3.LaunchGE("#CreatorDiv", [EE0_3.EGEModulesList.GUI_OVERLAY, EE0_3.EGEModulesList.GUI_WIDGET, EE0_3.EGEModulesList.GUI_WIDGET_BUTTON,                 EE0_3.EGEModulesList.GUI_WIDGET_TEXT, EE0_3.EGEModulesList.LOADING_LOADING], MainThread);
  4.    });
  5. });



Global Variable


We also use global variable to store global data:


  1. //Main thread globla variable
  2. menu_OverallLoading;
  3. mainOverlay = null;
  4.        
  5. //Widgets
  6. menu_text = null;
  7. menu_button = null;


Main Thread


Now we use multi-step thread function: we will call all functionality we want to add and each widgets we want to create to initialize the app, and each time we need something to load (A module, an image, etc..), as callback function we use the step function we an incremented step ID.


Step undefined or null


The first step is not 0 but nothing (undefined) but it is working like any other step:


  1. function MainThread(EGE, Step){
  2.                
  3.                if(Step == undefined || Step == null){
  5.                        //Creating loading
  6.                        creator_OverallLoading = EGE.AddOverAllLoading();
  7.                        creator_OverallLoading.AddLoadingBar(function(){ MainThread(EGE, 0); });
  8.                }



First thing we do here is to create a loading system it will show a loading bar over everything (so the EGE can work behind and also show the progress to the user). We store this last into a global variable then call AddLoadingBar(), this function has to load an EE module so we wait the loading is over by send an lambda function with our main thread function and as parameter the EGE ref and the next index which is 0.



Step 0


  1. if(Step == 0){
  2.                        
  3.        //Creating loading
  4.        creator_OverallLoading.SetMaxStep(4);
  5.                        
  6.        creator_OverallLoading.SetLoadingBackColor("#000000");
  7.        creator_OverallLoading.SetLoadingFrontColor("#ffffff");
  8.                        
  9.        creator_OverallLoading.SetBackgroundHex("#7f7f7f");
  10.                        
  11.        creator_OverallLoading.Launch(function(){ MainThread(EGE, 1); });
  12. }


In this step we set details about our loading system like how step will be used (See SetMaxStep and Step functions), the bar color, the background color and then we Launch the loading, it will now appear and be ready to use, of as you might noticed I've called the thread function with index 1.


Note: the loading system is an information display, it goes over everything.



Step 1


  1. if(Step == 1){
  2.                        
  3.        //Setting up GameEngine
  4.        EGE.SetFullscreen(function(){ MainThread(EGE, 2); });
  5. }


This step is a way more lighter, we just the fullscreen button on, but since it has to wait images to load we pass the thread again with index 2.



Step 2


  1. if(Step == 2){
  2.                        
  3.        creator_OverallLoading.Step();
  4.                        
  5.        //Creating main overlay
  6.        mainOverlay = EGE.GUI.AddNewMenuOverlay("mainOverlay");
  7.                
  8.        //Setting Up Main Overlay
  9.        mainOverlay.IsFillingViewport(true);
  10.        mainOverlay.SetBackgroundImage("Src/BG/BGI_MenuBackground.png", function(){ MainThread(EGE, 3); });
  11. }


First we add step in the loading system to make the bar moving. Then we create our main overlay named: "mainOverlay" so every children IDs will start by mainOverlay_.


Then we start calling setters for our mainOverlay the important IsFillingViewport and we set the background image and wait for it to load.



Step 3


The step is a long step in our initialization and the final one, for easier explanation I've separated in two:


  1. if(Step == 3){
  2.                        
  3.        //Creating main overlay
  4.        creator_OverallLoading.Step();
  5.                        
  6.        //Adding text
  7.        menu_text = mainOverlay.AddWidget(EGE.GUI.WidgetType.WIDGET_TEXT, "Menu_Text").SetSizePosition("100%", "4vw", 0, "calc(50% - 6vw)").AddText("Welcom in <span style=\"text-decoration: underline;\">Do Not Answer</span> for the moment only the creator is available.").TextAlign("Centered", "Centered").SetFontSize("2vw");
  8.        creator_OverallLoading.Step();
  9.                        
  10.        //Adding button
  11.        menu_button = mainOverlay.AddWidget(EGE.GUI.WidgetType.WIDGET_BUTTON, "Menu_Button").SetSizePosition("10vw", "4vw", "calc(50% - 5vw)", "calc(50% + 2vw)").SetBackgroundColor([0,0,0,0], [0,0,0,0.5], [0,0,0,0.3]).SetBorder("All", "solid", 4, "Black", 50, "All").SetOnClicked(function(){window.location.href = "Game/Creator";});
  12.                        
  13.        menu_button.AddWidget(EGE.GUI.WidgetType.WIDGET_TEXT, "Menu_Text").SetSizePosition("100%", "100%", 0, 0).AddText("Creator").TextAlign("Centered", "Centered");
  14.        creator_OverallLoading.Step();



First we add a step in the loading system (for step 2). And now we create our widgets that we going to store in our global variables (Remember addWidget@ will always send back the created widgets).


For all widgets created will call all required setters, we also create a sub widgets text for the button.

And finally add another step to the loading system.


Note: almost all widgets setters are returning themselves to you can call a function on the same line like above.





Now the second part:


  1.        //Launching
  2.        EGE.Launch();
  3.        creator_OverallLoading.Step();
  4. }


This is an important part, here we Launch the EGE and add one more step to the loading system, because if you  set it properly the loading system will automatically close himself.

Created with the Personal Edition of HelpNDoc: Easily create HTML Help documents