mtgred / netrunner

http://www.jinteki.net
Other
888 stars 387 forks source link

Eye candy! And using it to make the game easier and more enjoyable to play and spectate #6731

Open artturipi opened 1 year ago

artturipi commented 1 year ago

Hey,

It'd be nice to get some small visual things to make following a game just a tad easier and perhaps more enjoyable to spectate. Currently, there're very few animations, but for example the animation that fires when a new card is installed (+highlight until end of turn) is very good and helps a lot when playing or watching a stream. How did we ever survive without this feature??

Anyway, here're some ideas, numbered only so they're easier to reference in possible comments:

  1. Rez and derez animations. This could probably be the same animation that's used in the start hand mulligan screen, so probably not a large undertaking? Probably need to tweak the timing to be a little faster for convenience.
  2. Trashing an installed card. I'm not sure what would be an appropriate animation that works for all different reasons a card could be trashed, but maybe a simple opacity animation would be enough. Though I imagine a "rip" through the card first would be pretty cool - just maybe a bit much when cards are trashed voluntarily in shaper shenanigans...perhaps when an opponents effect trashes a card you could have a different animation? Afterward, animating the positions of other cards that move due to the removed card would be a nice addition.
  3. Resource payment/gain animations. When a card or game effect (or manual adjustment) changes a player's credits or clicks, you could have a small animation showing the change like for example on the game Cookie Clicker. When clicking a liberated accounts, I imagine something like a ~2s long green +4(credit symbol) slightly upwards floating and fading text next to either the credit total and/or the card that caused the effect. Similar idea could work for clicks, when clicking through a bioroid for example. Could maybe also be used when adding tokens to cards...?
  4. End the run/jack out. For clarity, these should probably have a different visual cues. I imagine a red X appearing in front of the run arrow for a short period of time would work for ETR, but not sure what jacking out should look like. Maybe a U-turn arrow could work? Maybe ETR could alternatively also mess with the arrow somehow, like crack it or something...
  5. Successful run/breach step animation. Simply changing the color of the arrow to green or whatever here could be enough (really short animation time on the color shift, though!). And yes, Crisium Grid most definitely should be thought about here. I think when for example, a new player is spectating the game on Twitch, the most intuitive thing would be to turn the arrow green when the runner gets to breach step (or its replacement). EDIT: There's a small change in arrow color. I have never really noticed it before. Maybe a higher contrast could be used between states? This may be a non-issue.
  6. Cards in grip/hq. I was going to write on just what I'd like to see when hovering over the cards with a mouse (and that's a big part of it), but adding/removing cards also could have animations on the line. I think Slay the Spire does these hand cards animations really well.
  7. Playing an event. Currently the event just shows up on top of the discard pile, so you really need to know where to look to catch a card that's played. Maybe an event could appear for a brief while on screen somewhere on top of the game board when played?
  8. Opening/closing dialogs when clicking on cards. A very short appear animation when clicking some dialog open would make the UI feel more smooth. Now we're talking almost pure eye candy though.

Cookie Clicker example

Slay the Spire example

I think a setting to disable animations is probably also a good call. Not everyone will appreciate these and some devices or browsers might misbehave.

artturipi commented 1 year ago

Example gifs for Cookie Clicker and Slay the Spire.

https://images.squarespace-cdn.com/content/v1/619749d811509a293ffd6f6c/5fa227de-84f9-4a1a-a236-8fe7f5712aa0/Picture7.gif?format=500w

https://i.makeagif.com/media/4-26-2019/TaGIre.gif

Tried to embed on OP, but it doesn't seem to have worked.