Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

18. January 2017

 

In our previous tutorial we covered lighting in our ongoing Babylon Tutorial Series but the objects in our game are still remarkably drab.  A big part of this is the lack of materials applied to them.  In this tutorial we are looking at using the StandardMaterial which handles all the grunt work for you.  You can think of StandardMaterial as a container for several different kinds of textures (diffuse, opacity, etc. ) that can be applied to an object.  It also has some built in attributes such as diffuse (color), emissive (self lighting) and more.  Let’s start straight away with an example that we covered in a previous tutorial.  Applying a simply wireframe to our cube:

<!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 material = new BABYLON.StandardMaterial("material1",scene);
            material.wireframe = true;
            box.material = material;

            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            scene.render();
        });

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

 

When you run it:

image

 

Simple enough.  We create a StandardMaterial, passing in it’s identity and the scene to create it in.  We set the materials wireframe property to true, then apply the material to our object’s material property.  Note each object can only have a single material, although a compound material exists if you need to mix multiple materials together.  Now let’s look at a slightly more colourful example, this time using more of the built in properties of StandardMaterial.

 

<!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(
            5,5,0),scene);
            light.diffuse = new BABYLON.Color3(1,1,1);



            var material = new BABYLON.StandardMaterial("material1",scene);
            material.diffuseColor = BABYLON.Color3.Blue();
            material.emissiveColor = BABYLON.Color3.Red();

            material.specularColor = BABYLON.Color3.Red();
            material.specularPower = 3;
            material.alpha = 1.0;
            box.material = material;

            var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene, false, 
            BABYLON.Mesh.DOUBLESIDE);
            plane.material = new BABYLON.StandardMaterial("material2",scene);
            plane.material.diffuseColor = new BABYLON.Color3.White();
            plane.material.backFaceCulling = false;
            plane.position = new BABYLON.Vector3(0,0,-5);

            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            var material = scene.getMeshByName("Box").material;
//            material.alpha -= 0.01;
//            if(material.alpha < 0) material.alpha = 1.0;
            scene.render();
        });

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

Running this example results in:

image

 

Here you can see we’ve set the diffuse, emissive and specular values of the cube.  I also created a plane so you can see the emissive value of our cube has no effect on it.  The diffuse property can be thought of as the colour in the traditional sense.  Emissive on the other hand is a value for an internal light of the material, there aren’t actually that many emissive parallels in the real world, but some mosses and a few creatures have an emissive property to them.  Specular color determines how external light sources interact with the surface.  If you look at the commented code in the main loop you will also see commented code affecting the alpha channel of the material.  Alpha can be thought of transparency, with a value of 1 being fully opaque, while 0 is fully transparent.

What the majority of people think of when they work with materials is textures.  Textures are simply images that are applied the surface of an object like virtual wallpaper.  There are different types of textures as well, some effect the color of a surface, others affect the transparency or normals.  Here is an example:

<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.parent = camera;
            light.diffuse = new BABYLON.Color3(1,1,1);


            var material = new BABYLON.StandardMaterial("material1",scene);

            material.diffuseTexture = new BABYLON.Texture("gfs.png",scene);
            material.bumpTexture = new BABYLON.Texture("gfs_normal.png",scene);
            material.roughness = 0.5;
            box.material = material;



            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){

            scene.render();
        });

    });
</script>

 

And when you run it:

image

 

This example uses two different textures, a diffuse texture:

gfs

 

And a normal map:

gfs_normal

 

For more details on Normal Maps, check this video on Normal Map 101.  Somewhat confusingly, BabylonJS refers to normal maps as bump textures.  This only scratches the surface of the material and texture options available, you also have options like ambient, opacity, reflection, light and specular textures, but you will find they almost all work exactly the same way.

Programming , , ,

17. January 2017

 

Microsoft have just released a beta version of PIX, a performance tuning and debugging tool aimed at game developers.  Previously only available on XBox consoles, PIX is now available for Windows machines for games running Direct X 12.pixscreenshot

 

About PIX:

PIX on Windows provides five main modes of operation:

  • GPU captures for debugging and analyzing the performance of Direct3D 12 graphics rendering.
  • Timing captures for understanding the performance and threading of all CPU and GPU work carried out by your game.
  • Function Summary captures accumulate information about how long each function runs for and how often each is called.
  • Callgraph captures trace the execution of a single function.
  • Memory Allocation captures provide insight into the memory allocations made by your game.

