Project main ui suggestions

[andychase]

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

[tintheanh]

I can work on this.

[Qaena]

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]

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]

@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]

@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]

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]

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]

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

[jriceart]

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

[jriceart]

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]

@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]

@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]

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]

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]

@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]

@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]

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

[andychase]

@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]

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]

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

[jriceart]

@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]

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]

Roger that. I haven't taken a look at the project in a while but I will take a peak in the next week when I have some time.

What are you going to be working on?

On Sun, May 16, 2021 at 8:32 PM Andy Chase @.***> wrote:

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

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/andychase/gbajs2/issues/13#issuecomment-841905678, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGD3YP7YSU3H2KRANWS2L5TTOBP3BANCNFSM4Q5DCJXQ .

[andychase]

There are issue ticket with loading roms directly, linking with open source roms, and also a pull request with a mobile interface that I want to test out.

On Mon, May 17, 2021 at 6:41 AM Joe Rice @.***> wrote:

Roger that. I haven't taken a look at the project in a while but I will take a peak in the next week when I have some time.

What are you going to be working on?

On Sun, May 16, 2021 at 8:32 PM Andy Chase @.***> wrote:

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

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/andychase/gbajs2/issues/13#issuecomment-841905678, or unsubscribe < https://github.com/notifications/unsubscribe-auth/AGD3YP7YSU3H2KRANWS2L5TTOBP3BANCNFSM4Q5DCJXQ

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/andychase/gbajs2/issues/13#issuecomment-842333883, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAS3CCBVMYNH5NJR3JBT5VTTOEMHDANCNFSM4Q5DCJXQ .

[iCollin]

@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 https://github.com/andychase/gbajs2/pull/21

[thenick775]

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