Adding a hover effect to the app

[chrismaliszewski]

An idea for the future release.

It'd be nice adding a hover effect to the app. It could be used in many places in the app, beginning from some tool-tips in the Editor, (1) through expansions' icon in SE with an image and the expansion's name, ending with usage in gameplay (i.e. icons with home rules or other kinds of information for players).

The idea began with (1) but I noticed that it can be a more general feature.

In terms of (1), it could like something like that (it's 10-minute work so it is nothing fancy): (PSD: popup.zip)

What do you think?

[chrismaliszewski]

From https://github.com/NPBruce/valkyrie/issues/1093. @redwolf2 wrote:

Keep in mind a hover effect wont work on android

@chrismaliszewski wrote:

Why? What do you mean? Is there a problem with Unity regarding that matter? Or do you mean touch screens in general?

I have no idea if Unity has a built-in library to achieve this effect or not. But from what I've just read there are applications of such done in Unity by some people. Unity has a Touch Module: https://docs.unity3d.com/Manual/script-TouchInputModule.html. Additionally, if the effect is not easily achievable by using "touch" gesture/event, you always can use other techniques and tricks such as detecting a continuing pressing.

It's achievable for 100%.

@redwolf2 wrote:

It is not very intuitive to hold your finger over a button and read the text under it.

[chrismaliszewski]

That's true. Therefore, there should be a little bit different implementation for mobile. Being honest, much easier. I have a good example.

Go to my personal website on your phone: http://krzysztof-maliszewski.pl/#about-skills and check "i" icons. How? Just tap the icon! The tooltip will be with you until you either: a) tap again somewhere else or the icon (there is a small bug; if you click the tooltip itself it needs to clicks on the icon to appear again instead of just one), b) scroll the screen. Additionally, on deksop there are more events such as 'mouse enter/leave' and 'click''. I'm using http://iamceege.github.io/tooltipster/ with small modifications of mine.

Actuall when you think of it, scrolling requires from user another tapping which is already implemented in a) so only the first event would need to be implemented for mobile.

The solution could work in the similar matter in the Valkyrie app. So: a) mobile: a user taps a certain area which causes appearing of a tooltip; the latter stays on the screen until a user taps somewhere again, b) desktop: a user hovers or clicks a certain area which causes appearing of a tooltip; the latter stays on the screen until a user moves his/her mouse off the area or clicks a screen somewhere again or scrolls a screen (note: scrolling appears only in SE at the moment)

As shown in the above example, it should works just fine.

What do you think?

[chrismaliszewski]

There still is a bigger issue. How to catch the user's attention and let him/her know that the area is tappable/hoverable? Especially on mobile.

But I have an idea. In the Main menu, there could be elements with the effect next to some buttons. I.e. They would serve as an example of the effect. As they would be so much noticeable a user would want to do something with them and will learn how the effect works.

Notice that I used an existing template of the buttons. I think all buttons in the app should have a similar design, especially the ones with a hover effect.

Finally, if all hoverable buttons should have a similar design, the missing expansions' icons could look like that: (I don't have high-quality expansions' icons so they look a bad) Notice the difference between a transparent and black icon inner part. I think the black looks much better.

PSD: buttons_icons.zip

@redwolf2, you used an eraser on the original image of the swirl. Could you upload the full original image? It might be handy later in the future.

[redwolf2]

@chrismaliszewski Nice portfolio and website. You came quite around.

I think the context menu, you described could work. When clicked, it will stay on top and will be removed, when the user clicks somewhere else. On the pc side it is shown when the user hovers over it. It should be implemented in a way to be reusable in other ui.

The button template can be found here: https://github.com/redwolf2/valkyrie_content_creation_kit_mom/tree/master/buttons

[chrismaliszewski]

Thanks. Yes, I did, from one project to another.

The button template doesn't have the full image of the swirl. Instead this: Do you still have the full image including erased part? :) It might be useful somewhere in the future, i.e. for rectangle buttons.

[redwolf2]

Source: https://pixabay.com/illustrations/fractal-blue-swirl-vortex-abstract-14680/

[BenRQ]

I'm adding the "opinions wanted" flag, as I'm not sure we have the best solution yet for this. Maybe someone will come up with a nice idea :)

[antontimmermans]

This hover effect to display additional information doesn't sound like a bad idea. The current scenario explorer has a lot of information in the overview. I like the way it looks now and adding more information might make the screen look messy. The example for adding more information shown by @chrismaliszewski on the expansion is one, but i could think of more: Player stats (stats of the individual, not of the total):

• number of times scenario played
• number of wins
• last time played