A – New Enhanced Defold Game Template

Project Summary:

Over the past few weeks, I’ve been focused on compiling an improved Game Template — one that incorporates many of the major features you’ll find within a ‘standard’ game.  I included a very basic template within the Introductory Defold Tutorial, however, it was extremely limited.   At this point, I’d like to include within a template many of the animation and GUI elements addressed within the introductory tutorials – as well as a few new features to serve as a starting point for future Defold Game Projects.  This revised template includes stubs for each of the major game components you’d expect within a Mobile Game Application – to include: (a) Animated Designer and Game Logos, (b) Animated Graphic User Interface with a set of Level Buttons, (c) Separate Defold Collections for each game level, (d) an Information/Help Panel to provide game instructions, (e) a customized Rendering Script which enables the retrieval of window size specifications, and (f) the use of Lua Modules to support common functions which apply to all game levels.

I’ve also included some debugging text messages on the screen to assist in developing this application — they can be easily removed for a production version.

 

Here’s what the final Enhanced Defold Game Template looks like:

 

 

The following table summarizes the key features which have been integrated into this Enhanced Defold Game Template.

Key Template Features

  • CUSTOM RENDERING – I’ve included a custom lua script to support obtaining window size specifications. Additionally, a canvas resizing function has been added to the index.html file created during the Defold HTML5 Build process — to enable dynamic resizing of the game world when embedded within an iFrame.
  • ANIMATED LOGOS — The template includes some basic GUI Animations when displaying both the logo for my (1 person) design studio as well for a unique logo for any specific game.
  • GAME LEVEL MENU – Most games include multiple game levels, which a player can select from. The template includes both a background panel GUI node and animated buttons for each level.
  • CROSS COLLECTION GUI – The template includes GUI elements that are persistent across all game levels, as well as GUI elements that are unique to a specific collection, e.g., an ‘Exit” button to return to the Main Menu.
  • POPUP INFORMATION PANEL – I’ve included a button (top left) that supports the display of general gameplay information (e.g, Playing Instructions) when the player is within a specific game level.
  • QUIT APPLICATION – This template also includes a menu entry that enables the user to quit/close the application – especially helpful for mobile games to either Android or iOS.
  • RE-SKINNING – The ‘look & feel’ of a game can be easily customized or modified by swapping the images within the template.
  • USE OF LUA MODULE FOR COMMON CODE – The template incorporates a common Lua Module supporting button, popup and GUI node animations.

 

Project Design & Build Sequence

For this set of Game Tutorials, I’ve decided to include a brief graphic which summarizes the key design patterns which I’ve incorporated into the project.  For this Enhanced Template – the pattern includes custom rendering, a game-wide GUI, and the use of Collection Proxies as the means for controlling loading and unloading of levels.

 

 

Since this template (and the other game tutorials within this section) assume you’ve already become acquainted with the Defold features described within the Introductory Tutorials — I’m going to abbreviate some of the descriptions of the mechanics related to how to add a collection, game object, script or GUI element to a Defold Project.

In summary – building this template will work through the following major steps:

  1. Project Setup — Modifying the game.project, loading images and creating the Atlas, loading custom fonts and custom render scripts.
  2. Creation of the Level1 and Level2 Collections — The template includes the stubs for future inclusion of unique game levels.
  3. Creation of the Main Collection — This main level includes the template background, the overall Graphic User Interface (GUI) and the Controller Script which binds the flow of the entire application together.  This step also includes the addition of proxies into the main.collection for each of the component levels.
  4. Incorporation of a Lua Module for Reusable Code — The template includes a reusable Lua Module for animating buttons and popup windows.
  5. Addition of the Controller Scripts — The final step will be adding Lua scripts supporting each of the main/level1/level2 collections as well as the main_menu.gui.

 

 

Initial Project Setup

game.project Setup

Within the Defold game.project file, several parameters are changed for this project:

  • Title:  Change the title to reflect the current project. I’ve used ‘TactxStudios – Enhanced Defold Game Template 2224 x 1668.
  • Version:  Change to 1.0.
  • Render:  This template will be using a custom rendering script which will be described later in the tutorial.
  • Display Width: 2224   Display Height: 1668 — these parameters reflect an Apple iPad Pro 10.5 which is one of my target mobile platforms
  • Dynamic Orientation:  Checked — this will ensure that the application is viewed properly on a mobile device if the user rotates the screen

 

graphicAssets.atlas

