A Programmers Attempt at Art (Part 3) Main Menu Design

13
yogert96 #39 20 289

Before Reading this, please check out What Not to Do When You Make a Main Menu.

As you hopefully read in my post What Not to Do When You Make a Main Menu, I have struggled with the creation of a Main Menu.
I decided if I wanted to make a great game, I have to take Main Menu design off the "After-Thought" list, and put it on the "Top Priority" List.
Here are the results of my practice.

I didn't really use a tutorial for anything here, I did find a video that game me some inspiration. It can be found here: http://www.youtube.com/watch?v=Aqwhck0nfHA

All of these Menus were built in Paint.net. Also, keep in mind that these are not games that are released, or are ever going to be released. They are just demonstrations.


First Attempt. Flashlight on Brick




For a first attempt, I have to say this is pretty good. I used a "Color Burn" effect on the bricks, and Additive for the flashlight.
I used a pretty conventional way of laying text out, and I have to say it worked will with this type of menu. The alignment to the
left in the light of the flashlight is a very nice effect, making this a very promising start.

Second Attempt. Adding Game Assets to the Menu



I am a huge fan of having assets from a game in the main menu. Especially a playable character that can move around in the
main menu and interact with other objects in the game. I made the title and the buttons in Gimp using the Glossy Logo. The images came from
the Jungle Platformer Kit included with your purchase of Construct 2. Overall, this Menu looks pretty good, even if I didn't use my own assets.

Third Attempt. Simple Design



A desert background. With some clouds. Simply Laid out in an orderly fashion. Not too busy, and tells you a little bit about the
game when you look at it. The character was MADE in RPG Maker VX Ace, and the other images were from a desert tileset I found.
All Rights Reserved to the respected authors. I originally had a white text, but due to poor visibility, it was changed to brown.

Bonus Attempt. Pixel Space!




Just for fun I used the star background from my first APAAT(A Programmers Attempt at Art). It
turned out so nice, I decided to make a pixelated spaceship:



Here is a more game-friendly size:



Feel free to use it as some placement art in your game. Please leave any sugestions for the future of this series, and maybe even a main menu that you are particualy proud of.

Previous Entries:

Part 1
Part 2: Pixel Sprites

12
Statelessrich #30 27 143

Fellow Paint.net user here.
I definitely like the Hidden menu the most. Second best would be Pixel Space.

Here's the main menu for my game Morphine (art is not mine; I'm programmer, not an artist).
Minimalism was my goal. The game logo has a blinking colon, like on an alarm clock (which is central to the gameplay mechanics).
The menu as a whole conveys the atmosphere of the game. The character artwork ties into both the gameplay and narrative. Sleep (and dreams) is core to both, and the chains wrapped around the sleeping character are also part of the story.

13
yogert96 #39 20 289

Hey! Thank you for responding with some of your own work.

I really like your menu. The blinking on the colon, and the type of font that you use give it a very nice alarm clock effect. I also like how you replace the "i" in morphine with a colon. The way you aligned the buttons was great, in the sense that it gave some symmetry between the sleeping girl and the buttons.

It is good that you put some work into your main menu, and made it a part of your game by incorporating your story into it. That is the stuff I am trying to learn in this series.

BTW, I love the Fresh Prince avatar

13
yogert96 #39 20 289

BTW Everyone,

The next part in the series will be me making a complete asset package for a platformer project.

I plan on having a background, and platform, 2 enemies, a key, a door, a main menu, and a fully animated character built.

This will probably take time so please be patient.

13
andyman404 #55 33 216

The main menu may shape the player's (or a reviewer's) first (or only) impression of the game, especially if it is the game's title screen too. You want that impression to be as strong as possible.

I think the first, third, and bonus examples that yogert96 posted were alright - but I'd like to see discussion on how we might take them to the next level. To me, they still look like a good "programmer's attempt at art". What would we expect to see if a real artist or user experience expert did them?

