• 1(current)
  • 2
  • 3
  • 4
  • 5
  • 11
WIP RetroPlayer UI Design | UI/UX Disussion | Help Needed
#1
Lightbulb 
Introduction

Bit of an introduction:
I'm the Google Summer of Code student that will be developing shader support for RetroPlayer this summer, along with garbear which will mostly be doing the GUI work for it.

Current UI

Here's RetroPlayer's current state:

Image

As you can see, there are several parts of it that are unneccesary and some are more prevalent than needed.
Also, a lot of the things we need in there aren't present in the OSD.

UI Goals
(from here)

We need to have these options somewhere:
  • Save State
  • Load State
  • Load Savegame
  • Exit Game
  • Change Shader
  • Reset Game
  • Enable/disable Cheats
  • Netplay Settings
  • Controller Assignment (?)

Shader System

Description

Our plan is make use of the libretro shader system, to make use of the vast number of shaders and shader presets already developed for it.

This system is largerly based on these shader presets, or .cgp files.

Each one of this files specifies a certain amount of passes, and scaling/filtering parameters for each pass.

For example, a shader preset for the Game Boy might have different passes for dot-matrix, color conversion and ghosting effects.

(more detailed info on the spec itself here)

Challenges

RetroArch implements this spec and offers a UI for changing these parameters.

We will need to adapt this UI, to a 10-foot UI for Kodi.

We're currently trying to figure out how the Shaders OSD will work.
We were thinking about having two windows, a
  • Shader Browser: Used for selecting a .cgp file and a
  • Shader Editor: Used for adding/removing passes and maybe changing scaling/filtering parameters


Any feedback?

About the shader OSD, we either need to hash this 2-window idea out, or maybe brainstorm other ways of handling shader presets.
Ideas about the RetroPlayer's overall UI also welcome.
Mostly working on Retroplayer graphics.
GitHub: github.com/VelocityRa
Reply
#2
Skinners: we need a new OSD for games. We want to reuse as much as possible. What should a game menu look like?
Reply
#3
Personally I don't like the video osd that is being used now... As in the op picture the original games never had this. I know that it allows some functions it been a while since I last us this so I kinda forgot what did what.

If your looking for ideas to menus even basic maybe take a look at launchbox I think it is becoming a very popular frontend maybe even with the potential to over take hyperspin.

Another really simple frontent was emulation station that kinda worked like confluence with the middle bar.
Shield TV | Windows 10 | Mariadb | Mii Box
Evolve Ecosystem Repo | TV Melodies | Madnox Holiday Mod
Reply
#4
Instead of having the OSD on the bottom or top of the screen, should you not recommend to use the space on the right and/or left side of the screen when we are talking about a new OSD for games using RetroPlayer?

You would normally not want to stretch or cut the original games video display, and the aspect-ratio of most retro-games played with RetroPlayer emulators have a 4:3 or 3:2 aspect-ratio (or 3:4 / 2:3 aspect-ratios when talking arcade emulators with monitors tilted on the side) because that was the size of most standard monitors. Pease read https://amigalove.com/viewtopic.php?t=38

I mean, now that almost all of us are using Kodi with televisions that have 16:9 (or 16:10) aspect-ratio there should for most televisions be some black bars of unused space on the left and right side of the screen that could be used for OSD when displaying a game emulated in its original 4:3 or 3:2 aspect-ratio.

Using the unsued space on the left and/or right side of the screen would in that case not hide any of original game display even when the game OSD is displayed.

Image

Image
Reply
#5
My suggestion to reuse as much as possible would be to group them under relevant buttons with a popup in the same way you change audio/video settings, subtitles, etc.

Left side - RW, Pause, Stop (Exit game), FF?

Right side - Saves, Cheats, Settings (popup with Shader, Netplay, Controller ooptions)
Reply
#6
Quote:My suggestion to reuse as much as possible would be to group them under relevant buttons with a popup in the same way you change audio/video settings, subtitles, etc.

Left side - RW, Pause, Stop (Exit game), FF?

Right side - Saves, Cheats, Settings (popup with Shader, Netplay, Controller ooptions)

I second this.. once again personally if I am playing a game I would prefer only to see that game on the screen while playing... only showing options for settings when paused. If you do look at Launchbox BigBox most of there settings are done before actual game play.. it is one of the easiest frontends I have played with.. It would be awesome if kodi had something similar graphic wise.
Shield TV | Windows 10 | Mariadb | Mii Box
Evolve Ecosystem Repo | TV Melodies | Madnox Holiday Mod
Reply
#7
I like the idea to show the options left and right!

