Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Project main ui suggestions #13

Open
andychase opened this issue Sep 7, 2020 · 26 comments
Open

Project main ui suggestions #13

andychase opened this issue Sep 7, 2020 · 26 comments
Labels
help wanted Extra attention is needed

Comments

@andychase
Copy link
Owner

A couple people suggested the ui could be improved:

  • Mobile ui non existant
  • A lot of buttons now
  • Need a remapping design
  • Possibly prepare a homebrew game to show off the emulator?

Hoping to start a thread where people can post some images of designs
@andychase andychase added the help wanted Extra attention is needed label Sep 7, 2020
@tintheanh
Copy link
Contributor

I can work on this.

@Qaena
Copy link

Qaena commented Sep 10, 2020 •
edited

I had an idea for this that could accommodate any window size by adjusting the width and height of the display based on window dimension calculations(this I've already coded and it seems to work well, see screenshots). It's not the most elegant of handling since it's a js function that runs on window resize and changes css variables, but it's functional and window resizing is typically a rare event, so the performance cost shouldn't be too bad.
The bit I already coded also resizes the Canvas, and calculates the css "zoom"/"-o-transform" that needs to be applied to it to render correctly at all sizes.

I also envisioned a bit simpler of a button interface such as maybe:

  1. button to load a rom(same as current)
  2. button to open Settings(maybe a modal or some fullscreen overlay? This would be all the current left side buttons when a game is loaded)
  3. button to open Controls(this would be the current right side table and potentially a remapping feature if we wanted to add that as well)

With just a few buttons below the display, that would free up room for the eventual on-screen controls to the right and left.

Let me know what you guys think of that set-up.

@jriceart
Copy link

Hey yall, heres a link to the first iteration of the UI:

https://www.figma.com/file/azIaf5sIOT1Vj86lIui0El/GBA.js?node-id=0%3A1

feel free to drop comments and suggestions in the chat, I've written down some notes and asked a few questions inside the figma doc.

@andychase
Copy link
Owner Author

andychase commented Sep 10, 2020 •
edited

@Qaena For Mobile held in portrait likely the display should cover the whole width of the screen since it will be pretty small (similar to gba sp), landscape orientation be laid out like classic gba.

Tablet and larger sizes the screen I think be fixed size unless someone clicks full screen otherwise it may look too blown up.

Is that the same thing you were thinking?

@andychase
Copy link
Owner Author

@jriceart The layout of that looks good! It feels decent on my iPhone 8 Plus, I can show it to other people with 4.7” screens

@jriceart
Copy link

So for mobile portrait you're looking for the display to go to the edge of screen. I see what you're asking and I agree that we should allow the user to play like that.

What if we offer the option as a toggle feature, something like max screen or full-screen mode in addition to the traditional gameboy ui?

I think a Dark Mode where the classic GB styling is removed and replaced with a non-traditional / black or dark UI with a pure usability focus would also be a good idea.

Thoughts?

Thanks for the compliments! @andychase

@andychase
Copy link
Owner Author

It looks fine as is on my screen size, but yeah I think making sure that people with smaller screens use their full display width might be important.

I also think that in portrait, the game boy advance so design had people’s hands coming from below. Where as with phones peoples hands come from the side. Also the targets need to be bigger because there’s no tactile feedback that you are on the buttons. Two things to think about.

@jriceart
Copy link

can we use haptics? I agree that the sizes/ placement of assets are going to need ux adjustments

@jriceart
Copy link

what smaller screen size are we talking here? iphone 4, smaller? Is there anything that we aren't designing for?

@jriceart
Copy link

holding the screens in my hands, I think I'll bring all the buttons down closer to the bottom of the screen. easier to reach with thumbs.

@Qaena
Copy link

Qaena commented Sep 10, 2020

@andychase I wasn't coming at it from a specific device standpoint, but more being able to accommodate resizing a desktop window to a desired scale. I quite like Joe's designs for mobile though, and implementing those will probably produce a nice desktop experience as a consequence.
I can start on a more standalone contribution while the high level designs are getting sorted out here.

@jriceart
Copy link

@Qaena I'm working on the desktop view as well, feel free to keep checking back to the Figma link. Consider it a living doc.

https://www.figma.com/file/azIaf5sIOT1Vj86lIui0El/GBA.js?node-id=0%3A1

@Qaena
Copy link

Qaena commented Sep 11, 2020 •
edited

Would it be a good idea to have a mechanism for system messages like "Loading ROM..."(instead of displaying that on a button like current) or "Key remapping; waiting for input..." or other things like that? What about a message bar that appears over the top of the screen canvas?

@jriceart
Copy link

Alright, for the ROMS and settings menu I figured we could either do a full-screen menu or a drop-down. In either case we could insert system messages, success / fail etc into the menu screen itself. instead of displaying messages on the canvas.

I have some general usability questions that will inform the design.

How are save games handled? Can we load multiple roms into the software at a time and choose which one to play? Are settings saved in the browser cache? Offline play? Thanks for any answers.

Also do ya'll need front-end code written for the interface or is that already taken care of?

@tintheanh
Copy link
Contributor

@jriceart The UI looks great! If the front-end code is not yet implemented I can try to jump in and work on it.

@jriceart
Copy link

@tintheanh thank you! i'd like to work on this with you if possible. I haven't taken a deep look into the front end code that exists already, skimmed through it last week. Can someone give me a quick rundown through processes and file structure? Are we using any frameworks?

@jriceart
Copy link

Sidebar, would anyone be interested in opening up a slack channel for this project or do we want to keep all communication on github?

This was referenced Sep 15, 2020
Closed
Closed
@andychase
Copy link
Owner Author

@jriceart Yeah you if you want to make one I'll join it and link to it but I might not check it too often.

@jriceart
Copy link

jriceart commented Oct 3, 2020

Hey guys, we still working on this? I've been out of town for a couple weeks, looking to work on this some more.

@andychase
Copy link
Owner Author

@jriceart I think it may have stalled, please take a look if you have time!

@jriceart
Copy link

jriceart commented Oct 9, 2020

@andychase if you're still in this i am too. I can work on the front end. Do you mind giving me a run down of the FE code?

@andychase
Copy link
Owner Author

I don't have a ton of time but I'm still invested! The front end code right now is basically all in index.html

@jriceart
Copy link

jriceart commented May 17, 2021 via email

@andychase
Copy link
Owner Author

andychase commented May 17, 2021 via email

@iCollin
Copy link

iCollin commented Oct 7, 2021 •
edited

@jriceart are you still interested in contributing a mobile UI to this project? I have created a functional mobile UI for myself but it does not look quite contribute ready. If you would like to work together to create a PR let me know.

EDIT nevermind, I see this is done in #21

@thenick775
Copy link

I've also created an alternate UI for desktop/mobile/pwa under my fork if anyone is interested

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@andychase @tintheanh @iCollin @jriceart @Qaena @thenick775