> For the complete documentation index, see [llms.txt](https://docs.otherside.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.otherside.xyz/odk-docs/odk-plugin/emotes/feels/feels-design.md).

# 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:

1. 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.
2. 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.
3. A **Description** for the emote token that will be displayed in the holder’s inventory.
4. 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.
5. 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.
6. 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.

![](/files/gQjKelaWQSOHC1NJmwzL)

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.

![](/files/FGqBIYNyuULn1OmGXx4A)

\ <br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.otherside.xyz/odk-docs/odk-plugin/emotes/feels/feels-design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.