Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

31. May 2017


Defold Engine 1.2.105 was just released.  The Lua powered cross platform 2D game engine adds support for native extensions on HTML5 platforms.  This release also added a profiler module for monitoring CPU and memory usage of your app.  If you are interested in learning more about the Defold game engine, we have a complete tutorial series available here.


Details of this release:

Engine
  • DEF-1058 - Added: Profiler memory and CPU usage information.
  • DEF-2685 - Added: HTML5 support to native extensions.
  • DEF-2727 - Added: Addded html5.run() function to call JavaScript from Lua.
  • DEF-1995 - Fixed: msg.url() can be created before collection is loaded, and also be reused (msg.socket is a hash).
  • DEF-2721 - Fixed: Bob.jar now lists all options (including defoldsdk).
Native Extensions

We have now added support for building your native extensions for HTML5
It works both when using 'Build HTML and Launch' as well as when bundling.
It supports C++, embedded JavaScript, and Emscripten JavaScript libraries.
Editor 2 support for HTML5 native extensions is being worked on and will follow shortly.

We also fixed an issue during the sprint where the build server didn't take all the
Android flags, linkFlags and libs into account.

Documentation

There is a new section on the site called "Examples23" where you can find small contained examples on how to do common things in Defold. We will expand this section and are taking requests!

30. May 2017


Back in Part One of our look at the PlayCanvas HTML5 3D game engine, we started creating our simple bowling game.  We already created our lane and pins.  Now it is time to continue on and create our bowling ball.  Attached to our bowling ball will also be the script the controls the majority of our game.  Let’s jump back in.


Creating the Bowling Ball

This time, instead of importing a model, we are simply going to use a built in procedurally generated mesh.  Simply right click the Root in the Hierarchy view, select New Entity then Sphere.

image

Scale the newly created ball down and position it accordingly.

image

Under the Entity properties, I renamed it from Sphere to BowlingBall.  Right now our ball doesn’t look all that great.  Let’s go ahead and make it a bit shiny.  Right click in the asset area, select New Asset->Material.

image

Select the newly created material from the assets tab.  In the Material panel, I rename it to BowlingBallMaterial.  What I want to do is make the bowling ball a bit shiny.  I am going to leave it white, but if you want to change the color, do so under the Diffuse tab.  Next head on down to the Specular tab.  I used the following settings

image

Finally we need to apply the material to our bowling ball.  In the Hierarchy view, select the BowlingBall entity, under the Model panel, select our newly created Material.

image

Our bowling ball also needs to have a Collision shape and Rigid Body attached to it.

image

image

Be sure to set the Collision object to a Sphere and size the radius to be only slightly larger than our bowling ball model.


Now we have all the pieces needed for our game.  The pins, the lane and the bowling ball.  Now all we need to do is add some logic to the game.  This is done by attaching scripts to entities within our game.  In this case we are going to attach the logic to our bowling ball.


Scripting

With our BowlingBall entity active, add a component and select Script.

image


Scroll down to the Script panel, select Add Script->New Script.

image

Enter a name for the script.

image

Now click Edit Script to launch the script editor.

image

Now enter the following script:

var BallScript = pc.createScript('ballScript');

BallScript.attributes.add('speed', {
    type: 'number',
    default: -8
});

BallScript.prototype.initialize = function() {
    this.entity.collision.on('collisionstart', this.onCollisionStart, this);
    this.app.keyboard.on('keydown', this.onKeyDown, this);
    
    var pins = this.app.root.findByTag("Pin");
    this.startingPositions = [];
    this.startingRotations = [];
    for(var i = 0; i < pins.length; i++){
        this.startingPositions.push(pins[i].getLocalPosition().clone());
        this.startingRotations.push(pins[i].getLocalRotation().clone());
    }
    
    this.ballPosition = this.app.root.findByName("BowlingBall").getLocalPosition().clone();
    this.ballMoving = false;
};

BallScript.prototype.onCollisionStart = function (result) {
    
    if (result.other.rigidbody) {
        if(result.other.name == "BowlingPin")
            this.entity.sound.play("Hit");
    }
};

