Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
26. July 2018

PlayCanvas, a 3D HTML powered game engine, just released version 1.6.  This version adds new sprite and texture atlas APIs, derivative mapping, CricleCI support as well as several fixes and performance improvements.

Details of the release from the Github release notes:

  • [ADDED] Make sprite and texture atlas APIs public
  • [ADDED] Support for derivative mapping that requires no tangent vertex attribute. Only enabled for primitives at the moment.
  • [ADDED] Add pc.SORTMODE_CUSTOM as new layer sort mode
  • [ADDED] Enable CircleCI support for running ESLint and unit tests
  • [FIX] Fix bug which can lead to NaN drawOrder in element
  • [FIX] Make sure drawOrder and layers properties are cloned in sprite component
  • [FIX] Entity references not resolved when Entity#clone() is called
  • [FIX] Lots of ESLint errors
  • [PERFORMANCE] Remove redundant IE11 workaround for no UNSIGNED_BYTE support for vertexAttribPointer
  • [PERFORMANCE] Defer primitive mesh creation until needed
  • [PERFORMANCE] Refactor pc.GraphicsDevice constructor

If you are interested in learning more about PlayCanvas, be sure to check out our recent 3D tutorial, our older Closer Look or our recent look at the recently added 2D functionality.

GameDev News

17. July 2018

Are you looking for an open source cross platform HTML5 powered game engine, that’s open source, free and comes with a complete editor in addition to the underlying framework?  Perhaps the Wade Game Engine by Clockwork Chilli is what you are looking for.  While open source, WADE is shipped under a custom license you should take note of.  The TL;DR version of the license:

This license allows you to make games and non-games, for any purpose including selling and licensing, without paying anything to Clockwork Chilli. However you must not:

  • Distribute non-compiled (or non-minified) versions of Clockwork Chilli's source code.
  • Create a product that competes with WADE.

You can run WADE directly in the Chrome browser or can download a local installed version for Linux, Mac and Windows platforms.  If you want to learn more, be sure to check out the WADE game engine in action in this video or embedded below.

GameDev News

18. June 2018

The PlayCanvas HTML5 game engine just added 2D support in the form of Sprites, texture atlases, animated sprites, sprite components and 9 patch support.

From the PlayCanvas blog:

PlayCanvas is one of the most popular ways to build 3D interactive web content today. But before 3D graphics was a thing, there was 2D graphics!

Today we’re excited to launch the first part of our 2D graphics support. Great for building classic 2D games.

There are 5 great new features which will help you build 2D games using PlayCanvas.

Those new features are:

  • Texture Atlas assets
  • Sprite Asset
  • Sprite Component
  • Sprite Editor
  • 9 Slicing

For more details on the new 2D functionality in the PlayCanvas editor, be sure to check out this hands-on video where we illustrate how to import a texture atlas and use it to create 2D sprite animations:

If you are interested in learning more about PlayCanvas, be sure to check out our two part tutorial on building a simple bowling title in PlayCanvas available here and here.

GameDev News

3. May 2018

Impactjs is a 2D HTML5 game engine with a built in level editor called Weltmeister.  Previously it was commercial software with a $99 price tag.  Earlier today the author made the following tweet:


The engine is now available under the MIT open source license.  It’s available on Github right here.  Unfortunately the editor has some PHP dependencies, making it somewhat tricky to get up and running without a full blown PHP install.

It’s been several years since Impact was updated, so unless a community forms around this libraries open sourcing, I see little reason to recommend it.

GameDev News

15. March 2018

Google just open sourced Resonance Audio, their 3D spatial audio rendering SDK.  It supports multiple platforms and game engines including Unreal, Unity, wWise, FMod, iOS, Android and Web.  You can learn more about Resonance Audio here, while the source is hosted on Github under the liberal Apache 2 source license.  Resonance enables you to create and position audio sources in 3D, define audio properties of your world, position the listener and it then calculates the results for you.