About controller options: reassigning controller mapping would be great, also controller power down (to save battery on not needed controllers) would be great!

I also would like to have connected controller displayed (when paused), similar to Nintendo switch style? Display a controller image below/above the mapped number, therefore one could see which controller is which... Perfect would be to be able to map pictures or colors to the corresponding controllers: I bought different color ps3 controller and would love them to be displayed with the number for a quick and easy mapping [emoji6]
Reply
#8
(2017-05-29, 08:56)RockerC Wrote: I mean, now that almost all of us are using Kodi with televisions that have 16:9 (or 16:10) aspect-ratio there should for most televisions be some black bars of unused space on the left and right side of the screen that could be used for OSD when displaying a game emulated in its original 4:3 or 3:2 aspect-ratio.
Just to have mentioned it; maybe keep in mind that there will of course always be people who are exception to the norm, and as such there will always be a few nostalgic people using Kodi with an old 4:3 apect-ratio monitors/displays (mounted horizontally or vertically in 3:4 apect-ratio mode) only to play emulated games with RetroPlayer to get a more classic retro experience.

I guess once the games section in Kodi gets a proper GUI skinned there will be a quite a few people will have dedicated installations for only retro-gaming with RetroPlayer.
Reply
#9
(2017-05-29, 03:08)Vel0cityX Wrote: Challenges

RetroArch implements this spec and offers a UI for changing these parameters.

We will need to adapt this UI, to a 10-foot UI for Kodi.

We're currently trying to figure out how the Shaders OSD will work.
We were thinking about having two windows, a
  • Shader Browser: Used for selecting a .cgp file and a
  • Shader Editor: Used for adding/removing passes and maybe changing scaling/filtering parameters
Any feedback?

About the shader OSD, we either need to hash this 2-window idea out, or maybe brainstorm other ways of handling shader presets.
Ideas about the RetroPlayer's overall UI also welcome.
What about the idea of making each shader into its own add-on for Kodi and as addons they could then use the existing work for add-on settings UI?

That way you could also make use of Montellese settings library for shader add-ons as well.

See https://github.com/xbmc/xbmc/pull/12125 and https://github.com/xbmc/xbmc/pull/12062

And if all shaders was an individual addon then they could also be upgraded seperatly outside Kodi's regular release cycle, like all addons for Kodi.
Reply
#10
not sure if I'd make the shader configuration possibility a requirement for an initial implementation, might be a bit overkill. Also, the UI layout should not be your concern, it's up to the skinners where to put the controls in the end (as side menus or whatever). Moving the actual shaders to add-ons sound like a good idea IMO.
Reply
#11
Shader Browser: DialogSelect
Shader Editor: DialogAddonSettings
Reply
#12
(2017-05-29, 21:55)Hitcher Wrote: Shader Browser: DialogSelect
Shader Editor: DialogAddonSettings

My thoughts exactly.
Reply
#13
I'd leave out "Stop", because maybe someone accidently hits stop and all game progress is lost. The stop-button can be there if (IMHO):
- the game autosaves on "Stop"
- the game can be resumed from the autosave

How about only a "Pause" button, which opens a dialog:
- Stop game without saving
- Save game and stop
- resume game

Left side:
Save:
  • State
  • Savegame
Load
  • State
  • Savegame
  • Reset Game (not sure about a extra button for this)
Cheats
Settings
  • Shader
  • Netplay
  • Controller ooptions
Philips TV with Kodi 20.2 with IPTV --- Orbsmart 500 Android 21 alpha/beta as Online-radio/TV in the kitchen
Reply
#14
(2017-05-29, 23:35)Gade Wrote:
(2017-05-29, 21:55)Hitcher Wrote: Shader Browser: DialogSelect
Shader Editor: DialogAddonSettings
My thoughts exactly.

+1

Please don't add additional unnecessary dialogs when dialogs already exist for selection and settings. If there is something specific that DialogAddonSettings (or alternatively DialogSettings) cannot do, then consider adding functionality to it rather than making an entirely new dialog to skin.
Arctic Fuse - Alpha now available. Support me on Ko-fi.
Reply
#15
i think the xsp editor is a better fit for the shader chain. other than that i agree lets not do additional dialogs unless absolutely necessary.
Reply
  • 1(current)
  • 2
  • 3
  • 4
  • 5
  • 11

Logout Mark Read Team Forum Stats Members Help
RetroPlayer UI Design | UI/UX Disussion | Help Needed0