Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
6. May 2018


The open source media framework for the Haxe language OpenFL just released version 8.0.0.  The framework also released several fixes and improvements especially in shader support.


Details from the release notes:


  • Deprecated DOMSprite, OpenGLView and TileArray
  • Updated to Lime 6.3.*
  • Added DisplayObjectShader, GraphicsShader, BitmapFilterShader
  • Added graphics.drawQuads and graphics.beginShaderFill
  • Added DOMElement, GraphicsQuadPath and GraphicsShaderPath
  • Added displayObject.shader and displayObject.invalidate()
  • Added support for inheritance within Shader classes
  • Added initial support for displayObject.cacheAsBitmapMatrix
  • Added missing "NetStream.Seek.Complete" event in NetStream
  • (Beta) Added RenderEvent for custom DisplayObject rendering
  • Improved the behavior of PerspectiveProjection to be more accurate
  • Improved graphics.drawTriangles to support running in OpenGL
  • Improved cacheAsBitmap to support OpenGL render-to-texture
  • Improved filters to support OpenGL shader-based filters
  • Improved Shader to support uploading of custom attributes
  • Improved Shader to support enabling or constant values
  • Improved the behavior of buttonMode on MovieClip objects
  • Improved the performance of openfl.Vector on native targets
  • Improved Shader to generate strictly-typed fields
  • Improved Graphics to upscale only (to prevent reallocation)
  • Improved updating of object transform information internally
  • Improved behavior of window focus on desktop targets
  • Improved the behavior of numpad ENTER to be more consistent
  • Improved the playback of nested MovieClip animations
  • Improved the performance of displayObject.getBounds
  • Improved the handling of inputs to beginGradientFill
  • Improved support for byteArray.readObject and writeObject
  • Fixed the return type of BitmapData.fromBytes on JS
  • Fixed missing password field in SWF-based TextField objects
  • Fixed some minor issues in colorTransform.concat
  • Fixed some incorrect values in TextField scrollV/scrollH
  • Fixed use of current defaultTextFormat when using setTextFormat
  • Fixed the behavior of restrict/maxChars to affect user input only
  • Fixed use of context.resetTransform for certain browsers
  • Fixed support for use of matrix and clipRect in bitmapData.draw
  • Fixed some issues in mask support in the OpenGL and Canvas renderers
  • Fixed a minor issue in DisplayObject event bubbling
  • Fixed initialization of socket flags if a socket is lost on IPv6
  • Fixed setting colorTransform in some MovieClip animations
  • Fixed some discrepancies in the externs for the OpenFL API
  • Fixed an additional render that occurred on some drawTriangles calls
  • Fixed performance regression in Tilemap
  • Fixed initialization of some AGAL register values
  • Fixed ignoring of up/down key events in single-line TextField objects
  • Fixed the value of textWidth/textHeight when not type INPUT
  • Fixed use of cacheAsBitmap on TextField objects
  • Fixed support for transparent backend in OpenFL preloader class
  • Fixed possible errors in HTML parser on text with invalid HTML
  • Fixed incorrect bounds when rendering SimpleButton on canvas
  • Fixed JPEG2 and JPEG3 tag parsing in older SWF versions
  • Fixed support for graphics.drawRect with negative coordinates
  • Fixed an issue where EOF on sockets could close the socket prematurely
  • Fixed concatenation of two empty openfl.Vector objects


You can install the Haxelib command:

haxelib install openfl
haxelib run openfl setup

If you have problems with the installation be sure to check out the following page. 


5. May 2018


Godot 3 is gaining new functionality at a staggering rate.  Just last week I wrote about the addition of CSG Support.  Yesterday the development branch of Godot 3 gained 2D Skeletal Deformation, enabling you to animate deformations on a 2D texture using bones.  Essentially you create a Polygon2D object, apply a texture to it and create a polygon cage.  Then you set a series of bones and paint the influences for those bones, at which point on you can deform the underlying texture using the bone system you just created.  If you’ve used a tool like Creature, Spine, COATools or Spriter, you’ve probably got a decent idea how this process works.


If you want to play around with this functionality you current need to build the current development branch yourself.  However if you just want to see the how the new systems work, check out the following video which shows you step by step how to use 2D deformations in Godot.


Do keep in mind this functionality is brand new and under development, so expect some changes in the way things work and the occasional bug, although I didn’t encounter any personally.  If you are interested in learning more be sure to check out the full writeup over on GodotEngine.org.

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:

image


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


3. May 2018


CryEngine 5.5 preview 2 was just released.  Keep in mind this is a preview release so expect some bugs and glitches.  In fact there’s a list of known issues:

  • Anim: Save/load breaks default character movement - note: singleplayer only). CRYENGINE 5.5 Preview 2 Live Now
  • Save: Using Save as... after a save makes brushes disappear and unusable.
  • Rendering: Resizing the Properties Panel corrupts rendering in the Character Tool.
  • Designer: Designer surfaces are invisible or flicker during edit mode and after.
  • Global VFX: Switching layers breaks particles, visuals and audio for them.
  • Area: VisArea does not hide objects outside of the area.
  • Substance: Creating a substance graph preset does not create the related texture files (diff, spec, ddna, etc.).
  • DX12: Various issues related to DX12.
  • Vulkan: Various issues related to Vulkan.
  • VR: Currently not working.
  • C#: Memory corruption can occur after reloading scripts in Sandbox, resulting in possible crashes and undefined behavior.

