Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

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  Now you either need to create an account or log in to your existing account.


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


Select  Blank Project:


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


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


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.


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


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


Creating your Game

Welcome to the default editor!


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.


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.


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


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:


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


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:


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


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


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:


Then select Collision


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



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


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.


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.



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).


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.


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.


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


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 , ,

24. May 2017


Unreal Engine 4.16 was released today.  As is typical with Unreal Engine releases, this one is packed with new functionality and improved performance on mobile and console platforms.  This release adds new Volumetric Fog effects, a new lighter rigid body and cloth simulation tool.  This release also adds support for the Nintendo switch, as well as launching not just one, but two new audio engines.  Details of the new release:


What's New

Unreal Engine 4.16 includes exciting new rendering and animation features, significant performance improvements for mobile and console platforms, and tons of quality of life enhancements that will make it even easier to make stunning environments and engaging experiences that run smoothly on a wider variety of platforms.UE4

Enhance the mood of your environments using the amazing new Volumetric Fog feature, which can be enabled to automatically render realistic fog and smoke effects with consistent lighting anywhere in a scene, even at a large scale.

Breathe life into your characters using new dynamic lightweight rigid body and low level cloth simulation tools! Take greater control of the flow of movement using Animation Modifiers, spline IK solver, updated Pose Driver, and many other improvements to the Animation system.

Garbage Collection is now twice as fast! UI rendering performance and UMG widget creation speed are vastly improved to enable you to create even more compelling interfaces. Interfaces and workflows for VR Mode, Animation, Sequencer, and other tools have been updated to make your development process more streamlined than ever before.

Support for Nintendo Switch is fully-featured and ready for production in 4.16! Epic Games has teamed up with Nintendo to release the full UE4 source code for Nintendo Switch to approved developers for free. To learn more about how to get started, read more here.

DirectX 12 is now the default renderer for Xbox One, bringing both performance and feature enhancements to platform support in the engine. In addition, you can now develop HTML5 games using WebAssembly and WebGL 2, and this new path will continue to improve in UE4.

For mobile, the Android virtual keyboard is now supported, and runtime permissions have been exposed to both Blueprint and code. Plus, we have made even more strides to reduce executable sizes for mobile apps!


Check the full release notes for a great deal more information.  As always you can download the new release using the Epic Game Launcher.

GameDev News

23. May 2017


Banshee is an in development C++ powered 3D game engine with an editor.  Written in modern C++14 with a comprehensive editor and supporting Vulkan rendering, Banshee3D is a project with a lot of potential. Two things impress me about Banshee3D, how fast it’s progressing and the fact it’s the work of a single guy.  He just updated on /r/gamedev the recent developments the editor has undergone.

  • Physically based renderer - About 70% complete. See link below for an early screenshot.
  • C++ framework - I plan to release the entire engine core under the MIT license. It will be usable as a pure C++ gamedev framework similar to SFML/SDL but with a larger scope.
  • Documentation enhancements - Over a HUNDRED new manuals have been added. image
  • Unified shading language - New unified shading language allows you to develop shaders that work on DirectX, OpenGL and Vulkan, while also supporting high level concepts not available in HLSL/GLSL.
  • Automatic script binding generation - Automatic code generation support for script bindings ensures C# API can now nearly transparently match the C++ API, as well as opening the door for easy addition of new scripting languages.
  • First stable release - Planned for late 2017/early 2018.

You can get a great deal more information from this blog post.  When Banshee 0.3 was released we did a hands-on walkthrough of the Banshee game engine available here and embedded in the video below.

GameDev News

18. May 2017


Construct 3 release 29 was just, um... released.  This release brings 22 changes and fixes, including the App Build Service now being live.  The App Build Service enables you to create Android APK files, as well as the option to generate an XCode project for iOS deployment.  Construct 3 is a cross platform HTML5 powered 2D game engine that recently moved to run directly in the browser.  If you are new to Construct 3, we recently released this hands-on video which is also embedded below.  Right now is a great time to check out Construct 3 as it is currently available for free for a brief period of time for the C3Jam on Newgrounds.


Details of the r29 release


22 Changes


  • App Build Service is now live!


  • Settings option to hide 'Add action' rows in event sheets


  • Drag-dropping multiple image files now creates a single sprite with an animation like C2 does, rather than separate sprites
  • Event Sheet View: comments now preserve spaces/tabs
  • Image editor eraser tool erases single pixel at size 1 and 4 pixels at size 2 for precise editing

Bug fix

  • Added handling of storage errors, which ought to prevent crashes due to QuotaExceededError. Instead an error is shown suggesting to free up storage space.
  • Inserting new objects in a popup layout view window didn't work correctly
  • Dialogs in popup windows should now work correctly
  • Possible crash closing a popup window with a dialog open in that window
  • Double-clicking Text or SpriteFont objects in a popup window now opens the text dialog in the correct window
  • 'On function' events referring to global constant strings now trigger correctly
  • Rename family crash
  • Eraser hardness when using a size of 1 or 2
  • Image editor cut tool crashes
  • Setting of the cursor when dragging a selection in the image editor
  • Crash in the Tilemap Editor when trying to edit a tilemap in a locked layer
  • Bug causing instances to change size when adding or deleting animations or frames in the animations editor
  • Crash when opening the project bar from the main view menu while there is more than 1 active project
  • Crash when closing the image editor
  • Crash opening project that includes a layout with a partially valid name
  • Autosave not reading setting object correctly


  • Support for third-party behavior addons in the SDK

18. May 2017


Version 1.2.104 of the Defold game engine was just released.  The primary new feature is the ability to do PUT and HEAD requests using the http.request object.  In addition there are a number of fixes and improvements.  The Defold game engine is a mobile focused Lua powered 2D game engine.  If you are interested in learning more, we have a complete tutorial series available here.


Details from the release announcement:

  • DEF-2468 - Added: http.request supports PUT and HEAD.
  • DEF-2702 - Fixed: Index out of range when spine draw order slot exceeds mesh count.
  • DEF-2692 - Fixed: Spine blending fixes for draw order animations.
  • DEF-2661 - Fixed: Reverse hashing usage in Collection factories to not impact performance.
  • DEF-2689 - Fixed: Engine crash when async loading is in progress during engine quit.
  • DEF-2566 - Fixed: GUI functions new_texture, delete_texture and set_texture_data now also accept hash.
Native Extension Server
  • Fixed so that packages/classes provided by Jar libraries can be imported in Java sources.
  • Fixed missing usage of compiler and link flags for Android builds.
  • New Color grading post processing shader tutorial4.
  • Merged large pull request from @ross.grams containing proofread pass on all manuals.

GameDev News

Month List

Popular Comments