Just another design blog?


Game Engines – Space Invaders

Hi everybody, it's been a long time, I know, but the development of the Final Project 
and summer vacations kept me away to update my blog.
Today's topic is Game Engines' final project. During Game Engines class we learnt how 
to develop video games in XNA.
For the people who don't know what am I talking about, XNA is a great video game development 
framework released by Microsoft and based on C# programming language. 
Its main strengths are:
  • It grants the opportunity to develop video games for both MS Windows and MS Xbox 360.
  • It is based on C# (an Object Oriented programming language) and runs on a virtual 
    machine (no memory management as in C).
  • Microsoft's development community is huge and available to help newcomers.
For more information please visit the link below:
During the semester we had lessons and laboratories where we learnt:
  • C# basics
  • XNA basics
  • How to manage sprite animations
  • How to manage player inputs
  • How to develop simple physics algorithms, in order to develop our small engine
  • How to manage collisions between objects
  • How to manage cameras
  • How to manage sounds
  • How to create a small game menu
After a full immersion of C# programming, to be honest my developing skills were a little 
bit rusty at the beginning of the module, we had our final project assignment: to remake one 
of the first arcade games. After a long time thinking me and Marc decided to choose Space 
Invaders (1978 version).
We started looking for the original sprites and, luckily for us, we managed to find the 
complete sprite-sheet on Space Invaders fan sites.
Next step was the development of the game mechanics. In order to achieve our goal we started 
analyzing the game by playing one of the many online flash remakes. After that, we started 
planning a set of objects that represent the whole game. Below you can find a diagram of 
the classes:

Here is a brief explanation of the behaviour of each class:
  • Spaceship: this class manages the spaceship in the bottom part of the screen 
    (controlled by the player) by managing movements, controls, shooting bullet conditions, 
    collisions with enemies' bullets, player's lives and score.
  • Bullet:this class manages the bullet's behaviour and movements.
  • EnemyManager: this class manages the whole group of enemies, their movements, speed and 
    score value. It also manages whether or not an enemy can shoot a bullet and the 
    collisions between each enemy and the bullets shot by the spaceship.
  • Enemy: this is the simplest representation of an enemy and it provides the simple 
    functionalities required by the EnemyManager.
  • BonusEnemy: this class represents the UFO that flies at the very top of the screen 
    and if hit it provides a huge amount of points.
  • EnemyBullet: this class is almost identical to spaceship's Bullet with the only 
    difference of the used sprite and movement behaviour.
  • Shield: this class represents one of the green shields just on top of the spaceship and 
    it manages the collisions between spaceship's Bullet and EnemyBullet, deciding when a 
    single piece of it has been destroyed.
  • ShieldPart: this is the smallest part of the shield and it manages the amount of HP 
    (hit points) of a shield.
  • AnimationPlayer: this class provides a set of controls needed to manage a sprite 
  • Animation: this class creates a sprite animation starting from a sprite sheet.
About the game menu we customized an example provided by Microsoft development website called
Game State Management.
To be honest one of the hardest parts of the project was merging our game mechanics classes 
and the game menu example. First attempts were a disaster, but after a couple of days of 
blood and tears we managed to master it.
If you want to have a look of what we have done, you can find a video of the game in action 
in the link below:
Space Invaders - The Remake
While, if you have some programming skill or if you just want to know how to make a video game
in XNA in the link below you can find the source code of our project:
Space Invaders Source Code
In order to import it and work on it you will need:
All the software above is legally free to download from Microsoft website.
Next time I will talk about the Final Project, a brand new video game called Shards. Stay tuned!!!

Game Production – Prince of Persia – Part 3

I'm sorry if I didn't post for a while but, the end last sprint for Game Production's
project and the end of the semester, took most of my time...
Anyway, let's continue and finish talking about the remake of Prince of Persia
(1989 version) in 2D.
In order to finish the development of the game features, we needed to develop two last but
tricky features: Prince's combat mechanics and enemies' AI.
After this task the last thing to do was develop more content. Luckily, we managed to find
the map of the first level of the original game and, since we had all the elements required
to create it, we developed and improved it by making it more difficult.

Below you can find the last 3 videos:
Prince of Persia - Build 6
Prince of Persia - Build 7
Prince of Persia - Build 8
While here you can find our last build.

At the end of this last development sprint our lecturer asked us to focus on the
advertisement of our game by asking to all of us to reach the target of at least 200 likes
on our Facebook page.
In order to do that we advertised our game by posting on Prince of Persia's social networks'
fan pages and forums, we also created Prince of Persia based memes.
Anyway, thanks to the mutual help all the groups of the class gave to each other and the
help provided by few indie game developers, we managed to reach 144 likes in the last month.

Next post will be about another remake, Space Invaders!!!
Stay tuned!!

Game Production – Prince of Persia – Part 2

After a while since the last post related to Game Production module I'm glad to announce the
open beta of our game.

During the last month we have internally released 3 new builds where we have completely
revamped the control system, developed the first level and added a lot of new features:
- New prince animations
- Threats (Spikes, Guillotines and Falling Tiles)
- Gates triggered by buttons
- End level gate
- Interactive objects (Good and Bad Potions, Swords)

Here you can find the videos of the last 3 builds:
Prince of Persia - Build 3
Prince of Persia - Build 4
Prince of Persia - Build 5

If you want to help us improving the gameplay experience join us as beta tester by downloading
our latest build and filling a survey about your experience.

You can find below the control list:
- Left/Right: Run left/right
- Up: Vertical Jump/Ledge Climb
- Down: Crouch
- Space: Standing Jump
- Left/Right + Space: Running Jump
- Left/Right + Shift: Creep/Walk
- Down + Left/Right: Crouch step
- Ctrl: interact with object