The template uses multiple atlases to accommodate the full set of .png images within the example.   The following images are used within this template – selected to enable future customization of the background, GUI Node images, Developer and Game Logos, etc.  In essence, to create a new game using this template — the developer can substitute new images to replace any of the following — facilitating a quick ‘re-skinning’ of the application.

 

These images can be downloaded within a single zipfile by clicking the following button — placing them within the images folder within the Project Explorer.

 

Please note:  Many mobile devises only allow you to use an Atlas which is 2048 x 2048 pixels in size.  Therefore, to complete our graphics resources and to comply with these size limitations on Atlas files, you need to create three distinct Atlases:

background.atlas

This atlas includes:

  • background_2224x1668

 

levelBackgrounds.atlas

This atlas includes:

  • Level1_Background
  • Level2_Background

 

graphicAssets.atlas

This atlas includes:

  • Static Images: TactxStudioLogo, TactxStudioLogo_550, info_panel2, templateBackground2, template_Logo, and exit_confirmation_panel.
  • Animation Groups:
    • releasedButton – containing redButton_Unpressed
    • pressedButton – containing redButton_Pressed
    • releasedExit – containing exit_BackButtonReleased
    • pressedExit – containing exit_BackButtonPressed
    • releasedInfo – containing infoReleased
    • pressedInfo – containing infoPressed
    • releasedReturn – containing returnButton_Unpressed
    • pressedReturn –  containing returnButton_Pressed

 

custom Font

I’ve decided to add a set of custom fonts to this project — as a means to tweak the user interface to match the tone & style desired for any specific game.    Download this set of custom font files by clicking the following button and place them within a new folder (‘fonts’) within the Project Explorer.

Right-clicking the ‘fonts’ folder — select ‘New’ | select ‘Font’ | change the name to: ‘menuFont’.

Double-click ‘menuFont’ to have it within focus in the Outline Window and change the properties to reflect using ‘MenuFont_50_B-ipadhd.fnt’ as reflected below:

A new font (menuFont.fnt) will be added to this folder.

 

Similarly, we’ll create the second custom font by right-clicking the ‘fonts’ folder — select ‘New’ | select ‘Font’ | change the name to: ‘noticeFont’.

Double-click ‘menuFont’ to have it within focus in the Outline Window and change the properties to reflect using ‘testFont2-ipadhd.fnt’ as reflected below:

 

custom Render Script

Bjorn Ritzl of the Defold team has created a custom render script which I’ve found to be very useful — it’s located on Britzl’s github site.  This custom script enables you to select either (a) centering content with a maintained aspect ratio, (b) centered content and fitting the content to the screen with a maintained aspect ratio, or (c) stretching the content to fill the entire screen.   For this template — I’ve selected the option to stretch the content to fit the screen — but you now have the flexibility (depending upon the type of game being developed) to switch between these options.

This custom rendering script can be downloaded by clicking the following button.  Place the two files within a new folder (‘render’) within your Project Explorer.

 

To complete the setup of this custom rendering, you need to reflect it in the game.project settings.  Do this by changing the ‘Render’ parameter to: ‘render/custom.render’ as shown below:

 

and then — double-click ‘custom.render’ in the Project Explorer to set the pointer to the new custom.render_script as shown below:

 

game.input_binding

The last step in the initial project setup is configuring the input bindings — we’ll keep it simple, only a ‘touch’ input associated with ‘mouse-button-1’, aka, the left mouse button (or touch on a mobile device).

 

 

Project Explorer – End of Phase I

At this point (the end of Phase I), the Project Explorer should look similar to the following:

 

 

Create Level1 and Level2 Collections

 

The next procedure in building this enhanced template is adding the collections for two levels (designated as ‘level1’ and ‘level2’).  These are really just stubs for game levels you’ll be adding when you use this template for a real game project.

Create level1.collection

  • Add a new collection to the ‘main’ folder and change it’s name to level1.collection
  • Bring level1.collection into focus within the Outline Window — change its name in the Properties Window to ‘level1’ as shown below.

  • Within this collection add two Game Objects:  (a) board, and (b) level1_logic.
    • Add a new sprite to the GameObject ‘board’ | selecting ‘levelBackgrounds.atlas’ as the Image and ‘Level1_Background’ as the Default Animation.  Also — I had reduced the size of the original image in order to comply with the Atlas Size Limitations by resizing it by 50%, so, we’ll need to scale it back up here in order to return to its original dimensions.  This is done by setting the x and y scale parameters for the Game Object ‘board’ to 2.0
    • Add a new script as a New Component File to the GameObject ‘level1_logic’ using the following Lua code.   Please note — for this project, I’ve created a new folder (scripts) within ‘main’ and will be placing all my Lua scripts into that same folder.
 