Of course, the release isn’t just a collection of new issues, the release also includes:

Audio

Audio General

  • Fixed: Wwise implementation now uses proper MSVC libraries during linking in regards to the used compiler toolset.
  • Fixed: Clang compiler error.

Sandbox Editor

General

  • Fixed: Crash when opening a certain Particle Effect.
  • Fixed: Crash in Trackview.
  • Fixed: Crash when ungrouping an empty group.
  • Fixed: Crash when extracting objects from a prefab.
  • Fixed: Crash when renaming imported textures.
  • Fixed: Creating a substance graph preset does not create the related texture files.
  • Fixed: Warnings when reloading item scripts in GameSDK.
  • Fixed: Message notification for the texture compiler may not dissappear.
  • Fixed: (FBX Importer) Mesh importer cannot save new files.
  • Fixed: (Terrain Editor) Painting terrain texture does not work if "Mask by Altitude and Slope" checkbox is enabled.

Core/System

Engine General

  • Fixed: (Schematyc) Switched the logic of Equal and NotEqual.


You can read more about the release here while you can download the release here.

GameDev News


3. May 2018


Unity 2018.1 was just released and one of the major new features is Shader Graph, a new visual programming language for creating shaders.  In this article we are going to look at how to enable and use Shader Graph.  There is also a video of this tutorial available here or embedded below.


First off, to get started using Shader Graph, be sure to be using Unity 2018.1 or later. 

Next, start Unity and create a new project.  I used the following settings:

image

Shader Graph is fully compatible with the new light weight render pipeline.  For the record, Shader Graph does NOT work with the current HD pipeline, this feature is under development. There is no need to add any new packages… yet.  Once ready, click Create Project.  Once your project is loaded, go ahead and create a new scene.

image


We need some kind of object to apply our shader to, simply right click the newly created scene in the Hierarchy view, select Create->Sphere.

image


Now we need to enable Shader Graph functionality in Unity.  Click Window, then select Package Manager.

image


In the resulting window, select All, then Shadergraph, then Install.  This will take a few seconds.

image


Now that Shadergraph is enabled, let’s create one.  In the Project panel, I created a new folder called Shaders.  Right click the newly created folder and select Create->Shader->PBR Graph.

image


I called mine MyShader, name yours whatever you want.  Except Dilbert; that’s a stupid name for a shader!

image


One more small bit of setup before we start creating shaders!  We need to create a material that we will attach our shader to and ultimately apply to our sphere mesh.  Right click the Materials folder and select Create->Material.

image


I called mine MyMaterial, again, name yours whatever you want… even Dilbert.  Make sure your shader is selected and showing in Inspector, then simply drag and drop your newly created shader on it.

ApplyingShader


Finally drag your material to the Sphere you created earlier.  Phew… ok, time to create our shader.  Simply double click the shader and the Shader Graph editor will be create.  A new project should look something like this:

image

You can zoom the design surface in and out using the mouse wheel, hold down the middle mouse button to pan the surface around.


The PBR Master can be thought of as the ultimate output of the shader.  You have a choice between Metallic and Specular by dropping down the workflow tab.  The blackboard is the section to the top left and can be used to configure parameters as we will see in a moment.  The bottom right region is a preview of the shader, this window can be resized.


Create a shader is now a matter of creating a network of nodes and connecting them together.  Let’s show a simple example of connecting a texture map to the Albedo channel.  Right click an empty point on the canvas, select Create Node->Input->Texture 2D Asset.

CreatingATextureNode


Now click on the red circle to the right of out and drag to an empty portion on the canvas.  Select Input->Sample Texture 2D, then connect the RGBA out pin to the Albedo in pin on the PBR node, like so:

ConnectingTheTexture


At this point, we have the equivalent of a diffuse texture defined in our shader, now head back to the Texture 2D Asset, click the little circle to the right of the texture field and select a texture to apply.  Pick a compatible texture from your project. 

image


You shader preview should now show the updated texture:

image


Now what if you wanted the texture to be defined as a parameter in the editor instead?  This is where the Blackboard comes in.  In the Blackboard, click the + icon to the right side, then select Texture.

image


Name it however you want, I called it SourceTexture in my case.  Also optionally provide a default texture value using the example same process we just did above.

image


Now let’s replace our hard coded texture with a parameter instead.  You can remove a node by left clicking it and hitting the delete key.

ConfigureAProperty


Now this parameter can be defined in the editor.  Select the Sphere we created then applied our material too in the Hierarchy view.  In the Inspector under the Material, you will now see a new parameter matching the name you just provided:

image


You can also easily see the source code generated by a shader by right clicking the output node and selecting Copy Shader.

image


The HLSL code of the shader will have just been copied to your clipboard.


So, that’s the basics of using Shader Graph.  Now it’s mostly a matter of creating the appropriate input nodes, modifying them and connecting them to the appropriate in pins on the PBR Master output node.  Getting into the details of how this works is beyond the scope of this tutorials, shader programming is a VAST subject and could fill many books.  I’m not going to just leave you hanging though…  now that you know how to enable and use the tools to create Shader Graphs it would be an ideal time to get your hands on some samples and dig deeper.  Thankfully Unity have provided exactly that, available for download here on Github.


The Video

Art Design


GFS On YouTube

See More Tutorials on DevGa.me!

Month List