Twitch Alert Slot Machine

Jackpot! Slot Machine Twitch Alert

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.

  • Evil Homer

    D20 overlay alert! That would be awesome!

    • Derek

      This is such a good idea… might actually be able to make that happen.

  • Atomika13

    I bought it and love it! 😀

    • Derek

      Glad you enjoyed!

  • ink_rafa

    This is so awesome! Love your work! Stream looks amazing with these! I was wondering if there is any way I could link the jackpot with a bot, so that viewers can play with it through a command. Thanks a lot for all the hard work o/

    • Derek

      We are patching this in soon 😀

  • Birdmaster

    I love you your work thx! I have a question. I can’t put the volume down ik I set the volume lower in Muxy it doesnt effect it when the allerts triggers in OBS. Its so loouuudd xD.

    • Birdmaster

      I found one more bug it doesn’t work with all the cheering icons right now it only works with Cheer, Kappa, Kreygasm and SwiftRage. Could this be fixed?

      • Derek

        The volume issue has since been updated – you’ll find an “audioVolume” setting in the code that you can update from 0 to 100. You’ll need to use the link included with the package to re-import the alerts, and re-setup everything.

        The other issue was probably on Muxy’s side, but I believe was corrected.

  • HenLehcs

    Awesome alert using it atm BUT
    I can´t put it in OBS or trigger it with Ankgbot… I did everything as it said in the read me and it still not work.

    • Derek

      Thanks! Those additions are things we added on, that we didn’t plan to implement at all. As they’re not included in the video etc. we’re not able to guarantee them to work for everyone. The standalone should work just fine, though.

      We are, however, looking to patch the Ankhbot version shortly. I have since removed it.

      Also, feel free to stop by the stream if you have issues with the standalone version – I can walk through it 😀

      • HenLehcs

        wow thank you really much for the fast answer also if you gonna update the package are we gonna get the newes version of it or do we have to buy it again??

        • Derek

          I typically Tweet out updates, you get multiple downloads (5) with each purchase… but if you happen to use yours up and need more, let me know 😉

          • HenLehcs

            I actually made it to work but i need help do you know who i can speak with for that? Because now i got only the error. “Cannot set property ‘filters’ of undefined”

  • Frivvi Fox

    It’s been pretty awesome. Too much to handle for Xsplit and makes it crash. I’m switching back to OBS, anyways, though, and am at a loss as how to turn it down??? I’ve gone through each individual alert on muxy and it’s not changing anything. I could just turn down the alert widget itself in Xsplit, but that’s not the case in OBS. Any suggestions?!

  • Hi there, I just bought the alerts yesturday.
    But for some reason They do not want to display properly
    I use Mixer and not Twitch.
    Is there anyway to get static gif images of the alerts with rainbow effects?
    Maybe different animations and sounds for follower/host/donation
    Muxy has yet to add support for Mixer, Even though Streamlabs has added support.

  • Khalitirkai Twitch

    Is it available for StreamLabs users ? i’m highly interest by this alert but I want to be sure it’s will be OK with streamlab

  • Pingback: Streamlabs Adds Full HTML/CSS Support, Follower Goal Widget, and Account Merging - StreamerSquare()