Wednesday 27 March 2013

Characters Design

Mouse

The Mouse character being test into different colours. I find it very hard to match it with other colours. At first, Mouse with an outline looks very weird to me. I then tried changing to using only one type of colour with different gradients, and I think it looks much better. After that, I tried experimenting with different colours, even using two tones. I end up with the blue mouse as yellow blends in easily with the white background. 



Sausage

Sausage character was at first brown in colour but I felt it was too dull. I liked it when it is filled in pink and red colours to show the look and mood of an actual sausage. Yellow sausage looked like a banana while blue sausage looked like a jelly bean.


Bird

I like this Bird character the most. It looks very quite in this shape. I ended up using yellow colour on Bird because I want the three characters to be in primary colours, although it looks nice in blue and red as well.
Selected Characters
Three of characters have matched with each other to build a harmony colour mood. Blue for Mouse, yellow for Bird and Sausage is red. The colours quite represent the characters themselves.

Art Direction and Moodboard (Refined)


Using the same image references, I decided to change my colour schemes to produce a different mood for the entire story. The previous colour scheme is a bit too deep and therefore I decided to change it to brighter colours, mainly following primary colours. The art direction will remain the same which inspired me to create my own style. My image will contain seven type of colours either in characters or backgrounds.

Tuesday 26 March 2013

Cover and End Sketches

I realised that I accidentally left out the cover and end pages for my mobile application. I included them as shown below.

Cover Page Sketch 1


Cover Page Sketch 2



End Page Sketch 1

I want to remain a very simple interface without too many elements although children actually love to see many things in one picture. I prefer to keep it clean and focus on the actual story instead.

Monday 25 March 2013

Example of Outcome


Figure 2. MorrisLessmore.com  (n.d.).The Fantastic Flying Books of Mr. Morris Lessmore.. [Image Online] Available from: http://morrislessmore.com/ [Accessed 21/03/2013]

This is very good example suggested by my supervisor, Ms Alison. This application is available in the App Store and can be read in the iPad and iPhone. Users can read and interact with every scene to understand the story. It has an animated short film and some games to play around. It is what I want to achieve in my final project - to build cool and nice android book application. 

Figure 2. Tap! The iPhone & iPad Magazine.  (2006-2010.).The Fantastic Flying Books of Mr. Morris Lessmore.. [Image Online] Available from: http://www.tapmag.co.uk/review/438052647/fantastic-flying-books-mr-morris-lessmore [Accessed 21/03/2013]

This image is an example of the look and feel of the application. When your finger is tapped on the books, the books will fly like a bird.

Refined Sketches



Page 2 sketch has been added in a game.





Previous page 3 is game page but it has now become an interactive story page.








Previous page 7 is collecting game and it is changed to interactive animation page.


Page 8 has become cooking game which located on page 3 in previous page.






























There are 10 refined sketches because the game in page 3 and 4 are too close together. I was advised by my supervisor to leave a gap between both the games. So I refined the game location according to the new game structure with same game which is decided below.


Thursday 21 March 2013

Sketches




















There are 10 sketch pages, including three game design. This is how it would look and feel for the composition of drawing according to the story. These sketches are drawn according to the refined game structure, together with some of my own creativity.





Game Development 1 - Pair Game

ActionScript 3.0 Class

Main
package com {


import flash.display.MovieClip;
import flash.events.MouseEvent;

public class Main extends MovieClip {

public var cardManager:CardManager;

public function Main() {
trace("Main is ready!")

resetBTN.visible = false;
resetBTN.buttonMode = true;
resetBTN.addEventListener(MouseEvent.CLICK,resetClick)

cardManager = new CardManager(this);
cardManager.addMe();
cardManager.x = 225;
cardManager.y = 160;

}

private function resetClick(e:MouseEvent)
{
trace("RESET THE GAME")
resetBTN.visible = false;
cardManager.GAME_RESET();
}
}

}