I enjoyed the Morph:ne menu and its clever use of the alarm-clock-looking font. The dark minimalism works and set the scene well for the game. It made me curious and want to see what it was about.

But the second example from the original post, with the menu titled "Jungle", didn't feel right - didn't feel anything actually. I've never used Construct 2 or RPG Maker VX, so I don't know the technical limitations of what you can do with them, but as an exercise, here's my feedback and exploration on the menu for "Jungle", and what we might do to take it to the next level.

Here's that image again so we don't need to scroll up:


Font:

Why is there such an ordinary looking font for this game, which I presume to be a 2D sidescroller platformer adventure through a dark and dangerous jungle? (Sorry if it was meant to be a light, cheerful, and colorful danger-free romp through the jungle.) Does the font shown in the example add to the experience, the emotion, the feeling and character of the game? Not to me. It does not connote generic "adventure" even. I hope we're not thinking just: Ooh, arial bold with italics and blue gradient - now we're adventurous! If we are, then it is a definite sign that we should hire an artist. We gotta hold each other to a higher standard!

A wrong font sends a confusing message, and makes it look somewhat amateur and lazy. At least add some shading/shadowing/texture to make it look less flat. Never use plain old out-of-the-box system fonts if we can help it. It doesn't even have to be that fancy, just well typographied (example, example, example, example) Even if we put a gradient, texturing, shading, etc inside of a boring font, it still has a boring sillouette.

I'm picturing the word "Jungle" replaced with artwork of dense gnarled roots and with vines hanging off of it, formed in the shape of the word "Jungle". Primitive, raw, and messy, gritty, like a jungle. Again, the game title/logo may shape the first impression of the game - this is worth spending extra time on, or even hiring an artist to do right and do well.


Color Palette, Lighting:

What does the existing color palette say? The only place I normally see that palette is on a nice pretty sunset on the beach. (I live in Hawaii). With blue sky and water, orange sun, and fading into purple, with the nice mellow lightish green of grass. In the wrong context, or done in the wrong way, having all these colors is just clashy.

I'd recommend maybe using a color wheel such as this one to explore the palettes and reading up a little on color theory.

For a game about an adventure through the jungle, I might make the palette darker, reflecting the dark greens, browns, and shades of black of the undercanopy, with occasional shafts of light penetrating through the thick jungle canopy, or torches.

As an exercise, maybe try viewing the image through a grayscale filter, even a black/white threshold filter - see if the lighting and shadows have enough contrast and create enough emotion. Do the areas where we want the player to focus on seem apparent when we look at it this way? What can we do to make focal points stand out or evoke more feeling?


Sizing, Buttons, and call to action:

Why is "Play" so small and hidden, and "Control" and "Quit" so big? With a noisier background, we want to make these buttons more evident and easy to find and press. That light blue text might have contrasted with the purple (in a clashing way) gradient sky, but is difficult to distinguish against the trees background.

For lighter colored text, a bit of subtle shadow under (or around) the letters would help to bring it out more and increase legibility. Or a subtle glow around darker text would help to bring it out.

Assuming it is a game you can click or tap on (not just old-school keyboard-only that some indie games use), I'd make these buttons have backgrounds rather than just be labels. Perhaps with labels burned onto wood planks or logs (we should find something less cliche), with the "Play" being the biggest and most prominent (if the buttons are of different sizes) since it is what we want the player to do and what most players will want to initially when they open the game. Make it easy for them.


Animation:

I know its hard to show animation in screenshots, but animation adds a lot if done well. Even with simple 2D sprites, we can make some trees shake a little, as if some creature were behind it and were disturbing the undergrowth. Or more low frequency general movement like the clouds going by, or trees swaying subtly. The screen might shake slightly from a deafening nearby lion roar. Explore what we can do to heighten the emotion we want the viewer to feel when they are on the menu screen.


Sounds:

