Hi, Darren -- Thanks so much for sharing here! You may want to include "DEMO:" at the beginning of your topic title to quickly differentiate that your post is a contribution rather than a question.
And you are also welcome to share over in our design forum, Building Better Courses, if you'd like to reach even more members of the community! :)
And Darren, as Daniela mentioned imagining what the build looks like, would it be possible for you to maybe share your file here so that others can take a "peek under the hood" so to speak?
Cool game! I didn't like that you needed to rub off every single covering square and the 4 total areas to restart the game. And the position of the restart button was not good for replaying. I would put the restart button next to the the coin you use for scratching. But it's fun and visually looks great!
Here is a breakdown of how I produced the scratch card game. It is basically nothing more than a drag and drop interaction with a little bit of JavaScript at the front and the end of the game. there is a PDF copy of this post included:
Creating the Assets
Firstly, as I am no designer I grabbed a scratch card background image from Google images.
I then had to create the scratch panel, so in Fireworks created a shape with a slight gradient fade then added some stars then on another layer created the ‘scratched’ state and sliced this up to create sections
The final part of the ‘artwork’ side of things was for the symbols. These were taken from the scratch card image and made into individual images
The coin was also ‘borrowed’ from Google images, I took the image and skewed/rotated it to give it the up and down states
Storyline setup
So, with all the assets in place it was now off to Storyline to start constructing the game.
The card image formed the background of the slide; I then added symbols underneath the scratch panel.
The scratch panel consists of 30 images sliced from Fireworks.
These were positioned on the slide to give the impression it was a complete image Each image had its own ‘scratched state.
Triggering the coin scratch
With all the elements on the slide it was time to make it work. The first trigger was to initiate the player picking up the coin and scratching the panel.
The coin has 2 states
The next trigger was to give the effect of the coin scratching the panel. This was done by using a change state trigger on the section of the scratch panel when the coin was dragged over that image. This was then repeated for the remaining images in the panel. The same principle was used for scratching off the four prize panels indicating the prizes that could be won if that was a winning line.
Lastly, I added a scratch sound effect to give the impression of the coin rubbing the scratch panel and reversed the trigger to stop the audio when the coin’s state changed
Once the player has scratched off all the panels the winning/losing layer is shown depending on the result. This was a show layer when the state of all scratchable elements were equal to the state of Scratched
Losing Layer:
Finding a winning ticket
At the start of the game a JavaScript runs to create a random number. This is available on the ELH website and is a really powerful little script and enables you to so much within Storyline.
var randomnumber = Math.floor((Math.random()*110)+1); var player = GetPlayer(); player.SetVar("varSelectCard",randomnumber);
Depending on the value generated, it will initiate a trigger to jump to a specific card.
There are 20 scratch card tickets, 10 losing tickets, and 10 winning cards of varying values.
To find a winning card you have to have a specific number generated automatically from the script. If the number falls within a range of values it will jump to the specified losing ticket.
If you are lucky enough to find a winning ticket you will trigger the winning layer notifying you of your win and also giving you the option to submit your win to a Google Spreadsheet Leaderboard.
The submit to Google forms/sheets has been covered a great deal on the forums here
This is the script used to submit the player name and winning ticket value
If you enter your name you get taken to a leaderboard slide using a web object showing the Google Sheet
Variables Used
varDisclaimer: used to mark the player has understood that all winning tickets are purely for fun
varPlayerName: the text input value that is submitted to the leaderboard from the winning ticket layer
varSelectCard: a random number generated from the JavaScript at the start of the game which determines what scratchcard the player is taken to
varWinner: indicates the status of the ticket
varWinningAmount: the value of the winning ticket that is sent to the Google leaderboard
Amendments
After receiving some comments on the Articulate Storyline LinkedIn page I revised the intro screen with the instructions
I made the screen look more like part of the card, and gave a visual instruction to illustrate the panels that needed to be scratched off. The player has to click to agree before the play button state changes from hidden to visible. This closes the layer, triggers the varDisclaimer variable to True and then triggers the random number JavaScript on the main slide slayer
I think that just about covers it. If you have made it this far then thank you for sticking with it!! If you have any questions, ideas or improvements please feel free to comment.
Finally here is the story view to give you an idea of the structure of the game:
13 Replies
Hi, Darren -- Thanks so much for sharing here! You may want to include "DEMO:" at the beginning of your topic title to quickly differentiate that your post is a contribution rather than a question.
And you are also welcome to share over in our design forum, Building Better Courses, if you'd like to reach even more members of the community! :)
Thanks Christie, has been edited and I will post in the building better courses forum as well.
Wow, I can imagine what the build looks like. Awesome Darren !
And Darren, as Daniela mentioned imagining what the build looks like, would it be possible for you to maybe share your file here so that others can take a "peek under the hood" so to speak?
Could you share your source file? :)
Absolutely, I will sort something out next week when I'm back in the office.
It is probably more straightforward than you imagine when you look at it but I will write a full explanation next week showing you all how it works.
Have a good weekend everyone and I'll see you back on here early next week
Wow! that is VERY creative. Well done!!
Cool game! I didn't like that you needed to rub off every single covering square and the 4 total areas to restart the game. And the position of the restart button was not good for replaying. I would put the restart button next to the the coin you use for scratching. But it's fun and visually looks great!
HELP!!! I can't stop playing, ROFL!
This is really addicting, Darren.
Great game!
Here is a breakdown of how I produced the scratch card game. It is basically nothing more than a drag and drop interaction with a little bit of JavaScript at the front and the end of the game. there is a PDF copy of this post included:
Creating the Assets
Firstly, as I am no designer I grabbed a scratch card background image from Google images.
I then had to create the scratch panel, so in Fireworks created a shape with a slight gradient fade then added some stars then on another layer created the ‘scratched’ state and sliced this up to create sections
The final part of the ‘artwork’ side of things was for the symbols. These were taken from the scratch card image and made into individual images
The coin was also ‘borrowed’ from Google images, I took the image and skewed/rotated it to give it the up and down states
Storyline setup
So, with all the assets in place it was now off to Storyline to start constructing the game.
The card image formed the background of the slide; I then added symbols underneath the scratch panel.
The scratch panel consists of 30 images sliced from Fireworks.
These were positioned on the slide to give the impression it was a complete image Each image had its own ‘scratched state.
Triggering the coin scratch
With all the elements on the slide it was time to make it work. The first trigger was to initiate the player picking up the coin and scratching the panel.
The coin has 2 states
The next trigger was to give the effect of the coin scratching the panel. This was done by using a change state trigger on the section of the scratch panel when the coin was dragged over that image. This was then repeated for the remaining images in the panel. The same principle was used for scratching off the four prize panels indicating the prizes that could be won if that was a winning line.
Lastly, I added a scratch sound effect to give the impression of the coin rubbing the scratch panel and reversed the trigger to stop the audio when the coin’s state changed
Once the player has scratched off all the panels the winning/losing layer is shown depending on the result. This was a show layer when the state of all scratchable elements were equal to the state of Scratched
Losing Layer:
Finding a winning ticket
At the start of the game a JavaScript runs to create a random number. This is available on the ELH website and is a really powerful little script and enables you to so much within Storyline.
var randomnumber = Math.floor((Math.random()*110)+1);var player = GetPlayer();player.SetVar("varSelectCard",randomnumber);Depending on the value generated, it will initiate a trigger to jump to a specific card.
There are 20 scratch card tickets, 10 losing tickets, and 10 winning cards of varying values.
To find a winning card you have to have a specific number generated automatically from the script. If the number falls within a range of values it will jump to the specified losing ticket.
If you are lucky enough to find a winning ticket you will trigger the winning layer notifying you of your win and also giving you the option to submit your win to a Google Spreadsheet Leaderboard.
The submit to Google forms/sheets has been covered a great deal on the forums here
This is the script used to submit the player name and winning ticket value
If you enter your name you get taken to a leaderboard slide using a web object showing the Google Sheet
Variables Used
varDisclaimer: used to mark the player has understood that all winning tickets are purely for fun
varPlayerName: the text input value that is submitted to the leaderboard from the winning ticket layer
varSelectCard: a random number generated from the JavaScript at the start of the game which determines what scratchcard the player is taken to
varWinner: indicates the status of the ticket
varWinningAmount: the value of the winning ticket that is sent to the Google leaderboard
Amendments
After receiving some comments on the Articulate Storyline LinkedIn page I revised the intro screen with the instructions
I made the screen look more like part of the card, and gave a visual instruction to illustrate the panels that needed to be scratched off. The player has to click to agree before the play button state changes from hidden to visible. This closes the layer, triggers the varDisclaimer variable to True and then triggers the random number JavaScript on the main slide slayer
I think that just about covers it. If you have made it this far then thank you for sticking with it!! If you have any questions, ideas or improvements please feel free to comment.
Finally here is the story view to give you an idea of the structure of the game:
Whoa! What a response and set up - thanks so much for sharing it all here!
Very cool! Thanks for sharing this.
So creative! Thanks for sharing!
This discussion is closed. You can start a new discussion or contact Articulate Support.