How to have achievement window slide onto screen

Question

Hey, so I'm working on an achievement system for my game and I've pretty much figured it out other than the fact that I can only manage to get the image to fade in and I wanna try and get it to slide up onto the screen maybe like a Steam achievement or something.

I'm using Sugarcube by the way.

Answer 1

CodePen is a great site to look for code that does stuff like this.  Here are two I found:

Steam-style achievements: https://codepen.io/fuzzalicious/pen/qVrapg

Xbox-style achievements: https://codepen.io/djekl/pen/jqVKXV

Just remember, you can't spell "achievement" without "HiEv"!

(Sorry, I've always wanted to say that.  Yes, I'm lame.)

Answer 2

Here's a macro I made:

JavaScript: https://github.com/ChapelR/custom-macros-for-sugarcube-2/blob/master/scripts/minified/notify.min.js

CSS: https://github.com/ChapelR/custom-macros-for-sugarcube-2/blob/master/scripts/minified/notify.min.css

Usage:

<<notify [delay] [classes]>> Content <</notify>>

    * delay (optional): the number of ms to show the message for before removing it.  defaults to 2000 (2 seconds)
    * classes (optional): a space separated list or string array of classes to add to the notification for styling in CSS.
    * Content: anything between the tags is shown.  accepts strings, macros, variables, etc.

Basic example:

<<notify>>Achievement unlocked!<</notify>>

/% lasts 2 seconds and has no classes (can still be styled with '#notify') %/

Long example:

<<notify 10000 'blue'>>Achievement unlocked!<</notify>>

/% lasts 10 seconds and has the CSS class '.blue', for styling ('#notify.blue { color: blue; }', for example)%/

You can find unminified versions of the JS and CSS code elsewhere in the repo if you prefer.

Comments

Thanks, Chapel. Very handy this.