Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

24. January 2017

 

Are you perhaps… artistically challenged?  This tutorial will give you passable 8-bit or 16-bit style pixel art results with a minimum of artistic ability.  Of course it assumes you know a bit about Blender, but dont worry if you don’t.  We have a pair of ground up tutorial series that will0001-0060 teach you everything you need to know to follow along, this Blender text tutorial series and this Blender video tutorial series.  Alright, let’s jump right in.  We are going to use a combination of vertex painting, cycles renderer and freestyle in Blender to create an image like the one to the right.  Not the most impressive thing you’ve ever seen I’m sure… but it was exceptionally easy.

 

 

Without further ado, let’s jump in.  For this example I am not going to model the sprite, if you are interested in seeing that process, watch the full video.  Instead we start with a simple model like the following:

image

 

Now let’s look at first colouring it, then cartoon rendering it and finally how to render it in pixel art style.

 

Vertex Painting The Object

First we start off by painting our surface.  The nice thing about Vertex Painting is it draws the colour information directly on the model, so you dont need to worry about UV maps or textures at all.  We just published a video on Vertex Painting in Blender if you want more details.  In the end we are going to use the Cycles renderer, but for now it’s easier to get started painting using the built in default Blender renderer.  This will enable us to easily see the painted vertices in the Blender viewport.  In the default material make sure that Vertex Color Paint is enabled:

image

 

Now it’s time to start filling out our different colors.  In Edit mode, simply select the faces you want to be a specific colour, like I have done here for the cockpit area:

image

 

Now switch over to Vertex Paint Mode:

image

 

Now select “Face Selection Masking For Painting”

image

 

This limits your painting to the faces currently selected in edit mode.  In the Tools menu ( T ), select the color you want to paint with.

image

 

Now hit SHIFT + K to fill the selection with the current colour, like so:

image

 

Now repeat this process for the rest of the ship.

 

Toon Shading In Cycles

Now that you’ve got your ship coloured, it’s time to switch over to the cycles renderer.  If using a default layout, simply select Cycles Render in the dropdown:

image

 

With the change to Cycles Render, we should now have a new option in the Materials dialog

image

 

Click Use Nodes.  Then select Toon BSDF.

image

 

Out of the box Vertex Colors aren't going to work in Cycles, we need to make a simple shader graph to get things to work.  Don’t worry… it’s super easy.  When you do a vertex paint, the data is stored in the mesh data, like so:

image

 

That “Col” data is about to become very useful.  Switch to Node Editor

image

 

Now what we want to do is add an Attribute input and wire it into the Color field of our Toon shader, like so:

image

 

Notice the name “Col”.  This is the link back to our vertex color data.  This causes the Toon shader to use the painted vertex colors as it’s color source.  If you do a render now, it should look something like…

image

 

Better, but still quite fugly…

 

Using Freestyle

Now to get a bit of a more hand-drawn effect, we want to enable freestyle in the Blender renderer:

image

 

Notice I increased the Line Thickness a fair bit from the default… this is a personal choice.  It’s possible you don’t like the default lines it chose to highlight, but don't worry, you can control that if you prefer.  Simply go to Edit Mode, select the edge you want Freestyle to render, select Ctrl+E then Mark Freestyle Edge:

image

 

Now in the Render Layers property panel, locate the Free Style Line Set, then enable Edge Mark.

image

 

Now when we render, it should look like:

image

 

Ok, that looks a bit better!  Now how about that Pixel art look?

 

Compositor Time

The compositor is a process that runs AFTER the image is rendered and can be used to create all kinds of special effects.  In this case we are going to pixelate the result.  In the Renderer dialog, make sure under Post Processing, that Compositing is enabled.

image

 

Now, back in Node Editor, switch to Compositor mode:

image

 

Now we want to edit our graph like so:

image

 

Essentially we take our input Render Layers, scale down the resulting image to 1/5th its size, apply the Pixelate filter, then scale it back to it’s regular size and finally send it to the Composite output.  Now let’s render and see what we’ve got:

image

 

TADA!  Pixel art in just 20 easy steps.  Granted, at that size it doesn’t look great, but at actual game scale:

image

 

It looks pretty solid… for a purple, yellow and emerald model that is!  You can download the Blend used in this example here.

 

