Our new slot machine twitch alert has just hit the store, and I wanted to take a bit of time and explain how it was made and how to use it for your stream. This alert is only for Muxy, OBS Studio, and XSplit Broadcaster at the moment, but it we are planning to make versions for other software and services if we can. This post is aimed at helping those that are interested in learning about how we create  products for the shop.

Get the Alert Here!

If you’d like to learn about setting this product up, you can watch the full video walk through below.

How We Made the Slot Machine Twitch Alert

Myself and Tehkhop poured a lot of time into both the design and the programming of this alert. It’s definitely our biggest single project yet for Nerd or Die. Another member of the Nerd or Die team came up with the core idea, so thanks to Lleuca for the inspiration.

Let’s Start with the Requirements

With any project it’s a good idea to list out what you want and expect from it. For this alert we wanted the following:

• The ability to customize images, emotes, or icons quickly and easily
• Dynamically adapting to a different icon amounts
• Options to set win percentages
• Winner Animation/Events
• Motion Blur (not included in first release)

Doesn’t seem too bad, right? Well, this is only when we started with the design idea. Once we got programming involved, we added a few more requirements:

• Automatically randomize icon order
• Ensure that the same icons do not appear twice vertically
• Custom easing to simulate a realistic slot machine

Designing the Alert

I recently found a style of alert (see our new Fireworks product) that I felt had a nice balance to it.  I wanted the information of the alert (username, type of action, user message) to be noticeable, but not “boxed in”. As for the slot machine, I actually went through quite a few revisions.

I started with a Photoshop mockup. Here, I was mainly looking for a way to make this alert interesting, but not be completely overbearing. Originally the slot machine had a background, and I even considered flashing lights, but in the end I found both of those options simply too much – and unnecessary. Sometimes when I’m indecisive about if I want to add, remove, or change a feature I try to ask myself one question… What value does this add? While I think over the top elements of alerts can have value, I didn’t feel a background added any in this case. I was still up in arms about the lights or motion, but in the end I felt the icons were the main draw of attention.

Once I was happy with the Photoshop mockup, I then began coding the HTML. This process wasn’t too complicated. The most difficult part was figuring out how to cast shadows properly onto the reels. I handled this by having three divs, that served as layers. One for the background, one for the game (icons spinning), and then one for the shadows and overlay.

From here, the last step was connecting everything to the programming side. I’ll get more into detail on the programming side in an update to this post tomorrow.