Wednesday, April 20, 2011

FYP 2 - Critique 2 Working Progress 4 (Game)

Coding (Sleeping Mode)

function sleep(milliseconds) {
hiddenInterval = setInterval(sleepwait, milliseconds);
}

function
sleepwait() {
stopSleeping();
}


function
stopSleeping() {
clearInterval(hiddenInterval);
}

FYP 2 - Critique 2 Working Progress 3

I started with my first game with the existing source code and I and I stuck already ><

This is the modified version game, the enemies manage to stop moving but it's still appear in my game and just couldn't move around. My main problem is stuck when the player touch the remarks, I couldn't add in my questions as the remarks are appear randomly and my game is there each remark carry out different Q&A.


FYP 2 - Critique 2 Working Progress 2

This is my second edition of layout design that done in flash. A complete animated flash application. Following are my screen shots of every pages. The game will be update soon. ^^

Homepage

History page

Puppetry Page

Puppets Page

Friday, April 8, 2011

FYP 2 - Critique 2 Working Progress

This is my new layout design for my flash application. I'm still working on this layout and feel like it doesn't convey any Chinese feeling. So, some Chinese landscape painting will be add in as the background design and will modify the colours that looks more like a Chinese application.

Wednesday, March 30, 2011

FYP 2 - Digital layout

Homepage for the flash application. As you can see there are 5 navigation to let user go through it's content to explore more about puppets. The buttons will be animated as it is floating in the air. As for the circle in the middle, so call "earth" will be animated too, it will be a slowly spinning animation. Other pages still in the progress.

FYP 2 - Action Script 2

Game 3



I found out a game that similar to my game 3 which I can use this scripting that block the user so it can't make any movement.