For best results we recommend running PIX on:

  • Windows 10 build 14393 (Anniversary Update, aka RS1) with latest updates
  • 32 GB RAM
  • A Direct3D 12 GPU with the latest available graphics drivers.  PIX will not work correctly with older drivers!

See the requirements page for more information.

 

The beta is free and is available for download here.

17. January 2017

 

Unreal Engine have released a preview version of the upcoming Unreal Engine 4.15.  As is now normal with Unreal Engine point releases, this one is absolutely packed with new fixes and features.  Keep in mind this is a preview release for a reason, you should not be using it with production code.  Expect to encounter more than your regular share of bugs.  Details from the release notes:

 

  • Rendering Updates:
    • Finalized Texture Streaming Optimizations that were started in 4.13 and 4.14.
      • Textures used by non visible & hidden components are streamed with one less mips, as a prefetch.
      • Reducing time taken for the visible textures to stream in.
      • Reducing the CPU time taken by the streamer.
      • Mesh UV densities are now computed per material instead of per mesh. New data also takes into account lods. This resolved most issue were texture would appear low resolution. Also, there is now a wider texture streaming support from component, including particle systems and instanced meshes. That resolved other low resolution issues and sometime high memory consumption.
      • The texture streamer can now automatically fit to different memory budgets, without manual tweaks. The streamer will select which textures need to be reduced using different heuristics to minimize visual impact.
      • New visualization tools for debugging.
    • New Nodes have been added to the Material graph
      • Commonly request mathematics nodes: Sine, Cosine, Tangent, Arcsine, Arccosine, Arctangent, Arctangent2, ArcsineFast, ArccosineFast, ArctangentFast, Arctangent2Fast, Round, Truncate, Saturate
        • The nodes marked with the “Fast” tag will execute approximations instead of the real instructions. These can give a worthwhile performance improvement to materials but have input restrictions and precision tradeoffs.
      • PreviousFrameSwitch has been added to allow specific overrides for world-position offsets in complex materials used during motion vector generation.
      • Pre-Skinned Local Normal works in a similar way to the Pre-Skinned Local Position node added in the 4.14 release but returns the local surface normal for skeletal and static meshes. This opens the door to more local-space, mesh aligned effects or advanced use-cases such as writing dynamic surface data to a mask read-back in another material.
    • Metal support has been extended to use many of the new API & shader language features added by Apple in macOS 10.12 Sierra & iOS 10.
      • Enabling the new Metal v1.2 standard allows all Metal platforms to use Unordered Access Views in pixel shaders
      • Full support for Unreal Engine's tessellation features has been implemented
      • Experimental support for HDR rendering on Macs with an appropriate display built in
  • Sequencer Updates:
    • Animation Blending by weight is supported.
      • You can add weight by expanding each track, and key the value in the desired timeline
      • There is no limit to how many animations it can blend at the same time but as for full body animations, the weights will be normalized, so that it doesn’t under/over scale the mesh. For additive animations, the weights will be kept.
    • Audio volume and pitch curves have been added.
  • Blueprint Updates:
    • Cooking Blueprints to C++ is no longer an "experimental" feature.
      • This is enabled in the editor through your project’s Packaging Settings: Blueprints => Blueprint Nativization Method.
      • It can also be invoked by passing -NativizeAssets as a parameter to the UAT BuildCookRun script.
      • Generated source is saved as a plugin in your project’s intermediate folder, under: …\Intermediate\<TargetPlatform>\NativizedAssets
      • More information is available in the documentation.
    • Map & Set containers are now available in blueprints. They are a collection of items which guarantee they contain only unique items, with no repeating entries.
      • The Variable Type control is now a drop down, allowing you to select ‘Single Variable’, ‘Array’, ‘Set’, or ‘Map’. When ‘Map’ is selected a second drop down for the ‘value’ type appears.
      • For maps the following operations are available to blueprint users: Add, Remove, Find, Contains, Keys, Values, Length, and Clear.
      • Set supports: Add, AddItems, Remove, RemoveItems, ToArray, Clear, Length, Contains, Intersection, Union, and Difference.
      • Set and map variables declared in C++ can now be exposed to Blueprints.
      • NOTE: Replication of map and set properties is not yet supported in C++ or Blueprints.
  • Framework Updates:
    • A Raw Input plugin has been checked in to provide support in Windows for steering wheels, flight sticks, and other non-XInput supported devices.
      • All of the Vehicle templates and Vehicle Game* have been configured to work with the Logitech G920. (*Vehicle Game not yet updated for 4.15 Previews)
      • Adding new devices is as easy as setting up a configuration for them in the project settings or editing DefaultInput.ini. (Vendor and Product ID can be discovered from the driver properties)
      • We need your help! - After you successfully configure your devices (figuring out what axes represent brake, gas, steering wheel and necessary modifiers to represent brake/gas as 0 to 1 and the wheel as -1 to 1), please share your .ini settings back with us so we can ensure these devices work without additional setup in the future.
    • A Force Feedback Component can now be added to Actors and exist in the world. It can have attenuation properties to determine the intensity of the playback of the force feedback pattern based on the distance between the player and the effect. The attenuation properties can either be specified directly on the component or you can create a Force Feedback Attenuation asset in the content browser and reuse it for multiple components. Force Feedback Components can also be spawned into the World from blueprints in a similar way that audio, decals, and emitters can.
    • PhysX Vehicle Support is now an optional plugin. This makes it easy for games that are not using vehicles to exclude this feature and save disk space and memory. This work also adds several useful physics extension points to Engine (e.g. OnPhysSceneInit/Term, OnPhysSceneStep) to make it easier for other developers to write their own similar systems.
    • The Blendspace Editor has been overhauled with an updated UI and internal rework.
    • Save Pose Snapshot has been added to capture a runtime skeletal mesh pose in blueprints. Once the pose has been saved, you can use it in the anim-blueprint like any other pose, or save it to a variable.
    • You can Link a Curve to a specific Bone in the skeleton. This supports LOD and Layer Blending, and can be accomplished in the Anim Curves window.
    • Physics objects now have Mass Properties debugging visualizers to see center of mass and inertia tensor. (Show -> Advanced -> Mass Properties)
    • Gameplay Tags have been improved and are now fully supported. They are implemented by the GameplayTag structure in the GameplayTags module and are registered in a central dictionary, which can be accessed from the new GameplayTags project settings view. If you enable the “Import Tags from Config” option, tags can be added from the editor through the Gameplay Tag List on this page, or from the UI used to select tags. Once you have added Tag properties to your data, you can query them from either Blueprint or C++ and use them to change functionality. The BlueprintGameplayTagLibrary has several useful functions. To actually set up tags, add GameplayTag or GameplayTagContainer variables to your data or functions, then you can set the tags from selection UI.
  • Mobile Rendering Updates:
    • ES 3.1 / Metal / Vulkan editor feature level preview no longer experimental. This mode will emulate the feature set available to iOS Metal, Android GLES3.1 and Android Vulkan devices.
    • Mobile devices can now use Custom Stencil in post-processing materials. This requires MobileHDR option enabled and non-Mosaic device. To enable this feature in your project go to Project Settings -> Rendering -> Postprocessing and set ‘Custom Depth-Stencil Pass’ to ‘Enabled with Stencil’.
    • You can now disable shader permutations for lighting setups that your mobile game does not require. The settings available under Project Settings -> Rendering will reduced shader memory usage and App package size.
    • Android applications can now be packaged to support a third-party Graphics Debugger. You can choose from either the Mali Graphics Debugger or Adreno Profiler depending on your device’s GPU. Graphics Debugger options can be found in Project Settings -> Android. You first need to download and install these debuggers from the GPU vendor’s website, and they each require some small amount of additional setup to configure your device for debugging. Be sure to to follow the directions that appear after selecting the debugger type. Also note that if you package your app to support a particular GPU debugger, it may not function correctly when run on a device with a different GPU.
  • Editor Updates:
    • Reroute nodes have been added to the Material Editor.
    • Font Asset Improvements have been made to address issues with memory consumption and stability of Font assets using runtime-cached fonts. Font assets have been split in two: Font and Font Face.
      Font Face is now the asset that stores the font data, and these assets are simply referenced by the Font assets. This means that the same font data can be re-used for multiple font assets, or even multiple typefaces within a Font asset. Existing Font assets will automatically upgrade their internal font data into embedded Font Face assets during load. You can use the Font Editor to split these embedded assets out into real Font Face assets that may be edited and shared.
    • (Experimental) Content Hot-Reloading is available for testing. To enable it you need to go to your "Editor Preferences", and enable "Content Hot-Reloading" under the "Experimental" section. Once enabled all of the in-editor source control operations that affect assets will use content hot-reloading. You also gain a "Reload" option under "Asset Actions". This can be used to forcibly reload a package from disk.
  • Build Updates:
    • The codebase has been converted to a "include what you use" model, where every header includes other headers it needs, rather than every source file including large monolithic headers like Engine.h and UnrealEd.h. Existing game code can continue to include those files as before, but we measure the engine compiling 25-50% faster!
      • Every header now includes everything it needs to compile.
      • Every .cpp file includes its matching .h file first.
      • No engine code includes a monolithic header such as Engine.h or UnrealEd.h any more.
      • No engine code explicitly includes a precompiled header any more.
  • Platform Updates:
    • New Location Services now provides access to GPS data for Android and iOS. A new OnLocationChanged delegate is available and Blueprint nodes are provided under Services->Mobile->Location.
    • Streaming audio for iOS has been implemented.
    • Remote notifications for IOS are now supported. This includes callbacks in the game for handling the notification as well as properly setting up all plist information needed by the application for the app store.
    • We have added support for ARM64 (AArch64) devices running Linux. Right now only boards with desktop GL are supported.
    • 'Launch On' to Remote Linux Machine from the Editor or UFE.
  • VR Updates:
    • The PlayStationⓇVR Aim Controller is now supported through the new AimController plugin. To activate, simply change the “Hand” value to “Gun” on your Motion Controller component.
    • (Experimental) Monoscopic Far Field Rendering for mobile VR is available for testing. With content that has many distant objects, this can benefit performance. To enable, select the checkbox under Project Settings -> Rendering -> VR. We don’t currently support both mobile multi-view and monoscopic far field simultaneously and mobile HDR needs to be disabled.
  • VR Editor Updates:
    • Updated Quick Menu and Radial Menu to quickly access editor functionality.
    • The new number pad menu appears when you click on an editable text field.

