search

andychase / gbajs2

gbajs2 is a Game Boy Advance emulator written in Javascript from scratch using HTML5 technologies like Canvas and Web Audio. It is freely licensed and works in any modern browser without plugins.
https://andychase.me/gbajs2
BSD 2-Clause "Simplified" License
212 stars 76 forks source link

Project main ui suggestions #13

Open andychase opened 4 years ago

andychase commented 4 years ago

A couple people suggested the ui could be improved:

Hoping to start a thread where people can post some images of designs

tintheanh commented 4 years ago

I can work on this.

Qaena commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

jriceart commented 4 years ago

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

jriceart commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

jriceart commented 4 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 2 years ago

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