Guide Creating a custom Reactions sprite sheet

FateKid

DEVIL DID IT

Status

offline

Posts

14,666

Likes

125,817

Resources

3,373

Bits Credits

363

Admin

LEVEL

11

5,910 XP

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
208656-44818fbe3c5b6e851b5b6af5561eab7b.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 64x64 version.

1566331298593-png.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.png
https://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.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.png, 02_dislike.png, and so on.

Finally, download the sprite sheet using the Downloads button and select Spritesheet:
1566325309821-png.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/reactions: https://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:
208661-3f2282f41bf612f48f6931ea8ac447db.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, you 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.


If you found this tutorial useful, donations of positive emojis are gladly received. :cool:
 

Latest threads

Forum statistics

Threads
53,928
Messages
83,969
Members
50,543
Latest member
konintokirinto
Top Bottom