CardManager
package com
{
import flash.display.MovieClip;

public class CardManager extends MovieClip
{

private var _baseMC;

private var _noTry:int = 0;// Number of tries
private var _cardArray:Array = new Array();

private var _compareNo:int = 0;// use to compare
private var _compareMcAry:Array = new Array();
private var _totalOfPairs:int = 4;
private var _currNumPairs:int = 0;

public function CardManager(baseMC)
{
this._baseMC = baseMC;
generateCards();
}

private function generateCards():void
{
var numOfCard:int = 8;
var posX:int = 0;
var posY:int = 0;
var arr:Array = new Array(2,2,3,3,4,4,5,5);

var arr2:Array = [];
while (arr.length > 0)
{
arr2.push(arr.splice(Math.round(Math.random() * (arr.length - 1)), 1)[0]);
}

arr = arr2;
trace("Answer: " + arr);


for (var i:int =0; i<numOfCard; i++)
{
var card:PairCard = new PairCard(this);
card.addMe();
card.myNum = arr[i];

_cardArray.push(card);
// _cardArray[i] = card;

card.x = posX;
posX +=  card.width + 10;

card.y = posY;

if (i==3)
{
posX = 0;
posY +=  card.height + 10;
}
}
trace(_cardArray);
}

public function cardClicked( mc:MovieClip, cardNum:int )
{
_noTry++;
switch (_noTry)
{
case 1 :
_compareNo = cardNum;
_compareMcAry[0] = mc;
break;

case 2 :
_compareMcAry[1] = mc;

if ( _compareNo ==  cardNum )
{
_compareMcAry[0].correctPair = true;
_compareMcAry[1].correctPair = true;
resetAllCards();
_noTry = 0;
checkForWin();
}
break;

case 3 :
resetAllCards();
_noTry = 0;
break;
}
/*if(_noTry == 3)
{
resetAllCards();
_noTry = 0;
}*/
}

public function resetAllCards():void
{
for (var i:int = 0; i < _cardArray.length; i++)
{
if (_cardArray[i].correctPair == false)
{
_cardArray[i].gotoAndStop(1);
}
}
}
public function checkForWin():void
{
_currNumPairs++
if( _currNumPairs == _totalOfPairs )
{
trace("WIN - it's time to call out the button!")
this._baseMC.resetBTN.visible = true;
_currNumPairs = 0;
}
}
public function GAME_RESET():void
{
for (var i:int = 0; i < _cardArray.length; i++)
{
_cardArray[i].correctPair = false;
_cardArray[i].gotoAndStop(1);
// random the colour
}
}

public function addMe():void
{
this._baseMC.addChild(this);
}

public function removeMe():void
{
this._baseMC.removeChild(this);
}

}

}


PairCard
package com
{
import flash.display.MovieClip;
import flash.events.MouseEvent;

public class PairCard extends MovieClip
{

private var _baseMC;

public var myNum:int = 0;
public var correctPair:Boolean = false;

public function PairCard(baseMC)
{
this._baseMC = baseMC;
this.buttonMode = true;
}

private function initializeEvent():void
{
this.addEventListener(MouseEvent.CLICK,cardClick);
this.addEventListener(MouseEvent.MOUSE_OVER,cardOver);
this.addEventListener(MouseEvent.MOUSE_OUT,cardOut);
}

private function cardOver(e:MouseEvent)
{
this.alpha = 0.5;
}

private function cardOut(e:MouseEvent)
{
this.alpha = 1;
}

private function cardClick(e:MouseEvent)
{
if(this.currentFrame == 1)
{
this.gotoAndStop(myNum);
this._baseMC.cardClicked( this, myNum)
}
}

public function addMe():void
{
this._baseMC.addChild(this);
initializeEvent();
}

public function removeMe():void
{
this._baseMC.removeChild(this);
this.removeEventListener(MouseEvent.CLICK,cardClick);
this.removeEventListener(MouseEvent.MOUSE_OVER,cardOver);
this.removeEventListener(MouseEvent.MOUSE_OUT,cardOut);
}

}

}

This source is also from a previous project I worked on when I was still back in Malaysia. This is how it looks for a pairing-up game and it will be applied as a mini game for my final project in which the mouse, bird and sausage gets to rearrange their duties.


Game Development 1 - Drag and Drop Game

ActionScript 3.0



