search

phetsims / vegas

Reusable game components for PhET simulations.
MIT License
1 stars 4 forks source link

Transitions to/from levels #18

Closed samreid closed 6 years ago

samreid commented 10 years ago

Fractions sims have used a scrolling transition to make the sims more friendly and fun, and to give the users a better intuitive sense of where they are within the game. Should we use that UI pattern for other sims as well?

For instance, see: http://www.colorado.edu/physics/phet/dev/html/fraction-matcher/1.0.0-dev.18/fraction-matcher_en.html

samreid commented 10 years ago

If implementing the scrolling transitions in common code, it would be good to solve the problem identified in https://github.com/phetsims/fraction-matcher/issues/55 by having the destination node start fully offscreen (independent of the current aspect ratio).

pixelzoom commented 10 years ago

Can you explain how a scrolling transition is supposed to give the user a 'better intuitive sense' of where they are in the game? And how that has been confirmed to be the case? To my eye, it's heavy-handed gratuitous animation, and a more subtle transition (e.g., dissolve or cross fade) would be less jarring.

samreid commented 10 years ago

Here is an article with some thoughts about mobile user experience design as it pertains to animation: http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/

The user interface navigation for some games was getting more complex, so we wanted to support the user and make it easier to give a sense of where they are in the navigation, this was particularly important for sims with multiple level selection screens.

  1. navigate to a screen
  2. navigate to a different "page" of the level selection screns
  3. navigate to a level
  4. after completing a level, automatically go to the next level

and all of the back-navigation.

AFAIK we have never interviewed on this kind or other kind of transitions, it was just our instinct that led us to try it out. In Build a Fraction, I think it was particularly effective, especially when animating from one completed level to the next, giving an intuitive sense of "making progress".

We did use cross-fade when refreshing level challenges.

pixelzoom commented 6 years ago

@jonathanolson Has implemented something in Area Model for doing "wipe" transitions that is fairly general. It should be moved to a common repo.

jonathanolson commented 6 years ago

It's SUN/SlidingScreen, but as noted it could probably be moved to TWIXT.

pixelzoom commented 6 years ago

Decisions on when transitions are used in games appear in https://github.com/phetsims/vegas/issues/65#issuecomment-380930042.

Closing.