Badge Fixture Mods

From Automation Wiki
Jump to: navigation, search

A Badge Mod is the same basic class as a regular Fixture, but I've put together a streamlined and simpler method for creating custom badges for people who do not know or care about 3D modelling.

An example badge mod
An existing badge

If you feel comfortable enough with 3D modelling, it may be easier to follow the Fixture Mods page, and create a Fixture Mod with your badge as a Conforming Mesh.

For those that simply have an image of a badge and want it on their car, read on!

Fast Rundown[edit | edit source]

  • A Badge Mod is a regular Fixture
  • All you need to make your custom badge is an image (everything else is provided in the tools)
    • That image must have four colour channels: RGBA
    • That image can have any number of colours in its RGB channels
    • The shape of the badge is defined in the Alpha channel
  • that image gets fed in to a provided material
  • that material gets fed in to a provided mesh
  • that mesh gets fed in to the Badge Fixture Blueprint

For a visual breakdown of what we'll be making for this badge, take a look at the following reference graph:

From right to left, top to bottom: Badge Texture (your badge design), Badge Normal Map (we'll create this from our badge texture), Badge Material (this is provided in the mod tools), Conforming Mesh (again, provided in the mod tools), Fixture Blueprint (we'll create this when we create our Badge Mod), Thumbnail CPP and thumbnail Texture (we'll generate these when we're finished creating our blueprint)
From right to left, top to bottom: Badge Texture (your badge design), Badge Normal Map (we'll create this from our badge texture), Badge Material (this is provided in the mod tools), Conforming Mesh (again, provided in the mod tools), Fixture Blueprint (we'll create this when we create our Badge Mod), Thumbnail CPP and thumbnail Texture (we'll generate these when we're finished creating our blueprint)

How it Works[edit | edit source]

Badge mesh.jpg

Badges, as they are implemented here, are simply a texture with a cutout mask on them. This cutout mask is applied to the above mesh, and creates the shape of the badge. As you can see in the above image, there are several duplicate layers to the mesh. This helps give depth to the badge.

Of course it is possible to create a custom mesh with the shape of the badge that you would like to have, and simply import it in as a conforming mesh in to a Fixture Mod, but for the sake of simplicity I have created this workflow for people who do not want or care for working on 3D meshes and simply want to bring their custom badge design in to Automation.

Creating your Custom Badge Texture[edit | edit source]

We'll use Photoshop for this example, but anything that supports saving out an alpha channel to a TARGA file should work fine (a quick google tells me that GIMP should work fine)

Badge Image Size[edit | edit source]

Create a new image. The image needs to be square, and it needs to be a power of two (for example, 64x64, 128x128, 256x256, etc). For all the default textures in Automation, we use a size of 256x256 pixels. I find this is detailed enough for most of the default designs without being too blurry up close, but there isn't really an upper limit to your badge size. Your design could, for instance, be 8192x8192, or 8x8, though neither of those extremes is recommended.

Badge size.jpg

Create your design[edit | edit source]

You can go as wild and creative as you want, so long as the colours you chose fit on the RGB spectrum (ie: they dont extend into any 4th or high-dimensional space, which... yeah, im just having fun at this point), and so long as that design fits on the square texture. If you want a rectangular badge, just pillarbox or letterbox it.

For this example, I have created a badge for the fictional company I just now made up for the purposes of this tutorial - Gasmean Motor Works:

ExampleBadge.png

If I were to import this as it is now in to the Automation SDK, it would appear like this on the badge mesh:

Example wrong badge.jpg

To find out why it looks just like a square texture, instead of a nice round badge, let's have a look at the file in Adobe® Photoshop® software (yep, that's apparently how you're supposed to say it.  I'm just going to refer to it as 'Photoshop' from here on out, like any sane person):

Enhance 22-43

Enhance:

Gimme a hard copy right there

A-ha! There's the problem. There's no Alpha Channel!

Let's make one.

Creating the Alpha Channel[edit | edit source]

An Alpha channel is similar to how a Red, Green, or Blue channel works. Except that instead of defining how much red, green, or blue there is in the texture, you're defining how much of that texture is visible. This means that yes, you can have a texture that is very red but also completely invisible! In practicality, this doesn't work quite as well as you'd think, especially when we take in to consideration how we are using alpha channels in UE4 to define the cutout mask for these badges.

To get the most out of the rendering features available to us in the Unreal Engine, we'll be using the Alpha Mask Blend Mode.

What the Alpha Mask Blend Mode does is find a point between white and black at which the object is visible. Any value above this is visible, and any value below it is invisible. Think of it as a switch. On, or Off. Visible, or Invisible. White parts of the texture define what parts of the object are visible, and black parts define what parts are invisible.

There are of course other blending options, such as 'Translucent', which is a complete gradient of visibility from completely visible, through slightly visible, to mostly invisible but still sort of there, to completely invisible. Unfortunately, this blend mode suffers from not having a lot of the rendering features that we've come to know and love, and so we avoid it as much as possible for most things.

To make an Alpha Channel for the purposes of this Alpha Cutout Mask in Photoshop, I'm just going to select my design and create a new layer, with a white colour where the badge design is and black where there is no badge:

Think of the white part of the texture as the shape of the badge.

