Rock Icon Game flow_video edit

http://www.youtube.com/watch?v=grWc6WyulnE

A navigational game flow of a simulated karaoke style singing game

Summing Up of Project

Rock Icon

The brief was to create a ‘1^st Concept Phase’ of a karaoke style singing game for Sony Computer Entertainment called ‘Rock Icon’

Having worked in the games industry for 2 years I was able to call upon and use my experience in creating a section of the game, in terms of look and navigational flow.

I first looked at other games and various graphic styles to create a mood board and core value sheet to represent what the game was about. I wanted to move away from the slick graphic style that is seen in a lot of singing games and create a more textured illustrative feel that mirrored the nostalgic feel of the game as a lot of the music is from various eras of the past interspersed with present day bands.

Once the style had been set I started looking at the game flow and chose a section of the game (Rock Styles) to visualise and animate showing how the game would look and navigate (user interface). A series of menu screens and in-game graphics were created and an animatic of the game flow was produced.

A game such as Rock Icon would usually take between 7-8 months to produce; the first 2 months would be spent on creating a ‘look and feel’, firstly creating mood boards and core value sheets that are used as a guide to what you want the game to aspire too and then producing visuals of menu screens and in-game graphics.

A team of usually 3 or 4 graphic designers would be used to create all the graphics, which is where my skills come into play. Once a style has been set then the graphic designers would start working alongside games designers, coders to produce the assets to be put in-game.

The aim of the project was to produce a series of work that show cases my creativity and design skills to prospective employers.

Rock Icon Game flow

The screen shows the structural flow of the game. I've looked at the Rock Styles section. 

Game flow

Animatic

The screens are more or less created. I've started animating the navigational flow of the game in After Effects

Rock Icon Poster

Rock Icon Promotional Poster

Rock Icon 'Look and Feel'

The style has been set. Using textured backgrounds and rock imagery blended together with colours bleeding into each other almost having a 'watercolour' effect.


The menu screens will be kept simple in layout but will be enhanced by the visual treatment.
The functionality will be a simple 'scroll' up and down.

Rock Icon_Main menu screen

What makes a good user interface?

A good interface makes it easy for users to tell the computer what they want to do, for the computer to request information from the users, and for the computer to present understandable information. Clear communication between the user and the computer is the working premise of good UI design.

Good interfaces are:

Clear

A clear interface helps prevent user errors, makes important information obvious, and contributes to ease of learning and use.

Consistent

A consistent interface allows users to apply previously learned knowledge to new tasks. Effective applications are both consistent within themselves and consistent with one another.

Simple

The best interface designs are simple. Simple designs are easy to learn and to use and give the interface a consistent look. A good design requires a good balance between maximizing functionality and maintaining simplicity through progressive disclosure of information.

User-Controlled

The user, not the computer, initiates and controls all actions.

Direct

Users must see the visible cause-and-effect relationship between the actions they take and the objects on the screen. This allows users to feel that they are in charge of the computer's activities.

Forgiving

Users make mistakes. User actions should be reversible. A good interface facilitates exploration and trial and error learning.

Provide feedback

Keep the user informed and provide immediate feedback. Also, ensure that feedback is appropriate to the task.

Aesthetic

Every visual element that appears on the screen potentially competes for the user's attention. Provide an environment that is pleasant to work in and contributes to the user's understanding of the information presented.

http://uw714doc.sco.com/en/SDK_vtcl/vtclgN.style_goodui.html

What Is User Experience?

What Is User Experience?

User experience (abbreviated as UX) is how a person feels when interfacing with a system. The system could be a website, a web application or desktop software and, in modern contexts, is generally denoted by some form of human-computer interaction (HCI).

Those who work on UX (called UX designers) study and evaluate how users feel about a system, looking at such things as ease of use, perception of the value of the system, utility, efficiency in performing tasks and so forth.

UX designers also look at sub-systems and processes within a system. For example, they might study the checkout process of an e-commerce website to see whether users find the process of buying products from the website easy and pleasant. They could delve deeper by studying components of the sub-system, such as seeing how efficient and pleasant is the experience of users filling out input fields in a Web form.

Compared to many other disciplines, particularly Web-based systems, UX is relatively new. The term “user experience” was coined by Dr. Donald Norman, a cognitive science researcher who was also the first to describe the importance of user-centered design (the notion that design decisions should be based on the needs and wants of users).

Why Is UX Important?