/*------------- www.taoshaw.com ---------------*/
//背景图的列数和行数,此处根据您先前所绘制的地图数据来确定...
var col = 16;
var row = 15;
//定义每个单元的长与宽
var block_width = 40;
var block_height = 40;
//初始化所有数组
var ditu_array = new Array();
var box_array = new Array();
var mubiao_array = new Array();
//
//地图数据
var ditu = new Array();
//定义地图的数据内容,此处数据有部分是故意多加的,大家要注意哦,可以自己写一下。呵呵。按照前面一章节的介绍写吧。
ditu[0] = new Array( 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 4, 2, 4, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 2, 4, 6, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
var tree:Number = 1;
var back_ground:Number = 2;
var kongbai:Number = 3;
var BOX:Number = 4;
var level_num:Number = 0;
var col_num:Number;
var row_num:Number;
//自定义一个复制地图的函数
function drawMap(level_num) {
for (var i = 0; i < row; i++) {
//初始化二维数组
ditu_array[i] = new Array();
box_array[i] = new Array();
//进行循环复制,这个前面的章节中有详细介绍,在此不再缀述
for (var j = 0; j < col; j++) {
var num = ditu[level_num][i * col + j];
//根据地图数据进行mc的复制及摆放
if (num == 0) {
//如果是空白位置,就直接跳过
continue;
} else {
//如果是非零位置,就先复制出背景,并根据行列号进行其他操作
//根据getNextHighestDepth()方法先定义一个短点的变量
var temp = getNextHighestDepth();
//复制库中的元件,并动态添加到新元件
attachMovie("source", "source" + temp, temp);
var mc = _root["source" + temp];
//设置复制元件的座标位置
mc._x = j * block_width + bgMap_mc._x;
mc._y = i * block_height + bgMap_mc._y;
//给mc增加一个 类别属性zhenghaoma
mc.zhenghaoma = num;
ditu_array[i][j] = mc;
switch (num) {
//根据num的值显示不同的内容.
case tree :
mc.gotoAndStop(tree);
break;
case back_ground :
mc.gotoAndStop(back_ground);
break;
case kongbai :
mc.gotoAndStop(kongbai);
mubiao_array.push([i, j]);
break;
case 4 :
mc.gotoAndStop(back_ground);
//
var temp = getNextHighestDepth();
attachMovie("box", "box" + temp, temp);
var box = _root["box" + temp];
box._x = j * block_width + bgMap_mc._x;
box._y = i * block_height + bgMap_mc._y;
box_array[i][j] = box;
break;
case 5 :
mc.gotoAndStop(kongbai);
mubiao_array.push([i, j]);
//
var temp = getNextHighestDepth();
attachMovie("box", "box" + temp, temp);
var box = _root["box" + temp];
box._x = j * block_width + bgMap_mc._x;
box._y = i * block_height + bgMap_mc._y;
box_array[i][j] = box;
break;
case 6 :
mc.gotoAndStop(back_ground);
//
my_person._x = j * block_width + bgMap_mc._x;
my_person._y = i * block_height + bgMap_mc._y;
row_num = i;
col_num = j;
break;
}
}
}
}
//让箱子永远在目标层的上面
for (i in _root) {
var s:String = _root[i]._name;
if (s.substring(0, 3) == "box") {
_root[i].swapDepths(getNextHighestDepth());
}
}
my_person.swapDepths(getNextHighestDepth());
}
//运行刚定义的函数
drawMap(level_num);
//建立键盘侦听,接收键盘消息
var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
switch (Key.getCode()) {
case Key.UP :
dir = "上";
break;
case Key.DOWN :
dir = "下";
break;
case Key.LEFT :
dir = "左";
break;
case Key.RIGHT :
dir = "右";
break;
}
movePerson();
};
//添加监听
Key.addListener(keyListener);
//
//根据键盘消息进行位置移动
function movePerson() {
//根据按键信息,确定人物的位置方向
my_person.gotoAndStop(dir);
switch (dir) {
case "上" :
if (ditu_array[row_num - 1][col_num].zhenghaoma != tree) {
if (box_array[row_num - 1][col_num] == undefined) {
//如果这个位置上没有箱子,人向上移动一格
my_person._y = ditu_array[row_num - 1][col_num]._y;
row_num--;
} else {
//这里摆放有一个箱子
if (ditu_array[row_num - 2][col_num].zhenghaoma != tree && box_array[row_num - 2][col_num] == undefined) {
//下下个位置上不是树,也不是箱子,人物和箱子一起向上移动
box_array[row_num - 1][col_num]._y = ditu_array[row_num - 2][col_num]._y;
box_array[row_num - 2][col_num] = box_array[row_num - 1][col_num];
box_array[row_num - 1][col_num] = undefined;
my_person._y = ditu_array[row_num - 1][col_num]._y;
row_num--;
}
}
}
break;
case "右" :
if (ditu_array[row_num][col_num + 1].zhenghaoma != tree) {
if (box_array[row_num][col_num + 1] == undefined) {
//如果这个位置上没有箱子,人物向上移动
my_person._x = ditu_array[row_num][col_num + 1]._x;
col_num++;
} else {
//这里摆放有一个箱子
if (ditu_array[row_num][col_num + 2].zhenghaoma != tree && box_array[row_num][col_num + 2] == undefined) {
//下下个位置上不是树,也不是箱子,人物和箱子可以一起向上移动
box_array[row_num][col_num + 1]._x = ditu_array[row_num][col_num + 2]._x;
box_array[row_num][col_num + 2] = box_array[row_num][col_num + 1];
box_array[row_num][col_num + 1] = undefined;
my_person._x = ditu_array[row_num][col_num + 1]._x;
col_num++;
}
}
}
break;
case "下" :
if (ditu_array[row_num + 1][col_num].zhenghaoma != tree) {
if (box_array[row_num + 1][col_num] == undefined) {
//如果这个位置上没有箱子,人物可以向下移动
my_person._y = ditu_array[row_num + 1][col_num]._y;
row_num++;
} else {
//这里摆放有一个箱子
if (ditu_array[row_num + 2][col_num].zhenghaoma != tree && box_array[row_num + 2][col_num] == undefined) {
//下下个位置上不是墙,也不是箱子,人物和箱子可以一起向下移动
box_array[row_num + 1][col_num]._y = ditu_array[row_num + 2][col_num]._y;
box_array[row_num + 2][col_num] = box_array[row_num + 1][col_num];
box_array[row_num + 1][col_num] = undefined;
my_person._y = ditu_array[row_num + 1][col_num]._y;
row_num++;
}
}
}
break;
case "左" :
if (ditu_array[row_num][col_num - 1].zhenghaoma != tree) {
if (box_array[row_num][col_num - 1] == undefined) {
//如果这个位置上没有箱子,人物可以向上移动
my_person._x = ditu_array[row_num][col_num - 1]._x;
col_num--;
} else {
//这里摆放有一个箱子
if (ditu_array[row_num][col_num - 2].zhenghaoma != tree && box_array[row_num][col_num - 2] == undefined) {
//下下个位置上不是墙,也不是箱子,人物和箱子一起向上移动
box_array[row_num][col_num - 1]._x = ditu_array[row_num][col_num - 2]._x;
box_array[row_num][col_num - 2] = box_array[row_num][col_num - 1];
box_array[row_num][col_num - 1] = undefined;
my_person._x = ditu_array[row_num][col_num - 1]._x;
col_num--;
}
}
}
break;
}
}
//AD......
ad_btn.onRelease = function() {
getURL("http://www.taoshaw.com/", "_blank");
};
/*------------- www.taoshaw.com ---------------*/

