Final deliverables

Click on images for the link to our lovely deliverables.

Screen Shot 2014-05-14 at 13.45.21
Game demo
Screen Shot 2014-05-06 at 12.47.39
Promo video
Screen Shot 2014-05-06 at 14.48.06
Concept art posters
Screen Shot 2014-05-06 at 12.14.28
Website
Advertisements

Our allocated plans in detail

The demo asset sheet and who does what (Abe's in red whereas Dino's in orange).
The demo asset sheet and who does what (Abe’s in red whereas Dino’s in orange).
Most of our ideas and sketches are contained in this presentation.
Most of our ideas and sketches are contained in this presentation.
Screen Shot 2014-05-09 at 12.45.19
Our main schedule. We changed it occasionally due to missed deadlines, but we managed to secure the core assets for our deliverables. Overall it was a well maintained schedule.
Our presentation/pitch.
Our presentation/pitch.

 

Our brief.
Our brief.

PROJECT CONSTRAINTS.

Our style guidelines:

  • Main colour scheme (colours must be soft on the eyes, so nothing stark): #FFCC4D #231f20
  • Graphic style: angular, everything should be consisted of straight lines.
  • Fonts: Bebas and Fjalla.
  • Animation style: subtle but effective (should be created in after effects).
  • Everything must be related to music somehow.
  • Less is more approach.

Software to be used: Illustrator, After Effects, Construct 2, Photoshop, Google Chrome, Dreamweaver.

ALL OUR RESEARCH MATERIAL (VIDEOS INCLUDED) please look at this for an insight to where the foundations of Rhythm Realm came from.

Tutorial material/inspiration folder

Everything else is here. In our lovely team production folder.

 

Script for evaluation

Comparisons to professional products

I was in charge of the making the website; in order to make it as professional as possible, required me to work like a web designer. Which meant using frameworks (not templates because that’s too bloated and unoriginal). I opted for a simple parallax framework called cool kitten. The art asset team made the images that will go on the site whilst I tweaked with the html and css. The end result is professional looking thanks to team feedback and my previous experiences in site making. Though I’d like to add more to the site in future such as more information and features.

Layout wise I followed an asymmetrical theme to create a dynamic look. Opting for simple block colours to align with the current, awesome trend of minimalism web design (I hated bevels and gradients even when they were hip). I went for a sticky head and logo to ensure the brand is etched into user’s minds whilst not sacrificing the overall aesthetics.

The game demo was made in Construct 2 as the software has gained a respectful reception amongst indie game makers. Being all in html5 was an even bigger bonus as it’ll work on almost anything and everything- open source for the win. I knew the software was capable of producing fully fledged games like Super ubie land but I was also cautious of time constraints on the team so a focus on a simplified demo was the key.

One important factor of the demo is the controls. I watched a tutorial on construct and discovered that not all keyboards are optimised for classic WASD controls. A lot of PC gamers in a country like France (where the layout is different) struggle to play games with the WASD keys as a result. So I opted for the always reliable arrow keys as the main controls. A little trivia for those who’re interested.  Keeping controls simple was also a key factor as not only do we want it to be accessible to people outside of the UK but also to people of different gaming experiences.

Whilst the demo is incredible short and simple, I believe given enough time and budge we’d be able to make a release ready game. The fact that we have a working prototype that looks and plays well is due to our strong communication skills as well as software skills. I had to playtest it many times myself along with my colleagues which proved to be instrumental in making sure that the game works. This is one of those cases where the product’s complexity is hidden behind its simplicity (seriously making a small demo like this requires a lot of tweaking and patience).

Meeting the brief and creative challenges

Creative challenges resolved around how we as a team can produce the deliverables promised in a limited amount of time. Using all our gained software creative knowledge (yes I think creativity is knowledge too) to make a website, promotional video and posters which we all managed to complete.

My personal challenge was to learn Construct 2 and create a working product as a beginner to the software. Gladly youtube and practising over the holidays really helped me familiarise with the software. Never be afraid to learn something new, is a good philosophy to live by.

The main motto of the game is user contributed music and whilst we have yet to set up a system for that, I think it’s a fairly good start that the tracked we used for all our deliverables came from a composer who’s our age. The aim is to bring these composers’ works to light whilst utilising it to produce content that will entertain the masses.

Fitness for purpose

Our main audience are the same that will be willing to support us on a crowd funded project. People who’re interested in new ideas as well as seasoned gamers. Once the game is released our brand also has to look appealing to people outside gaming circles. From looking at our assets and deliverables I believe we have met that standard. The art, video, animations, site and so on all hit the stand of what a kickstarter pitch would look like. I believe if we started a Kickstarter now the audience would trust us to make our dream game via the branding we created as a group alone. The brand is strong enough to attract those outside of games i.e composers, web surfers (vector graphics becomes that much more appropriate as a result) etc.

Even though we don’t have the skills and time to make the full game now; the real product will come hopefully if not definitely in the future. Being able to achieve such a solid brand this early on is pretty impressive.  Lastly above all our work so far fits its purpose to intrigue and delight.

Bibilography- the Harvard way

A list of links to resources I used for my research:

 

Production Log

