Sliding Puzzle Game
Oct 12, 2017
Background: For the Austin Articulate Roadshow session, I developed a simple "sliding puzzle" game to demonstrate the logic used by StoryLine triggers. The file uses variables, triggers, motion paths, and 1 tiny (easy to understand) piece of JavaScript. I also show in the video how I use other tools like Excel to explore and essentially "storyboard" my logic.
How the published game works: Click a piece next to the open/empty space and the piece will slide over to occupy that space. Only pieces adjacent to the empty space can move. Keep sliding pieces around to unscramble them into the proper picture.
How the mechanics work: Each piece has 4 motion paths and 1 variable to track its current position on the board. The empty space also has a "position" variable and there is one additional "control" variable. When you click a piece, a quick bit of math is performed to determine the distance between the piece and the empty space and the result is sent to the control variable. A piece will move along the appropriate motion path IF the control variable is equal to certain values (as explained in the video).
Simple enough? Enjoy!
10 Replies
This was a cool example, Owen. Thanks for sharing your source and video tutorial!
My pleasure Dave. Thank you for including me as part of the roadshow.
Very good explanation! Thanks for this!
For Christmas, I used a slightly more complex puzzle and a web object background with falling snow that reacts to your cursor location. Enjoy!
https://360.articulate.com/review/content/b7a29748-4bff-4a9b-a95f-d8531ba3fc1e
Link to additional post containing the SL3 file
This is a very cool example. Thanks for the share. It really helped. If you could also share that excel sheet were you did the calculation it would be of great help.
I tried this in Storyline 360. It works fine in first time click. Second you click on the same puzzle it moves 2 times the width. This happen when i create line animation in Storyline. While publishing the file you shared it works fine. But if i create new line animation in it, it works the way i mentioned first. Can anyone let me whats wrong here please.
I'm looking to see if I kept a copy of the excel file.
Regarding your motion path behavior, there have been some weird quirks going on for a while with relative paths that articulate has not addressed for almost a year now. I would need to see your .story file to see if you are a victim of this bug.
https://community.articulate.com/discussions/articulate-storyline/relative-start-on-motion-path-not-so-relative-after-all
Thanks for the reply Owen Holt. Sharing my work file here. It will be of great help, If you could look into it and let me know what went wrong.
I can't understood how we add the condition and were control are a value? great job
The control value is simply a custom variable. This has been a long time and I no longer have the original project but I believe I simply used the T/F conditional variable.