Categories

Creating a custom Reactions sprite sheet

You are here:
< All Topics

By default, XF ships with a Reactions sprite sheet with 7 emojis: https://xenforo.com/community/styles/default/xenforo/reactions/emojione/sprite_sheet_emojione.png

sprite_sheet_emojione.png

Adding new Reactions is fairly straightforward, either as individual images, or by using a secondary custom sprite sheet, but why not combine them all into a single sprite sheet?

Doing so has several benefits; the browser only has to download one file and if XF ever changes the sprite sheet in the future, your Reactions won’t be affected.

The default emojis are from JoyPixels, and are all listed here: https://www.joypixels.com/emoji#all

Click on an emoji you would like to add and download the PNG 64×64 version.

1566331298593.png

Note that the like and dislike emojis are not listed there, so you can grab them from your server at styles/default/xenforo/reactions/emojione instead.
Make sure you download the _2x versions.

Or get them from here:
https://xenforo.com/community/styles/default/xenforo/reactions/emojione/like_2x.pnghttps://xenforo.com/community/styles/default/xenforo/reactions/emojione/dislike_2x.png
Once you have all of the emojis you wish to use, head over to https://draeton.github.io/stitches/ to create the sprite sheet.

Configure the settings as follows:

1566325043225.png

Note that the Padding setting can be a bit flaky so you may need to toggle it between 1 and 0 to get it work properly.
You want a value of 0 so there is no space between each image on the sprite sheet.

Then just click on Open and start adding the emojis:

1566325194381.png

The emojis will be added in alphabetical order (reordering doesn’t seem to work) so if you want them in a specific order, rename them first to something like 01_like.png02_dislike.png, and so on.

Finally, download the sprite sheet using the Downloads button and select Spritesheet:

1566325309821.png

An optional next step is to open the sprite sheet using an image editing program of your choice and saving it again.
Doing so using PaintShop Pro X reduced the file size by about 35-40%.

Once you have the final sprite sheet, rename it to something unique such as <mystyle/mydomain>_sprite_sheet.png and upload it to the server to a directory of your choosing.

I uploaded mine to styles/default/images/reactionshttps://cliptheapex.com/styles/default/images/reactions/cta_sprite_sheet.png

The final step is to create the new Reactions and update the existing ones.

To update a default Reaction all you need to change are the Image replacement URL and the Sprite position.
For my Like Reaction, based on my own sprite sheet, it is as follows:

1566325539091.png

The important bit
When using 64px images, the first image in the sprite sheet has position values of 0, 0, the next one 0, 64, then 0, 192, then 0, 256, and so on in multiples of 64.
(Note that the x position will be 0 for all Reactions as the sprite images are in a vertical column.)

However, as the Sprite dimensions are set to 32 x 32, the y position value must be halved when entering the Sprite position.

So instead of a value of -576 for the Like emoji (64 x 9 – it’s the tenth image down), which is where the Like emoji actually is on the sprite sheet, I enter -288.

If you were using 128px x 128px images and Sprite dimensions of 32 x 32 then you would divide the actual y value of the sprite on the sheet by 4.
So to take the example of my own sheet, if the images were 128px, the Like emoji would be at coordinates 0, -1152 (9 x 128), but I would still enter 0, -288 (1152/4) if using Sprite dimensions of 32 x 32.

TLDR: If using Sprite dimensions of 32 x 32, for the Sprite position use x values of 0 and y values of multiples of 32, with the first image being 0, 0, the next being 0, 32, then 0, 64, etc.

For new Reactions, just copy the same format, changing the values as required.

Table of Contents