The Video

Art , ,

24. January 2017

 

There has been a new release of the Atomic Game Engine, build 3.  The Atomic Game Engine is an open source 2D/3D game engine written in C++ but scriptable using TypeScript, JavaScript and C#.  We featured the Atomic Game Engine in the closer look series, shortly before it became open source.  Primary features of the Atomic Build 3 are:

Atomic Build 3 Highlights
  • Profiling - Added Object memory profiling and metrics subsystem
  • C# - CSComponent inspector support for dynamic/fixed size array members
  • Player - Player subsystem Scene handling improvements
  • Editor - Inspector now displays whether a script is implemented in JS, TS, or C#
  • Wiki - Many additions and improvements to the Atomic Wiki!
  • Script - Exposed VariantVector, Frustum, PackageFile, and UI::CycleDebugHudMode to script
  • Script - Improvements to ScriptVector and ScriptVariant
  • TypeScript - Updated to use generated native enum values
  • TypeScript - Constants converted to enums where possible
  • Platform - Added additional SDL key mappings
  • Editor - Project load/save now remembers the last folder used
  • Editor - Updated Welcome screen and help menu with new Atomic Support forums
  • Linux - Fixed issue with Pulse audio CPU usage and possible black screen
  • C# - Fixed issue with custom C# script events
  • C# - Fixed issue with reparenting C# nodes and component updates
  • Editor - Fixed issue with multiple selected resource tabs
  • Editor - Improved contrast on example language toggle button states
  • ToolCore - Fixed issues with JSONFile::GetRoot in assets
  • Deployment - Removed some UI psd assets that were in deployment

In addition to more details about the release you can learn more about what’s going on at Thunderbeast games by reading the complete blog entry.

GameDev News

23. January 2017

 

A few days ago (sorry, computer issues on this end), Godot 2.1.2 was released.  Primarily a maintenance release while Godot 3.0 continues development, there is actually a fair bit packed into this particular release.  The biggest feature in this release is IP v6 support, a recent requirement to get published on the Apple Store.  Features of this release include:

HIGHLIGHTS

This release is quite important for Apple developers, as it brings IPv6 in the networking API, which is now a requirement for applications on the Apple Store. It also fixes a regression from 2.1.1 in the OSX binaries, which had unwillingly set the minimum required OSX version too high.

Another major change is that a bug was fixed in the initialization of most audio drivers which caused an audio latency of about ~200 ms, quite annoying for games which need a precise timing for samples.

  • Networking: IPv6 support and many bug fixes and enhancements
  • Audio: Fix ~200 ms audio latency bug due to misinitialization of some drivers
  • GDScript: Ternary operator (a if cond else b)
  • 2D: Easy API for 2D split screen (with demo)
  • OSX: Fix minimum supported version when compiling with recent Xcode, now 10.9 (regression in 2.1.1)
  • Dozens of bug fixes
  • Many class reference documentation updates
  • Editor translation updates

OTHER NOTABLE CHANGES

The full list of changes is of course lengthier, as it contains 112 commits made since 2.1.1-stable (excluding merge commits). Here's a selection of some of the most interesting ones for end users:

  • Linux/X11: Fix crash when neither ALSA nor Pulse are installed
  • Web: Fixes and improvements for WebAssembly/asm.js
  • Editor: Fix Script Editor drawing over dialogs
  • Editor: Ability to change visibility when ancestor node is hidden (with proper visual feedback)
  • Editor: Add bucket fill preview in TileMap
  • Editor: Add favorites and recent history to create dialog
  • GDScript: Named colors in the Color API
  • 2D: Fix Particle2D initial size randomness property having no effect
  • 2D: Add the finished signal to AnimatedSprite
  • 2D: Add Node2D's set_global_rot, set_global_rotd, set_global_scale and corresponding getters
  • GUI: Make deselect work for TreeItem in SELECT_SINGLE mode and emit item_selected
  • GUI: PopupMenu upgrade: Hide on item selection
  • GUI: Flat button and and styleboxes for ButtonArray
  • Libraries: Embedded library updates: libpng 1.6.28, zlib 1.2.11, opus 1.3 and opusfile 0.8, webp 0.5.2

 

