Work in Progress - RetroPlayer UI Design | UI/UX Disussion | Help Needed

  Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Post Reply
Vel0cityX Offline
Junior Member
Posts: 24
Joined: Mar 2017
Reputation: 0
Lightbulb  RetroPlayer UI Design | UI/UX Disussion | Help Needed
Post: #1
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: 25c06016-4327-11e7-9349-bfbd22b588fd.png]

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.

GSoC 2017 student working on shader support for Retroplayer
(This post was last modified: 2017-05-29 03:12 by Vel0cityX.)
find quote
garbear Online
Team-Kodi Developer
Posts: 1,850
Joined: Dec 2010
Reputation: 115
Location: city of angels
Post: #2
Skinners: we need a new OSD for games. We want to reuse as much as possible. What should a game menu look like?

BTC: 1JtXwJdGdE9YnYgThWBT2StFCU5sEYkbVD (personal), https://kodi.tv/contribute/donate-bitcoin (foundation). Donations in the form of controllers, especially ones that don't work in Kodi, are also appreciated.
find quote
smitchell6879 Offline
Posting Freak
Posts: 818
Joined: Jan 2016
Reputation: 20
Post: #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.

Windows 10/MySQL/Xiaomi Mi Box
[WIP] UNIPLEX
Madnox Holiday Mod
(This post was last modified: 2017-05-29 06:05 by smitchell6879.)
find quote
RockerC Offline
Posting Freak
Posts: 1,516
Joined: May 2011
Reputation: 31
Post: #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: aspect-ratio-1.png]

[Image: aspect-ratio-2.png]
find quote
Hitcher Offline
Team-Kodi Member
Posts: 13,517
Joined: Aug 2007
Reputation: 211
Location: Eastleigh, UK
Post: #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)
find quote
smitchell6879 Offline
Posting Freak
Posts: 818
Joined: Jan 2016
Reputation: 20
Post: #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.

Windows 10/MySQL/Xiaomi Mi Box
[WIP] UNIPLEX
Madnox Holiday Mod
find quote
linkinsoldier Offline
Senior Member
Posts: 104
Joined: Jan 2017
Reputation: 0
Post: #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
(This post was last modified: 2017-05-29 11:22 by linkinsoldier.)
find quote
RockerC Offline
Posting Freak
Posts: 1,516
Joined: May 2011
Reputation: 31
Post: #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.
find quote
RockerC Offline
Posting Freak
Posts: 1,516
Joined: May 2011
Reputation: 31
Post: #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.
(This post was last modified: 2017-05-29 12:11 by RockerC.)
find quote
da-anda Offline
Team-Kodi Member
Posts: 5,820
Joined: Jun 2009
Reputation: 78
Location: germany
Post: #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.
find quote
Hitcher Offline
Team-Kodi Member
Posts: 13,517
Joined: Aug 2007
Reputation: 211
Location: Eastleigh, UK
Post: #11
Shader Browser: DialogSelect
Shader Editor: DialogAddonSettings
find quote
Gade Offline
Skilled Skinner
Posts: 1,931
Joined: Jan 2013
Reputation: 68
Location: Copenhagen, Denmark
Post: #12
(2017-05-29 21:55)Hitcher Wrote:  Shader Browser: DialogSelect
Shader Editor: DialogAddonSettings

My thoughts exactly.
find quote
Solo0815 Offline
Posting Freak
Posts: 941
Joined: Sep 2004
Reputation: 9
Location: Germany
Post: #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

PC: Kubuntu 16.10 and Win7/10 --- Wetek Play: LibreELEC 7.95.x --- RPi3: 7.95.x --- NAS: OMV 2.x
find quote
jurialmunkey Offline
Skilled Skinner
Posts: 2,656
Joined: Feb 2013
Reputation: 231
Post: #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.
find quote
ironic_monkey Offline
Posting Freak
Posts: 1,456
Joined: Nov 2013
Reputation: 69
Post: #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.
find quote
Post Reply