Copy-and-Paste this Alpha Mask to an Alpha Channel by selecting 'Create New Channel' in the Channels box in Photoshop:

Setting Alpha Channels.gif

Your channels list should now look something like this:

Final channels list.jpg

Saving your Design to a file[edit | edit source]

Saving out your finished design is less simple than you would expect.

So it's an image with some transparency... So what, right? You thought you could just save out a .PNG and be done with it? You're wrong, kiddo. Shit's about to get real.

Photoshop does weird things to .PNG files to save out the opacity on them. You can test this for yourself by saving out your file to a .PNG, and before you've even finished saving it you'll notice something is amiss:

.PNGs and alphas are bork.gif

So the Portable Network Graphics format (.PNG) won't work. What does work is the Truevision TGA (TARGA) image format (.TGA), which is supported by Photoshop by default, and supports Alpha channels:

Badge save targa.gif

Make sure to save the file out as a 32-bit image to ensure that the alpha channel survives:

Targa 32bit save.jpg

Creating a Normal Map[edit | edit source]

I have created an easy to use normal map generator in the Automation SDK files which you can open by installing Substance Player from the Allegorithmic website for free, here: allegorithmic.com/buy/download.

Download substance.jpg

Once you've got that downloaded and installed, open the Custom_Badge.sbsar file (located in: Automation_SDK\AutomationGame\Plugins\ExampleBadge\Content\Badges\BadgeTools)

You should be greeted with something that looks a little like this:

Top Left: The output Normal Map we'll be editing Top Right: Settings for this Substance file Bottom: The same normal map, but applied to a mesh in 3D

We only need to worry about the small cluster of settings in the top right of the Substance Player.

Substance settings.jpg

The settings we need to pay attention to are as follows:

  • Range - blurs the input image (which is important for making nice edge normals)
  • Intensity - makes the edging more or less intense (0=off, 10=lots)
  • Input - the input texture used to make all the magic work
  • Channel Weights - what channels in the texture to use to make the normal map

Select the Input button: "None [...]" to import your badge image in:

Import to substance.gif

From here, you'll likely notice that the normal map in the top left has changed slightly:

Changed normal.jpg

By default, it will create the normal map from the alpha channel of the image you feed it, but this is only useful if your badge is completely 'flat' and you only want some rounded edges on it.

This is because the normal map is sampling the Alpha channel only. If you want your badge to have more bumpiness to it, change the Channel Weights to be more like this, to use the RGB colours of the texture to generate the normal map:

Channel weights.jpg

By messing with some of the Range and Intensity options as well, the normal map will look a bit more like this:

Adjusted substance normal.jpg

Either versions are fine, it depends on what you want your badge to look like as to which option you chose to go with.

Feel free to mess around with the settings to get something you're happy with.

Once you're happy with your normal map, hit 'Export as Bitmap' in the menu at the top left and save out your normal map.

We can now move on to importing the files to UE4

Importing to UE4[edit | edit source]

This step assumes that the correct version of Unreal Engine is installed and configured correctly. See Modding for more information on the correct version of Unreal Engine to use and how to view mod content folders. Also see the official Unreal Engine documentation on importing .FBX files.
New badge mod.gif
Create a new Badge Mod. You should see a folder that looks somewhat like the following:
Example Badge Mod.jpg

Click the 'Import' button in the top of the Content Browser, and import your Badge texture and Normal Map texture to the Badge Mod folder. You should now see your two textures in the same folder as the new Badge Blueprint:

Importing textures.jpg

Of course, I'm editing in the ExampleBadge mod plugin, which... you should not do.

Especially because we're going to copy over some files from that example badge mod now.

Setting up the Blueprint[edit | edit source]

Select the ExampleBadge_MAT and ExampleBadge_MESH files from the ExampleBadge Content, and drag-and-drop them in to your mod folder and select 'copy' from the dialog box that appears:

Copy files from UE4.jpg

You should now have a mod folder full of a blueprint, two textures, a mesh, and a material instance.

We'll set up everything now.

Putting the Textures in to the Material Instance[edit | edit source]

Open the Material Instance by double-clicking on it

Opening material inst.gif

By default, the material will have the example textures in it.

To change this, select your textures one by one and drag them in to the corresponding slots in the material instance:

Setting the normal map texture.gif
Setting the diffuse textures.gif

Putting the material instance in to the mesh[edit | edit source]

Open the mesh by double-clicking on it, and drag-and-drop the material in to the material slot in the Static Mesh editor

Setting material in mesh editor.gif

Put the Mesh in to the Blueprint[edit | edit source]

Open the Blueprint by double-clicking on it, and drag-and-drop the mesh in to the Conforming Mesh slot on the Fixture Blueprint settings. You can read more about the Fixture Blueprint here.

Setting mesh in blueprint.gif

Generate the Blueprint GUIDs[edit | edit source]

In the Fixture Blueprint, generate the Fixture and Family GUID

Animated1.gif

Make sure to Compile the blueprint, then save all your files.[edit | edit source]

Save and compile.gif

Generate the Fixture Thumbnails[edit | edit source]

Follow the Fixture Mods page on generating thumbnail icons to generate the thumbnail for your Badge.

Your badge should now be ready to use!