Syntax Explanations

The level1_main.script is pretty straightforward — incorporating features described in the Introductory Defold Tutorials on this website.  One topic to highlight is the message handling for “launchTest”.    This is a stub to demonstrate the manner in which Defold messages can be passed between collections.   The “launchTest” message will be sent from the main menu – which will be described in the next section.

 

Adding the Script to the level1.collection

I’ve added a new GameObject to the level1.collection — the Id is ‘game_level1’.   I’ve added this script as a Component File to the ‘game_level1’ GameObject.

 

 

Create level2.collection

  • Add a new collection to the ‘main’ folder and change it’s name to level2.collection
  • Bring level2.collection into focus within the Outline Window — change its name in the Properties Window to ‘level1’.
  • Within this collection add two Game Objects:  (a) board, and (b) level2_logic.
    • Add a new sprite to the GameObject ‘board’ and designate the ‘Level2_Background.png’ (which is within the levelBackgrounds.atlas) as the Image.  We will also need to set the scale properties of ‘board’ to 2.0, similar to what we did for the level1 board.
    • Add a new script to the GameObject ‘level2_logic’ using the following Lua code
 

Adding the Script to the level2.collection

I’ve added a new GameObject to the level2.collection — the Id is ‘game_level2’.   I’ve added this script as a Component File to the newly created ‘game_level2’ GameObject.

 

 

Create main.collection

The main.collection within this template contains the following components: (a) a background, (b) a Graphic User Interface (GUI), and (c) a level1_proxy and level2_proxy.

 

Add a main.collection

Double-click the ‘main.collection’ within the ‘main’ folder of the Project Explorer….and then add two new Game Objects to the collection, (a) ‘background’ and (b) ‘controller’.  Within the Properties Window, center both the ‘background’ and ‘controller’ Game Objects on the screen by setting their Position x: 1112 | y: 834

 

Add a Sprite to the Background GameObject

Within the ‘background’ GameObject — add a sprite component to it.  Within the sprite’s properties, reference the background.atlas as the Image, and ‘background_2224x1668.png’ as the default animation.

Please note that in order to comply with Atlas size constraints, I had reduced the size of this background .png image — so, we’ll need to change the scale of the background game object to have Defold resize it back to it’s original dimensions.  A scale factor of 1.25 for both x and y will do that.

 

If you haven’t already — I’d recommend doing a ‘SaveAll’ at this point, just to ensure you don’t lose anything.

 

 

Build Graphic User Interface (GUI) Sets

 

Overall Approach for GUI Sets on this Project

For this template, I’ll be building four distinct GUI sets as depicted in the following graphic.  I’m experimenting a little bit by segmenting the GUI Nodes across multiple sets — to facilitate better control over which nodes have input focus at any given time when running the game.  The GUI Sets I’ve chosen support: (a) the Main Menu, which will appear immediately following the completion of the Splash Screens, (b) the Exit Menu, which is used to obtain confirmation from the user that (s)he really wants to exit the game or a chance to return back to the game, (c) Level Controls, which will appear when the user is playing one of the levels – essentially the means for exiting the level, or for obtaining help information, and (d) Information Panel Controls – enabling a help screen as well as a button to allow the user to return to the game.

The following diagram summarizes each of the GUI Sets, as well as highlighting the location of each of the GUI Nodes.

 

 

Adding a Button GUI Template to the main folder — button_template.gui

For this project, we’ll be using a template for a generic button which will simplify the creation of the numerous buttons both in this template as well as future games.   The button template is created as a new GUI within the ‘main’ folder of the Project Explorer — and named ‘button_template.gui’.

With ‘button_template.gui’ in focus within the Outline Window:

  • Add a texture to this GUI and set it to ‘graphicAssets.atlas’
  • Add a font to this GUI and set it to ‘menuFont_50.font’
  • Add three layers – in order: below, text, above
  • With ‘button_template.gui’ in focus within the Outline Window, add a single ‘box’ node and name it ‘button_body’.   Within the ‘button_body’ node, add a text component.  Within the Properties Window — change the size to 200 x 100 and set the font for this text to ‘menuFont’.

The final composition of the ‘button_template’ should be similar to the following:

 

 

Build the Menu GUI:  main_menu.gui

