Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

23. April 2018


A new version of the Defold game engine was released, version 1.2.126.  The nicest new feature of this release is the ability to do side by side editing in the Defold Editor.  The Defold Engine is a 2D lua powered free engine from King.  If you are interested in learning to use the Defold Engine, be sure to check our tutorial series available here.Defold


Details from the release notes:

Engine

  • DEF-3137 - Added: Added dmExtension::RegisteriOSUIApplicationDelegate() to Native Extension SDK
  • DEF-3024 - Fixed: Renamed (internal) AxTls symbols with a namespace to avoid libcrypto/libssl clashes
  • DEF-3146 - Fixed: Fix win32 accumulating error in dt when “variable_dt” checked in game.project
  • DEF-3161 - Fixed: Set content length explicitly to zero for 204 (no content) responses
  • DEF-3237 - Fixed: Improved error handling for extension errors on Win32
  • DEF-3216 - Fixed: factory.create() now allows nil for the properties argument
  • DEF-3218 - Fixed: Fixed rare assert when adding and deleting many objects during the same frame
  • DEF-3238 - Fixed: Reenabled logging when using lldb

Editor

  • DEFEDIT-1312 - Added: Side-by-side editing
  • DEFEDIT-1345 - Fixed: Defold 1.2.124 not launching on macOS High Sierra 10.13.4
  • DEFEDIT-1348 - Fixed: Add exception printing & logging during application startup
  • DEFEDIT-1349 - Fixed: Add util directory to reflection check build step
  • DEFEDIT-1350 - Fixed: The debugger is no longer working
  • DEFEDIT-1351 - Fixed: Shift+Enter from the Find field should Find Previous in code editor and console
  • DEFEDIT-1352 - Fixed: Undo after auto-complete no longer removes the whole line
  • DEFEDIT-1353 - Fixed: Text selection almost invisible when searching
  • DEFEDIT-1355 - Fixed: Error when syncing new project from editor
  • DEFEDIT-1356 - Fixed: Error when changed a value (scale) on a template node and then tried to reset it
  • DEFEDIT-1357 - Fixed: AssertionError when trying to attach to a running engine while building
  • DEFEDIT-1358 - Fixed: Breakpoints no longer get copied when you make new lines on a line with a breakpoint
  • DEFEDIT-1359 - Fixed: You can now mouse click to select autocomplete result
  • DEFEDIT-1360 - Fixed: Correctly syntax-highlight numbers inside all-caps Lua constants
  • DEFEDIT-1361 - Fixed: Lua keywords inside strings will no longer trigger indentation changes

GameDev News

9. April 2018

 

Version 1.2.125 of the Defold Game Engine was just released.  This release is primarily a bug fix release.  If you’ve never heard of it, Defold is an excellent 2D game engine from King that is free for developers to use.  You can learn more about working with Defold in our tutorial series available here.  In addition to the release, there was also a new incredibly handy plugin released by the community named Moku, described below.

Details of the release:

Engine

  • DEF-3185 - Added: Added projection helper functions to the default render script
  • DEF-3061 - Fixed: HTML5 rendering issue for Safari.
  • DEF-3209 - Fixed: Multitouch crash on iOS when using more than supported number of touches.
  • DEF-3206 - Fixed: Stopping all playing particlefx on a single particlefx GUI node.
  • DEF-3233 - Fixed: iOS11: App now requests priority over system gestures (i.e. touches at edges)
  • DEF-3217 - Fixed: The SIGABRT signal will now generate a _crash log.
  • DEF-3215 - Fixed: dmLog* functions on iOS now use NSLog.
  • DEF-3162 - Fixed: Changed what part of the script filepath is reported on Lua errors.
  • DEF-3184 - Fixed: Improved link errors for native extensions on Win32.
  • DEF-3197 - Fixed: Resource hashes does not include the factory base path.

