Notification
Legend
245 posts
Find Differences game, using SVGs, couple of user variables, one shared action and two simple advanced actions.
Have some fun with this game:
Hope you can reach the final view! SVGs were taken from one Adobe Stock image, using Export Assets in Adobe Illustrator. Some SVGs are used as buttons. Multistate objects, one shared action and two small advanced actions + two variables is all you need. No JS, but I’m sure this can be done with JS as well.
The usual white screen with grey arrow is replaced by a poster image. After the mysterious title slide game, progress bar and end image are all on one slide.
Since I have stacked objects, this would not be possible to replicate in a Fluid Boxes project.
Have some fun with this game:
Hope you can reach the final view! SVGs were taken from one Adobe Stock image, using Export Assets in Adobe Illustrator. Some SVGs are used as buttons. Multistate objects, one shared action and two small advanced actions + two variables is all you need. No JS, but I’m sure this can be done with JS as well.
The usual white screen with grey arrow is replaced by a poster image. After the mysterious title slide game, progress bar and end image are all on one slide.
Since I have stacked objects, this would not be possible to replicate in a Fluid Boxes project.
You must be logged in to post a comment.
- Most Recent
- Most Relevant
Nice game, love these playful things in learning applications.
You say: “Since I have stacked objects, this would not be possible to replicate in a Fluid Boxes project”. I think it would. Maybe not precisely the same, but close. If you would use (a) Fluid Box(es) set to Static in the Properties Panel. Then you can stack objects as well. Even responsive.
Sure, but static fluid boxes have a lot of issues. Did you ever try them? In most cases it really messes up the ‘fluid’ layout on all screens. I try to avoid static fluid boxes whenever possible. One useful example are the feedback messages in the Quiz master slides. But that is a very strict layout, working fine on all browser resolutions.
I did try them. In my experience using text captions in static fluid boxes is not a good idea. Text doesn’t scale when the viewport shrinks. But if one sticks to smart shapes (without text of course), svgs and bitmaps, it works quite well responsively.
But in this case I am using Multiple SVGs on top of a big SVG. And include an action showing yet another bigger SVG when a correct difference is clicked. I don’t think putting this in one static fluid box will have an advantage over the scalable version (non-responsive) which I used. Those are not shapes at all because I need the unique functionality of SVG-buttons to limit the clickable area to the image itself instead of the bounding box.
I take your point. Have to admit that so far I’ve never worked with scalable (non-responsive) Cp modules. First it was breakpoints in 2017 with a trial version (just a month) and then restarting in 2019, it was all responsive and fluid boxes. Compared to you I still have a lot to learn .
You can still use Breakpoints, they give you a lot more control as developer than Fluid Boxes, but mean a lot more work as well. When Fluid Boxes workflow was released in 2017 (and Breakpoints became hidden, although not deprecated) I wrote this comparison (includes scalable projects):
http://blog.lilybiri.com/fluid-boxes-or-breakpoint-views
Thanks, Lieve, that I already knew. But as you say, breakpoints mean much more work. One has to design and consider several viewports. At least three. And after a lot of struggle, fluid boxes come handy. Coming back to your game: The brown whiskers on the rat to right took me a while to spot.
Yes, that was meant to be the tough one. A game cannot be too easy, needs some challenges.
This was one of my first games using SVGs, have been asked to create more and you can find a lot more. After all, gaming is attractive for most people, notwithstanding their age.
Great !
Great, very funny!