We are going to release new builds on a weekly base every Wednesday on our Facebook page
Prince of Persia 2D. Don't miss them out!!!

Shards – Final Project Idea Proposal

During the last four weeks me, Marc and Meghann spent most of our time thinking about the
Final Project idea proposal.
What we presented is a concept for a platform game called Shards, where a 13 years old boy has
to pursue the quest of waking his brother from a coma by collecting mirror shards spread all
over two parallel worlds, the normal world and the hallucinations' world created by the fervid
and split mind of our main character.

For more information about the story and the game features, please have a look at:
- game proposal
  Shards Idea Proposal
- preliminary presentation
  Shards - Presentation
- final presentation
  Shards 2nd presentation

Feel free to leave your opinion in a comment below.

See ya!

Game Production – Prince of Persia

I'm sorry if I disappeared for a while, but semester two has started and with it new module's
projects has to be done.
One of them is Game Production's module project. For this module we have to choose an old 80s
video-game and reproduce it using Game Maker 8.1.
After a brief meeting me, Marc and Sarah have decided to reproduce Prince of Persia (1989 ver.).
After a couple of crazy weeks fighting with Game Maker and a dozen of internal builds of the 
game, we managed to produce a working vertical slice of the game reproducing most of the prince
movements in a small part of the first level.
Here you can find the videos of the first two released builds:
Prince of Persia - Build 1 (Vertical Slice)
Prince of Persia - Build 2
Stay tuned to have news about the next builds.

World of Warcraft – Machinima

As last but bot least assignment of the 1st semester, me, Marc, Berhard and Ben had to produce
a Machinima using World of Warcraft as background set and recording tool.
After a brief brainstorming of what we had to do, we decided to record a music video.
In particular, Rammstein's Rosenrot (Rammstein - Rosenrot), because it suites perfectly the
medieval/fantasy theme of World of Warcraft.
So, we started studying the music video and we writing a detailed script of the list of scenes
we had to record.
After a whole day of recording session, we started to do the production process. It wasn't an
easy task as we thought, because matching the cut scenes with the rhythm of the song, means
that you have to count every fraction of second.
Anyway, after one day of production process we managed to export our final version of the video.
Here is what we have done so far: Rosenrot Machinima

Integrated Project – Phase 3

It's been a while since I've published something on this blog, but Christmas Break and the 
closure of Semester 1 got me really busy...
This post is the sequel of Integrated Project - Phase 2, where me, Cara, Stephen, Shane 
and Christopher worked together to analyze and develop more what we have done so far.
The feedback we received from our professors was really good, but, since we over-developed
our idea, we had to resize the scope of our project.
For this reason, after few meetings during the early days of January, we decided to focus
our analysis for Phase 3 mainly on the interaction between a Registered Customer and a
Fashion Designer. In particular, during an engagement for a tailored attire.
In order to achieve our goal we continued to follow User Center Design steps:
  • User Experience Design
  • Wire-Frames Production
  • Prototype and/or Storyboard Production
If you want to have a look at the work we have done so far, please visit our development
Here you can find our final presentation:

Sound State Website Mockup – Design Practice Final Project Part 2

The second part of Design Practice's final project is to create a website mock-up of 
the selected company (in my case Sound State).
Before we talk about the mockups development I will show you the real final version of
my logo:
Full Colour Version:

Black & White Version:

My strategy in designing the mockups is to use Logo's palette as main colour theme, 
and, at the same time, trying to keep a simple structure.
After a long afternoon spent measuring in pixels the main parts of the website, I've 
drawn this basic layout:

After I've defined the basic structure of my pages it was time to put some fake content
and here is what I've done:
Home Page

Log In Feature

After Log In

Artists Page

Albums Page

About Page

Behind each page there is a common structure:

In order to recap the whole process below you can find the project Presentation 
attached to the final submission deliverables:

Integrated Project – Phase 2

It's been a while since I've published something on this blog, but I was working on 
few projects at the same time...
One of them is the Phase 2 of the Integrated Project, where me, Cara, Stephen, Shane 
and Christopher worked together to analyze and develop Cara's idea.
The idea is to create an e-commerce web application where fashion designers (well-known 
and new to the industry) can show their designs and sell them to interested customers.
This is the idea presentation video:
Following the User Center Design and Creativity, Innovation and Problem Solving techniques
we managed to analyze and develop the idea into something commercially competitive to the
big names.
The steps we have followed are:
  • Brand Design
  • Mind Maps
  • PMI (Positive, Minus, Interesting)
  • Internet Survey Analysis
  • Group Interview Analysis
  • User Roles & Personas Development
  • Requirements Gathering
  • Functional Specs Analysis
  • Use Case Scenarios & Business Logics Development
If you want to have a look at the work we have done so far, please visit our development
Here you can find our final presentation:

Stay tuned for more updates...

Sound State Logo – Design Practice Final Project Part 1

It's been a while since I've posted something but I was kept busy by few project I'm developing in these days.
One of these is Design Practice's Final Project, its first part's goal is to conceive and produce:
  • A logo in full colour and Black & White
  • An iPhone/iPad icon
  • A Favicon
  • A Facebook's page Logo
In order to achieve my goal I followed the creative design process, and after:
A brief brainstorming

The Production of a mood-board

I've drawn some sketches

And few logo attempts

I finally produced my final version of the logo:
Full Colour

Black & White

iPhone/iPad icon

Since the second part of this project is to produce mockups of the four core pages of
Sound State's website, I had to modify and resize my images in order to fit web standards:
Logo Web Version

Facebook Page logo

iPhone/iPad icon