BallScript.prototype.onKeyDown = function(e) {
    if(e.key == pc.KEY_SPACE || e.key == pc.KEY_W){
        this.entity.rigidbody.applyImpulse(0,0, this.speed);
        this.ballMoving = true;
    }
    if(e.key == pc.KEY_R){
        var pins = this.app.root.findByTag("pin");
        for(var i = 0; i < pins.length; i++){
                pins[i].rigidbody.teleport(this.startingPositions[i],this.startingRotations[i]);
                pins[i].rigidbody.linearVelocity = pc.Vec3.ZERO;
                pins[i].rigidbody.angularVelocity = pc.Vec3.ZERO;
        }
        // now the ball
        this.entity.rigidbody.teleport(this.ballPosition);
        this.entity.rigidbody.linearVelocity = pc.Vec3.ZERO;
        this.entity.rigidbody.angularVelocity = pc.Vec3.ZERO;
        this.ballMoving = false;
    }
    if(e.key == pc.KEY_B){
         // Just the ball
        this.entity.rigidbody.teleport(this.ballPosition);
        this.entity.rigidbody.linearVelocity = pc.Vec3.ZERO;
        this.entity.rigidbody.angularVelocity = pc.Vec3.ZERO;
        this.ballMoving = false;
    }
    if(e.key == pc.KEY_LEFT || e.key == pc.KEY_A){
        this.entity.rigidbody.applyImpulse(-0.2,0,0);
    }
    if(e.key == pc.KEY_RIGHT || e.key == pc.KEY_D){
        this.entity.rigidbody.applyImpulse(0.2,0,0);
    }    
};

// update code called every frame
BallScript.prototype.update = function(dt) {
};


One thing you may notice in the script above is the definition of the speed attribute.  This exposes this variable back to the editor, like so:

image


You may notice the line of code in the script for playing audio when we collide with a pin:

    if (result.other.rigidbody) {
        if(result.other.name == "BowlingPin")
            this.entity.sound.play("Hit");
    }

Now we need to add this audio asset to our bowling ball.  First add the audio file as an asset.  Simply click add asset –> Upload, then upload a WAV file.  Now we need to add a sound component to our BowlingBall entity. 

image


Now scroll down to Slot 1 and add the asset you just uploaded and be sure to set name to Hit.

image


And done.  A complete, rather simple but fully functioning 3D bowling game in just a few minutes.


The Video

Programming , , ,

29. May 2017


SharpDX is a managed wrapper for the DirectX series of APIs including Direct 3D 9/11/12, Direct2D, DirectInput, XInput and more.  This library makes it easy to use DirectX libraries with languages such as C#, VB.net and more.  It is released under the incredibly flexible MIT open source license.  This release brings support for Visual Studio 2017 and perhaps most importantly, support for .NET core platform.


This new release of SharpDX contains:

  • Several bug fixes, see the full list below
  • A migration of the build system to VS 2017
  • Added support for the .NET Core Platform (netcoreapp1.0, netstandard1.1, uap10)

This release is the dedicated work of external contributors, thanks a lot for their work!

The binaries are accessible on nuget.


The full list of new features and bugs is available here.

GameDev News

27. May 2017


Tiled, an open source 2D map editor, finally hit the 1.0 milestone release.  As expected from a major point release, this one is loaded with new features.  External tilesets, text objects, grouping of layers are perhaps the largest new features, there are however dozens more.  If you areTiled interested in learning more about Tiled, we have done a comprehensive set of tutorials to get you started.


Details from the release notes:

Changelog