You can read more details on the Godot blog.  The new release is available for download here.  Of course, if you are new to Godot and want to learn it, be sure to check out our complete tutorial series available here.

GameDev News

20. January 2017

 

Vulkan is the successor API to OpenGL and takes things a lot closer to the GPU.  The flipside to this, a lot more is left to the developer to implement.  nVidia have release VkHLF, the Vulkan High Level Framework, to help developers deal with some of the grunt work involved with using Vulkan.  Unlike Vulkan-HPP, VkHLF does add overhead to your code, so there is a performance cost to be paid.  Here is the description of VkHLF taken from the Github readme:

Vulkan High Level Framework

VkHLF is an experimental high level abstraction library on top of Vulkan. It adds features like transparent suballocation, resource tracking on the CPU & GPU and simplified resource creation while staying as close as possible to the original Vulkan API. In contrast to Vulkan-Hpp, which was carefully designed to be a zero-overhead C++ abstraction for Vulkan, this library adds significant higher-level functionality. Even so, it has been designed for high-performance, but it can cost performance relative to native Vulkan if not employed with the intended usage patterns.

Since this project is in its early stages and under heavy development expect bugs and interface changes for a while. It should not be used for production code yet!

 

As the last line says, this is an early stage project and should not be used for production code.  You can check out some samples here.  Even though it helps with some of the complexity, the Hello Vulkan example is still nearly 400 lines of code!

GameDev News

18. January 2017

 

Today marked the release of two important Haxe gamedev libraries, OpenFL and Lime.  Lime is a low level API similar in scope and function to SDL or SFML, providing access to the underlying hardware.  OpenFL is layered on top of lime and attempts to provide a Haxe version of the Flash APIs, including gaming APIs.

 

Changes to OpenFL 4.5.3:

  • Updated for Lime 3.6
  • Updated AGALMiniAssembler to a fresh port of Adobe's last release
  • Added missing Event.FRAME_CONSTRUCTED event
  • Added Dictionary<Object, Object> support
  • Improved support for textField.setTextFormat
  • Updated preloader to use Event.UNLOAD instead of Event.COMPLETE to unload
  • Updated SWFLite library to preload with the parent application
  • Fixed support for slashes in SharedObject names
  • Fixed support for preventing default on keyboard events
  • Fixed a regression in displaying stack traces on crash errors
  • Fixed text measurement on IE 11
  • Fixed return value when scaleX or scaleY is negative
  • Fixed issues where new ByteArray may have values other than zero
  • Fixed an issue with SWFLite assets when using the "generate" option
  • Fixed a possible null crash when updating object transforms
  • Fixed support for garbage collecting Sound when SoundChannel is finished
  • Fixed problems with using textField.appendText
  • Fixed the default template for HTML5 when multiple projects are embedded
  • Fixed wrong colors when values were larger than expected
  • Fixed an issue with needing clearRect on CocoonJS

Changes to Lime 3.6.0:

  • Moved "lime.audio" to "lime.media"
  • Added Vorbis bindings under "lime.media.codecs.vorbis"
  • Added lime.ui.ScanCode, with conversion support to/from KeyCode on native
  • Added tool support for the "--no-output" argument
  • Migrated from NFD to tinyfiledialogs for better dialog support
  • Made window.close cancelable on desktop platforms
  • Updated libjpeg to 9b
  • Updated howler.js to 2.0.2
  • Improved support for Haxe 3.4
  • Improved support for progress events while preloading
  • Fixed force install when deploying to Android (API 16+ devices)
  • Fixed an invalid state when returning from background on Android
  • Fixed playback of a single audio buffer multiple times on HTML5
  • Fixed initial volume level in AudioSource on HTML5
  • Fixed a regression in the default architecture list for iOS
  • Fixed merging of multiple tags in project files
  • Fixed a possible crash when retrieving OpenGL strings
  • Fixed the default template for HTML5 when multiple projects are embedded
  • Fixed support for non-preloaded assets on HTML5
  • Fixed support for image.copyChannel on HTML5 when using WebGL
  • Fixed support for command-line arguments with "lime rebuild"

 

You can read more about both releases here.

GameDev News

Month List

Popular Comments