Creating a custom Reactions sprite sheet

Creating a custom Reactions sprite sheet

Paul B

XenForo moderator
Staff member
Brogan submitted a new resource:

Creating a custom Reactions sprite sheet - like, dislike, wow, cool, etc.

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
View attachment 208790

Adding new Reactions is fairly straightforward either as individual images, or 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...

Read more about this resource...
 
Thanks for this guide. :)
I just tried it myself using your sprite sheet to test it. But when I follow your steps, the new added reaction looks like this

Bildschirmfoto 2019-08-21 um 19.37.59.png

These are the settings:

Bildschirmfoto 2019-08-21 um 19.25.46.pngBildschirmfoto 2019-08-21 um 19.37.30.png

What did I do wrong?
 
:love: Loved you guide, thanks Borgan.

Here is what i made
Clipboard02.jpg
 
Are there any other sites where we can get the emojis? Joxpixels seems to be down for 2 days now. I mean it keeps loading the page but it never loads the page for me.
 
Thanks, strange, the site keeps loading and loading. I had to use a VPN to access it. Maybe my internet ISP is blocked or has problems in my area. Thanks!
 
I added the reactions as png files and not in a single spritesheet. What is the reason that they are blurry when you hover on it?
 
I wonder how much my members will abuse this.. 😅

1604825809632.webp

Probably a good thing I've set the Negatives to be Neutral.
 
Last edited:
I can't get this to work at all. Even setting everything exactly as stated in this thread the image is too big. When I compare the old reaction sprite sheet to the new one they're the same width, same resolution, everything. I can create a new reaction with the old sheet and it works perfectly. But any time I try to use a new one with the same exact settings it messes up even though both images are the same size.

I'm completely lost.
reactions.webp
 
And the dimensions of the sprite file are exactly the same as the original file: 64 pixels wide with 0 space padding created by the same site posted in this thread.
 
Background size 100 is clearly shown in every screen shot I've posted. I don't know what you're looking at, but clearly you're not looking at the screen shots I posted.

And if you took my file and it worked with your settings, then why doesn't it work on mine?
 
Back
Top Bottom