Additionally there was a powerful new extension released for the Defold engine.  Moku is a new Defold extension that brings auto-tiling and pathfinding to the Defold engine.

  • Bitmask auto-tiling partially based on the method outlined here: How to Use Tile Bitmasking to Auto-Tile Your Level Layouts. Supports both simple (4-bit) and complex (8-bit) auto-tiling. Can be used in conjuction with defold tilemaps, or your own custom, game-object based maps.
  • AStar pathfinding with support for options such as heavy diagonals, different heuristics, etc
  • Assorted convenience functions including cell picking

 

A great deal more information, as well as a download link, is available here.

GameDev News

15. January 2018


Defold technical artist Martin Dahlin just released the Photoshop extension they use in house at King for exporting GUI designs from Adobe Photoshop to the Defold game engine.  The extension enables you to export such information as layer name, size and position, with additional data such as pivot position and slice9 properties stored on a per layer basis.  The results are ultimately exported in Defold’s .gui format.

1-overview


You can learn more about the extension here.

GameDev News

21. February 2017

 

Somewhat delayed from the rest of the Defold Engine tutorial series, I realized there was a major gap in subjects we covered... GUI programming.  Defold actually has some really solid UI functionality built in, and in this tutorial we are going to look at the basics of handling a UI in Defold. Well very conventional in it’s approach, if you’ve gotten accustomed to the Defold way of doing things, you will find Defold’s approach to handling UI remarkably consistent to the way you do just about everything else using the Defold game engine.

 

As always, there is an HD video version of this tutorial available here.

 

In this tutorial we are going to implement the simplest of UI, but all of the concepts of a much more complicated interface can easily be extrapolated from what we cover here. We are going to create a UI that pops up when the user hits the ESC key, dimming the existing screen, showing the UI, handling input, then un-dimming the UI.  There is a ton more UI functionality available in Defold, but it should be fairly easy to pick it up once you’ve got the basics down.  So without further ado, lets jump right in.

 

A UI in Defold consists of two different file types, a .gui and a .gui_script file.  A gui_script file is just a traditional lua script file, but has access to the gui namespace.    Let’s take a step by step look at creating a UI that appears when you hit the ESC key and handles a simple button being clicked.

 

First we need a font, drag any applicable TTF file to your project.  I personally created a folder called MyFont and dragged it there.  Next I created a Font file in the same folder.

image

 

Next open the newly created Font file and select the ttf file you just imported.  Please note that the filter is broken and you should manually type *.ttf to locate your font.

image

After selecting the font I also increased the size to 30pts.  This is aesthetic and purely optional.

 

Now that we have a font selected, we need to define an Input map.  I fully describe the process here for more information on how Input Maps work in Defold.  This are the bindings I created:

image

 

Next we create our gui file.  Simply select Gui File:

image

 

We can use the Gui File to arrange the controls that make up our UI.  Here are the options:

image

 

In this simple UI we are simply going to create a button by creating a box then adding a text label to it.  We will also create a label telling the user to click the button.  First we need to set up our font that we created earlier.  In the GUI editor, right click Fonts and select Add Font:

image

 

When prompted, select the font you just created:

image

 

Now right click Nodes and add a Box.  Once created it can be positioned by hitting W then moving manually.

TransformBox

 

Next right click the newly created box node and create a child Text field:

image

 

Child nodes automatically inherit the position of their parents.  With the Text node selected, lets set it’s font and text, like so:

image

 

I also created another Text field telling the user to click the button.  This one in the root of the GUI hierarchy and not parented to the box.  You’re outline should look something like:

image

 

While your Gui layout should look something like:

image

 

Now that we have a gui file, let’s right a script that will display it.  In our main.collection I simply create a new script and attach it to the default logo objecct.

image

 

Now of course we need to add the UI to our game object.  Create a new root level GameObject named UI, then add component from file and select our gui file:

image

 

So now you main.collection should look something like:

image

Now we enter the following code for main.script:

function init(self)
	-- we want focus and to hide our UI until needed
    msg.post(".", "acquire_input_focus")
    msg.post("UI","disable");
