Project 2: Programming Environments

Character controls
left arrow - walk left
right arrow - walk right
space - jump

Music by Eon - Universe City

Project 2: Programming Environments

Final Environment

Project 2: Programming Environments

Different concept elements were produced to create an overall environment.

Islands


Clouds




Hills


Mountains


Sky

Project 2: Programming Environments

Since I wanted to use my character to this project, I have decided to create a side scrolling environment. My concept idea is based on a movie called Laputa Castle in the Sky. This is a fantasy world where it depicts flying islands and fortresses where humans were able to live up in the sky. As for Super Mario I was quite inspired by the orientation of the platforms and the obsticles to get from one point to another. Using these elements I wanted to create floating islands environment. These would act as platforms and different positioin and heights would determine the complexity of the game play. Different Clouds and mountins would be used as middleground and background to create depth. The athestics or the style I am going for is plain single colours or two tone colours which would be same appearence as my character. Trance background music would be used because it ties quite well with fantasy worlds.

Project 2: Programming Environments

As I was doing some more research, I came across with a game called Patapon. It is a stradegy game using few commands to destroy eniemies and to retrive their homes. I really like the aesthetics of the game. The characters and environment of the game are really crisp and clean. The colours of the environment are mainly bright with similar tones are used. As for the characters, black and white are mainly used with small porpotion of colours are applied. Even though it looks simple but I think it is quite effective, portraying depth to the environment and to the characters.

Project 2: Programming Environments

Game Environment Analysis CLICK HERE

Game Concept

My game concept idea is tower defense. It is a strategy game that you need to build up towers to stop enemies from crossing the map or pathways. When enemy is defeated the player earns money or points, which are used to buy or upgrade towers

Scenario
The scenario is set in a backyard where nerds, geeks and gingers are trying to invade your house to play on your Super Computer. The aim of the game is to protect your precious Super Computer from these people by deploying a wild arsenal of lawn ornaments, like bug-fighting plants and other odd inventions.
You place these items around the backyard and watch them fend off each attack or wave. You earn money from defeating the waves of nerds, geeks and gingers, with the money you earned more defenses can be added or upgraded.

There are five types of tower to buy and build to defend.
DT 1 – cheap and short range
DT 2 – slow enemy down
DT 3 – long range and for flying pests
DT 4 – expensive and powerful
DT 5 – slow rate but the most powerful defense

code

Project 1: Illustration and Animation

Final
Link: http://jdgyee.com/232_john/Taurus.swf

Character controls
left arrow - walk left
right arrow - walk right
up arrow - jump
space - punch

Project 1: Illustration and Animation

Punch Cycle

Project 1: Illustration and Animation

Jump Cycle


I have integrated walk cycle of the character into Flash.

Project 1: Illustration and Animation

Walk Cycle


These were drawn in Illustrator. The key aspects of walk cycle was bending and arranging body parts in specific areas. It was very difficult to adjust its legs and arms in each movement since some of the parts were morphed and needed to be redrawn.

Project 1: Illustration and Animation

I was not sure how I would approach my character showing in different angles. Even though slight angled view would give more emotion or expression, I chose to approach it as fully side on view. Colours were experimented on the character to see different qualities.


Research


After doing more research in style wise, I decided to take out the vector outlines to give crisp and clean appearance. Also little details were added to distinguish from one part to another.

Final

Project 1: Illustration and Animation

I did initial sketches of walk cycle, trying to figure out how the character would move from point A to point B. Since my character is fat and has short legs, it would have to turn its hip in order to move its legs.

Walk Cycle Sketch

Project 1: Illustration and Animation

These are initial sketches of half Taurus and half human. They have similarities of featuring human body and Taurus head. Main feature of a Taurus to me was its head so I incorporated with human body.

Sketch 1


Sketch 2


Sketch 3



My final sketch is combination of bits and pieces of previous sketches. The head itself is a skull like a skull of a dead bull. Body of the character is proportion to a dwarf or short person with short legs. It uses its long arms to punch things or damage. Its characteristic would be similar to a typical fat child who bullies at school and is always looking for trouble. In terms of movements, it will jump, walk left, right and punch.

Project 1: Illustration and Animation

I decided to change my idea after playing game of Warcraft 3 where it featured a character which was half Taurus and half ogre. The character was portrayed as a warrior because of the giant hammer to destroy enemies and shape of the body. Since this paper is about creating a character using flash, I wanted something simple, cartoon looking and small.

I looked at different images to get some inspirations of the style and how I would approach on designing my character. They are simple but expressive through minor details.

Project 1: Illustration and Animation

My original idea of character design was half human and half lion.

Project 4: Mediating Public Spaces

Bloody long day because of Adobe Premiere. We had a major issue with rendering our final documentary. It kept on crashing and popping up with error messages after 10 trials of rendering.

Even though we had few issues on technical side of this project, our group worked really well, putting a lot of effort into this documentary and trying to fix problems and helping each other to finish on time. The documentary is not perfect but it does the job of communicating our ideas and process of iRNDM.

Project 4: Mediating Public Spaces

We have started editing our documentary footage. Our editing is pretty straight forward. We used different angles and combined clips that were relating to our explanations. Also added some random clips to maintain the idea of randomness. As for the website, we started to fix the problems and added more content.

Project 4: Mediating Public Spaces

We started filming our documentary, explaining what each of us did to produce iRNDM. We planned out what questions were important to us to cover vital points and show what iRNDM was all about.

what you did
how you did it
why you did it
how long it took
problems you had
behind the scenes
the making of the documentry
the making of the making of the documentry