Nowadays, with so much emphasis on user-centered design, describing and justifying the importance of designing and enhancing the user experience seems almost unnecessary. We could simply say, “It’s important because it deals with our users’ needs — enough said,” and everyone would probably be satisfied with that.

However, those of us who worked in the Web design industry prior to the codification of user-centered design, usability and Web accessibility would know that we used to make websites differently. Before our clients (and we) understood the value of user-centered design, we made design decisions based on just two things: what we thought was awesome and what the client wanted to see.

We built interaction based on what we thought worked — we designed for ourselves. The focus was on aesthetics and the brand, with little to no thought of how the people who would use the website would feel about it.

There was no science behind what we did. We did it because the results looked good, because they were creative (so we thought) and because that was what our clients wanted.

But this decade has witnessed a transformation of the Web. Not only has it become more ubiquitous — the Web had at least 1.5 billion users globally in 2008 — but websites have become so complex and feature-rich that, to be effective, they must have great user experience designs.

Additionally, users have been accessing websites in an increasing number of ways: mobile devices, a vast landscape of browsers, different types of Internet connections.

We’ve also become aware of the importance of accessibility — i.e. universal access to our Web-based products — not only for those who with special requirements, such as for screen readers and non-traditional input devices, but for those who don’t have broadband connections or who have older mobile devices and so forth.

With all of these sweeping changes, the websites that have consistently stood out were the ones that were pleasant to use. The driving factor of how we build websites today has become the experience we want to give the people who will use the websites.

What Situations Would Benefit From UX Design?

Saying that all Web systems would benefit from a solid evaluation and design of the user experience is easy; arguing against it is hard if you care about user-centered design at all. But we don’t live in a perfect world, and we don’t have unlimited resources. Thus, we must prioritize and identify the areas that stand to gain the most from UX design and UX designers.

Complex Systems

The more complex the system, the more involved will the planning and architecture have to be for it. While investing in a full-blown multi-member UX study for a simple static website seems excessive, multi-faceted websites, interaction-rich Web applications and e-commerce websites stand to benefit a lot from UX design.

http://www.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/

Self Initiated Project: Rock Icon singing game

Proposal

To create a new lifestyle singing game called 'Rock Icon' that appeals to a broad range of people from 13 year old teenagers up to middle age adults (45 year old).

Brief

To create a 'pitch' for Sony Entertainment’s new lifestyle singing game called 'Rock Icon', celebrating such iconic acts as the Rolling Stones, Led Zeppelin, The Sex Pistols, Queen, U2 and some of the new acts on the block like Arcade Fire and Kasabian.

Research suggests that teenagers whilst listening to the modern day rock acts like Kasabian, are also very in tune with the classic rock bands of the late 60’s, 70’s and the 80’s such as The Rolling Stones, Led Zeppelin and Queen through the influence of their parents.

Awareness

1.     Have a look at different illustration/graphic styles and trends

2.     Look at other Singing games, i.e. menu screens

Requirements

To create the '1st Concept Phase' of the project

What’s needed

1.    Core value / Mood board

2.    Research: examples of menu layout and in-game graphics

3.    Main menu screen

4.    Sub-Menu

5.    Song Select screen: Punk

6.    In-game screen

7.    Animatic of game flow

8.    Packaging: Case cover, CD label and poster

This is an exercise in pitch work, interface design, graphics, screen and text layout.

D&AD Summing Up

The chance to create an Interactive Illustration for the Diesel Illustration brief through the D&AD student awards has been a very enjoyable experience and has certainly open my eyes to what's possible with interactivity and especially with Processing.

Whilst my knowledge of coding (Processing) is very limited it's still very encouraging that you can take existing code, break it, play with it and finally adapt it for your own purpose and create something that's both playful and and engaging.

Do I take it further and try and get my head around Processing? I don't know at this stage. What would be great is to work with a Processing expert creating Interactive Illustrations for bands or promotional events.

Having seen and researched other interactive experiences it has inspired me to carry on exploring illustration as an interactive medium.

Curiosity for finding what's new and better

I came across this blog whilst looking for other interactive installations.


Some very inspiring work:


http://www.noupe.com/inspiration/15-amazing-interactive-installations.htm

l

Other Playful Interactive experiences

I thought this would be a great accompaniment with the interactive illustration with the drummer of the band also being able to create matching visuals through the drum hits:

See Drum is a visualisation tool created to enhance rhythm based performances by linking temporal auditory patterns to visual counterparts in real-time. Using sensors, See Drum interprets drum hits from a kit and, in real-time, creates matching visuals to be projected or displayed on screen.

The See Drum software matches each drum in the kit with a corresponding visual representation. Mappings between drums and their visuals can be altered easily within the software.

Because of its tight mappings, See Drum allows users to synthetically experience a drum performance, artfully highlighting relationships of audio and visual patterns over time.

http://www.feedtank.com/index.php?strProject=see-drum

HOW I DECIDED TO INTERPRET THE MUSIC

The music I chose to illustrate was by the band, the Smashing Pumpkins.

The style of the illustrations came from listening to hours of the bands music, getting a real feel for what they were about. Many of their lyrics are cathartic expressions of emotion and I wanted to reflect this in the illustrations.

The black and white textured feel gives a sense of mood and atmosphere befitting the songs, using drawings, sketches, photographs and photoshop.

When it came to interpreting the music I looked at Arcade Fire’s interactive video, set to the bands track ‘We Used to Wait’, I thought this was an inspired way of connecting with their fans on a more personal level.

Along with other interactive projects I’d researched and been involved in, these acted as a catalyst to interpreting the Smashing Pumpkins tracks through ‘Interactive Illustration’. It’s a fresh and exciting fan participation experience, allowing them to engage with the illustration and music. This would be a real step in the right direction to building closer relationships between bands and fans.

As music is changing and reinventing itself then illustration should follow suit as they compliment each other so well. Interactivity could be the way forward in bringing music and illustration closer together and creating the perfect harmonious experience.

Interactive Illustration Video: The Smashing Pumpkins

The Smashing Pumpkins Interactive Video using 'Processing'

The video will appear after the D&AD results have been announced.

The Journey

The Journey through the project, starting with the Core Values and Mood board which was the basis to start creating ideas and producing sketches and finally leading on to the finished illustrations.

Core Values and Mood board

Ideas, References and Sketches

Illustration.1_Smashing Pumpkins: Daphne Descends

Illustration.2_Smashing Pumpkins: 7 Shades of Black

Smashing Pumpkins Illustrations_'Processing' frames

Happy with the style of the illustrations and pleased with the 'Processing' results. Just need to get them filmed. Started work on the digital boards.

There's a bit of code which allows you to save frames, below are 2 examples.

Daphne Descends

7 Shades of Black

Illustration style

Looking at a Black and White style to create mood and emotion within the songs.

The main illustrations will be static images letting the audience use it's own imagination to interpret the song. 'Processing' light trails and particle effects will be used as an 'enhancer' to bring the song alive but not detracting from the illustration.

Illustration.1 has almost a scraper board feel to it

    D&AD Illustration 1: The Smashing Pumpkins_Daphne Descends

    D&AD Illustration 1: 'Processing': Motion detection creates  Light trails and particle effects.

Interactive Illustration

Having discussed the project further with the Course Leader I realised I needed to look at the brief in more depth. I think I got carried away a little with the project, that fact that it was Illustration and the chance to do some painting and drawing on paper.

As the brief states; to demonstrate how illustration can reinvent itself as a powerful tool for promotion and expression with the world of music.

I've decided to use the 'Nike Magic' Installation (http://www.youtube.com/watch?v=L3WLWWNbW0U) I created for the 'Interactive Design' module, created in 'Processing' and Photoshop as the inspiration for the diesel brief. Whilst my knowledge is very limited in Processing the fact you can use existing code, adapt it for your own needs gives you huge potential for 'Interactive Illustration', even more so, using Illustrators to work along Processing experts to create magical interactive illustrations that could feature in concerts, high street music stores for promoting albums.

You could even get fans of the bands to create their own artwork, submit them and see their art work brought to life by the Processing experts.

Regarding on-line interaction, I'm not sure whether you would have to have the necessary application to make it work or whether it's coded in such away that all you need is a webcam.

D&AD 2011_Illustration

CLIENT: DIESEL

BRIEF:

Create an Illustrated interpretation of 2 musical tracks that are experienced by the viewer in an Unconventional and Pioneering way.

BAND: THE SMASHING PUMPKINS

