Better image for controller mapping

[avojak]

Right now the generic gamepad SVG is sourced from GNOME Games, but it'd be nice to have one that looks... nicer. A key requirement would be to maintain the same path names in the SVG since that's used to highlight buttons.

[Suzie97]

Can you post sone screenshots of where this icon is used?

[avojak]

If you take a look at data/assets/standard-gamepad.svg you'll see the path IDs which are used when the widget is drawn to set highlighting.

[Suzie97]

@avojak I'll have some time to do this over the weekend. Do you have anything in mind? The current svg is just buttons. Do you want something that looks like a controller?

[avojak]

Awesome! Yea I was thinking something that looked like a generic controller/gamepad would be cool. I think the buttons themselves might need to stay a solid color for the highlighting to work, but it's pretty easy to test that.

[Suzie97]

If we use a top down view of a realistic looking controller, we'll have a problem. In the current svg, the left and right bumpers/triggers are separated from the left and right buttons as seen below.

But on a top down view of a controller, the lower bumpers/triggers will not be visible.

This is the case with OpenEmu for macOS. They don't do anything to show the button to the user. They just highlight it with a blue circle even if it's not visible.

Screenshots

When L1 is selected

When L2 is selected

When R1 is selected

When R2 is selected

@avojak do you think we can do the same?

[avojak]

@Suzie97 Hmm that's a good point, I hadn't thought about that. I'm not the biggest fan of how OpenEmu handles that because I think it's a little confusing for the user. Do you think it would be possible to do a split view, where there's a top down view as well an angle where you're facing the top directly?

Maybe something like this:

[Suzie97]

@Suzie97 Hmm that's a good point, I hadn't thought about that. I'm not the biggest fan of how OpenEmu handles that because I think it's a little confusing for the user. Do you think it would be possible to do a split view, where there's a top down view as well an angle where you're facing the top directly?

Maybe something like this:

well, yes I can make the art for this. But do we want to display both of the views together? Or separately? If we want to do it together, then I can the image will be quite big. It would be nice if I can get a specific resolution to work with.

[Suzie97]

Also, can we use a png instead of an svg? This would allow for a lot more flexibility, like I can make a super realistic controller with drop shadows, inner shadows and everything which don't work super well with standard svg. If svg is required for highlighting the buttons, then maybe we can render an invisible svg for that?

[avojak]

can we use a png instead of an svg?

I don't think that'd be a problem, although I don't have any specific dimensions in mind. Might be able to position the top view above or below the front view so it's not as wide.

If svg is required for highlighting the buttons, then maybe we can render an invisible svg for that?

That's a good idea, although I'm not married to the idea of using the SVG highlighting, it was just the easiest at the time to use the same approach as GNOME Games. The trickiest part is animating the joysticks, but even that could be done with some CSS animation probably.

[Suzie97]

The trickiest part is animating the joysticks, but even that could be done with some CSS animation probably.

So do you need multiple images with all of the joystick positions?

[avojak]

Might be able to do a "base" image without the joysticks, and then overlay the joystick images so they can be animated separately. Just a guess though, I'll probably just have to play around with it a little bit.

[Suzie97]

@avojak this is what I came up with. The Xbox logo is just a placeholder, which I will replace with something else.

Do you like the design of the controller? The shape, buttons, D-Pad etc.?

The D-Pad is a classic NES style, the joysticks are inspired form the DualShock 4, and the buttons of the size of a PS1 controller, but have the texture like an NES controller. And the shape is just kind of random, I just adjusted the vector points until it felt like something real.

[avojak]

That looks great so far! My one suggestion would be to make sure that the logo feels like a button since the SDL gamepad layout has a middle button.