top of page
Click_To_Play Menu System.
School Project:
Task: Create a Menu System for a Development Crew. Specifically, I must make a menu to show off my skills for the fictional group Unruly Ember.
In the assignment, I must create either a Science-Fiction, Fantasy, or "Horror" themed menu. I have five weeks to create this menu, and it will be made using the Unreal Engine. Before I start developing the menu itself, I need to make sure I understand the brief. To show this, I'll explain what rules I need to follow that the brief says:
1. Time Constraints
Time is an important problem I will have to contend with, as I have a limited 5 weeks of total time. So, to try and reduce the amount of work I'll have to do at school, I'll do extra implementation, and art creation at home.
2. PEGI Guidelines
The PEGI rating is for my menu should be twelve according to the brief (PEGI is the group that makes game ratings for content.)
So, no violence, and gore, and adult topics.
To explain what CAN be safely used in my menu, I can have some violence, if it is not graphically violent, and I am allowed to have minor scenes of stressful tension.
Decapitation, or realistic bodily harm is NOT tolerated. That's classified as PEGI 16 to 18.
Hitting someone with a turnip with a goofy face? That's violence that will be rated at PEGI 12 or below.
Part Two
In this part, I am required to show a list of menus that inspired me, and my work.
​
​
​
I decided to show the main menus of a few games I particularly like, although I mostly picked them for their artwork.
​
​
​
1. The Dandara menu:
​
​
Most of the menus here follow a vertical layout,
and this is not an exception.
​
This menu also shows the artistic approach of having an image begin on
the left of the main title block, and spread over the text.
​
​
​
​
2. The Infinity Blade Menu:
​
​
​
This menu is populated with a wide screen background image meant to draw your eyes to the plot-important tower.
​
Although this doesn't show the buttons, as the menu for Infinity Blade has a slow fade-in for the buttons,
the framing for this menu's buttons does also follow the vertical layout.
Moodboards
3. Bread Game:
This is the main menu for a project I created in my own time, "The Bread Game". It is here to show how I also, in my own work, use the vertical button layout.
4. Cave Story's Menu.
As I was advised that using a menu I created was not a good idea, as it didn't show any research, So, as a quick "new" menu I chose, I picked the menu for the game Cave Story.
When you first see the menu, you realise a visual fact about it:
This is yet another game that uses the vertical button layout. I look at the game that inspired Cave Story, the game Metroid, and you realise that this is a vertical layout as well!
There seems to be some quality of this type of menu that I like which keeps causing me to choose menus with this layout, instead of other menus that I could have chosen.
LAYOUTS:
After this realisation that I think vertical layouts are hot stuff, I now have to set up a flowchart layout.
This is an overcomplicated flowchart, compared to the fact that I am unskilled in Unreal, and so to a complete newcomer, creating a menu of this caliber would be incredibly hard.
Return
VISUAL MENU LAYOUTS:
Here are two menu layouts, both vertical, with a few notes on design plans written in the margins
These are two pages of feedback on Menu Layouts One and Two, along with an Asset List for fleshing out the two (soon to be three) designs.
I did not edit these before posting, so there's a lot of rushed repeating.
There's not much difference in the feedback pages.
Part Three
Asset List and Half_Term Designs
I had written out the site in a way to help with readability, and combined the work of weeks 2 and 3 into one section due to the similar subject matters.
This means there's no specific section on week 3.
Because of that, this section represents week 4's work.
I made two layouts for asset lists. A Sci-Fi themed, and a Horror themed layout. The page underneath here is the page of Color schemes, some button shape ideas, and a small sketch of the Horror's Ideal layout.
Why did I not use a medieval asset list?
If i made that choice, I'd have nearly nothing to work with, as everything would either look like Sir Lamorak's Quest, an old mobile game that most of my gaming love came from, or Infinity Blade, an Unreal Engine mobile game that I heavily admire, (Shown Above)
So, to avoid replicating the menus of games I admire, I went with the other two choices.
Also it gave me a chance to make some Outpost Gamma art.
I'd never pass up that chance.
This is where the color designs created in week 2 are flat out said for once:
Horror's Grey shades, along with a hint of red, for effect.
This was changed to Greys, browns, and a bit of yellow.
The Sci-Fi plan explains the desert-like colors, which mostly means browns, yellows, creams, and a few oranges.
I drew both pages digitally, and seperated all the respective parts, to make a set of asset lists.
I used this "Horror" asset list, colored in Grey and Brown Hues, for the Click-To-Play Menu.
As you may have noticed, I took it directly from the source image I drew a day before adding this art
Though, at the time, I didn't have any other art for the options, or confirmation text, due to an error with loadng the sprites.
I did not use the Sci-fi asset list, fearing it would be too complicated.
I made the same error of not having sprites for different scenes, and no confirmation text, due to a loading error
I drew this Sci-fi image, and colour scheme based off of an old tabletop board-game of the same name, Outpost Gamma.
I didn't use it, as there was a ridiculous number of layered sprites in this image's files.
​
But, what I DID do was make a wicked brown hued color scheme!
This asset list features:
1. Three buttons of variable shapes and sizes! (Cylinder, sign, and head-thing)
2. Three colored texts for Start, Options, and Quit!
3. A Handdrawn background! (handdrawn as in, I used my hands to move the pen I used)
4. The words Outpost Gamma in BIG letters!
and
5. A gamma radiation symbol, that looks like a massive yellow "Y"! FUN!
*I say it was too "complicated" and that means the layers were all wacky, and if I was going to change how a button looked as you pressed it, I'd have to change the Button, and the Shadows on the button, and the button's text.
I took the inspiration off of this Heritage game: Outpost Gamma.
The desert-set space-survival adventure game gave me the brown, sandy colors and environs.
Part 5
The Final Stretch.
In which it is the final week of the Click-To-Play Menu Project.
Tap for a link
This should be checked using the Gibbs model! (of reflection)
I should know:
1. What I did, and how well I think I did it.
2. What I think I did well, and what sucks horribly, and what I should change.
3. I should know, and be able to assess what I should do to fix my errors and issues,
and
4. how I should go and fix the issues in a feasible, realistic way.
Now, the way that I did reflections during this assignment is that I noted my errors, shorthands, and what went fine while creating the project during every week, depending on the week's material
THE MENU VIDEO:
This is the video showing the Click-To-Play Menu I was supposed to have by the end of this assignment.
The video shows the menu, with the three buttons, in two forms:
Seconds 00 to 38 show the menu with all buttons in working order, and connected to some placehold scenes, to show that they work.
Seconds 39 (when the first screen is pulled down) to 58 shows the same menu wired up to a game, with the Options button unconnected to show that the button turns to red upon being clicked.
We note that there is no sound, as I didn't record any, or an affirmation on leaving the game. This is due to a small shortsight, because I had, while drafting out what I needed to create, completely forgot that sound, and affirmation tabs should be in a menu.
So, how do we fix that?
Simple! I just add in some Placeholders!
Here is a video of the first menu, featuring a confirmation menu placeholder.
In the placehold, the quit game button is the top one, and the return to menu is on the botton, so I had them in that positioning in the blueprint.
That meant that my quit game button... brought you to the main menu, as I had accidentally set the outcomes to the wrong slots, and so, the outcomes reversed.
When I fixed the problem by simply reversing which button input caused which effect, it led to the video you see above.
The fourth Re-do:
This is the video showing the Click-To-Play Menu I was supposed to have by the end of this assignment.
I have confirmation screens, which is new and novel to me, as I have never made one before now.
Part the Last.
As it had been noted before, I was setting up my notes wrong, and week 2 and 3 were combined into one large section.
This had unforseen consequences, as now my website is ever-so-slightly off, and is now one section too short.
WARNING NOTE. As I had made all the art by hand, and since there was an error with importing the assets, I never made any art for my "placeholder" confirmation menu, and options screen. In my original plan, there wasn't really going to be an options, just a credits button., so I never thought to make one.
So, my bad there.
Assessment Notes, and Feedback
Now at the end, my experience is that I did a reasonable job of a menu. I was told to design a menu that would fall into a ranking of PEGI 12 or less, and I think my menu has hit that mark.
I feel that one of my mai issues was that I would lose track of what to work on, or not completely think over all my choices for the assignment.
Personally, by reflecting, I did a nice job on the art assets, and with this task being the first time I used a drawing device for a school project, I think I did a pretty good job with creating the art to follow the ideation designs.
But, even though the assets were good, I didn't plan properly, and I missed out on being able to make the Confirmation Scene art assets, and I made no art assets that could be used for an Options scene.
That was an issue that arose from not planning out and doing everything well enough, and I should work to not repeat that occurence.
I will try to fix these issues by applying more time to properly implementing my designs, and working to note down plans for every eventuality
(IN the future, I practically did this by setting up a menu system in the Tiny Rooms project under the name of the Q is For Query widget. It was enjoyable to make, and was a practical application of things learned in this assignment.)
And so, the project is completed.
bottom of page