GameDev News

12. January 2017

 

Today we are going to take a quick look at the Tilengine 2D game engine.  Tilengine in their own words is:

Tilengine is a free, cross-platform 2D graphics engine for creating classic/retro games with tilemaps, sprites and palettes. Its unique scanline-based rendering algorithm makes raster effects a core feature, a technique used by many games running on real 2D graphics chips.Untitled 3

Tilengine is open source (sorry, the core isn't open ), available on Github however I never could locate what license it’s released under.

EDIT—Since posted, there has been a bit of conversation about the licensing since this was posted, read here.

  It’s a C library, but contains bindings for Python, C# and Java.  I’m actually going to use the C# bindings for the example in this review as it’s the least documented of the available bindings.  There is a single page class reference available here and a small manual available here.  The engine is geared towards creating retro sprite style games and handles graphics, animations, palettes, input and window management, but has no sound or physics engine built in.  It is also designed to be used as a backend solution to an existing front end renderer.  There are several C based examples available here, and this represents the primary way you will get up to speed.  The graphics system is designed to emulate classic sprite systems like Sega’s SuperScaler arcade board but with Super Nintendo’s Mode 7 style graphics effects available.  Tilengine is layered over SDL and is cross platform, capable of running on most desktop operating systems, as well as Raspberry Pi devices.

Tilengine is composed like so:

image

 

Tilengine has direct support for tiled map files created using the Tiled map editor.  If you want to learn more about Tiled, I have done a complete tutorial series available here.

 

As a pretty straight forward game engine, let’s jump right in with the example created using the C# bindings:

using Tilengine;

namespace ConsoleApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var engine = Tilengine.Engine.Init(320,240,1,16,16);
            var window = Tilengine.Window.Create("",Tilengine.WindowFlags.Vsync);
            
            // This is the clear color drawn each frame.  Think of it as the sky color
            engine.BackgroundColor = new Color(0,128,238);

            // Load tsx and tmx file.  These are created in the Tiled level editor
            // tsx is a collection of tiles, tmx is a map painted using those tiles
            var tileset = Tileset.FromFile("SOTB_bg.tsx");
            var tilemap = Tilemap.FromFile("SOTB_bg.tmx","Layer 1");
            
            // create a new layer using our just loaded tiles.  Games can have multiple layers
            var layer = new Layer();
            layer.Setup(tileset,tilemap);
            layer.SetPosition(0,0);

            
            // Now we are loading an animated sprite riped from the 90s classic Shadow of the Beast
            // Spriteset is simply the image collection composing our game Spriteset
            // SequencePack is simple text format describing the available animations, their frames, speed etc
            // While Sequence is a named entry in the SequencePack text file
            Spriteset ss = Spriteset.FromFile("SOTB");
            SequencePack sp = SequencePack.FromFile("SOTB.sqx");
            Sequence walk = sp.Find("walk");

            // Now finally create a sprite using our spritesheet
            Sprite sprite = new Sprite();
            sprite.Setup(ss,TileFlags.None);

            int spriteX = 15;
            sprite.SetPosition(15,215);
            
            // Now play the animation sequence named "walk".  We also pass the final 0 in to tell it how many times the animation
            // should loop.  Zero equals forever
            Animation anim = new Animation();
            anim.SetSpriteAnimation(0,walk,0);
            
            
            int frame = 0;

            // This is your game loop
            while(window.Process()){
                // Draw the current frame of graphics (sprites, layers, etc)
                window.DrawFrame(frame++);

                // Now check if left or right arrow/gamepad are pressed, in which case move in that direction
                // IF moving left, flip the sprite over on the X axis
                if(window.GetInput(Input.Right)){
                    spriteX ++;
                    sprite.Flags = TileFlags.None; 
                }
                if(window.GetInput(Input.Left)){
                    spriteX --;
                    sprite.Flags = TileFlags.FlipX; 

                }
                sprite.SetPosition(spriteX, 185);
                if(spriteX > engine.Width) spriteX = 0;
            }
            

            //Cleanup
            tilemap.Delete();
            tileset.Delete();
            window.Delete();
            engine.Deinit();
        }
    }
}

 

