19 juillet 2019
AMID EVIL: Crafting 3D Weapons Into 2D Sprites
The first Amid Evil weapon sprite (2016)
In fact, that weapon “sprite” is what sparked the whole development of Amid Evil. We actually had an older game design for a top-down shooter laying around, so we used bits and pieces of that, plus experimented with lots of funky weapon and enemy ideas using Blueprints. Amid Evil’s “Soul Mode,” which powers your weapons, was actually a carryover from that older game design.
The Axe of the Black Labyrinth (2017)
The first weapon we made was what ultimately became known as “The Axe of the Black Labyrinth.” Originally, it was going to be the only weapon in the game, morphing into different shapes and doing different types of damage depending on the attack. This idea was ultimately abandoned but a part of that design was carried over which you can see when the axe flips to the forward position and spins when powered up in Soul Mode.
Spin 2 Win
The first stage of this weapon’s creation was nothing out of the ordinary. Like most modern 3D games, the weapons in Amid Evil began their life as high-res 3D models.
There wasn’t any concept art done for the weapons of Amid Evil, however - everything was designed impromptu and off the cuff as Simon modeled the blockout meshes. The mad lad.
High-poly mesh vertex painted to be used to mask different material types/colors
After modeling and sculpting the axe, each component of the mesh was given a unique vertex color depending on what material they would end up using. The vertex colors are then baked along with the normal map and used when texturing to assign what materials are applied where on the sprite.
Normally, the high-res model would be used to bake normal map details to a lower-resolution “game-ready” version of the weapon. However, since we’re using the high-res model as the base of a sprite, the workflow from here on is slightly different…
FPS view of Axe of the Black Labyrinth
Camera set up with the axe in mid-swing
Camera set up with the axe in mid-swing
A camera is set up in the 3D creation app with a field of view that makes the weapon look good from a first-person perspective (in this case a FOV of 115 showed off the axe best) and an aspect ratio of 2:1, as the weapon is going to be baked onto a 2048x1024 texture.
Baking plane and cage aligned to camera frustum
A plane with the same 2:1 ratio as the camera is then placed behind the weapon and in line with the camera frustum. This plane mesh is what the weapon frame is baked to, and in order to achieve the 3D field of view needed for the sprite, the plane’s cage is placed in front of the weapon, and scaled down to match the frustum just in front of the camera.
Doing this effectively turns the bake into a camera by having the rays cast between the plane and the smaller cage distort in a way that creates perspective.
Three maps are baked for each weapon frame: vertex colours, normal map, and ambient occlusion
The baked maps are linked in a Substance Designer substance, and used to create the final “game-ready” textures. The substance file is set up in such a way that each new set of maps for each individual frame are processed and exported with exactly the same materials and effects per weapon, speeding up the workflow greatly.
The normal map is then used to create a similar look to mid-90s FPS hand-painted pixel art (or a touched-up photo), using edge detection and curvature, while bringing it into the current generation by using modern Physically-Based Rendering (PBR) materials with roughness and metallic maps.
Final albedo texture exported from Substance Designer
We also pack all of the monochrome roughness, metallic, and emissive maps into a single texture to save on texture memory.
The packed emissive (red channel), roughness (green channel), and metallic (blue channel) texture - The alpha channel is also used as an opacity mask
The final textures are imported into Unreal Engine 4 each using nearest filtering in order to keep the pixelated sprite look, and the tiling method is set to clamp in both X and Y directions (otherwise the weapon would tile across the screen).
Weapon normal map is used to distort a scrolling texture for the emissive gem effect
This gem effect is the most complex part of the material, utilizing the blue channel of the weapon’s normal map to distort scrolling/rotating UVs to give the illusion of magical energy flowing inside the gem that conforms to the shape of the normal map.
The material node network responsible for distorting the animated gem effect - This plugs into the UVs pin of a TextureSample node with a tiling noise texture assigned
Using parameters for various things allows for lots of variability for each weapon and even each frame, all while using a single master material. For example, during the firing animation frames of some weapons, the gem glows brighter leading up to (and during) firing.
“Voltride” charged and firing
Also, the use of texture coordinate offset parameters allows for extra frame material instances to be created without needing any additional sprite textures, saving on texture memory. The equip and unequip frames use this extensively, having the idle sprite simply slide in and out of frame.
Weapon plane mesh in front of the player camera inside the player Blueprint
Using a physical mesh in the world instead of using a HUD approach allows for accurate lighting despite the weapon being a 2D image. It also means camera animations look more natural, instead of being locked to the screen.
How the final axe looks ingame
You can see how all of the weapons in Amid Evil turned out in this fan-made video: Or in these .gifs:
And if you want to see how a 3D Model is turned into a 2D Sprite and then turned into a real-world weapon, you can check this out.
We hope this blog has enlightened you to some fun, new artistic and development techniques!
You can come talk to us any time in Discord.gg/NewBlood
-Indefatigable & New Blood
