top of page

- Palette System -

    Welcome! One of the biggest features of Unreal Fighter 2D that it provides a Palette System that you don't need to index colors of Sprites to a palette file. All we need is a template that UF2D provides as a palette image that needs to have the sprite colors filled with.

 

    To make it all easier to understand, this Section will be like a semi-tutorial. Feel free to follow or just simply read along! Without further ado, let's start!

 1- Preparation

  • First of all, we need to export the image named "PalGrid_TempT" that is located in "External -> FR_Templates -> Material -> Palette -> Textures" folder. [RMB] click on the file and go to "Asset Actions" and select "Export..." and simply export the grid to any location you want!

  • This image is extremely important. Here are the rules that you need to obey for things to work properly;

 

  1. The size of the image MUST be 256x256.

  2. Every color must be evenly located and aligned to each other.

  3. Also there should be NO duplicate colors.
     

  • Feel free to click on the image to download it for yourself!​

PalGrid_TempT.png

  • Here is a correct way of preparing the Palette Grid. Notice that there are no duplicates and all the colors are aligned properly. Empty color slots can be any value that Sprite doesn't use. In this case it is green.

​

  • It doesn't matter in which row or column the colors are. Unreal will catch the colors and index them as long as you obey the rules stated above.

Omen_Idle0_T0_edited.png
Omen_PalGrid.png

  • Incase you want to see where the two images above are, video in the right shows their location. ^-^

​

  • Now let's prepare a palette material!

  • First we go to the folder in "External -> FR_Templates -> Material -> Palette" and copy the Material Instance named "PalGrid_Translucent_MI" to another folder.

​

  • Then we drag our both newly created Palette and Fighter image to test. It is VERY important to [RMB] click on the imported images and select "Sprite Actions -> Apply Paper2D Texture Settings", or else indexing won't work.
     

  • We also need to make a Sprite to see how it will look right inside the Material Instance!

 

  • Just a small side note; When you open up a Material Instance, it is really in a weird spot for 2D images. Just drag around with [LMB] on the view to rotate the camera so you can see preview image!​

i1.PNG

  • In this Material Instance Editor above, our first two important Parameter Groups are "Palette Main Properties" and "Palette Row Toggles".

​​

  • Palette Main Properties contain 2 Variables to fill in. "Main Palette Grid" is the palette image we uploaded that contains all the colors the used Sprite supposed to have. As shown before, our Ryu palette image has all the colors Ryu's sprites supposed to have. "Render Palette Grid" is used for changing the colors of sprite itself which allows you to make unique palettes!

​

  • Palette Row Toggles is an optimization feature that makes Unreal Engine only index the colors of specific Rows of the Palette Grid. "Row Number 00" represents the highest Row, one below is "Row 01" and so on. These Rows can't be toggled on and off runtime, so it is crucial that all Rows need to be activated if they are used at all at least in one sprite.

  • Video will show how to use a Sprite (Or Flipbook if you want to) for previewing the Material Instance.

​

  • Here we will also be using Ryu's palette image for both "Main" and "Render" Palette grid so our first Palette Material will be the original colors of the Sprite!​

​

  • Notice how Ryu's Outfit was not visible because we didn't have "Row 01" active? As mentioned before, we will not get errors but ony invisible parts in Sprites.

  • If you have invisible parts, that means 2 things; Either the color(s) on the Sprite do not exist on Palette, a Row is not toggled on.

​

  • There are two ways of making unique Palette Grids. Lets see how to use them now!

 2- Importing Another Image

  • Simplest way of making another Palette Grid is having another "Render Palette Grid" texture. It is VERY important to "Apply Paper2D Texture Settings" after the Texture is imported into Unreal.

​

  • Video below showcases how we import another image file that has Ryu's outfit in different color. Note that Render Palette Grid and Main Palette Grid color slots are in same locations.

 3- Changing Colors In Unreal

  • Another way of making a Palette is duplicating the Material Instance and change Row Properties that appear below as Parameters once a Row is toggled on.

​

  • Row Slots start from Left to Right. Utmost left being 0 and farthest right being 15.

​

  • Override Value is from "0.0" to "1.0". 0 being no override happening whereas 1.0 changes the color completely to what is given as value. Feel free to check the video below to see how I change the outfit color!

    That's all for the Palette System. Next section will be about the Paper2D Plugin! Thanks for your time and reading!

bottom of page