The comments pretty much describe everything that is going on there.  For more details, be sure to check the video version of this tutorial available here [coming soon].  This example loads a sprite and animation from the game Shadow of the Beast, an Amiga platformer classic.  The SequencePack file format is extremely simple XML file, here is the example used:

<?xml version="1.0" encoding="UTF-8"?>

<sequences>
  <sequence name="walk" delay="6" loop="0">
    1,2,3,4,5,6
  </sequence>
</sequences>

 

The tsx and tmx files are generated using the Tiled level editor, another open source and free tool.  As you can see, it’s extremely simple to get up and going.  Run this code you will see:

SOTB

 

This is of course a primitive example, but does show the many parts of a game.  A game loop, sprite loading, animations, level loading, etc.  The major features of the engine, that I’m not covering here, are the various sprite effects it emulates.  You can see these effects demonstrated here or in the samples.

 

The Video

Programming , , ,

12. January 2017

 

Unity have just released patch 5.5.0p4.  No new functionality but it contains a large number of fixes:

Fixes
  • (858785) - Analytics: Fixed occasional windows editor crash on shutdown.
  • (827110) - Android: Disabled fence sync on poor performing drivers.
  • (855603, 859268) - Android: Fixed a crash when reloading or resuming scene which uses WebCamTexture.
  • (848830) - Android: Fixed an exception when trying to build to a non-existent path.
  • (845080) - Android: Fixed an issue where pausing during the splash screen would cause sprites to be black.
  • (855612) - Android: Gradle build and project export now support icon override.
  • (803872) - Android: Post process now executed before app is pushed to device.
  • (855545) - Animation: Fix for a crash using Resources.UnloadUnusedAssets with Animators caused by orphaned references.
  • (858208) - AR: Fixed a crash when exiting play mode during a Holographic Simulation session.
  • (848920, 858080, 860956) - Asset and Scene Management: Fixed a bug where importing multiple native DCC source files resulted in the contents of imported prefabs randomly switching places.
  • (849875) - Collab: Fixed an issue whereby the collab toolbar continued to have 'sign in' button even after signing in from the collab tool bar.
  • (859350) - Editor: Fixed an editor crash when switching platforms on a command line build.
  • (none) - Editor: Fixed local cache server not working if there were spaces in the path to the Unity Editor executable.
  • (858043) - Editor: Fixed Sprite Editor not always grid slicing fully black sprites correctly.
  • (793891) - Editor: Fixed launching Unity getting stuck on a grey screen for a minute or longer when your internet connection is bad.
  • (834243) - Editor: Fixed the issue that personal user is able to skip a mandatory survey.
  • (857504) - Editor: Fixed the splash screen 'Preview' button showing the NoiseModule preview texture.
  • (828286) - Editor: Reduced heap allocations for each frame when rotating the scene view in the editor.
  • (849376) - Graphics: Fixed a bug when importing Alpha8 textures which didn't import them as a single channel texture.
  • (852116) - Graphics: Fixed a crash during texture importing if the import failed.
  • (853722) - Graphics: Fixed a crash during texture importing if the texture format wasn't supported by the platform.
  • (825464) - Graphics: Fixed console error generated when using WWW.movie to create a movie texture.
  • (767034) - Graphics: Fixed errors spamming the console when performing GPU profiling on a DX11 Standalone build.
  • (none) - Graphics: Fixed the GPU Profiler in standalone mode.
  • (732380) - Graphics: Stopped rendering projectors twice if there is any transparent object visible to the camera.
  • (849356) - Graphics: Stopped the texture importer ignoring pure white Alpha channels by default. It is now a user option to choose to ignore it.
  • (810286) - iOS: Fix 2nd stage splash on iPhones with landscapeRight orientation
  • (856989) - iOS: Fixed crash in application:openURL:sourceApplication:annotation due to missing null check with Facebook SDK.
  • (831195) - iOS: Removed extra offset in constraint in default launchscreens.
  • (851764) - Lighting: Only clear the lighting progress bar when lighting is in progress. Stops lighting system accidentally closing other (non-lighting) progress bars.
  • (867312) - Metal: Fixed a memory leak when loading scene.
  • (807091) - Multiplayer: Fixed hostmigration sync issue.
  • (853316, 826931) - Multiplayer: Made sure isLocalPlayer works as expected on OnDestroy.
  • (none) - Networking: Skip proxy check when using the "file://" protocol on Windows.
  • (828188) - Physics: Display message in Inspector for Rigidbody2D when auto-mass is used on a Prefab or an inactive object.
  • (829769) - Physics 2D: Ensure that Rigidbody2D interpolation is reset if the Transform rotation is changed.
  • (715922) - Physics 2D: Fixed some 2D polygon outlines that were almost collinear causing collision detection problems.
  • (764734) - Shadows: Fixed a memory leak and assert when shadows are cast from lights with specific properties and in a specific scene setup.
  • (857270) - Substance: Fixed a crash when compressing small non-square textures to ETC with 'fast' quality.
  • (none) - Test: Corrected CHECK_EQUAL parameter and added another check for validation call count.
  • (856733) - UI: Fixed a curve preview cache not updating preview if curve data had changed but not the bounds.
  • (845756) - UI: Fixed a NullReferenceException when changing font to none.
  • (861467) - VCS: Don't attempt to connect to a Perforce server if any of the following parameters are unset: Server, User or Client.
  • (none) - VR: Fixed the usage of VRSettings.renderViewportScale in Camera's OnPreCull so that it was not a frame latent on all supporting SDKs. Fixed issues with Valve's Renderer adaptive quality feature.
  • (858634) - VR: Y-Axis Range For VR Controllers now match XBox controllers
  • (759286, 782587) - WebGL: Disabled deferred rendering on webgl1.0.
  • (850383) - WebGL: Fixed build with improperly tagged plugins
  • (none) - WebGL: Fixed Content-Length header field for local web server response that caused some audio files to have .duration == inf or zero. This was not reproducible with the normal workflow but could occur with a specific asset store plugin for webgl audio streaming.