end


function on_message(self, message_id, message, sender)
	-- Wait for a message from the UI layer that the UI has been dismissed
	-- un-dim our sprite
    if(message_id == hash("DONE_UI")) then
    	go.set("#sprite","tint.w",1.0)
    end
end

function on_input(self, action_id, action)
	-- If the user hits the ESC show the UI and dim our sprite
    if(action_id == hash("ESC") and action.released) then
    	-- UI needed now, reenable
    	msg.post("UI","enable")
    	go.set("#sprite","tint.w",0.2)
	end
end

 

This code does a couple things, first on input it tells Defold we want to get input messages.  We also start out by disabling the UI, by sending it the built-in message disable.  When the user actually hits the escape key, we send a message to re-enable the UI layer.  We also dim the logo sprite so it’s not visually in focus when the UI is active.  Also note we wait for the DONE_UI message to undim our sprite.  This is sent by the UI script, which we will create now.

 

If you select your .gui file, in the properties you will notice there is a setting for Script.

image

 

There is a special kind of script, .gui_script, that is used to control gui objects, the Gui Script File.  Let’s create one in the same folder as our .gui file:

image

 

This is a standard lua script, but it has access to the gui namespace.  Once you’ve created your gui_script, set it as the script for your gui file.  Now enter the following script:

function init(self)
	-- We want input control.  AKA, pump input to the UI
    msg.post(".", "acquire_input_focus")
    
end

function on_message(self, message_id, message, sender)
	-- Expect to be enabled by main when needed.  Acquire focus and set text back to click me
	if(message_id == hash("enable")) then 
		msg.post(".", "acquire_input_focus")
		gui.set_text(gui.get_node("text"),"Click Me")
	end
end

function on_input(self, action_id, action)
	-- handle left clicks.  On left click, see if click was within box
	-- if so change our text (this wont actually be seen), disable ourself and pass a message back
	-- to logo that we are done so it can undim itself
	if(action_id == hash("LEFT_CLICK") and action.released == true) then
		local box = gui.get_node("box")
		if(gui.pick_node(box,action.x,action.y)) then
			local text = gui.get_node("text")
			gui.set_text(text,"Clicked")
			msg.post(".","disable")
			msg.post(".","release_input_focus")
			msg.post("/logo",hash("DONE_UI"))
			
		end
	end
end

 

This code waits for the enable message then sets input focus so the gui can receive input messages from Defold.  It also illustrates how you could change the text of a component within the gui.  The most important logic is in the on_input event handler.  We wait for the LEFT_CLICK input.  We then check to see if the click was within our box, if so we set the text of our control ( which is somewhat pointless as it’s about to be hidden! ) to “Clicked”, disable our self, release input focus then send the message DONE_UI back to main.script.  Now if you run the code:

GIF

 

Of course we only scratched the surface of what you can do in a Defold gui, but that should certainly get you started!

 

The Video

Programming , ,

3. October 2016

 

Welcome to the next part in our ongoing Defold Game Engine tutorial series.  In this tutorial we are looking at working with the integrated Box2D physics engine built into the Defold engine.

 

As always there is an HD video version of this tutorial available here or embedded below.

 

The Defold engine makes it extremely easy to work with physics but is rather minimal in it’s implementation.  Let’s jump right in.

 

Creating a Collision Object

 

The heard of implementing physics in Defold is the Collision component.  This is composed of two part, the Collision Component that describes the physical attributes of a game object, and the Physics shape, which defines it’s dimensions.  I start off by creating this simple Gameobject, the image used in the sprite is 128x128 pixels:

image

 

Now we simple add a new physics component to the game object.  Right click the Game Object in the Outline, select Add Component, then select Collision Object:

image

 

Here are the default properties of a Collision Object:

image

 