intro
research
site goals
site setup
site and logo design
content creation
advertising
problems

As for the website, Morgan pointed out there were many problems. The crucial problem was we had no instructions on how to use our website this includes uploading and remixing videos. In content wise, we had some users signed up but few were actually uploading videos but it was a start of people getting involved with our site.

Project 3: Distributed

Project 3 is done, now its matter of getting our site out there. I am not ideally impressed with our site but it does the job of our basis idea. I guess people who wants some humor and interested in creating short clips of themselves or anything, this site would be ideal.

Overall few of the advertisements are understandable what we are trying to say but others I think they were not clear. In a way they connect to each other where all of them evokes the idea of randomness.

Project 3: Distributed

On Monday we had an interim presentation where we showed what we have done so far. Didn't really get any comments about the corporate identity document but in terms of five advertisements, screensaver and site itself had some valuable feedback so we can do some improvements on them.

The advertisements seemed not related to each other where the content were so different and some confusions were seen. Jason's advertisement of video customization and Daniel's random chicken advertisement and Mark's random clips of him changing channels had no relation to each other and even the ending of our logo footage were not consistent.

As for the screensaver the idea was great how webcam feed was embedded with the video feeds and as well as irndm twitter comments but the comments were too small to read and needs to be enlarged so people can read them.

Site was improved compared to what we had in the first time. The length of the site was shortened and instructions were added so people can understand what the site is all about but it was suggested it is still not clear enough for user's instructions. This is beacuse there were some confusion about the duration of the videos. What users actually upload is short 10 second clips and by uploading multiples of clips they can remix them. When we talk about "remixing videos" it is about putting multiples of 10 second or shorter clips into one sequence or movie so the duration or length of the video does not matter. It can be as long as the user wanted to be. These 10 second clips can be rearranged and transitions can be changed. The result would be producing random vidoes that makes no sense because of the different arrangement possibilities.

There are still and more improvements can be contributed to the site. I guess the basis of the site is there but the functionality and the appearance of the site can be always improved.

Project 3: Distributed

Working progress of corporate identity document is going well. Had to produce different coloured logos when it was in black and white. It was about figuring out different alternatives to the logo when they are presented in different mediums and knowing the exact figures so other people can follow them. It is pretty straightforward what I have to produce after looking at examples of other corporate identity document. They all had similar contents and clear instructions on what to do and what can't be done to the logo.

Project 3: Distributed

I was assigned to do corporate identity document for our group. After looking at the examples of other documents I had some ideas on the content. These are the following categories that are essential in the document:

• Logo - explanation of meanings of the logo and alternatives
  
• Logo spacing - guideline of spacing between the logo
• Logo improper usages - outlining not to do with the logo
• Background - different areas to place the logo
• Colour - logo colour guide in different mediums
• Typography - fonts that we used
  

Project 3: Distributed

For project three we had to produce five ads, a screen saver and corporate identity guide for our brand "irndm". For one of the video I had an idea of morphing the logo into different shapes and sizes to show the idea of remixing.

Project 2: Media Virus

This is what it looks like after going through css and changing the images. We changed the logo, colours and deleted unnecessary boxes and images.

Project 2: Media Virus

Out of all the themes, we decided to use Lemontwist theme since it featured a layout of what we had in mind and also had easy and simple navigation. Firstly we had to remove features that we did not want which were strips of tree images, the bright green colour and logo area. Then had to change the content with video posts and add text.

Project 2: Media Virus

Problem: photoshop2 drupal theme does not work. I made a template from scratch using photoshop and then converted the file into drupal theme. When I tried to configure the theme, images won't load on the site.

Solution: as a group, we decided to find existing drupal themes and pick one that suits our expectations. Hopfully tweak around with colours, fonts, navigation and layout through css. In terms of tweaking with existing theme, we all still agreed on going for metallic style. These were the characteristics of metallic look.

• Subtle Metallic Gradients
• Embedded elements
• A Physical look (Bevels, shadows etc)
  

These are the existing drupal themes we found.
A3 Alantis


Lemontwist


Amor Azul


Antique Modern


Bluespan


Color Paper


Darsch

Project 2: Media Virus

These are the template designs I have done on Photoshop. These are common layouts following the key principles of website design (e.g. logo being top left corner and having global navigation bar at the top).
Template Design 1


Template Design 2


Template Design 3


Template Design 4

Project 2: Media Virus

I started researching on template designs by looking at already existing templates. Layouts, colours and navigation were main focus of the template design.


























We had some ideas on how we wanted our website to look.

• Dark background (e.g. black background with white text)
• Grey tones with small amount of bright colours
  
• Minimalistic or simple

"Five Looks, One Layout: How to Develop a Library of Web Design Styles at Your Fingertips" this link was very useful to understand on different styles and how to approach them. I guess after looking at this link, Metallic style was what we were heading for.

Project 2: Media Virus

After a group discussion we chose to use logo design 4 (middle one). Firstly it ties with our site idea. It is attractive and funky because of the bright colours which draws our eyes and the usage of bold random shapes and fonts, brings out the uniqueness of the logo. It is memorable since it has the similarity of Youtube logo and simple.

Project 2: Media Virus

These are the logos I have generated. The idea was to represent our site idea in a visual form where putting short clips together to create a long movie clip. Majority of the logos show the idea through combination of shapes and/or colours. I tried to use simple but unique typography so it is readable and memorable.

Logo Design 1

Logo Design 2

Logo Design 3

Logo Design 4

Logo Design 5

Logo Design 6

Logo Design 7

Logo Design 8

Logo Design 9