IOCT Masters in Creative Technogies
Major Project
An augmented reality game based on "Breakout"

Showing posts with label design ideas. Show all posts
Showing posts with label design ideas. Show all posts

Wednesday, 30 July 2008

Testing

The IOCT Masters Showcase Event at The Phoenix on Friday, 25th of July 2008 offered an opportunity to demonstrate the game and get feedback from players.

Feedback was extremely positive, with people staying to play the game for a while. Comments suggested that the game was interesting to play and once you had started playing you didn’t want to stop, and also suggested it would be better to play the game on a faster computer in order for the game to run slightly smoother. This is an issue I was already aware of and was just demonstrating the game on the laptop I have been using to code it on. Ideally, I would have demonstrated the game on a desktop computer, however, I did not have access to one during the event.

Other comments suggested that people liked the design of the bricks in the different levels, as I had created posters to show print screens of the different levels. People were keen to play the game and interested in how the object detection worked, asking about how the movement of the AIBO ball (used as I only had a limited space in which to demonstrate my work) controlled the paddle on the screen.

Startup screen

The startup screen is the first screen that the player sees. I wanted to create a bright, appealing image for the startup screen that also reflected the game. I tried some designs using Microsoft Paintbrush, as I wanted the graphics for this screen to be in keeping with the graphics in the rest of the game.

Designs from Microsoft Paintbrush:








































Having chosen a design I liked, I developed this and took the file into Adobe Photoshop to add a lighting effect and the titles. The effect and titles add to the creative effect of the image.




The final design for the startup screen:










To use the image I have created as the startup screen I have used the “cvLoadImage” code to copy the image pixel by pixel, one colour channel at a time and load it to the screen.



Tuesday, 10 June 2008

Creating the ball

The design ideas for the ball and testing suggested that the ball should be yellow, to ensure that it stands out against the background of the game board, the video image of the players.

The ball has the same diameter (in pixels) as the height of the paddle, to keep continuity and for aesthetic purposes. A small white rectangle has been added to the yellow ball to create a pseudo 3D effect and add detail to the ball.

The ball has been coded to move only within the borders of the game board. This required some mathematical work, to calculate the velocity of the ball, it's projected position from an initial state to the next during one time step, the distance the ball travels in the x and y axis in a single time step and when it should rebound from the border, accounting for the radius of the ball.

Creating the paddle

The paddle consists of a rectangle and two circles, one at either end of the rectangle. This gives the paddle curved edges, which makes it more visually interesting than just a rectangular design.

The paddle is created using a number of variables. These variables are used to calculate the position of the paddle, the distances it can travel along the x axis inside of the game board and the way in which it interacts with the ball, through collision detection.

The design ideas for the paddle include a highlight and lowlight stripe in the code to add detail and to help create the pseudo 3D effect.

Creating the game board

Having considered various screen sizes for the game I have decided to use a 640x480 window, as this is the largest available and will make the game easier to see.

Design ideas:
  • Blue border along the top and the two vertical sides of the screen
  • No border along the bottom of the screen, as falling off the bottom of the screen leads to the players losing a "life"
Borders:
  • 20 pixels in total in height (for top border) and in width (for vertical borders)
  • Lighter blue and darker blue lines add pseudo 3D effect
  • Each highlight or lowlight is made of three lines of varying length, to create the pseudo 3D effect

Monday, 2 June 2008

Gantt Chart

Planning

I've been busy planning my ideas for the project. I've been creating initial design ideas for the game board/screen and have been trying to work out where the objects will be placed on the screen, how they will interact with one another and specifiying some names for key variables.

The project is heavily based on mathematics, to understand the collision detection and spatial position of objects on the screen. I have been researching and working in my logbook at this planning stage so that I have firm ideas in place before trying to code the game.