As always, the patch is available for download here.

GameDev News

Month List

Popular Comments

GameDev math recipes: Rotating to face a point
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


18. November 2012

This recipe looks at how to rotate one sprite relative to another point.  In this example, we rotate a jet sprite to face the position of the mouse.

 



Mouse over the application to your right to see how the centred sprite follows the mouse cursor.  You may need to tap the screen to focus the mouse. As you move the mouse you can see the angle between the sprite and the mouse cursor.  The X and Y values represent the current location of the mouse on the HTML canvas.  You may notice that 0/360 degrees is to right hand side, this is a side effect of the Atan2 method.

 

 

Just The Math 

var angle = Math.atan2(stage.mouseY - jetSprite.y, stage.mouseX - jetSprite.x );

angle = angle * (180/Math.PI);

Description

First we get the distance between the sprite and the mouse.  This is obtained simply by subtracting the mouse location from the sprite location.  We then take the atan2 of the resulting coordinates.  One warning with atan2, the parameters are (y,x) not (x,y)!  Atan2 will return the angle, with a few gotchas.  First off, the angle is returned in radians.  Depending on your graphic library, you may need to convert to degrees to perform a rotation ( such as the case with EaselJs ).  If your language/library of choice doesn't have a RadiansToDegrees function, the formula is simply degrees = radiansToConvert * (180 divided by Pi).  Keep in mind, Pi (π 3.14159____ ) represents half a circle, so 2π is a complete circle( 360 degrees ), 1/2π is 90 degrees, etc.
 
