[Discussion] GUI redesigns

As you're probably aware, the next version of Essentials is focussing on a screen resize, namely making it a bit larger to match the DS screen (one of them, anyway). Since the vast majority (if not all) of the GUI screens will need to be changed to let them use the larger screen properly, we might as well take the opportunity to redesign them completely and make them look better, rather than just spreading out the existing graphics.

As far as I can think, the list of screens that will need to be tweaked or redesigned because of the screen resize is as follows:

• Pokédex
  • Nest map
• Party
  • Pokémon summary
• Bag
• Pokégear
  • Region map
  • Radio
  • Phone
• Trainer card
• Options
• Splash screens
• Load game screen
• Professor's intro
  • Help (adventure, controls)
  • Text inputting (renaming trainer/Pokémon)
• Credits
• Mart
• PC Pokémon storage
• PC item storage
• Evolution screen
• Trading screen
• Mail
• Triple Triad
• Duel minigame
• Battle
  • Transitions into battle
• Cave entering/exiting transition
• Shadow Pokémon purification screens (Relic Stone, Purify Chamber)

This thread is for concept art, ideas and suggestions of how these screens can be improved. Even the tiniest thought is welcome - we all want Essentials to look good.

The new screen size will be 512x384 (256x192 actual size). Older posts about this can be found in the old Wiki thread.

==========================================================================

To kick things off (again), I've mocked up a redesign of the first Pokémon summary screen, using HGSS graphics and the layout of the DPPt summary screens. What do you think?

I thought maybe the type could go on the left with the item, so that it would always be visible. Each page will have a different colour (maybe blue/cyan/green/red/yellow in that order). The moves page will have all the information visible immediately (its layout will be much like it is currently, not like in HGSS).

This looks like it will be a lot of work. My only request is that you make sure everything is stylistically consistent.

The mockup looks great. I don't think you should add the type to the left; although it may look a bit empty at the moment, I think putting the type there as well would make it look cluttered.

Also, what's your reason for going with HG/SS style over the newer B/W style?

Awkward Squirtle said:

This looks like it will be a lot of work. My only request is that you make sure everything is stylistically consistent.

The mockup looks great. I don't think you should add the type to the left; although it may look a bit empty at the moment, I think putting the type there as well would make it look cluttered.

Also, what's your reason for going with HG/SS style over the newer B/W style?

Click to expand...

Because he likes it that way? The Black/White style is nice, but there's no harm in using an HG/SS style either.

Anyway, Maruno, if memory serves, you already know what you're doing with the party screen, right?

Also, I like the Summary Screen you've sample quite a lot!

Awkward Squirtle said:

This looks like it will be a lot of work. My only request is that you make sure everything is stylistically consistent.

The mockup looks great. I don't think you should add the type to the left; although it may look a bit empty at the moment, I think putting the type there as well would make it look cluttered.

Also, what's your reason for going with HG/SS style over the newer B/W style?

Click to expand...

Of course it's a lot of work. It's a big thing to do in itself, and it'll take months for me to update it by myself. It's also worth it, and it gives me an excuse for not fixing other things in the meantime.

My reasoning for adding the type to the left is that it will be visible when looking at the moves - it's nice to see at a glance what moves get STAB (that's probably why the pop-up panel in newer games shows the type in the moves screen). It was just a thought.

I like the look of HGSS, and actually dislike the BW look - it's too glassy and griddy and techy, and the actual words just seem like an afterthought and have no proper boxes to live in so they're just floating. HGSS, on the other hand, is colourful and simple and everything is in a proper place (although I don't like its Pokédex). Just because BW is newer doesn't mean it's better.

My designs are, of course, just concept art, and aren't necessarily what Essentials is going to look like (unless no one else says anything).

As for "stylistically consistent", the Pokégear is planned to look like the PokéNav (because the real Pokégear has no "menu page" while the PokéNav does). I don't care about graphics all being from the same game; I care about it looking good. If you want to come up with a HGSS-style Pokégear menu page (whatever that is), go right ahead.

IceGod64 said:

Because he likes it that way? The Black/White style is nice, but there's no harm in using an HG/SS style either.

Anyway, Maruno, if memory serves, you already know what you're doing with the party screen, right?

Also, I like the Summary Screen you've sample quite a lot!

Click to expand...

The party screen is going to look like HGSS, pretty much exactly. Again, that's unless someone else suggests anything better.

My reasoning for a HGSS party screen is that a 2x3 layout looks better than the current 1+5 (or 2+4 in double battles), and DP has a naff beige background and Pl has a too dark background (the panels themselves are the same except for the colours). BW, as I've mentioned, is too glassy for what I feel a Pokémon game should look like (cartoony and simple and non-distracting).

I agree with your points on HG/SS vs B/W - I was just curious. I think a significant proportion of users of the starter kit would disagree with us, though.

Instead of cluttering the screen with the Pokémon's type, you could try doing something with the move display - perhaps use a different-coloured font for moves with STAB (like how the stats affected by the Pokémon's nature are different colours).