The first GUI file to be created is main_menu.gui.   This controls the splashscreens and the level selection buttons, as well as the Exit Game Button.  To build it – create a new gui file within the ‘main’ folder of the Project Explorer, change the name to ‘main_menu’ and put it into focus within the Outline Window.

  • Add a texture to this GUI and set it to ‘graphicAssets.atlas’
  • Add a font to this GUI and set it to ‘menuFont.font’
  • Add a second font to this GUI and set it to ‘noticeFont.font’
  • Add three layers – in order: below, text, above

Add Key GUI Components to main_menu.gui – Box Nodes

With the main.collection in focus within the Outline Window — within the main_menu.gui — add the following GUI Nodes:

  • Add a Box Node – ‘TSLogo’.  This will be the Logo for the Developer which is part of the SplashScreen.   Set the Texture to ‘TactxStudioLogo’.  Place this node within the ‘above’ layer.  Set the Position to x: 1112 y: 834.
  • Add a Box Node – ‘gameLogo’.  This will be the Logo for the specific game application being developed and will show as part of the SplashScreen sequence.  Within its properties, set the Texture to ‘template_Logo’.  Place this node within the ‘above’ layer.  Set the Position to x: 1112 y: 834.
  • Add a Box Node – ‘menu_panel’.  This is the background which will be placed under the menu buttons on the main page of the application.  Within properties, set the Texture to ‘templateBackground2’ and the layer to ‘below’.  Set the Position to x: 1112 y: 834.
  • Add a Text Node – ‘debugMessageText’.   I’ve added this as a temporary means to capture debugging information during the development process.  I’ve placed it at Position x: 1112 and y: 75.  Also set the Font to ‘noticeFont’ and layer to ‘above’ within the Property Window.
  • Add a Text Node – ‘windowSpecs’.  This is also a temporary GUI Node used for debugging — it will echo the width, height and aspect ratio of the active window.  Within the Property Window, set the font to ‘noticeFont’  | layer to ‘above’ | and set the Positi0n x: 1112 and y: 1605.

 

Add Key GUI Components to main_menu.gui – Button Template Based

We’re going to segregate all the menu buttons together under a Game Object (main_buttons) within the main_menu.gui.   Add a GameObject (main_buttons) to the main_menu.gui within the Outline Window.   The following illustrations highlight how to add a Button to the ‘main_buttons’ GameObject using the button_template.gui that we created in the previous section.

  • Right-click ‘main_buttons’ | select ‘Add’ | select ‘Template’.   Within the Property Window, change the Id to ‘selectLevel1Button’ and change the Template to ‘button_template.gui’.  Set the position to x: 0  y: 170.

 

  • Expand the selectLevel1Button in the Outlook Window to display the selectLevel1Button/button_body and change the Texture to ‘releasedButton’.

 

  • For the selectLevel1Button/text — change the Text to ‘Level 1’.  Check that the font is ‘menuFont’ (we set that up as part of the template).

 

The other GUI nodes in this main_menu.gui set are built in a very similar fashion.

  • Similarly, add a Template for ‘selectLevel2’ — changing the Id to ‘selectLevel2Button’ | use the ‘button_template.gui’ | use the ‘releasedButton’ Texture in the button_body and change the text to ‘Level 2’.  Set the Position to x: 0  y:30.
  • Finally, add a Template for exitGame — changing the Id to ‘exitGameButton’ | use the ‘button_template.gui | use the ‘releasedButton’ Texture in the button_body and change the text to ‘Exit Game’.  Set the Position to x: 0  y:-110.

 

Now we’re ready to build the exit_menu.gui, level_controls.gui and info_panel.gui — as described below:

 

Build the Game Exit GUI:  exit_menu.gui

The next GUI file to be created is exit_menu.gui.  We’ve already set up a button which would enable a user to indicate that they want to exit the game — but to conform with standard practices, we should also have a confirmation popup to allow a user to either exit the game, or to return to the game.   To build it – create a new gui file within the ‘main’ folder of the Project Explorer, change the name to ‘exit_menu’ and put it into focus within the Outline Window.

  • Add a texture to this GUI and set it to ‘graphicAssets.atlas’
  • Add a font to this GUI and set it to ‘menuFont.font’
  • Add a second font to this GUI and set it to ‘noticeFont.font’
  • Add three layers – in order: below, text, above

 