Type is important and we will cover that shortly.  Mass is the weight of the object relative to dimensions, friction is how one surface reacts to another ( think traction ), restitution is the “bouncy-ness” of an object, linear damping and angular damping determine how motion of the object degrades over time, locked rotation determines if the physics simulation will rotate the attached game object or not.  Group and Mask are used to determine which collision objects interact with other collision objects.  Objects in the same group will collide, while objects not in the same group, or if that particular group isn’t added to the Group value ( comma separated ) will not interact.  So think of Group as the physics identity or type(s) this object belongs to, while Mask is the groups that object will interact with.

 

Next we need to define the shape of our physics object.  Simply right click the Collision Object and select Add Shape:

image

Next pick Box:

image

 

In the properties, set the Width and Height to match the size of our source image.  Depth is the value along the z-axis and can be left at the default value in most cases.

image

 

Now that we have our Collision object define, simply create a couple instances of our game object in the scene and the results are immediately demonstrated.

GIF

 

You probably didn’t want the boxes just dropping out of the world now do you?  So we need to create a physics body for the “floor”.  We can easily do this by creating a new Game Object in main and adding a physics body to it.  Like so:

image

image

 

The problem here is, our newly created floor will be effected by gravity, just like every other object in the scene!  This is where the Type of the Collision Object becomes important:

image

 

So far we have only used the default, Dynamic.  A dynamic object is a fully simulated physics object.  It will take part in the simulation, will be part of the simulation and will be affected by the simulation.  Static is what we want in this situation.  A static object will be part of the simulation, but will not be effected by it.  This is your proverbial unmovable force!  So other objects in the simulation will be able to hit the collision object and they will be affected by the collision, but the static object will not be changed in any way.  Kinematic objects are special objects that are generally moved directly by the character or code but also take part in the physics simulation and will be affected by it ( think that players sprite for example ).  Triggers on the other hand are simply shapes in the world that can detect a collision and can be hit, but wont have any affect on anything in the world.  They are often used to detect movement, for example the goal area in an air hockey game.

 

Now with our floor object set to static, our updated results!

gif2

 

So, how exactly do we control global physics properties, such as gravity?  These settings are available in the .project file:

image

 

Physics and Code

Now that we know how to set up a physics simulation, let’s look at how to deal with it in code.  For we are going to look at how you respond to a collision in code.  As you might be able to guess, messages are used.  Let’s look at a simple program that responds when a collision occurs.  Attach a script to your box object and add the following code:

 

function on_message(self, message_id, message, sender)
    if message_id == hash("contact_point_response") then
    	msg.post("@render:","draw_line", { 
    		start_point = vmath.vector3(message.position.x -40, message.position.y - 
    		40, 0),
    		end_point = vmath.vector3(message.position.x +40, message.position.y + 40, 
    		0), 
    		color = vmath.vector4(1,0,0,1) })
    	msg.post("@render:","draw_line", { 
    		start_point = vmath.vector3(message.position.x -40, message.position.y + 
    		40, 0),
    		end_point = vmath.vector3(message.position.x +40, message.position.y - 40, 
    		0), 
    		color = vmath.vector4(1,0,0,1) })	
    end
end

This code simply listens for the contact_point_response message which is sent when a collision occurs with the attached game object.  When such a collision occurs, this code draws an X centered about the collision point by sending the draw_line message to the render subsystem.

There is a great deal of information about the collision passed along in the message parameter:

image

As you can see, information on what object was collided with, how fast, groups, velocity, mass etc are all available in the contact_point_response message.

 

On final topic to cover is occasionally you are going to want to be able to apply force directly to a physics object using code.  This is also easily accomplished using the following code:

    	msg.post("#collisionobject", "apply_force", { 
    		force = vmath.vector3(0,5000,0),
    		position = go.get_world_position()})

Again using Defold’s messaging system, we send the apply_force message to our Collision Object component.  This applies 5000 newton of force along the Y axis.  Added inside our collision handler, it makes for some interesting results!

gif3

 

The Video

Programming ,

Month List

Popular Comments