FYP 2 - Game Homepage

First draft for the Game page (Start)

Tuesday, March 29, 2011

FYP 2 - Research on Game (Stage 3) & Sketch


Sample of maze design

Inspiration from the maze design and come out with this game (Stage 3). Below is my layout design and game play for stage 3

This is the last stage to complete your mission here. As you can see, there are 4 entrance to let you start the game. Once the game is started, you will counter several questions. Mission task is answer correctly each question and go to the final destination in order to complete this game. But, if you select wrong answer, the road been blocked and you have to choose another way to continue your journey. Beware of time given, think twice before you answer.

FYP 2 - Research on Game (Stage 2) & Sketch



========================================================

My final sketch. This stage is in the cave and user will facing several obstacles and they have to done this mission within the time given. While playing this game, the floor will getting slanting and the user will move to backward. To solve this problem, user have to try their best to answer every questions else they would lost their lives. User have to reach certain score only can proceed to next stage. The questions are all about the types of puppet and stages as well.

FYP 2 - Research on Game (Stage 1) & Sketch

This is my first ideation for the game (Stage 1). At first, I was thinking of doing a hunting treasure box kind of game, but I couldn't think a better way to let user learn something from the game. So, I took some elements from this game and invent a new game. Below is my layout design for the game (Stage 1)

  1. Questions about historical and types of puppetry.
  2. Cactus will pop out few selections to let user answer.
  3. User must use hammer to hit their answer to get the score.
  4. This is interesting, before you do anything to the game, all cactus will be in the sleeping mode. Once you answer correctly, cactus will immediately awake and cactus will gone after you answer correctly twice. But, make sure you can make a decision in a short time else cactus will sleep again.
  5. This is the bar showing how sleepiness cactus is.
  6. The score that you earn. To go to next stage, you have to reach a certain score. Score will lost once you choose a wrong answer.
  7. 3 lives will be given. Lives will deduct once user make cactus's sleepiness goes to danger zone and step on quicksand.
  8. Don't ever try to escape from answering questions and choose a short cut way. Once you step here, you lives will lost.

Friday, March 11, 2011

FYP 2 - Finalize Proposal

Scale 1 : 5 Floorplan


Flowchart

Research Topic

Chinese Puppet

Background

Chinese puppet shows which originated in the Han Dynasty and flourished in the Tang and Song dynasties, have a history of over 1,000 years. The art form is categorized into four types, based on the shapes of the puppets and the operative skills: figure puppets, marionettes, stick puppet sand wire-supported puppets. Each has its own artistic characteristics. At present, puppet shows are usually accompanied by the tunes of local operas and some adopt the form of dialogue or singing and dancing. The finure puppets of Longxi county, marionettes of Quanzhou (both in Fujian Province), stick puppets of Hainan Province and the other puppet shows of Hunan and Shaanxi Provinces and the Beijing region are well-known for their wide range of repertoire, wonderful performance and beautiful music. Some puppet troupes have performed abroad many times and have been warmly welcomed by the audience.

Problem Identification

Many forms of art in the modern world today are going digital. In 21th Century, traditional drama like Chinese puppet is being forgotten by youths and there have been replacing by cinema especially in 3D area. No matter it is in created objects or real graphics. Aside that, youth love to follow the flow of time, they feel traditional culture is so outdated and of course they won’t bother this. The other reason is their parents not exposing this to their children. But however we still have to emphasize on the importance of traditional culture.

Aim and Objectives

  • To make people recognize, understand and feel the traditional Chinese puppet
  • To alert people not to forget the culture
  • To let people more familiar with the Chinese puppet
  • To associate new media with old story and improve the interaction between people and culture

Motivation

Interactivity between people and device to arouse their interest and at the same time they can get more understanding on tradition aspect.

Ideation and Concept

That will be flash based application, as they can get to know or even more familiar with the Chinese puppet from the application provided (information). On the other hand, they can play the games to remember what puppet is.

Review, Analysis and Precedence Studies

Chinese Puppet is one of the most interesting, educational and innovative titles that I have the pleasure to review. Everything about it is engaging, from the bold and colorful graphics and indigenous music to the process of putting together an original puppet theater play.