There will be three GUI Nodes in this set – the following procedure is used to create them:

  • Add a Box Node – ‘exitConfirmationPanel’.  This will be the Background that pops up when a user elects to exit the game.  Set the Texture to ‘exit_confirmation_panel’.  Place this node within the ‘above’ layer.  Set the Position to x: 1112 y: 834.
  • Within the ‘exitConfirmationPanel’ – add a Template Node — changing the Id to ‘returnToGameButton’ | use the ‘button_template.gui’ | and set the Position to x: -300   y: -70.  Within the button_body – use the ‘releasedButton’ Texture.    Within  the ‘text’ Node – set the text to ‘Return to Game’.
  • Also within the ‘exitConfirmationPanel’  – add a Template Node — changing the Id to ‘exitGameConfirmedButton’ | use the ‘button_template.gui’ | Set the Position to x: 308    y: -70.   Within the button_body – use the ‘releasedButton’ Texture.  Within the ‘text’ node – change the text to ‘Exit the Game’.

 

Build the Game Exit GUI:  level_controls.gui

This GUI file is level_controls.gui.   These nodes apply when the user is active in one of the game levels.  They enable the user to exit the level and return to the main menu –as well as the ability for the user to call up a help popup — which could include information such as game instructions.  To build it – create a new gui file within the ‘main’ folder of the Project Explorer, change the name to ‘level_controls’ and put it into focus within the Outline Window.

  • Add a texture to this GUI and set it to ‘graphicAssets.atlas’
  • Add a font to this GUI and set it to ‘menuFont.font’
  • Add a second font to this GUI and set it to ‘noticeFont.font’
  • Add three layers – in order: below, text, above

 

There will be two GUI Nodes in this set – the following procedure is used to create them:

  • Add a Template Node — changing the Id to ‘infoButton’ | use the ‘button_template.gui’ | set the position to x: 65 and y: 1600 | set the ‘layer’ to above.   Within the button_body — use the ‘releasedInfo’ Texture | set the X Anchor to Left.  Within the text node – change the text to ‘  ‘ .
  • Add a Template Node — changing the Id to ‘returnBackButton’ | use the ‘button_template.gui | set the position to x: 2168 and y: 1600 | set the ‘layer’ to above.  Within the button_body — use the ‘releasedExit’ Texture | set the X Anchor to Right.  Within the text node – change the text to ‘  ‘.

 

Buid the Information Popup Node:   info_panel.gui

An important element of this Defold Game Template is the ability for the user to call up a help popup — which could include information such as game instructions.  To build it – create a new gui file within the ‘main’ folder of the Project Explorer, change the name to ‘info_panel’ and put it into focus within the Outline Window.

  • Add a texture to this GUI and set it to ‘graphicAssets.atlas’
  • Add a font to this GUI and set it to ‘menuFont.font’
  • Add a second font to this GUI and set it to ‘noticeFont.font’
  • Add three layers – in order: below, text, above

 

There will be four GUI Nodes in this set – the following procedure is used to create them:

  • Add a Box Node – ‘infoPanel’.  This will be the Background that pops up when a user elects to exit the game.  Set the Texture to ‘info_panel2’.  Place this node within the ‘above’ layer.  Set the Position to x: 1124 y: 845.  Set the Scale to x: 2  y: 2.
  • Within the infoPanel node – add a Box Node – ‘smallGameLogo’.  This will be the logo that is displayed on the popup panel.  Set the Texture to ‘TactxStudio_Logo_550’.  Place this node within the ‘above’ layer.  Set the Position to x: -215   y: 232.
  • Within the infoPanel node — add a Template Node — changing the Id to ‘infoReturnButton’ | set the Position to x: 350   y: -220 | use the ‘button_template.gui’ .  Within the button_body – use the ‘releasedButton’ Texture.    Set the scale to x: 0.5 and y: 0.5.  Within the ‘text’ node – change the text to ‘  ‘.
  • Within the infoPanel node — add a Text Node — changing the Id to ‘infoText’ | set the font to ‘menuFont’ | set the Layer to ‘above’ | set the Position to x:  -335  y: 135.  In the text Properties – I’ve changed the color to ‘#724d02’.

Add the GUI sets to the ‘main.collection’

Within the Project Explorer, bring ‘main.collection’ into focus.

  • Add a game object to main.collection — change the Id to ‘controller’.  Add the ‘main_menu.gui’ as a Component File to the ‘controller’ Game Object.
  • Add a game object to main.collection — change the Id to ‘exitController’.  Add the ‘exit_menu.gui’ as a Component File to the ‘exitController’ Game Object.
  • Add a game object to main.collection — change the Id to ‘infoController’.  Add the ‘info_panel.gui’ as a Component File to the ‘infoController’ Game Object.
  • Add a game object to main.collection — change the Id to ‘levelController’.  Add the ‘level_controls.gui’ as a Component File to the ‘levelController’ Game Object.

 

 