Task 1

For the research method everyone of us worked individually which required evidencing my previous endeavours. Like many first questions/task it was the easiest to complete on time.

Task 2

Team research took a lot of planning and poking. We divided up the primary and secondary research into even chunks amongst the team. Dino handled interviewing and visual research; Abe was in charge of logo analyses, brand and site research. I was tasked with technical research (finding out what software/framework to use) and vox pop.

We all worked on  a grand presentation on Google Drive to ensue that everyone can edit and view each other’s research in real time. We felt that helped us communicate our research materials better.

There was some hiccups here and there due to lack of motivation (natural for any teamwork project) but we pulled it together after some discussions and persuasion.

We allocated the roles up to what we decided to be in charge of for the final products (which were decided on our interests and skill-sets).  Two main designers and one main technical guru.

Editing vox pop. Thanks to all who contributed.
Editing vox pop. Thanks to all who contributed.

Task 3

Creating the planning material was mainly done over google hangout meetings. Ideas were traded; schedules agreed on and deadlines given.  We neatly organised amongst the designers who will create which assets and that was only possible after I check out how our software works. So communication on that part was excellent.

By the end of this task we’ve already gotten our logo, sketches, early prototype set in place.

Task 4

Dino crafted our lovely banner (and Cello at the end), Abe created our team logo, I laid out the presentation. We were ready for pitching. The slides were divided equally amongst the group  with individuals focusing on what they contributed. Our presentation were delivered smoothly as a result of the quality of our work and idea. There was a freak out regarding some printout (cough I may have left at home) so a last minute rush to the library solved that one. Suffice to say I won’t be doing that again.

Task 5 

The big one. As the team starts to create the final deliverable we are constantly peeping at each others screens and giving feedback. With the class icons there was a bit of a design stump and disagreements with the initial look. After looking for some inspiration and further discussion we settled on a look. Team conflict resolved!

As I’m in charge of the CSS for the website, the designers give me constant feedback to ensure I do a good job on design and to be realistic of what could be done.

A normal workflow looks something like this:

Screen Shot 2014-05-06 at 15.50.00
Abe designs the character with his mad Illustrator skils.
Screen Shot 2014-05-06 at 16.12.44
Dino animates it in  After effects and hand me the sprites (their amazing as you can see).

 

and I'm in charge of putting the elements into construct 2, hooking up the code and making sure all assets work in the game.
and I’m in charge of putting the elements into Construct 2, hooking up the code and making sure all assets work in the game. Super teamwork. The HP bar is too boxes with some events (aka javascript) and image overlay attached to it. For more info on how it’s made watch this.
The final product is the work of pure team effort. Design and technical marriage.
The final product is the work of pure team effort. Design and technical marriage.

Our composer Elliot has also allowed us to use his crazily good tunes (he composed Eclipse just for this game, I’m forever thankful and in awe). Just have a listen yourselves.

Hooking up the sprites for the game. I gad to edit the image origins, frame speed and such.
Hooking up the sprites for the game. I had to edit the image origins, collision polygons frame speed and such. The game demo relies a lot on collisions working properly so getting those aspects spot on was important.

 The site

The original wireframe as made by Abe. I stuck with the layout mostly (blocks of content) bar the navigation. As before this we have yet to design the logo, once we did I thought it was appropriate to make it stick out of our navbar.
The original wireframe as made by Abe. I stuck with the layout mostly (blocks of content) bar the navigation. As before this we have yet to design the logo, once we did I thought it was appropriate to make it stick out of our navbar and applied fixed positioning . The look was popular amongst the team so I ‘stuck’ with it (unintentional pun alert).
I created the site in Dreamweaver (with good old html and css) using the assets by our design team.  The framework used is called cool kitten and is good for anyone who like responsive sites with a bonus parallax effect.
I created the site in Dreamweaver (with good old html and css) using the assets by our design team. The framework used is called cool kitten and is good for anyone who like responsive sites with a bonus parallax effect.
Getting the layout right was the hardest part. It always is in web design. Somehow managed to pull through though.
Getting the layout right was the hardest part. It always is in web design. Somehow managed to pull through though. My previous experiences with CSS helped out a lot.
Making sure the site looks right on smaller screen sizes was of vital importance.
Making sure the site looks right on smaller screen sizes was of vital importance. The key is to play with different sizing in Chrome via ‘Inspect Elements’. Copy and paste the code into your CSS under the right kind of media query. Viola, responsive site.

Our feedback process looks something like this:

Abe: How does this look?

Danwen: Needs more contrast.

Dino: Ah that’s sick.

Joking asides here’s an actual legit example of what I needed to take on board when making the game demo:

When my peers (and tutor) was testing the game demo (aka trying to break it) they realised that the battle scene could be easily won by button mashing ‘F’ (attack). Seeing this error I put up a penalty for reckless button mashing. That’s what game design’s all about isn’t it?

I call it the bouncing...
I call it the bouncing…
...notes.
…notes.

Video 

Here’s the storyboard I created for our demo video:

I made way too many of these in the span of two years in BRIT.
I made way too many of these in the span of two years in BRIT.

This is the end of my BRIT IM journey…