Many more improvements were made, here is the full list:

  • Added support for editing external tilesets (#242)
  • Added a text object with configurable font and wrapping (#1429)
  • Added layer grouping (#1038)
  • Added Tile.type and inherit tile object properties from the tile (#436, #1248)
  • Added a start page
  • Added selection of underlying objects with Alt modifier (by Yuriy, #1491)
  • Added an option to disable safe writing of files (#1402, #1404)
  • Added invert selection action (by Leon Moctezuma, #1423)
  • Added support for isometric terrain overlays and tile collision objects (#419, #757)
  • Added 180-degree symmetry mode to terrain brush with Alt modifier
  • Added short and consistent map format names to use with --export-map (by Marce Coll, #1382)
  • Added Swap Tiles action (by Alexander Münch, #866)
  • Added tileset background color property (#227)
  • Added 60 degree tile rotation support for hexagonal maps (by Victor Nicolaichuk, #1447)
  • Added a check for duplicates when adding tiles (by Simião, #1227)
  • Added option to run commands from menu as well as edit them (by Ketan Gupta, #943)
  • Added custom shortcuts for commands (by Ketan Gupta, #1456)
  • Added optional ID and Position columns to objects view (by i-ka, #1462)
  • Added an executable picker for custom commands (by Ketan Gupta, #942)
  • Added marching ants effect on selected objects (by Mohamed Thabet, #1489)
  • Added all open tilesets to the Tilesets view
  • Added auto-show/hide all views (Clear View) action (by erem2k, #563)
  • Added minimap in the resizing dialog (by Yuriy, #1516)
  • Added drag-n-drop support in Layers view (#178)
  • Added support for storing object type definitions in JSON format (#1313)
  • Added cut/copy/paste actions for custom properties (#515)
  • Allow changing the tile of tile objects (by Mohamed Thabet, #409)
  • Allow selecting a folder to fix multiple broken links at once
  • Added support for dragging external tilesets into the Tilesets dock
  • Added support for dragging images into image collection tilesets
  • Write out Tiled version in TMX/JSON “version” attribute (#1416)
  • Remember last view on map also for closed files (#905)
  • Remember tileset zoom level in the tileset editor (by Artem Sharganov, #408)
  • Change current layer depending on selected objects (by Glavak, #1424)
  • Improved support for using Tiled on HiDpi screens
  • Improved the behavior of the tile selection tool
  • Made Ctrl+D duplicate objects instead of deleting them
  • Use an eye icon instead of a checkbox for layer visibility (by Ketan Gupta, #1127)
  • JSON tileset: Save width/height of individual tile images
  • Linux: Added MIME type for tileset files
  • Fixed hexagonal rotation of tile stamps (by Bdtrotte, #1476)
  • Fixed handling of broken tile references, which now render as a red marker
  • Fixed manual reloading of images for image collection tilesets
  • Fixed Offset Layers tool to wait until mouse is moved
  • Fixed current stamp to always update when a tile is clicked
  • Fixed handling of pinch gestures (#1305)
  • Fixed flipping a group of objects to work like expected (by Vitek1425, #1475)
  • Fixed stamp brush to work better on staggered maps (by Bdtrotte)
  • Fixed objects offsetting while resizing (by Acuion, #1518)
  • Fixed fill tool for hexagonal maps (#883)
  • Fixed potential crash in Terrain Brush
  • Windows: Fixed menus when using OpenGL in full screen mode (#1576)
  • Windows: Added Sticker Knight and Python example scripts to installer (#819)
  • Windows: Fixed bringing existing Tiled window to foreground (#1256)
  • AutoMapping: Fixed object groups always getting added
  • AutoMapping: Improved map boundary handling (by Stefan Beller, #1224)
  • AutoMapping: Apply custom properties set on output layers
  • terraingenerator: Made the amount of columns configurable
  • terraingenerator: Copy tile properties from the source tilesets
  • Added Ukrainian translation (by Olexandr Nesterenko)
  • Added Hungarian translation (by Balázs Úr)
  • Added Finnish translation (by ekeimaja)
  • Updated Bulgarian, Dutch, French, German, Russian, Spanish and Turkish translations


You can learn more about and download tiled here.

GameDev News

25. May 2017


I featured the PlayCanvas engine a couple years ago in this Closer Look review.  PlayCanvas is a 3D HTML5 powered game engine with a full suite of editing tools.  In the time since that initial review, PlayCanvas has advanced a great deal, so I have decided to revisit the engine.  Much of the engine has remained the same as it was, just generally improved all around.  Therefore I have decided instead of another review, I will do a hands on tutorial showing how to create a simple game using PlayCanvas.  In this case, a bowling game.  For Patreon backers all the assets used to make this tutorial are now available including Blender files, FBX, textures and more.

There is a video version of this tutorial available here.


Spoiler alert... here is the “game” we are about to create in this tutorial.

Click the window to focus.

Press spacebar or W to throw bowling ball.

Press left | A and right | D to move the bowling ball.

Press R to reset the table.

Press B to reset just the ball.


Creating your Project

Alright, lets jump in and build this game.  First head on over to http://playcanvas.com.  Now you either need to create an account or log in to your existing account.

image


A free account is sufficient for what we are doing here.  Once your account is created and you’ve logged in, click the New button

image


Select  Blank Project:

image


Now name your game and hit Create.  Unless you have a premium account, you can’t make private projects.

image


This will open your project after it’s created.  Now head into the settings.

image

You can set the resolution, change the name, description, etc...  but what we want to do in this case is enable physics for our project.

image

Next scroll to the bottom right corner and click the save button.

image


Now we are ready to fire up the editor.  Scroll back up and locate the Editor button.

image


Creating your Game

Welcome to the default editor!

image

Now that we are in the editor, it’s time to start creating our game.  You will notice on the left there is the Hierarchy, this is your games scene graph.

image

We have no need of the Box or Plane, simply right click each and delete them.

Now let’s get our assets into the game.  In Blender I created the bowling lane and pin textured meshes, then exported them as FBX ready for importing.  Let’s import them for use into our game, along with the required textures.  Locate the Assets window, click the + Icon, select Upload then select your FBX file(s).  Repeat the process with any texture maps you require.

image

This process will create a .json for each of your 3D models.  It also creates an empty material for both.

image


Now let’s set the texture for each material.  Simply select the Material, then in the Material tab to your right, scroll down and select Diffuse.  Click ... then select your texture map from the asset pane, like so:

image


I also have a normal map for the bowling lane, I repeat the above process, but instead of Diffuse I select Normal:

image


Creating the Bowling Lane

Ok, now that we have our raw assets and our textures linked, lets start creating some game objects.  Simply drag the lane into the scene like so:

CreateEnt


You will notice this creates a new entity in our scene graph:

image


PlayCanvas takes the traditional Entity Component model that is rapidly becoming the norm in the world of game development. 

image

You will notice that we have a Transform component, which enables us to position our entity in the world.  It also automatically created a Model component for us.  Now we want to add some physics to the game.  Since this is the lane, it wont be moving, so we create it as a static physics object.  To accomplish this we need to add two components, one for collisions that define the shape of our object to the physics engine, the second a RigidBody that defines our physical properties.  Let’s create the Collision shape first.

First click the Add Component button:

image

Then select Collision

image


Select Box then set the dimensions to surround your mesh as tightly as possible (note that PlayCanvas is a Y-up game engine):

image

image


Now Add Component again, this time selecting Rigid Body.  The default value should be Static, which is what we want.

image

Static means the object will be part of the physics simulation, but wont be moved by it.  Friction determines how well other objects slide over this surface, while Restitution determines how objects “bounce” off of it.


That’s it!  Our lane is completed.  Now it’s on to creating the bowling pin object.


Creating the Bowling Pins

Now it’s time to create the bowling pin.  Follow the exact same process you did earlier, drag the .json file onto the scene.  Position and scale it appropriately for your scene.

image

Just like last time, we want to create a collision component for this object.  This time instead of a cube, a cylinder is a better fit.

image

image

We also need to create a rigid body to control physics for this entity.  This time we create our entity as Dynamic ( static means stationary, dynamic is fully simulated, while kinematic takes part in the simulation but expects the movement to come directly from code, not the simulation).

image

Finally we are going to set a tag under the Entity section so we can identify all pins via code.  In the Tags section, enter “Pin” then hit enter to add a tag.  You can add multiple tags to an entity, a quick easy way to create ad-hoc groups of objects as we will see in a moment.

image


We are simulating 5 pin bowling here, so we need 4 more of them.  In the Hierarchy review, right click the pin and select Duplicate (not copy!).  This creates a copy of the entity and all of it’s components.

image

Repeat this process 3 more times, then go ahead and position the pins in a V like so.

image

Obviously if you are a 10 pin fan, other than being a heathen, you simply have to duplicate and position 5 more pins.


This post is getting pretty long so I’ve decided to split it into two parts.  Click here to continue on to part two.

Programming , ,

Month List

Popular Comments