The Chinese Puppet Show (kuileixi) is known as mu ou xi (play of wooden dolls), in the country, which has its roots in remote time. Traditionally, Puppet Show comes in three forms: the rod-top puppet, the marionette or string puppet and the glove or hand puppet. In China, the rod-top puppet is the most popular show.

The puppet, less than a meter tall, is made with true-to-life features. It is raised overhead at the top of a stick by the puppeteer with one hand and manipulated its action (moving a pair of wire rods) with the other hand.

One of the basic skills required of the puppeteer is to be able to hold high the puppet, which weighs 2 to 3 kilograms, with one arm and to keep it either motionless or moving steadily on the same level as dictated by the scenario.

The Marionette or String Puppet

The marionette appears on stage in full view of the audience. it is of a more complicated structure, with the head, shoulders, waist, hands and feet all jointed, movable and controlled by separate wires. During performance, it is operated from a concealed operating bridge high above the puppet.

The Glove or Hand Puppet

The glove or hand puppet is also called "bag puppet" in China. About 20 cm long, it is the smallest of the three types. The puppeteer's hand is placed directly inside the puppet, giving the direct control and manipulation of movement. It may be made from solid materials such as wood, plastic wood, paper mache or from pliable ones such as fabric, foam rubber, latex. The hand puppet is usually legless or with stuffed legs, which merely hang limply.

Shadow Play of China which is usually called "the home of shadow play", with the longest history, the most charming images and the most marvelous techniques in performance, has exerted great influences on the world culture.

A puppet, usually two-dimensional, is placed against a screen so as to interrupt the light from the rear or above. Shadows may be in silhouette (opaque) or colored. A shadow puppet may be a single shape or sectional, and articulated by means of hinged, overlapping segments. It may be made from leather, metal, cardboard, plastics and theatrical gels.

The Chinese shadow play, has three branches: hand shadow play, paper shadow play and leather shadow play.

Today, the stage has been expanded and modified. The glove puppets have been enlarged. More three dimensional props are used, and a wider variety of plays are presented with diverse themes and greater dramatic appeal.

Traditional Techniques

Shadow puppetry is technically a very simple kind of performance to make. It requires just three things: a light source, to cast a shadow; a blank white screen, to catch the shadow; and a shadow figure to create an interesting shadow that can be moved with rods.

The light source is very important in shaping the kind of shadow that we see. Originally an open flame or oil lamp was used and the motion of the flames gave the shadow a lively, quivering motion that must have contributed to the magical effect of the shadow image. Today electric lights, or an overhead projector, make a much brighter steadier and more focused image.

In traditional shadow performance, the shadow screen is any piece of white paper, silk, linen or cotton cloth, stretched tight over a sturdy vertical frame. The light source and the puppet are placed behind the screen and the audience sits in front, seeing only the pattern of light and dark that plays across the white surface. The most important quality for the screen is that it be “translucent,” that is, it allows for the light and the colors to pass though it with little dimming. On the bottom edge of the screen is a narrow shelf called a “playboard” on which the shadow figures can stand and walk on. Often times, modern shadow screens are made out of plastic shower curtains or rear projection material.

The shadow figure that stands between the light source and the screen is the most complicated part of the whole process. The shape of the figure blocks some light and lets other light through where it is cut away. They can be made with many moving parts so that they can be move in very lifelike manner. Rods are attached to the figures so that they could be made to move without the puppeteer's shadow being seen. Traditional Chinese shadow figures are made out of translucent animal skin. A typical human figure will be jointed out of eleven different pieces, held together with strong silk thread, and manipulated by three stiff wire control rods. One rod is sewn to the neck of the figure, so that it can change the direction it is facing with just a flip of the control rod. The other two rods are attached to either hand. A well constructed shadow puppet is well balanced and capable of all types of movement, both delicate and strong- they can sip tea, or they can fight fierce battles with swords and spears. A master puppeteer can work one figure in each of his hands.

Media Innovations

Today, even with film, television and computers, and all kinds of sophisticated animation techniques, the ancient forms of shadow puppetry have not totally disappeared. It has adapted modern materials and methods, but the essence of the art form is unchanged since the day that the Han Emperor sat down in astonishment at seeing the ghost of his beloved wife.

During the 20th Century, many technical innovations have revolutionized the art of shadow puppetry. New materials have been developed, including unbreakable plastics (polycarbonate or “Lexan”) which have made it possible to build much larger shadow figures than traditional animal skin figures, and new synthetic dyes and translucent paints can make shadow figures even more brilliantly colorful.