Finally, I think it would be worth it to recode the PokéGear to be more similar to the HG/SS version. I'm not really sure on how you'd lay it out - it could be as simple as just changing the layout of the menu screen so the icons are horizontal rather than vertical. And of course, you'd have to change the layouts of the individual features of the PokéGear, but you're planning to do that anyway. Just use one of the HG/SS PokéGear skins as the background for the menu.

Awkward Squirtle said:

I agree with your points on HG/SS vs B/W - I was just curious. I think a significant proportion of users of the starter kit would disagree with us, though.

Instead of cluttering the screen with the Pokémon's type, you could try doing something with the move display - perhaps use a different-coloured font for moves with STAB (like how the stats affected by the Pokémon's nature are different colours).

Finally, I think it would be worth it to recode the PokéGear to be more similar to the HG/SS version. I'm not really sure on how you'd lay it out - it could be as simple as just changing the layout of the menu screen so the icons are horizontal rather than vertical. And of course, you'd have to change the layouts of the individual features of the PokéGear, but you're planning to do that anyway. Just use one of the HG/SS PokéGear skins as the background for the menu.

Click to expand...

A lot probably, but not everyone. At least I don't like it too, in fact, I don't like pretty much everything in B/W (including 95% of the pokemon designs). B/W is the first pokemon main-series game EVER I got bored and never finished.

To be frank I like most of the things PE has now, but it wouldn't be a bad thing have more space to play with it, 'cause in the end we can change a lot of stuff anyway. What I wonder is what effect will this have in current projects if trying to convert them to this new GUI.

I've mocked up the rest of the screens now, for your amusement. I couldn't fit all the move information into half a screen, so I surrendered and had the extra panel. The purple and green colours were invented by me, and I hope they're alright.

Awkward Squirtle said:

Finally, I think it would be worth it to recode the PokéGear to be more similar to the HG/SS version. I'm not really sure on how you'd lay it out - it could be as simple as just changing the layout of the menu screen so the icons are horizontal rather than vertical. And of course, you'd have to change the layouts of the individual features of the PokéGear, but you're planning to do that anyway. Just use one of the HG/SS PokéGear skins as the background for the menu.

Click to expand...

There's still the need to create the icons from scratch to "match" the HGSS Pokégear background. The apps themselves, I'm not sure what to do with them yet.

xdanx said:

A lot probably, but not everyone. At least I don't like it too, in fact, I don't like pretty much everything in B/W (including 95% of the pokemon designs). B/W is the first pokemon main-series game EVER I got bored and never finished.

To be frank I like most of the things PE has now, but it wouldn't be a bad thing have more space to play with it, 'cause in the end we can change a lot of stuff anyway. What I wonder is what effect will this have in current projects if trying to convert them to this new GUI.

Click to expand...

If the existing projects haven't messed with the GUI, then a new one won't matter to them at all - they'll just have the new one. If they have been messing with it, then they (should) know what they've done and how much work it was, and can then replicate it if necessary. Alternatively, it's really easy to not upgrade.


EDIT: I've also attached a mock-up Bag screen. I'm not so sure about it, though.

This is amazing! Im waiting for this. Certainly I going to use this in my game. This summary screen is beautiful. And the HG/SS style is certainly better than B/W. Good luck Maruno. Still a lot of work ahead of you. Sorry for my bad English.

lol, Croconaw with Thundershock.

I have no qualms about the summary screen, it like nice and very streamlined, plus all the needed info is covered there.

The Bag screen however, I am a little iffy on. It's an interesting idea, and it would presumably make switching pockets faster, but I'm not a fan of having only six items onscreen at once, as this makes the pages smaller and scrolling with Page Up/Down slower. I could be wrong of course, it does have a bit more going for it than the DS games in the navigation department.

IceGod64 said:

The Bag screen however, I am a little iffy on. It's an interesting idea, and it would presumably make switching pockets faster, but I'm not a fan of having only six items onscreen at once, as this makes the pages smaller and scrolling with Page Up/Down slower. I could be wrong of course, it does have a bit more going for it than the DS games in the navigation department.

Click to expand...

Hasn't 6 been the default amount of items in the official bag menus, though? I think it's better to sacrifice the amount of items visible in favor of some more space for the description and the visible pockets. That's just me, though.

