Brainstorming UI Design for Mobile Metroid Editors

[FelixWright]

Ladies and Gents,

I'd say one of the most recent trends in our hobby is increased accessibility. Now more than ever we have people emulating and playing romhacks on mobile devices or chromebooks, who also do not own a traditional windows/linux/mac PC.

Unfortunately, at this point in time, there's not really a way to hack Metroid on traditional mobile OS like Android or iOS, outside of using a remote cloud desktop like Shadow PC. Not very intuitive. Also overpriced and overpowered for our use case. The only editor that really comes to mind is the Return of Samus Editor (ROSE), though production of it has ceased for now and its interface is pretty daunting especially for mobile users.

Over time, mobile has grown increasingly more powerful. We've got hex editors, we've got text editors, we've got rom patchers, we've got file managers, even some limited access command lines, but general metroid editors themselves are something that we lack. In discussions of this on Discord, one of the biggest hurdles we've yet to really overcome is designing an intuitive UX / good UI design for end users.

This thread is dedicated to finding a solution for this problem. Let's throw ideas at the wall and see what sticks!

( Just keep it civil please :] )

[Conner]

I made this mockup of what such a Metroid Editor could look like.

(Base is MAGE, obviously this mockup lacks some features but its supposed to give a general idea)
The intended device is Tablet/Web

[spoiler][/spoiler]

[nodever2]

Generally, this can be a challenging topic, but I think there are some general sensibilities that can help a lot with designing such a UI, such as being able to zoom in/out for most editor/selector windows using two finger pinch.

I really like the mockup that Conner made, so if you were to apply this to that, you'd be able to zoom in on the tile selection window on the left to precisely select the tile you want, and then zoom back out to get a view of the whole tileset.

Another thing is being able to show/hide menu elements at will, so being able to minimize the left tile selection window by sliding it left or something to provide a more "full" view of the main level editor, that would be helpful.

I think we should be taking inspiration from things like Super Mario Maker (1 and/or 2)'s UI for this sort of thing. The second game in particular does a good job exemplifying the show/hide menu elements point.
[spoiler=Super Mario Maker 2 UI][/spoiler]

It's difficult to get a "fully-featured" editor experience on the go, but the possibility of at least some level editing and such being possible on a mobile device is quite interesting to me.
One of the most difficult things to make a UI for would be tileset editing I think, as I feel like it'd be hard to comfortably draw pixel art with your fingers. Though, I'm sure there exist some workflows for that on the internet somewhere, again maybe we could look for some outside sources for inspiration on how a mobile pixel art editor should look.

[FelixWright]

I agree about the 2 finger pinch to zoom in/out, and being able to pop stuff in/out would be nice. I'm personally not a fan of apps that require you to swipe from the edge of the screen to bring something in view, so if possible a little tab at the edge that is slightly transparent and just takes a tap could be nice.

In addition, I believe it'd be more intuitive for placing tiles to be tap, and, hear me out, for placing chains, you double-tap but hold and drag on the second tap to "brush" a chain of tiles.

A huge constraint is going to be fitting everything on one screen. For that, I propose we do something similar to mobile browsers and use a tabbed interface, with an end-user adjustable max number of tabs visible on the tab bar, before overflowing into a tappable box with # of extra tabs. Some examples:

[spoiler=Firefox Android Tab overflow][/spoiler]
[spoiler=Firefox Android Tab menu] [/spoiler]

The "+" could be a menu to add extra editors as tabs, such as a palette editing window or an enemy DNA editing window. The reasoning behind the bar having a user defined tab limit before overflow is for ageproofing. Higher resolution could == more max tabs right?

[TobiMikami]

Well my first thought is that my game engine has the ability to port out to Android and such if I had the proper IDEs and SDKs, which I don't, but this is only good for Game Maker built exes, my map maker would therefore theoretically be portable to Andoid no problem. An editor I'd imagine would have to be ported out of something like Visual C++ with the SDKs and everything that supports Tizen/Android/iOS, etc. If we have all fof that already figured out that's great, but if we don't, Well I'd suggest we start there? After all that is what VisualBasic, Visual C++ and everything was designed for was UI like this after all.

[FelixWright]

The main idea of the thread is, at a very high level, trying to answer the question of how the UI of these editors should be changed to accomodate mobile. How should elements be blown up and arranged in order to fit on a single touch screen? What should taps, flicks, multi-finger touches, and other hand gestures do? How should the mobile editor respond to user input, like selecting a drop-down? What is the expected experience for editing a room? Node and Conner have shown some great examples of how these things could be intuitively laid out.

[TobiMikami]

GUI Room layout wise, I personally would prefer any room editor to be full screen on a mobile device, ideally with a zoom function, maybe something with the fingers if it'd not a problem with laying tiles, that could be a bottom almost like GIMP has the magnifying glass you can click to enlarge or zoom out if you can't scroll. Could also borrow from Game Maker in that sense of a minimalistic, perhaps shrinking/low alpha side menu that can change from say Item/PLM/Ohject/BTS/whatever layouts, one at a time to free equity, maybe one tab for your solids, in my case objects, your guys BTS, then another to start laying tiles, if you have to edit an object on the fly or like SM typing in the numbers, maybe a hold down of the finger on the tile or object pops up a tab almost like Google Chrome, with all the options in descending order.

That would probably work best (and maybe the whole idea as a whole really considering how many other components exist as separate parts) using that same "tree" type setup Game Maker bas,, where you have a listing of tabs or headings and under each expands your rooms, just like each editor has a rooms tab, and that would go into editing that room, same with anything like enemies and objects that can be edited in the editor, if it has an on board editor, or maybe it could be more easily coded in, even in the first versions, as a "open in <users native code editor> " like it gives options if you wanna use Google or Firefox type thing for anything that has to be done externally of the "main" program. I'm not sure where the limitations for mobile are compared to windows, if it can be done like tabs in Chrome as the equivalent to multiple windows within a single program like the Windows OS platform I've always been native to when it comes to programming.