Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
4. January 2017

 

Inkscape is a popular open source vector based graphics package available for Windows and Linux.  The OS X version is not yet available for reasons explained here.  Version 0.92 adds a few new features including mesh gradients, new live path effects and more.  Below is a summary of the new features, although much more detailed release notes are available here.

Exciting New Features

Mesh gradients are a powerful tool enabling artists to more easily create photo-realistic drawings - a feature we would love to see made part of the W3C's Scalable Vector Graphics (SVG) standard; if you find this feature as cool as we do, please request that your favorite web browser adopts support for it too!

Inkscape works closely with the SVG standards committee, and thanks to our many generous donors, the Inkscape project sponsors an engineering representative to attend SVG working group meetings over the past few years. A welcome outcome of this participation is the improvement and addition of over a dozen SVG and CSS properties.

Live Path Effects are proving to be a vibrant ecosystem in the Inkscape project, and many innovative new ideas have been percolating over the past couple years since our last release. Spiro Live, BSpline, and Roughen essentially provide new drawing modes. The Simplify LPE cleans up vector elements non-destructively by smoothing paths, shapes, groups, clips, and masks. Perspective/Envelope and Lattice Deformation 2 enable artists to interactively deform/transform drawing elements. Other new features enable interactive mirroring, interactive rotation of copies along an arc or circle, and dozens of other additions and enhancements.

 

Below is a video showing Inkscape 0.92 in action.  You can learn more about and download Inkscape here.

GameDev News


4. January 2017

 

Today marks the release of Cocos2d-x 3.14.  Cocos2d-x is a popular open source cross platform C++ game library that was used to make games such as BADLAND, Clash of Kings and Final Fantasy Record.  If you want to learn more about Cocos2d-x, we have a complete tutorial series available here.

 

Cocos2d-x 3.14 brings several fixes and improvements including:

  • [NEW] Add Spine binary file format support
  • [NEW] Action: add a method to get the number of actions running in a given node with specific tag
  • [NEW] Action: new actions: ResizeBy and ResizeTo
  • [NEW] Button: can set title label
  • [NEW] Can disable multi touch on Android
  • [NEW] EventDispatcher: Add hasEventListener to check listener existance
  • [NEW] EditBox: add horizontal text alignment
  • [NEW] EventDispatcher: added hasEvent() to check if an event is added
  • [NEW] Sprite: support slice9 feature
  • [NEW] Slider: add methods to get _slidBallNormalRenderer
  • [NEW] Desktop: add a method to toggle between fullscreen and windowed
  • [NEW] Desktop: add events for window resize, focus and unfocus
  • [NEW] Mac: supports game controller
  • [NEW] JSB: add cc.sys.now() and perfromance.now(), the last one is more accurate
  • [NEW] Lua: add cc.vec3 functions: add, sub and dot
  • [NEW] Lua: use luajit 2.1.0-beta2
  • [NEW] Web: Add cc.CONCURRENCY_HTTP_REQUEST_COUNT to control max concurrent task count for XMLHttpRequest

 

More information about the release is available here, while Cocos2d-x is available for download here.

GameDev News


2. January 2017

 

In our previous tutorial in the BabylonJS Tutorial Series we covered positioning a camera in our world.  There were still a few fundamental components missing, the top of which is lighting which we are going to cover today.  Lights are used to, predictably enough, illuminate your scene.  They interact with the color and materials on your various entities that compose your scene.  There are multiple different light types available in BabylonJS including the Point Light, Directional Light, Spot Light and Hemispherical light.  A point light is a single light source that radiates in all directions, like a naked lightbulb for example.  A directional light in a radiates just in the direction it is pointed and it goes on forever with no fall off basically illuminating everything in its path regardless to distance.  A spot light is similar to a directional light but it does fall off over a given distance and is cone shaped.  A flashlight is a classic example of a spot light, as of course is a spot (or search) light!.  A hemispherical light is generally used to represent an ever present ambient light source, the sun being perhaps the most common example.  You can also emit light from textures using their emission property, but we will cover that at a later point.  In this tutorial we are going to implement a point and a spot light.

 

There is an HD video version of this tutorial available here.

 

Let’s start with a point light.  It’s a simple light that radiates from a single point (thus the name) in all directions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Common/Lib/babylon.max.js"></script>

    <style>

        #canvas {
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    window.addEventListener('DOMContentLoaded', function(){
        var canvas = document.getElementById('canvas');

        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();

            var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
            var camera = new BABYLON.ArcRotateCamera("arcCam",
                    BABYLON.Tools.ToRadians(45),
                    BABYLON.Tools.ToRadians(45),
                    10.0,box.position,scene);
            camera.attachControl(canvas,true);

            var light = new BABYLON.PointLight("pointLight",new BABYLON.Vector3(
            0,10,0),scene);
            light.diffuse = new BABYLON.Color3(1,0,0);


            scene.actionManager = new BABYLON.ActionManager(scene);
            scene.actionManager.registerAction(
                    new BABYLON.ExecuteCodeAction({ trigger:
                            BABYLON.ActionManager.OnKeyUpTrigger, parameter: " " 
                            },
                            function () {
                                light.setEnabled(!light.isEnabled());
                            }
                    ));

            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            var light = scene.getLightByName("pointLight");
            light.diffuse.g += 0.01;
            light.diffuse.b += 0.01;
            scene.render();
        });

    });
</script>
</body>
</html>

 

