Whacking Moles: Improve visual feedback

[bastianilso]

When whacking moles, we provide auditory and visual feedback. In the auditory feedback we use one type of sound for hitting the correct mole and another type of sound for hitting the wrong mole. However, currently the visual feedback is similar for both cases, which can lead to confusion.

When players hit a mole, I propose we show clear icons indicating whether the hit was "correct" or "wrong". Since players are playing as fast as possible, this indication has to be very brief (200-300ms). To avoid confusion, the icons retain the color of "inactive moles".

Here are my proposals for how we might do this: a) We could use a 100ms scale-up animation, showing the icon for 200ms while gradually fading it away. b) We could make the mole "emit" the icon showing either correct or wrong. (moving upward and transitioning out, like smoke).

Later we can improve on this feedback by encoding e.g. player performance into the behavior of the feedback. But for now, we can start with binary (correct/wrong) feedback.

[lucasmnt]

I have been working on animations when the player shoots a correct mole, and a incorrect one. Right now these animations combine one animation that already exist in the project ("PopOscill") and on top of that another one that shows a correct/incorrect checkmark with a quick fade in and a slower fade out. It should look something like this :

For the correct one :

For the wrong one :

I also took the liberty of adding the wrong checkmark animation if the patient misses a "good" mole while playing (I mean if a correct mole expires after the 3 seconds timer). I think it makes the experience more "organic" in a sense :

To make sure the animation is recognised and playable I added the two custom animations "PopWrongMole" and "PopGoodMole" in the DiskMole gameObject animation's component :

To achieve this I added in the diskMole prefab a child object named ImagePlaceHolder which holds the two differents checkmarks images (See top left corner of below's screenshot). These images have their alpha set to 0 so they don't show up on screen right away. Also, to make sure these images are aligned to the mole they are linked to, I added a component which is "Parent Constraint" (see bottom right corner of below's screenshot). The purpose of this component is to make sure that an object follows another object it is linked with. It works for transformation, and rotation.

[hendrikknoche]

a little thing on language "popCorrectMole" would be much better than "popGoodMole"

good - bad correct - incorrect/wrong/false

[hendrikknoche]

i'm wondering if the check mark in the correctly hit mole should be in green instead. Could you try @lucasmnt and post an animated gif here?

[lucasmnt]

The animation name as been changed accordingly to "popCorrectMole".

Here is the same animation but with the green correct checkmark :

popCorrectMole.anim :

I would say that it works well. Do I need to maybe make the green checkmark a bit bigger ?

[hendrikknoche]

what happens on inactive (grey) moles? I think the green check mark could/should be a bit bigger and maybe the X, too for misses. let's discuss over lunch

[lucasmnt]

Do you mean what happens if you click on an inactive mole ? If so, nothing happens at the moment.

Here is an updated version of the animation with bigger checkmarks :

You can see the PopCorrectMole two times first, then one PopWrongMole (a correct mole expires because of the timer), then the two last are a PopWrongMole when you click on the fake ones and a PopCorrectMole.

[bastianilso]

fixed with pull request #228