What sound is playing in the background to add to the experience? What else can we add besides for just our game music? For this example, we can add environmental sounds - wind, bird/animal calls, maybe distant tribal drums that fade in once in a while. If we're using stereo sound, we can make an annoying mosquito buzz fly around, left/right/close/far. Combine the sounds with the animations. If we have the zots (time, budget, skills, resources), have the mosquito continually chase after and buzz around your mouse cursor, trying to land on it and suck some blood if the cursor stands still for too long.


Smells:
I mention this jokingly, but smell is heavily linked with emotion. Think about the smells that convey the experience/emotion we want to create. Then think about what things remind us of the smell in our game's general context? That could give us some ideas of how to convey the emotion.

13
andyman404 #55 33 216

On a funny note - programmer's bad attempt at art, but done with feeling (from the Unity live training sessions). It's stick figure art, but captures emotion and tells the story so well even though it is so minimal. :)

13
yogert96 #39 20 289

Hey andyman404, thank you for the reply.

It is pretty cool that you are from Hawaii. I have spent some time the mysterious jungles of Kauai myself, but that was not the effect that was trying to be reached in the above main menu.

I agree with you on the position of the buttons, but that is about it. It was late at night, and it seems as though I made a mistake with sizing and positioning the play button. I apologize for that.

I don't know about you, but by OBJECTIVLY looking at the above main menu I can immediately tell it is a cartoony game. The font was not Arial, and it was also not italicized. Also, if you read what I wrote about the picture, I was just attempting to demonstrate how to insert game graphics into a main menu. I could have changed the color palette, but I felt like using the graphics from the assets pack that is included with the purchase of Construct 2.

As you said, animations are incredibly difficult to show in screenshots, especially with my limited knowledge of .gif images. And as for the sound and smell, I was demonstrating the use of art in the main menu, not the other four senses. It would be a waste of time to bundle sound files with the pictures of the main menus, and don't think it would be really appreciated either.

One final thought, I really don't know what type of game this is, I have no plans of building it, so putting time into game-play, and trying to incorporate that into a main menu would be a waste of time if it is never published.

Thank you again for the reply, sorry to sound cold, but I spent a good three days on these menu's and felt I should back up my work.

Please leave any suggestions below for a future post (Logo design is on the list to be covered), and look out for my platformer asset pack which will contain a demo level and a main menu(with music).



13
andyman404 #55 33 216

Yes, I understand it would be a waste of time to actually make the real menu with all the aspects, and don't expect anyone to do it as just an exercise. Screenshots, mockups, or even a handdrawn conceptual sketch are a fine start. It is useful to simply write down and discuss these other aspects that we cannot put in a screenshot. (Kudos on taking the time on making real menus btw).

I understood that your screenshots were just exercises with no plans of building the real game. As I said, my post was an exploration/exercise on what we might think about if we were to build the menu screen for a real game, and how we might step it up to the next level. That's the kind of discussion that I'd want to see in the series, and what I thought you were going for in your Programmer's Attempt at Art series, especially with your analysis and sharing of lessons learned in your What Not To Do When You Make a Main Menu post.

Discussion:


1. For a platformer game about an adventure through a dark and dangerous forest (yes I realize you may have been intending something different, and apologized for it in advance if you read what I wrote), What would you agree/disagree on with the direction I discussed, and why? What else would you do to ramp it up to the next level?

2. On the other hand, let's say the game, "Jungle", is a bright cartoony Mario-Brothers / Donkey Kong style platformer through a happy-happy-joy-joy disney jungle where everyone is singing, the monkeys are swinging from trees, brightly colored snails are dancing, and a strange-looking happy-face character with pink sneakers is dancing around... [Ugggh, please kill me now!] What would we do to bring the menu screen up to the next level for such a game? What can we improve upon?

(You lurkers, we're waiting to hear from you. Don't be shy.)

12
Statelessrich #30 27 143

I decided to add interactivity to my menu. There are several hotspots you can click on to get a little bit of story before you actually start the game.
This is something that I predict most players won't discover, so it'll be a pleasant surprise for those who do.


Showing 1 - 9 of 9