📒Feels: Design
Goal:
Start with a .gif file and end up with assets for adding a playable .gif Emote that will play in 3D space over the initiating user’s head. While other image dimensions may work, everything in use is 256x256 pixel icon animation frame dimensions which allows up to 256 frames in a 16x16 array while keeping us within 4K textures. Adhering to this should provide plenty of space and good quality for the size in game, while keeping a consistent experience between GIF Emote collections.
Assets and Data:
An icon in .PNG format, ideally a frame from the source .gif, that will represent the Emote in the Emote Wheel. It should be unique among those existing and suggestive of the Emote content for quick and easy selection.
A unique Name for the emote. Ours are more playfully named than literal. Space for this text is limited, so a few short words is plenty else the text will be scaled down in size to fit.
A Description for the emote token that will be displayed in the holder’s inventory.
A spritesheet/flipbook texture in .PNG format that is 4096 pixels square or less. Those currently in use are grids of 256x256 pixel frames in rows of 10 columns. Blank frames in the last row are fine. Power-of-two dimensions are not required as these are in the UI Texture space so there is no mipping of the spritesheet. Frames are clipped out of the spritesheet by a flipbook shader dividing the total area by the specified rows and columns, so anything other than a grid will display incorrectly.
The number of ROWS, number of COLUMNS, and the FRAMERATE of the .gif for playback. Rows and Columns correspond to the construction of the spritesheet, and Framerate drives the speed of the shader that advances through the spritesheet. A 60-frame .gif that plays over 2 seconds could be 6 Rows, 10 Columns, playing at a Framerate of 30. Variable framerates are not supported within a given animation.
Requirements for unlocking the Emote, if applicable. This system is under development but it is possible to gate access to emotes based on player wallet holdings or in-game progress.
With these files and data, someone familiar with the Unreal Editor can then create the Primary Data Assets required for the Emote system, and augment the data tables that link the data each Emote requires.
Available Tools
https://ezgif.com was used in the production of our current Feels GIFs. If you are not currently starting with a 256x256 .GIF, you may want to begin with their Resize tool.
In the Split tools, Animated GIF Splitter will ingest a .gif file and provide a downloadable .ZIP file with a .gif for each frame, from which a .GIF can be selected to be converted to .PNG for the representative Icon.
Also in the Split tools is a .GIF to spritesheet tool. This will produce the spritesheet as a grid of images in the desired number of columns/rows.
Last updated