From my initial Crosshair development I ended up deciding that I wanted to create a crosshair that was simple in it's design yet unique. Therefore when I was drawing up my various ideas I tried to keep my sketches geometric and easily interpeted by others. In the final stages of my drawing I highlighted a few designs that I preferred and was going to develop further in Photoshop. So when it got to working in Photoshop I did two designs that were heavily focussed around the simple shape of a circle.
The image to the right displays the 2 final outcomes I ended up with, one with 4 crescent moons focussed around a circle and another with 4 banana-like shapes. I think for my final game I'm going to choose the crescent design as the 4 shapes resembles more of a hidden circle than the banana design does. Additionally I find that the crescent design is more coherent with conventional crosshairs found in all types of video games. For example, the image to the right displays the UI from Team Fortress 2, the game designers there decided to go for a more simple approach to their crosshair with a circle that has 4 spaced out segments removed, resembling an invisible X-shape through the circle.
Now in order to implement the design within Unity I needed to have a script that would hide the default windows mouse cursor and replace it with my design within the game. Additionally I needed the new design to act the same as the default cursor by following it around wherever the user would move their mouse to. Whilst trawling around on the interwebs I found a script that could be attached to the main camera (so it used the 2D GUI plane) and used a variable to display any design I wanted for my crosshair. The key issue though was that it was optimised for a set screen size but I personally wanted it to be more flexible around any size the game may find itself at. Therefore I changed the math.clamp for the position of the mouse to start at the top left of the gamespace and be the width/height of the current screen size. The image above shows the code that I used for the crosshair to be put within Unity.
Friday, 31 May 2013
Wednesday, 29 May 2013
Creating the Info Page
To help me create the design to the information page I'm going to use the layout I used for my 3D Sound Toy. Of course the information and content will be different but the explanation of the Interface elements and Controls will remain. Firstly though, I need to develop the Interface elements that will be shown ingame and on the info page, and also structure out what is going to be exactly shown on the page itself. The spaced out text below shows the skeleton of what I'm going to be displaying to the user on the info page.
After much spacing out and resizing I have finished what I needed to explain on my information
page. As you can see by looking at the image to the right I have taken out the initially proposed "Ingame Icons" section. I did this because I felt that it's general video game etiquette to understand what a crosshair/health bar is. If somebody came across and didn't understand those icons with some trial and error they quickly would.
The other (minimised) image to the right is the code that I used for laying out the info page, the key differences to the previous info page I did for the 3D sound toy is the paragraph text I had to implement, the logo and the new exit button.
Cure Logo
Input Controls
- [IMG] Use W-A-S-D to move the Main Character around the Environment
- [IMG] Click the Left Mouse Button to fire an arrow in the direction of the crosshair
- [IMG] Use the Space-Bar to jump around the environment
In-Game Icons
- [IMG] This displays how much health the Main character has left
- [IMG] This is the Crosshair for aiming towards your target.
After much spacing out and resizing I have finished what I needed to explain on my information
page. As you can see by looking at the image to the right I have taken out the initially proposed "Ingame Icons" section. I did this because I felt that it's general video game etiquette to understand what a crosshair/health bar is. If somebody came across and didn't understand those icons with some trial and error they quickly would.
The other (minimised) image to the right is the code that I used for laying out the info page, the key differences to the previous info page I did for the 3D sound toy is the paragraph text I had to implement, the logo and the new exit button.
Sunday, 26 May 2013
Creating the Menu and Logo
With my previous experience with Unity from the Interactive Media Authoring Unit I've started to develop the Menu system for my game. If my evidence seems lacking explanation and detail, please refer to the development blog post with Unity here.
Because I have finished developing my logo on paper, I've decided to now use photoshop to refine the final outcome of the title and buttons for the menu screen. The process to doing this meant that I was going to take the assets I drew and go over them with the Pen tool.
The image to the right displays the elixir I drew up in my sketchbook and am now currently developing in Photoshop this moment. To help me develop the background logo icon I also looked towards the Health Elixir from the MMORPG Tera.
With thorough usage of the Pen Tool and Blending Options (e.g. Gradient Overlay), I've managed to create an elixir that will look perfect for the background of my logo.
By using a simple stroke I've managed to outline the font I have chosen for the type. For the smoke I used the first 4 steps of this tutorial. To sum up, I took a shape, blurred it and liquified it after.
Instead of using the GUI font styles Unity offered I decided to use images for my buttons as they are going to be subject to change. For the Menu layout I used a similar design as I used for my 3D sound toy however as I was going to be including a logo and new images I needed to space out my elements differently. In this case I decided to space out my elements differently around a photoshop region, this allowed me to have buttons that were not confined to a box like in my 3D Sound toy. Adittionally I also added on a hover affect that this time around did not change the colour however gave the image 2 stars either side and offset the image down by 10 pixels. By looking at the video to the top right you can see how I designed my menu differently to my 3D sound toy. This time around I found it quite hard to space out and get the sizings right as it wasn't dependant on the button box I had beforehand but the flexibility of the font style.
After a simple implementation of the logo with the aide of this Unity help webpage I have more or less completed a simple Menu for my 2.5D Game! To the right is an image of how the Final Menu looks and below that is the code that puts it together.
Because I have finished developing my logo on paper, I've decided to now use photoshop to refine the final outcome of the title and buttons for the menu screen. The process to doing this meant that I was going to take the assets I drew and go over them with the Pen tool.
The image to the right displays the elixir I drew up in my sketchbook and am now currently developing in Photoshop this moment. To help me develop the background logo icon I also looked towards the Health Elixir from the MMORPG Tera.
With thorough usage of the Pen Tool and Blending Options (e.g. Gradient Overlay), I've managed to create an elixir that will look perfect for the background of my logo.
By using a simple stroke I've managed to outline the font I have chosen for the type. For the smoke I used the first 4 steps of this tutorial. To sum up, I took a shape, blurred it and liquified it after.
After a simple implementation of the logo with the aide of this Unity help webpage I have more or less completed a simple Menu for my 2.5D Game! To the right is an image of how the Final Menu looks and below that is the code that puts it together.
Saturday, 25 May 2013
Sketching out the Interface Elements
Over the past few weeks I have been sketching out various ideas for the specific interface elements to my game. With using the Mindmap I previously drew out as a guide, I have created a whole plethora of interface elements that I am going to be selecting and developing upon within Photoshop.
Crosshair Designs
Menu Design
Crosshair Designs
Menu Design
Hit Animation/Objective Hints/Health Bars
Wednesday, 8 May 2013
Mindmap Function List for Interface Elements
(08/05/2013) During my research I found a very useful article that went into the different design stages of creating an "Organism Interface". This basically meaning an Interface that is strong enough to take the user between the plane of reality and the game's narrative. The first stage of this section talks about the creation process of the character and how they deal with enemies/obstacles that enter within the screen. From the various focus sessions I have had with my other 2 team members we have devised that the character will use their bow and arrow to attack and progress through the starting level we'll be creating. More infomation on the creation of the character will be found in the Game Design Document Mark Collins has put up together for the project, in the mean-time however I will be focussing on the various different interface elements that will be needed.
Below is a Mind-map detailing all the proposed and possible interface functions for the game itself.
Below is a Mind-map detailing all the proposed and possible interface functions for the game itself.
Subscribe to:
Posts (Atom)