There are a couple things illustrated in this example.  Creating a point light is done by calling new BABYLON.PointLight(), passing in the ID of the light, the position of the light in the world and finally the scene in which the light exists.  You can set the color of the light by setting it’s diffuse property, in this case we set it to full red only.  You will notice this example also shows a new concept in BabylonJS, the ActionManager.  This is a way of wiring code to specific events.  In this case we add some code that will be fired when the space key is pressed.  That function simply turns off and on the light source by calling setEnabled() passing a true or false value.  In the render loop we also slowly increase the lights green and blue components, so you can see the effect of diffuse lighting on the scene.  When you run this code you should see:

GIF

 

Lights are implemented as part of the GLSL shader process and the active lights in the scene are passed to each StandardMaterial in the scene.  By default the standard material is limited to a maximum of four active lights.  This value can be overridden using the maxSimultaneousLights property of the StandardMaterial, although this may have some impact on performance, especially on mobile targets.

 

Next lets look at implementing a spot light.  As with all things BabylonJS, the process is quite similar:

<script>
    window.addEventListener('DOMContentLoaded', function(){
        var canvas = document.getElementById('canvas');

        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();

            var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
            var camera = new BABYLON.ArcRotateCamera("arcCam",
                    BABYLON.Tools.ToRadians(45),
                    BABYLON.Tools.ToRadians(45),
                    10.0,box.position,scene);
            camera.attachControl(canvas,true);

            var light = new BABYLON.SpotLight("spotLight",new BABYLON.Vector3(0,
            10,0),new BABYLON.Vector3(0,-1,0),
                    BABYLON.Tools.ToRadians(45), // degrees the light fans out
                    0.1, // falloff/decay of the light over distance
                    scene);

            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            var light = scene.getLightByName("spotLight");
            light.position.y -= 0.01;
            scene.render();
        });

    });
</script>

 

In this example we create the spot light with a call to new BABYLON.SpotLight, passing in the id, position, direction vector, the degrees or arc of the light cone, the rate the light falls off over distance and finally the scene to create the light in.  In this example instead of changing the color of the light each frame, we instead move it slightly.  Run this code and you should see:

GIF2

 

As the light is pulled back the fall off cone is quite prominently displayed.  Of course the lack of textures makes this example more than a bit stark, so that is what we will cover in the next tutorial.

 

The Video

Programming


2. January 2017

 

Mike Fricker, UE4 Technical Director at Epic Games, just released a new plugin for Unreal Engine that enables you to utilize OpenStreetMap data directly in Unreal Engine.  Keep in mind this is just a hobby project and isn’t directly supported by Epic.  OpenStreetMap.org is a crowd sourced (think Wikipedia) map of the world.  This plugin enables you to take data from OSM and use it directly in your game, quickly creating real world accurate cityscapes like the one shown to the right.OSM  Additionally all of the location information is retained upon import, so if you are creating an Alternate Reality based game like Pokemon Go, the data is available to you.  Keep in mind however that OpenStreetMap data is released under the Open Data Commons Open Database License (ODbL).  I am no lawyer, but I believe the license enables you to create closed source projects using the data so long as you give proper attribute, share any modifications you make to the database and make sure that the data itself (not your game code) remains available and open.

 

Details of the plugin from the Readme:

Street Map Assets

When you import an OSM file, the plugin will create a new Street Map asset to represent the map data in UE4. You can assign these to Street Map Components, or directly interact with the map data in C++ code.

Roads are imported with full connectivity data! This means you can design your own navigation algorithms pretty easily.

OpenStreetMap positional data is stored in geographic coordinates (latitude and longitude), but UE4 doesn't support that coordinate system natively. That is, we can't easily deal with spherical worlds in UE4 currently. So during the import process, we project all map coordinates to a flat 2D plane.

The OSM data is imported at double precision, but we truncate everything to single precision floating point before saving our UE4 street map asset. If you're planning to work with enormous map data sets at runtime, you'll need to modify this.

Street Map Components

An example implementation of a Street Map Component is included that generates a renderable mesh from loaded street and building data. This is a very simple component that you can use as a starting point.

The example implementation creates a custom primitive component mesh instead of a traditional static mesh. The reason for this was to allow for more flexible rendering behavior of city streets and buildings, or even dynamic aspects.

All mesh data is generated at load time from the cartographic data in the map asset, including colorized road strips and simple building meshes with triangulated roof polygons. No spline interpolation is performed on the roads.

The generated street map mesh has vertex colors and normals, and you can assign a custom material to it. If you want to use the built-in colors, make sure your material multiplies Vertex Color with Base Color. The mesh is setup to render very efficiently in a single draw call. Roads are represented as simple quad strips (no tesselation). Texture coordinates are not supported yet.

There are various "tweakable" variables to control how the renderable mesh is generated. You can find these at the top of the UStreetMapComponent::GenerateMesh() function body.

(Street Map Component also serves as a straightforward example of how to write your own primitive components in UE4.)

OSM Files

While importing OpenStreetMap XML files, we store all of the data that's interesting to us in an FOSMFile data structure in memory. This contains data that is very close to raw representation in the XML file. Coordinates are stored as geographic positions in double precision floating point.

After loading everything into FOSMFile, we digest the data and convert it to a format that can be serialized to disk and loaded efficiently at runtime (the UStreetMap class.)

Depending on your use case, you may want to heavily customize the UStreetMap class to store data that is more close to the raw representation of the map. For example, if you wanted to perform large-scale GPS navigation, you'd want higher precision data available at runtime.

 

The plugin and it’s source code is hosted on Github available here.  The plugin is released under the very liberal MIT open source license.

GameDev News


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List