The following is a simple HTML5 sample that illustrates creating a 3D audioscape using the Web api.  It creates 3 different sounds, a laughing woman, a waterfall and a bird chirping, all downloaded from  The lady laughing can be moved around using the arrow keys as well as page up/down to move around the Z axis.  You can move the listeners ear left and right using the A and D key.  Finally the bird chirping will appear every 4 seconds in a random location relative to the users ear, + or – 1 meter.

You can get more details and hear the demo results in this video, which I will also embed below.  The sound works best when heard through a set of headphones.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>GFS Resonance Audio Test</title>

    <script src=""></script>

        var laughX = 0.0;
        var laughY = 0.0;
        var laughZ = 0.0;

        var x = 0.0;
        var y = 0.0;
        var z = 0.0;

        // Create an AudioContext
        let audioContext = new AudioContext();

        // Create a (first-order Ambisonic) Resonance Audio scene and pass it
        // the AudioContext.
        let resonanceAudioScene = new ResonanceAudio(audioContext);

        // Connect the scene’s binaural output to stereo out.

        // Define room dimensions.
        // By default, room dimensions are undefined (0m x 0m x 0m).
        let roomDimensions = {
            width: 3.1,
            height: 2.5,
            depth: 3.4,

        // Define materials for each of the room’s six surfaces.
        // Room materials have different acoustic reflectivity.
        let roomMaterials = {
            // Room wall materials
            left: 'metal',
            right: 'curtain-heavy',
            front: 'curtain-heavy',
            back: 'curtain-heavy',
            // Room floor
            down: 'grass',
            // Room ceiling
            up: 'grass',

        // Add the room definition to the scene.
        resonanceAudioScene.setRoomProperties(roomDimensions, roomMaterials);

        /// -----------------  Laugh audio
        // Create an AudioElement.
        let audioElement = document.createElement('audio');

        // Load an audio file into the AudioElement.
        audioElement.src = 'laugh.wav';
        audioElement.loop = true;
        // Generate a MediaElementSource from the AudioElement.
        let audioElementSource = audioContext.createMediaElementSource(audioElement);
        // Add the MediaElementSource to the scene as an audio input source.
        let source = resonanceAudioScene.createSource();
        // Set the source position relative to the room center (source default position).
        source.setPosition(laughX, laughY, laughZ);

        /// -----------------  Waterfall
        // Create an AudioElement.
        let audioElement2 = document.createElement('audio');
        audioElement2.src = 'waterfall.wav';
        audioElement2.loop = true;
        let audioElementSource2 = audioContext.createMediaElementSource(audioElement2);
        let source2 = resonanceAudioScene.createSource();

        /// -----------------  Bird noises
        let audioElement3 = document.createElement('audio');
        audioElement3.src = 'bird.wav';
        audioElement3.loop = false;
        let audioElementSource3 = audioContext.createMediaElementSource(audioElement3);
        let source3 = resonanceAudioScene.createSource();

        // Play the audio.;;

            //randomly position bird  -1 to +1 x/y relative to the listeners location every 4 seconds
            source3.setPosition(x + Math.random() * 2 - 1 ,y + Math.random() * 2 - 1,1);

        window.addEventListener("keyup", function(event) {

            // Move laugh audio source around when arrow keys pressed
            if (event.which == 37) // left arrow key
                    source.setPosition(laughX -= 0.10, laughY, laughZ);
            if (event.which == 39) // right arrow key
                    source.setPosition(laughX += 0.10, laughY, laughZ);
            if (event.which == 38) // up arrow key
                    source.setPosition(laughX , laughY += 0.10, laughZ);
            if (event.which == 40) // down arrow key
                    source.setPosition(laughX, laughY -= 0.10, laughZ);
            if (event.which == 33) // page up arrow key
                source.setPosition(laughX , laughY, laughZ += 0.10);
            if (event.which == 34) // page down arrow key
                source.setPosition(laughX, laughY, laughZ -= 0.10);
            if (event.which == 32) // space key
                laughX = 0;
                laughY = 0;
                laughZ = 0;
                source.setPosition(laughX, laughY, laughZ);

            // Move the listener left or right on A/D keys
            if (event.which == 65){ //A
            if (event.which == 68){ //D
        }, this);



The video

GameDev News Programming

See More Tutorials on!

Month List