{
import flash.events.MouseEvent;

var totalAmout:int = 0;

item1.desc = "Big Bang CD Album";
item1.price = 76;
item1.startX = -6.2;
item1.startY = 1.9;

item2.desc = "Bluetory CNBLUE CD Album";
item2.price = 68;
item2.startX = 86.8;
item2.startY = 61.8;

item3.desc = "City Hunter Pictures Book";
item3.price = 125;
item3.startX = 47.3;
item3.startY = 142.1;

item4.desc = "ThankU CNBLUE CD Album";
item4.price = 40;
item4.startX = -2.7;
item4.startY = 230.2;

item5.desc = "Ouran High School Host Club Poster";
item5.price = 35;
item5.startX = 86.8;
item5.startY = 279.7;

item1.buttonMode = true;
item2.buttonMode = true;
item3.buttonMode = true;
item4.buttonMode = true;
item5.buttonMode = true;

item1.addEventListener(MouseEvent.MOUSE_DOWN,onItemDown);
item1.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item2.addEventListener(MouseEvent.MOUSE_DOWN,onItemDown);
item2.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item3.addEventListener(MouseEvent.MOUSE_DOWN,onItemDown);
item3.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item4.addEventListener(MouseEvent.MOUSE_DOWN, onItemDown);
item4.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item5.addEventListener(MouseEvent.MOUSE_DOWN, onItemDown);
item5.addEventListener(MouseEvent.MOUSE_UP,onItemUp);

function onItemDown(event:MouseEvent):void
{
var item:MovieClip = MovieClip(event.target);
item.startDrag();
item.scaleX = item.scaleY = .95;
var topPosition:uint = this.numChildren - 1;
this.setChildIndex(item, topPosition);
total.itemName_txt.text = item.desc;
}

function onItemUp(event:MouseEvent):void
{
var item:MovieClip = MovieClip(event.target);
item.stopDrag();
if (bin.hitTestObject(item))
{
updatePurchasedPanel(item);
}
else
{
item.scaleX = item.scaleY = 1;
}
}

function updatePurchasedPanel(item:MovieClip):void {
totalAmout += item.price;
total.itemName_txt.text = "";
total.total_txt.text ="£" + String(totalAmout);
item.scaleX = item.scaleY = 1;
//item.x= item.startX;
//item.y = item.startY;
item.play();
}


This is another game used for this project. The above image is my workshop group homework. I found that the basic concept of drag and drop game structure can applied on my cooking game with some changes applied to suit the game's needs.


Game Development 1 - Collecting Game

ActionScript 3.0
/*
 ********************************
 * Shooting stars game
 * http://flashadvanced.com                              
 ********************************
*/

//importing tween classes
import fl.transitions.easing.*;
import fl.transitions.Tween;

//hiding the cursor 
Mouse.hide();

//creating a new Star instance
var star:Star = new Star();
//creating the timer
var timer:Timer = new Timer(1000);
//we create variables for random X and Y positions
var randomX:Number;
var randomY:Number;
//variable for the alpha tween effect
var tween:Tween;
//we check if a star instance is already added to the stage
var starAdded:Boolean = false;
//we count the points
var points:int = 0;

//adding event handler on mouse move
stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorMoveHandler);
//adding event handler to the timer
timer.addEventListener(TimerEvent.TIMER, timerHandler);
//starting the timer
timer.start();

function cursorMoveHandler(e:Event):void{
//sight position matches the mouse position
sight.x = mouseX;
sight.y = mouseY;
}

function timerHandler(e:TimerEvent):void{
//first we need to remove the star from the stage if already added
if(starAdded){
removeChild(star);
}
//positioning the star on a random position 
randomX = Math.random()*500;
randomY = Math.random()*300;
star.x = randomX;
star.y = randomY;
//adding the star to the stage
addChild(star);
//changing our boolean value to true
starAdded = true;
//adding a mouse click handler to the star
star.addEventListener(MouseEvent.CLICK, clickHandler);
//animating the star's appearance
tween = new Tween(star, "alpha", Strong.easeOut, 0, 1, 3, true);
}

function clickHandler(e:Event):void{
//when we click/shoot a star we increment the points
points ++;
//showing the result in the text field
points_txt.text = points.toString();
}



The above script was used for my previous work, and I found that can be used again on one of game for my final project.


Below is shooting star flash game that I found online.


Figure 1. Flash, Flex and ActionScript tutorials - flashadvanced (2009-2011). Creating a small shooting game in AS3. [Image Online] Available from: http://flashadvanced.com/creating-small-shooting-game-as3/ [Accessed 21/03/2013]