Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
27. September 2016

 

Today saw a new released of the Lua powered Defold game engine.  The primary addition of this release was Spine support was added directly to the GUI.  Spine is a 2D IK based animation system I covered in detail in this post.  Of course I also have alogo-text-below complete Defold game engine tutorial series if you are interested in learning more.  I also did this hands-on video with the Defold game engine.

 

Back to release 1.2.89 details.  Not a huge release by any means, here are the complete release notes:

 

We have now added support for Spine nodes in GUI scenes. Similar to the component version, this creates a GUI node for each bone in the spine instance, which come in handy when you want to parent other nodes to your spine bones. A couple of new script functions has been added to the gui.* namespace, such asgui.get_spine_bone, gui.play_spine and gui.cancel_spine. The argument list for the two latter functions are the same as for their spine.* counterpart, except they take a GUI node as first argument; namely a spine GUI node.

The profiler (toggled via toggle_profiler) has been fixed and should now display the same information on all platforms.

We have also worked on memory leaks and performance issues which will result in better performance for all games, especially those with massive amounts of game objects.

Engine

  • DEF-1528 - Added: Spine support in GUI
  • DEF-2111 - Fixed: Spine events were incorrectly sent to the completion callback
  • DEF-2034 - Fixed: Profiler missing some information on different platforms
  • DEF-2084 - Fixed: Missing GUI node size enums in script
  • DEF-1983 - Fixed: Memory leak when creating and/or deleting game objects

GameDev News


12. September 2016

 

Welcome to the next part in our ongoing Defold Game Engine tutorial series.  Today’s tutorial is going to show an area where the Defold engine really shines, creating 2D tile based levels.  This way of creating levels is to paint levels in a data structure called a tilemap, which itself is a collection of tiles.  A tile is simply a portion of an image that can be drawn over and over, much like you could use Lego blocks to create a castle.

 

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

 

For this tutorial we need a tileset to work with.  This is simply an image composed of tiles, in this case with no spaces or padding between them.  I personally am using the tiles from opengameart.org in the Free Platformer Game tileset.  I have taken these individual tiles and merged them together into a single image you can download below.  (Be sure to click the image to get the full sized version.  In this example size does matter! ).

 

tilesThis is a 1024x512 pixel image composed of 64x64 pixel tiles.  Of course you can use whatever image you want, just be aware that if there is padding or different sized tiles your version is going to be different.

 

As always I assume you have gone through the prior tutorials in the series.  Alright, now that we are set up, let’s get going.

 

Creating a Tile Source

 

First things first, we need to create a directory for our level, tiles, images, etc.  I simply created a folder called level.  Inside this folder I created a directory called images and dragged the image above into that folder, like so:

image

 

Now we need to create a tile source.  You can think of this as the palette or selection of tiles we are going to paint with.  Don’t worry, it’s exceedingly easy.  Simply right click level, select New->Tile Source File

image

 

Called it tiles.tilesource like so:

image

 

Now in Outline make sure Tile Source is selected:

image

 

Now in the Properties panel, select the image file we added earlier for the Image property, then set Tile Height and Tile Width to 64.  Obviously if you used a different image you may have different settings here.

image

 

Now in your viewport you should see your tiles, with the grid drawn nicely around them like so:

image

 

All done creating our tilesource.  Make not of the collision property... we will come back for that in the next tutorial.  Make sure you save.

 

Creating a Tile Map

Now it’s time to actually create our tile map.  Once again right click the level folder and select New->Tile Map File.  Name this one map.tilemap:

image

 

Now in Outline make sure Grid is selected:

image

 

Now in the properties, pick out tilesource:

image

 

Now select layer1 in the outline window and we can begin painting!

 

In the viewport use the spacebar to bring up the tile source, then left click to select the active tile.  Now hit space again to hide the tile source and paint using the left mouse button.  You can also use the right mouse button to select multiple painted tiles to easily clone and reproduce compound tiles.

GIF2

 

If you need to paint tiles on top of other tiles, simply create another layer, right click Layers and select add:

image

 

The z order determines the draw order of tile layers:

image

 

Right click an empty space then left click to delete a tile if required.  Save before continuing on!

 

Using a Tile Map

Finally it’s time to put our newly created tilemap to use.  This is also simple.  Open your main.collection in the editor then add a new game object just like we did in the past.  Right click the game object and select Add Component From File:

image

 

Select your .tilemap file, and voila:

image

 

The Video

Design Programming


8. August 2016

 

There has been a new release for the Lua powered cross platform Defold game engine.  I have an ongoing tutorial series for the Defold game engine available here should you wish to learn more.

 

This release is relatively minor although there is a new module and some breaking changes you should be aware of. Here are the release notes:

This release is smaller than usual because most of the team has been away on summer vacation.

This time, we have fixed the sound performance issue on Android that was introduced in version 1.2.84.
The audio performance is now back to normal.

We also fixed an issue with the way we handled certain messages, which could lead to crashes.

And, we've added a new lua module called "window". For instance, it lets the user set an event listener.
The currently supported events are window.WINDOW_EVENT_FOCUS_LOST, window.WINDOW_EVENT_FOCUS_GAINEDand window.WINDOW_EVENT_RESIZED.

The window module also allows you to control the dim mode of the screen viawindow.set_dim_mode/window.get_dim_mode.

The game.project editor now expose the max number of Spine instances.

We've updated the SSDP handling in the editor, it should now be easier to find and connect to your target devices.

Engine