Create two Collection Proxies

 

The collection proxy component is used to load and unload new game worlds dynamically based on the content of a collection file.  Within the Project Explorer — right-click the ‘main’ folder | select ‘New’ | select ‘Collection Proxy’ | name it ‘level1_proxy’.   Change its properties to reflect the following:

Then we need to add it to the main.collection.  Place ‘main.collection’ into focus, and then within the Outline Window.  Add a new Game Object – change the id to ‘proxies’.  Right-click the ‘proxies’ Game Object | click ‘Select Component File’ and | select ‘level1_proxy’.

Similarly add a ‘level2_proxy’, reflecting a pointer to the level_2.collection within its properties to the ‘proxies’ game object.

 

Adding Script Files

 

This new Enhanced Defold Game Template includes three categories of Lua code: (a) a Lua Module, essentially containing general purpose functions that can be reused, (b) GUI Scripts which support each of the GUI sets created above, and (c) Level Scripts which will contain logic specific to each game level.  The following describes the creation of each.

 

Add a Lua Module to support Node Animations

For this template, I’ve aggregated all the functions that I’m using to support to animation of GUI Nodes into a single Lua Module.    This module will be required within each of the GUI_Scripts.  Please note that the Defold Documentation provides a detailed explanation of the use of Lua Modules and can be found here.  In summary, a Lua Module enables you to create a reusable code library which can be shared across multiple game objects.

For this template, let’s create a new Module within the script’s folder:

Right-Click the ‘scripts’ folder in the Project Explorer | select ‘New’ | select ‘Lua Module’ | name it ‘animationFunctions’

Replace the default Lua code for ‘animationFunctions’ with the following:

 

Syntax Explanations

The animationFunctions.lua  code leverages the gui.animate features that were introduced in the Animated GUI Nodes tutorial.

 

 

Create a main_menu.gui_script

To add a new ‘gui_script’ which will be included within our main_menu.gui perform the following:

  • Right-Click the ‘scripts’ folder in the Project Explorer | select ‘New’ | select ‘Gui Script’ | name it ‘main_menu’
  • Replace the default Lua code for ‘main_menu’ with the following:

 

 

Add the gui_script to main_menu.gui

Double-click on the ‘main_menu.gui’ to bring it into focus within the Outline Window — then set the Script within the Properties Window as shown below:

 

 

Create an exit_menu.gui_script

To add a new ‘gui_script’ which will be included within our exit_menu.gui perform the following:

  • Right-Click the ‘scripts’ folder in the Project Explorer | select ‘New’ | select ‘Gui Script’ | name it ‘exit_menu’
  • Replace the default Lua code for ‘exit_menu’ with the following:
 

Add the gui_script to the exit_menu.gui

Double-click on the ‘exit_menu.gui’ to bring it into focus within the Outline Window — then set the Script within the Properties Window.

 

 

Create an info_panel.gui_script

To add a new ‘gui_script’ which will be included within our info_panel.gui perform the following:

  • Right-Click the ‘scripts’ folder in the Project Explorer | select ‘New’ | select ‘Gui Script’ | name it ‘info_panel’
  • Replace the default Lua code for ‘info_panel’ with the following:
 

Add the gui_script to the info_panel.gui

Double-click on the ‘info_panel.gui’ to bring it into focus within the Outline Window — then set the Script within the Properties Window.

 

 

Create a level_controls.gui_script

To add a new ‘gui_script’ which will be included within our level_controls.gui perform the following:

  • Right-Click the ‘scripts’ folder in the Project Explorer | select ‘New’ | select ‘Gui Script’ | name it ‘level_controls’
  • Replace the default Lua code for ‘level_controls’ with the following:
 

Add the gui_script to level_controls.gui

Double-click on the ‘level_controls.gui’ to bring it into focus within the Outline Window — then set the Script within the Properties Window.

 

 

Final Result

 

Whew !  ~  Hopefully, you’ve been able to follow the overall sequence of build events — as well as the overall logic that is incorporated into this project.  At this point our Enhanced Defold Game Template is complete — and I have included the full project within a zipfile which can be downloaded by pressing the following button.

 

Please let me know if you found this tutorial helpful — any feedback would be greatly appreciated using the following message form.

 

 

Return to Game Tutorials List