Perhaps the most significant development has been in lighting. In most traditional shadow forms, the light source that creates the shadow image is an oil lamp or standard light bulb. But modern shadow artists have a wide selection of light sources are available: slide projectors, overhead projectors, even video or computer projections specialty bulbs that can create crisp, sharp shadow images twenty feet tall. Controlling multiple light sources is made possible with computerized lighting boards.

Mixing and merging all these elements together have given the shadow artist the freedom to create large-scale moving image spectacles that are closer to animated film than to traditional shadow performance. Using an overhead projector as a light source, instead of a light bulb can magnify an object or puppet figure placed on its flat, glass table-top of the projector to create an image large enough to fill a huge movie screen. A very small figure only a few inches tall can be transformed into a gigantic image. Larger scale shadow images, such as those created on an overhead projector, can be easily integrated into other forms of live theater performance.

Many artists, both those rooted in traditional shadow forms and those with knowledge of the newest cutting edge technology, have given contemporary shadow theater a new vibrancy and have contributed to a renaissance of this, the oldest form of motion picture media.

FYP 2

A new Semester started. It's the time to proceed my FYP2 within these 8 weeks.

To submit my work on time, I come out with a schedule and hope that I can really follow the time. ^^


FYP2 Gantt Chart


Thursday, January 27, 2011

Critique 3 - Teaser Video

Untitled from kappa on Vimeo.

Presentation Slides

Critique 3 - A3 Poster

Critique 3 - Flowchart



Tuesday, January 25, 2011

Critique 3 - Functional Spec Sheet










Critique 3 - Conceptual Diagram


PC set is using in my final installation which user can use mouse or keyboard to do navigation.



Critique 3 - Content Acquisition

Traditions are important because they provide continuity between generations. It can be difficult to keep up with extended family members these days, and of course it is impossible to touch those who are long gone. But traditions create a bridge between the young and the old, between the past and the present. Besides that, the value of a tradition is not in completing the ritual; the value comes from what it provides for those who participate. To judge the values of Chinese Puppeteering, it is considered of how many participants to watch the show rather than a completely and perfect performance but non-participants. To make this tradition more interesting and attract people to explore more is the objective of this project.

Information of Traditional Chinese Puppets such as
  • Historical
  • Types of Puppetry
  • Types of puppets
  • Stages
After finish view all the information, user can start their journey to test how much they do familiar with puppets. The game will be divided into 5 stages. Each stage having different kind of test game such as
  • Matching game
  • Shooting game
  • Pick me game
  • Connection
  • Build box

Monday, January 24, 2011

Critique 3 - Ideas for the Teaser Video






Critique 3 - Rough Sketch For The Poster

This poster design objective is with a modern touch and traditional twist.The flash game is full of missions and challenges that the audience have to confront and solve it in order to proceed to the next mission or next stage. "Journey to The West" is one of the most popular Chinese Puppeteering. I am inspired by the tales itself and the motivation of the journey to the West group. Modern touch in this game which mean the puppet game,while on the other hand the traditional twist meaning that the story of journey to the west. The missions inside will be renovated and it is all related to the Chinese Puppets such as historical, types of puppets, stages and etc.

Critique 2 Idea Development - Silversphere

A simple game to make the "bridge" to go over the blue vortex. Get the Silver Sphere in to the Blue Vortex before the time runs out.

Critique 2 Idea Development - Flash Game (Mission)

This is a mission game based that i found quite challenging and attract me.

Homepage with 3 options which is
  • Get Props
  • Start the Game
  • Keys Setting

This is the instruction page to let you know how to control the characters.

Once you finish reading the instructions, you may start now by selecting
  • Easy Mode
  • Medium Mode
  • Hard Mode
After that you will come to this page to select your character.

The game is start now and you must complete the mission by the time given at the top. At the same time, you have to beware your lives left.

Failure scene

Critique 2 Idea Development - Top 10 Historic Destinations

Since Mdm Forest said that user interact with the puppets doesn't convey any message to the audience. So, i have go through other media based to get more ideas.

This is one of the flash based media that I found out on the web. In the homepage, there is a map which showing 10 different destinations that located in US. This flash is just a information application to let user explore more on Historic Destinations.


There is a board at the bottom which showing 4 categories to let user know more about this destination. There are
  • Information
  • RV Tips
  • Photographs
  • Area Attractions
This design is same as other destinations too but only the background design is different.