Maybe include a little indicator on the left side of the screen to show the position of said item in the list? Just a little detail, no real use, but since HGSS, for example showed which page you were on while navigating the items, maybe indicating in which line you are could work.

I'd lighten the green and purple a tiny bit - they look a little bit more saturated than the original colours.

As for the Bag, you could try arranging the pocket icons on the left in a circle, then have them rotate when you change pockets. That way you can show an extra one or two items in the list. If you don't want to spend time coding a circle menu, just do it normally (put them anywhere), then send it to me and I'll do it.

I was wondering how come Essentials does not use RPG Maker XP native resolution and have an ability to switch to full screen?

These are all great comments.

BW's Bag has 6+2 halves items visible. HGSS has 6 items visible. DPPt has 7+2 halves visible.

If I remove the pocket icons from the top, I can show either 8 or 7+2 halves items at once (preferably 7+2 halves, I think). I like the HGSS icons, but they just take up too much space. It'd be possible to show just 4 of the pocket icons at once (in the top left in a row, with the item list filling up the top right), but then not all pocket icons are shown at once. Alternatively some kind of circle arrangement - the icons are just part of the background, so all they need to do is look pretty. I may just have to resort to using smaller icons.

I also considered adding a scroll bar, and may end up doing so (somehow - those things aren't easy to script).

If any of you want to play with my concepts and try to improve on them, go right ahead.

A second version of the summary screens is attached, with lighter purple/green. The moveset and some other information is off a Flaaffy, if you're interested.

p.claydon said:

I was wondering how come Essentials does not use RPG Maker XP native resolution and have an ability to switch to full screen?

Click to expand...

The GBA has its own native resolution, and Essentials mimicked that. Now it's going to mimic the DS native resolution. Going full screen just stretches the graphics even more, and isn't worth it.


EDIT: I've now attached an alternate Bag. The pocket icons would rotate as you go left/right, so that the current pocket is always at the top. How does that look? I'm still not convinced by it.

Maruno said:

EDIT: I've now attached an alternate Bag. The pocket icons would rotate as you go left/right, so that the current pocket is always at the top. How does that look? I'm still not convinced by it.

Click to expand...

I'm very iffy on the circle pockets to be honest. Aside from that, I like your bag screen better than what I came up with, but I'll still post it:



Note the smaller, linear pocket icons. That's the big deal here. They are the pocket icons used in Pokémon Platinum, and I think they're the most preferable; Not too big and flashy.

Whatever style you go with, I think it should be designed to be as flexible as possible.

You know what I always thought the screen needs? A scroll bar that you can use your mouse with. (Especially in Debug mode when setting encounters and what-not - if that is possible) It would make scrolling faster and easier on the average player. I know I hated holding down the arrow key just to get to the bottom of the bag when looking for an item...

IceGod64 said:

I'm very iffy on the circle pockets to be honest. Aside from that, I like your bag screen better than what I came up with, but I'll still post it:

Note the smaller, linear pocket icons. That's the big deal here. They are the pocket icons used in Pokémon Platinum, and I think they're the most preferable; Not too big and flashy.

Click to expand...

I agree. Linear icons are the way to go, I think. I just about managed to squeeze them in along with the scroll bar. I've attached two more versions.

Eternal Dreamer said:

You know what I always thought the screen needs? A scroll bar that you can use your mouse with. (Especially in Debug mode when setting encounters and what-not - if that is possible) It would make scrolling faster and easier on the average player. I know I hated holding down the arrow key just to get to the bottom of the bag when looking for an item...

Click to expand...

Touch screen is not going to be implemented, although my designs have been chosen to allow for (relatively) easy mouse support, i.e. big buttons, if anyone else wants to add it (right-click can be "Back", because there aren't any Back buttons in what I've come up with). If you want faster scrolling, use Page Up and Page Down.

Maruno said:

I agree. Linear icons are the way to go, I think. I just about managed to squeeze them in along with the scroll bar. I've attached two more versions.

Click to expand...

I'd say the first version; personally, I find it more appealing that way, especially with the name of the pocket available directly on the top of the screen and the pockets right underneath the bag itself.

Maruno said:

I agree. Linear icons are the way to go, I think. I just about managed to squeeze them in along with the scroll bar. I've attached two more versions.

Click to expand...

I vote second. I like the idea of having the pocket name right above the pocket icons, since typically, cycling through the different pockets, I would be looking at the list to see what Pocket I'm on, and with that big, clean label immediately above it, it makes it very easy to tell where I am or what's going on. Not to mention that's how the official games do it.

Maruno said:

If you want faster scrolling, use Page Up and Page Down.

Click to expand...

Hah...never thought of that. Thanks!