Second, the angle is relative to the positive X axis, meaning that 0 degrees is pointing right.  If you look at the full source code to the example, you will notice that the source image itself actually points up, so we increase the angle by 90 degrees to adjust for orientation of the jet sprite image.  Also, depending on origin your graphic library uses, you may need to flip the sign in the y direction.
 
One other side effect of atan2 is it returns the results as a value range of -180 to 180.  If you want the value to be 0 to 360, perform the following:
 

if(angle < 0)

{

    angle = 360 - (-angle);

}

 

The Complete Code

<!DOCTYPE html>

<html>

<head>

    <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

    <script>

 

    var jetSprite;

    var stage;

    var textOut;

 

    function demo(){

        stage = new createjs.Stage("theCanvas");

 

        // onFrame will be called each "tick". Default is 50ms, or 20FPS

        createjs.Ticker.addListener(onFrame);

 

        // Create and configure our jet sprite. regX/Y set the pivot point, we center it

        jetSprite = new createjs.Bitmap("jetsprite.png");

        jetSprite.regX = jetSprite.image.width/2;

        jetSprite.regY = jetSprite.image.height/2;

        jetSprite.x = stage.canvas.width/2;

        jetSprite.y = stage.canvas.height/2;

 

        //Now we create a Text object, used for displaying some debug details

        textOut = new createjs.Text("Debug","24px Arial","red");

        textOut.x = 5;

        textOut.y = 5;

        textOut.maxWidth = 390;

 

        //All the worlds a stage after all... add our sprite and text to it

        stage.addChild(jetSprite);

        stage.addChild(textOut);

 

        //And go...

        stage.update();

    }

 

    function onFrame(elapsedTime) {

        var angle = Math.atan2(stage.mouseY - jetSprite.y, stage.mouseX - jetSprite.x );

        angle = angle * (180/Math.PI);

 

        // The following if statement is optional and converts our angle from being

        // -180 to +180 degrees to 0-360 degrees.  It is completely optional

        if(angle < 0)

        {

            angle = 360 - (-angle);

        }

 

        textOut.text = "X:" + stage.mouseX + " Y:" + stage.mouseY + " angle:" + Math.round(angle);

 

        // Atan2 results have 0 degrees point down the positive X axis, while our image is pointed up.

        // Therefore we simply add 90 degrees to the rotation to orient our image

        // If 0 degrees is to the right on your image, you do not need to add 90

        jetSprite.rotation =90 + angle;

 

        stage.update();

    }

    </script>

</head>

<body onload="demo()">

    <canvaswidth=400pxheight=400pxid="theCanvas"style="background-color:black"/>

</body>

</html>

 

See Also

http://gamedev.stackexchange.com/questions/14602/what-are-atan-and-atan2-used-for-in-games

 

 

Additions and Edits

The results of Atan2 can be a bit confusing, depending on the way your brain works.  In the full source code, you can see that I add 90 degrees to the rotation angle.  This is because the image ( and my mindset ) view 0 degrees as being up the positive Y axis.  Of course, this is completely arbitrary.

 

Consider for a moment the philosophical question "where does a circle begin?".  The answer completely depends on who you ask.  If you ask me, 0 degrees is up.  If you ask atan2, 0 degrees is to the right.  Consider the following diagram:

Jet on Cartesian plane

 

As you can see, the position atan2 considers to be zero is offset 90 degrees from the position I consider ( and have drawn my art according to ) to be 0 degrees.  Fortunately the answer is as simple as adding 90 degrees to the angle during rotations.  Of course, you could simply draw your art as if 0 degrees was along the positive X axis and you won't have any problems.

Programming

blog comments powered by Disqus

Month List

Popular Comments