The Smashing Pumpkins have a diverse, densely layered, and guitar-heavy sound, containing elements of gothic rock, new wave, heavy metal, grunge, dream pop, psychedelic rock, arena rock, shoegazer-style production and, in later recordings, electronica. Frontman Billy Corgan is the group's primary songwriter, his grand musical ambitions and cathartic lyrics have shaped the band's albums and songs, which have been described as "anguished, bruised reports from Billy Corgan's nightmare-land".

[http://en.wikipedia.org/wiki/The_Smashing_Pumpkins]

From the soft layered ballads such as ‘Cupid de Locke’ (Mellon Collie and the Infinite Sadness) to the dark loud abrasive track, ‘Bodies’, (Mellon Collie and the Infinite Sadness) The Smashing Pumpkins became one of the most commercially successful and critically acclaimed bands of the 1990s.

The group's videos so often avoid the literal interpretation of the song lyrics and this will be carried into the illustrations.

CONCEPT.1_ CONTRASTS (Quiet and Loud)

As The Smashing Pumpkins have such a distinctive contrast of styles they can often create different emotions.

The object is to try and tap into those feelings by using textures to convey the emotions and layer them up, bringing the songs alive.

For the quiet and loud song’s, using light and dark paint in an abstract way as the music bed, building up with mixed media, collage of abstract images, pencil, acrylic paint, really working into it, almost giving the illustration a tactile feel.

CONCEPT.2_ 3D AUDIO WAVES

Using the Audio waves of the tracks as the canvas by making them a physical 3D platform to work on, (material still needs to be thought out more but initial feeling was a plastic mould)

Following the journey of the track and highlighting changes within the song with use of abstract imagery.

Again the aim is to bring the songs alive by giving it an almost 3D feel to it.

TRACKS

Still to be sorted out

MEDIUM?

Wood . Paper . Collage . Paint . Pencil . Digital

These Images had a certain resonance and were chosen whilst listening to the Smashing Pumpkins.

sound waves

attracted to light_Moth timeline

textures

Nike Magic Installation

I see the Nike Magic Installation featured in a big Nike store window. It can be played all through the day but it would be at its most effective at night especially as it's a night scene with the Northern Lights and the glowing Nike ticks really standing out as people participate or just walk by and create Magic on the streets.

Video link to Nike Magic Installation: http://www.youtube.com/watch?v=L3WLWWNbW0U

Nike Magic Store Installation

INTERACTIVE DESIGN MODULE: OVERVIEW

Processing is an open source programming language and environment used to create images, animations, and interactions.

Having been given a brief for the Interactive Design Module to create an Installation for a new Nike trainer called NIKE MAGIC we were taken through an intensive 10 week course on how Processing works by the renowned Creative code consultant and trainer, Seb Lee-Delisle and supported by the Course Leader, Sue Bamford and Course Lecturer Andrew Williamson.

We were shown various examples of code from the simple to the more complex

and allowed to go and experiment with it in order to gain confidence and some understanding of the Process’s involved.

As Processing is such a specialist field we were advised to work on existing code created by Seb and from the Open CV library rather than from scratch.

We were also advised not to try and create anything too complex and unachievable.

I created an illustration in Photoshop and adapted it to the code. Certain changes were made within the code to create the desired effect.

Here is the code that was used to create the final project: NIKE MAGIC: MONOLITH

//  Code (Particles) created by Seb Lee-Delisle (Thank you Seb) and the Light Trails from  the Open CV Library

//import processing.opengl.*;

// add image to sketch

PImage particleImg;

import hypermedia.video.*;        //  Imports the OpenCV library

OpenCV opencv;                    //  Creates a new OpenCV Object

PImage trailsImg;                 //  Image to hold the trails

PImage img;

int hCycle;//  A variable to hold the hue of the image tint

 Particle[] particles;

final int MAX_PARTICLES = 25;

void setup()

{

 

  size (600, 340);

  noStroke();

  smooth();

   background(255);

  frameRate(25);

  //img = loadImage("nikemagic.jpg"); //background image.

  particles = new Particle[0];

  particleImg = loadImage("logo.png");

 

 

   //img = loadImage("nikemagic.jpg"); //background image.

  opencv = new OpenCV( this );    //  Initialises the OpenCV object

 

  opencv.capture( 300, 170 );     //  Opens a video capture stream

  trailsImg = new PImage( 300, 170 );  //  Initialises trailsImg

  img = loadImage("monolith.png");

  hCycle = 0;                     //  Initialise hCycle

}

        

void draw()

{

   //translate(width, 0);

   //scale(-1, 1);

 

  background(0);

//  fill(0, 20);

//  rect(0,0,width, height);

 

  opencv.read();                  //  Grabs a frame from the camera

  //PImage camImage;                //  Creates an image and

  //camImage = opencv.image();      //  stores the unprocessed camera frame in it

  opencv.absDiff();               //  Calculates the absolute difference

  opencv.flip(OpenCV.FLIP_HORIZONTAL);

  opencv.convert( OpenCV.GRAY );  //  Converts the difference image to greyscale

 

  

  opencv.blur( OpenCV.BLUR, 10 );  //  I like to blur before taking the difference image to reduce camera noise

  opencv.threshold(50);

 

 

 

  opencv.blur( OpenCV.BLUR, 4 );  //  I like to blur before taking the difference image to reduce camera noise

  trailsImg.blend( opencv.image(), 120, 80, 320, 170, 0, 0, 320, 170, SCREEN );  //  Blends the movement image with the trails image

 

  colorMode(HSB);                 //  Changes the colour mode to HSB so that we can change the hue

  tint(color(hCycle, 255, 255));  //  Sets the tint so that the hue is equal to hcycle and the saturation and brightness are at 100%

  pushMatrix();

  scale(2);

  image( trailsImg, 0, 0 );       //  Display the blended difference image

 

  popMatrix();

 

  image(img,0,0);

 

  noTint();                       //  Turns tint off

  colorMode(RGB);                 //  Changes the colour mode back to the default

  opencv.copy( trailsImg );       //  Copies trailsImg into OpenCV buffer so we can put some effects on it

  opencv.blur( OpenCV.BLUR, 16 );  //  Blurs the trails image

  opencv.brightness( -10 );       //  Sets the brightness of the trails image to -20 so it will fade out

  trailsImg = opencv.image();     //  Puts the modified image from the buffer back into trailsImg

 

  opencv.remember();              //  Remembers the current frame

  hCycle++;                       //  Increments the hCycle variable by 1 so that the hue changes each frame

  if (hCycle > 255) hCycle = 0;   //  If hCycle is greater than 255 (the maximum value for a hue) then make it equal to 0

   

   

  makeParticles(opencv.image());

  updateParticles();

 

 

   

  if(particles.length>MAX_PARTICLES)  

    particles = (Particle[]) subset(particles, particles.length-MAX_PARTICLES);

  

  //opencv.remember();              //  Remembers the current fram 

}

 void updateParticles()

{

   imageMode(CENTER);

  for(int i =0; i<particles.length; i++)

  {

   

   Particle p = particles[i];

   

   

  

    p.update();

    p.draw();

   

  }

 

   imageMode(CORNER);

 

 }

 

 void makeParticles(PImage img)

{

 

  Particle p;

  for(int i= 0; i<10; i++)

  {

    int xpos = (int) random(img.width);

    int ypos = (int) random(img.height);

    if(brightness(img.get(xpos,ypos))>100)

    {

      p = new Particle(xpos*2, ypos*2);

      p.draw();

      particles = (Particle[]) append(particles, p);

    }

  }

}

 

class Particle

{

  float xPos;

  float yPos;

  float xVel;

  float yVel;

 

  float rotation = 0;

  float spin;

  float currentAlpha = 255;

  float currentScale = 0.65;

 

  float drag = 0.93;

  float fadeSpeed = 0;

  float shrink = 0.93;

  float gravity = 0.95;

  //float easing = 0.95;

 

 

  Particle(float xpos, float ypos)

  {

    this.xPos = xpos;

    this.yPos = ypos;

    this.xVel = random(-12,12);

    this.yVel = random(-12,12);

    this.currentScale = random(0.10, 0.35);

      

  }

 

  void update()

  {

    xVel*=drag;

    yVel*=drag;

   

    yVel+=gravity;

   

    xPos += xVel;

    yPos += yVel;

    currentAlpha -=fadeSpeed;

    currentScale*=shrink;

    rotation+=spin;

  }

 

  void draw()

  {

  

    //translate(width, 0);

    //scale(-1, 1);

    if(currentAlpha<=0) return;

    if(currentScale<=0.01) return;

   

    pushMatrix();

   

    tint(255,currentAlpha);

    translate(xPos, yPos);

    scale(currentScale);

    rotate(radians(rotation));

    image(particleImg, 0, 0);

   

    popMatrix();

  

 

 

  }

   

 

 

 

  

 

}