New Overlay - Designers Wanted!

Page of 2 > 


Joined Oct 3, 2012


December 28 2013, 9:26pm

I am looking to completely rewrite the overlay currently used ingame. It's bulky and retro-looking, but fairly intrusive to the game and also not very user-friendly. I'm looking to YOU, RA community, for your suggestions and ideas of what would look great as an overlay!

As you can tell, this is in dire need of an overhaul :P

Any ideas very, very welcome


Joined Oct 3, 2012


December 28 2013, 9:31pm

To sum up: the overlay has many responsibilities, including:

* Achievements
* Leaderboards
* Friends
* News
* Messages
* Achievement Examine
* Leaderboard Examine

And the ingame overlay has several responsibilities:
* Loading a fresh set of achievements for a game
* Indicating you have earned an achievement (including error messages)
* Showing you that a leaderboard is available
* Showing your progress towards a leaderboard entry
* Showing the leaderboard scoreboard after submitting your score
* Showing your leaderboard entry has been cancelled
* Regular error messages (You are disconnected, etc)

In future it would be nice to have:
* Showing when a friend has come online/is playing a similar/same game
* Showing when you have received a new message
* Others?

Joined Oct 13, 2013

December 29 2013, 1:24am

A good way to make it easier to read, could be using tables or divs, like this

Joined Jul 20, 2013

December 29 2013, 5:43am, edited April 22 2014, 6:39pm

Here's one so far, I'll show the rest eventually.
Main Achievement window:
- With Avatar
- No Avatar
Left: How it appears now
Middle: How it looks without it
Right: My idea
* Full black BG at 90% opacity(it starts to get confusing at lower opacities)
* Smaller text everywhere (I think the text that's being used now should be smaller for sure, it looks much larger than it needs to be and is usually cut off)
^ I used Arial font, but it's really close to what you're using.
* 2px black outline on all text
* See color changes for yourself
* Highlighted achievement has a white background at 25% opacity(on top of black BG), intended no text color change upon highlight.
Edit: I forgot to add A,B,Left,Right Navigation. I added it below:
- Navigation
* A+B only visible on the highlighted achievement (On different pages maybe you can put it right below Left/Right on this image)
* Left+Right visible under title(Achievements)

I'm going to sleep, but this is a start!
Welcome/ROM Load message
* Smaller text, 2px black outline
* Black BG at 66% opacity
* Comma added after "Welcome back"

Leaderboard Active / Cancelled
* Condensed leaderboard notification
* Smaller text, 2px black outline
* Black BG at 66% opacity
+ This would also mean pressing Esc during an active leaderboard will open up the "Leaderboard Examine" page of the first of many possible active leaderboards. +a Left/Right navigation will be displayed under "Leaderboard Examine" to switch between active leaderboards only.
Edit: Nvm you can still cycle through all leaderboards on that page with up/down, maybe a whole new page just for active leaderboards.

Leaderboard Results
* Smaller text, 2px black outline
* Black BG at 66% opacity
* Highlighted result has white BG at 50% opacity (on top of the black BG)
* Title of results box is not highlighted

Achievement Popup | Newer
* IMPORTANT: If you want to know the new text size, just know that 3 lines of text + text outline should fit along the height of the achievement icon!
* Black BG at 66% opacity


Joined Oct 3, 2012


December 29 2013, 7:14pm

Looking good brian! So it looks like this would need:
* text shadowing

How would you like the animations to play out? (i.e. how should these dialogs appear on-screen, including every element of it?) How should it scale when on a larger screen?

Joined Jul 20, 2013

December 29 2013, 10:34pm

Animations don't need to change. Not sure exactly what you mean. How they open? Like sliding up from the bottom? Or an element snapping to a corner?

I think text should scale differently with window resolution. For example 2x=16px text + 2px outline and 1x=8px text + 1px outline, snapping to the same locations. Although, 3x or higher can match 2x's settings, letting you see more data. I hope this makes sense.


Joined Oct 3, 2012


January 26 2014, 10:21pm

I didn't even mention the most important one: the achievement popup!

Here's a first-pass:

Joined Oct 13, 2013

April 20 2014, 1:16am

Are you still planning redesign? Maybe achievements pop-up in a "real retro" style, pixelated, would seems good. Something similar to this, but in your own style, another font, etc:

Joined Oct 13, 2013

April 21 2014, 5:49am, edited April 21 2014, 5:51am

My suggestion is something like this. The pop-up is less intrusive, and even with the trophy as new element, the thumbnails are there, but a bit smaller (45 pixels wide, more or less). The font used is the same from Chrono Trigger, so I suppose it can't be used, but other similar (pixelated but legible enough in small texts) would be fine.

Maybe you could even create trophies with levels (golden, silver, bronze) to show the level of difficulty in each achievement.

EDIT: I forgot "E" on "achiEvement", but the idea is here!

Joined Feb 10, 2014

April 21 2014, 11:00am, edited April 21 2014, 11:00am

I really like l3m35's unlock :)

I also want to restate my request/suggestion to add a mastery notification so that you know you've gotten all the cheevs! Nothing fancy, but just something so you know you've gotten everything!

Joined Feb 5, 2014

April 21 2014, 5:01pm

I personally prefer a smaller profile for the popup, otherwise it takes a large amount of the screenspace.

I like Steam's popup size. Look at this screenshot. I run a smaller res than that, but it blocks a tiny amount of the screen!

Compare that with even this one, which is still smaller than all the proposed UIs, and that blog post is talking about how big it is!

Granted, if you run Steam games at 800x600 or some smaller resolution, the popup is significantly larger on the screen. Still though, I'm pretty sure it's small compared to these.

Joined Jul 20, 2013

April 21 2014, 6:46pm, edited April 21 2014, 6:50pm

@UNHchabo, Comparison. This is after I already made the text smaller. We could probably go even smaller with it and it would be smaller than Steam's. BUT it would be tougher to read on a non-solid background if the text is really small, and I'm really pushing for a transparent one. Text could get smaller, but not as small as Steam's. Overall it's already less intrusive than Steam's, or nearly the same, and with smaller text it should be much better.

Joined Jul 14, 2013

April 22 2014, 2:36pm, edited April 22 2014, 5:46pm

I agree with transparent backgrounds (so you can still see the gameplay behind it), and the achievement images definitely need to remain square. I'm really digging Brian's redesign. As far as animations go, they already look great the way they are.

But if you are looking to add to the existing animation, taking a small image of the current gameplay screen and smoothly snapping it into the overlay (any time the user invokes the overlay) could be very neat and add to the presentation.

Joined Feb 5, 2014

April 22 2014, 3:39pm

l3m35's suggestions with bitmap fonts, pixelated style etc. really put the "retro" into retro-achievements.
Btw. Overdrive by TiTAN is a really nice demo on the Genesis platform :)

Joined Jul 5, 2013

April 22 2014, 5:36pm

I think that whatever we come up with, it should be customizable as one design will not be agreeable upon the entire community. Some love the retro style of the X360 pop-ups, while others prefer the transparent versions. I think this type of project should give the ability to tailor to the users preferences instead of saying that just one design will rule them all. I personally like both Brian's and l3m35's designs equally.
Page of 2 > 

You must log in before you can join this conversation.