DEF-1146 - Added: New "window" lua module, with event listener
DEF-1260 - Added: Ability to block device from going to sleepmode
DEF-2007 - Added: Spine max count exposed in game.project editor
DEF-1999 - Fixed: Sound performance bug on Android
DEF-2006 - Fixed: Improved our device detection (SSDP) handling
DEF-2011 - Fixed: Unaligned memory (simd) in message passing

Documentation

DEF-2027 - Clarified condition for vectors in vmath.quat_from_to

 

Defold is available here.

GameDev News


14. July 2016

 

In the previous tutorial we looked at the basics of creating an application using the Defold engine, part of that included the built in Atlas type for displaying a sprite.  In this tutorial we are going to look further into sprites.  In case you are unaware, a sprite is simply a 2D graphic with position and is pretty fundamental to modern 2D games, even if sprites are actually faked in 3D.

 

There is an HD video version of this tutorial here.

 

In the previous tutorial we started with an Atlas created for us.  This time we are going to create one from scratch.  Don’t worry, it’s easy.  So what exactly is an Atlas?  It’s simply a collection of images in a single source.  The Defold engine itself is resposible for determining the ideal layout for the best performance.

 

Creating and Populating an Atlas

 

Creating an Atlas is simple.  In the Project Explorer, right click the folder you want to create the Atlas in and select New->Atlas File

image

 

Next name your Atlas file.  In this case I’m going with walker.  The extension is predictably enough .atlas.  Then click Finish.

image

 

Now we need some Image files to put in our Atlas.  In this case I am using a selection of images I created earlier but you can use whatever images you want.  If you are a Patreon backer, they are available in the Patreon Dropbox in the folder Art\AnimatedCharacter\Spritesheets\Raw\walk.  Whatever images you go with, simply drag and drop them to the images folder inside the main folder.  If you don’t have such a folder, simply right click and create one.

GIF

 

Now make sure Walker.Atlas is open in the editor, then go over to the Outline view, right click Atlas and select Add Animation Group. 

image

 

In the properties window, name the animation walk and set the default playback mode to Loop Forward.

image

 

Now right click the newly created Walk animation group and select Add Images.  In the popup dialog, select all our newly added images.  You can use CTRL or SHIFT to multiselect:

image

 

You will see that Defold automatically arranges all of our frames of animation together into a single atlas:

image

 

Be sure to save your Atlas before continuing.  You can preview the animation by right clicking “walk” in the Outline then choosing Play/Stop Animation.

GIF2

 

Creating a Sprite

Now that we’ve got our populated Atlas and a walk animation, how do we use it?  We create a Sprite.

To do so open up your main level .collection file.  In Outline right click Collection then choose Add Game Object:

image

 

I personally changed the ID of mine to walker.  Now right click the newly created game object and select Add Component.

image

 

In the Add Component dialog, choose Sprite.

image

 

With the sprite selected in Outline, we now need to define some properties, specifically Image and Default animation.

image

 

For Image, it will bring up a dialog box, select our recently created Atlas.  If the Atlas isnt shown, make sure everything has been saved.

image

 

Next select the Walk animation we defined earlier.

 

Now your game object Sprite will show in Collection.

image

 

In this case our sprite is centered about the atlas.  You can move the sprite using the W key.  ( E and R can be used for rotation and scaling as well ).

image

 

Each arrow represents the axis it will be moved along.  Or you can position your mouse inside the square and move freely in any direction.  Position your character then run your game (Ctrl + B) and you should see:

GIF3

 

Creating a Tile Source

You can also use a tile source instead of an Atlas.  A tile source is simply a grid of sprites already arranged into a single image.  To use a tile source instead of selecting Atlas, you select Tile source.  I wont be covering it in detail here ( I will cover tile sources later when we get to tile maps ), but if you want more details check the video where I did cover it.

 

You can also programmatically program the animation, get callbacks when animations complete, etc... but that requires knowledge of message passing... and that’s in the next tutorial!

 

The Video

Programming


28. June 2016

 

There is a new release of the Defold Game Engine, version 1.2.84.  WebView is now available on mobile platforms with certain limitations.  This release also includes improved sound on mobile devices with better call and battery management.  Among the other fixes are:

Engine

  • DEF-1674 - Added: WebView support on iOS and Android
  • DEF-1691 - Added: sound.is_phone_call_active() available on mobile devices
  • DEF-1857 - Changed: render.predicate now accepts hashes as well as strings
  • DEF-1914 - Fixed: Support for setting HTTPS URIs as resource.uri
  • DEF-1709 - Fixed: IAP callback did not run after opening a minimized app via the home screen on Android
  • DEF-1940 - Fixed: Some purchases using test accounts on Android resulted in error
  • DEF-1918 - Fixed: Stack problem on Android devices < 4.3
  • DEF-1920 - Fixed: Bundle dialogs for iOS and Android now remember the field entry data
  • DEF-1924 - Fixed: Android IAP dialog was shown multiple times if changing device orientation
  • DEF-1937 - Fixed: dmloader.js would sometimes try to load the same archive files multiple times
  • DEF-1825 - Fixed: Crash when on_message functions tried to return data
  • DEF-1278 - Fixed: Android implementation of sound.is_music_playing() now works correctly

Service

  • Updates of access token management. It is now possible to revoke access tokens.

Web

  • API documentation for render has been updated
  • An "Examples project" is now available
  • Return values has been clarified in API docs
  • API documentation has been added for WebView

If you are interested in learning more about the Defold Engine be sure to watch this video.  We also have a tutorial series in development here on GameFromScratch.com.

GameDev News


GFS On YouTube

See More Tutorials on DevGa.me!

Month List