Evaluation

My overall review of the game.

Weaknesses

My weakness on this project was definately the actionscript coding, having not used the Flash software much before I only knew small amounts of actionscript code.

At the beginning of the project we were asked to draw up a development schedule of how we would plan our work out over the coming months. Initially I came up with what I would describe as an achieveable time scale. However, I did not anticipate the length of time needed to draw and animate all the individual movie clips. I spent alot of my time sketching and planning in the beginning, I believe this to be important in the creative process of a project. However this meant I was behind on my development schedule.

What I would have done differently.

If I were to change anything about the project it would have been to management my time more effectively. Instead of leaving the actionscript coding till last I would have started the project by coding a rough draft of the game before beginning any of the drawings. As actionscript is a weak point of mine, leaving it till the very end of the project had its problems. I came up against a few issues which I needed time to learn about. If I had begun the project by coding the game first I would have been able to rectify these issues and also the game may have become a finished product.

Strengths

I believe my strengths on this project were the drawings and animation. These elements of the game took me the most time, however I learnt alot of new skills from working with the Illustrator program. I enjoyed branding the game and if I had more time I would have liked to have produced a style guide to help with the branding of the website.

My Overall Review

Overall I am pleased with the project I choose to do. I had fun drawing and animating for the game and learnt a lot of new skills in the Adobe Illustrator and Flash programs. I had a passion for the project which helped alot in motivating me, as I thoroughly enjoyed what I was producing.

As the project is unfinished and is still in a prototype stage I would like to complete the game throughout the summer to put towards my degree show.

Improvements I would of made to the game.

As the game is not completed yet there are many elements I would still like to add/improve to the game.

Instructions

I wanted the game to be easy to use and no harder than the user actually placing an item in their shopping basket online. I wanted to use simple instructions, which would pop up over certain items the user had to interact with. I used these instructions in the first scene of the game but did not get chance to implement them on other scenes. Instructions would have told the user to move the spoon over the cupcake case and to click the oven to open the oven door.

Sound

The use of sound enhances the game although my choice of sound clips could have been better and more realistic. I would have also liked to have added additional sound to the background.

Animation

I would have liked to have added some small animation to the first scene, such as clouds moving and birds tweeting. I think with this scene being static compared to the other scenes it doesnt seem visually exicting.

Icing Bag Animation and Sprinkles

Sprinkles

Although this stage of the game made it to the final I did animate the sprinkles being poured over the cupcake. Here are a few printscreens of the animation:

Icing Bag

Although I never got to use this scene in the game, I produced a movie clip animation of the icing bag squirting icing around the cupcake. I drew the icing in flash frame by frame playing close attention to the dimensions of the cupcake and making the icing look like it was being moved around the cupcake.

This took me alot of time but in the end I was satisfied with the result.

Printscreen of stages

Scene One - Shopfront

The game starts at the shop front of the bakery. An instruction box pops up to the user explaining what the game is about and what to do.

Once the user selects the start button in scene one the game fades in and out to reveal scene two which is the bakery kitchen.

Scene Two - Bakery Kitchen

Instructions on the chalkboard tell the user what the aim of the scene is but additional pop up instructions hover over each ingredient to tell them which one to select.

At present the user must only select the ingredients in the order of the instructions.

Once the user has put all the ingredients into the bowl another instruction box appear similar to that in the first scene. This congratualtes the user on completing the first stage and asks them to click next to go through to the next stage.

Scene Three - Choose a Cupcake Case

In this scene the user must select the coloured cupcake case they desire and drag and drop it to the baking tray. Once there they can drag the spoon to the case to add the mixture.

A target was set above the cupcake case which attachs a movie clip once the spoon has been released within it. The movie clip shows the spoon dropping the mixture into the cupcake case.

Again, once the scene is completed an instruction box appears congratulating the user and asking them to select next to carry on to the next scene.

Scene Four - Lets get baking

In this scene the user gets to put the cupcake into the oven ready for baking.

Once the user clicks onto the oven the viewpoint shifts and the game is now angled at the oven and the oven door opens. The user then has to drag the cupcake on the baking tray to the oven.

Once the cupcake tray is released on the oven a movie clip plays of the tray being placed in the oven, the oven door closing then opening and placing the tray back on the side. Whilst in the oven, the mixture rises.

This scene as yet does not have any instructions.

Scene Five - Icing the cupcake

This scene is not yet completed.

When the user reaches the fifth scene they are asked to select, drag and drop a coloured icing bag towards the cupcake. When the icing bag is released over the cupcake a movieclip is played of that coloured icing bag swirling icing around the top of the cupcake.

Scene Six - Add sprinkles

This scene is not yet completed.

Once the icing has been chosen, sprinkles can now be added. A shelf will be present on the wall of the kitchen with 6 sprinkles to choose from:

Star Spinkles in pink, blue and chocolate

Heart Sprinkles in pink, blue and chocolate.

Once the user drags and drops the sprinkles over the cupcake a movieclip is played of the sprinkles being shook over and around the cupcake.

Problems with vectors and transparent layers

When producing the images for my game I drew them in illustrator and copy and pasted them into flash. I did this as I wanted to keep the images as vectors and keep the quality high.

This proved to be quite intensive on the file size of the game. Each image was saved in the library but because they were vectors they could be easily manipulated in flash. This meant every individual layer was imported to the flash library increasing the file size of the game and making it run slower.

Transparent layers seemed to cause the most problems. If I had the chance to finish the game I would have like d to have started changing all transparent layers with similar colours and kept the transparency at 100%.

Transisitions

Originally my idea for the transition of the game was to have a sliding action from scene to scene. I wanted the user to feel like they were part of a real kitchen and to make it as realistic as possible.

When I sketched out the flowchart for the game I planned the position of certain objects so that in the event of the transition, objects could slide across the screen and be placed in the correct position with ease.

I researched into tween classes to help my achieve the sliding action.

First I had to import the classes:

import mx.transitions.Tween;
import mx.transitions.easing.*;

Then I had to tell the actionscript where to slide from and when to slide:

holder2.onPress = function() {

Within this function, I added some code, within the paraentheses I can tell the actionscript:

1. What object to slide, in this case it was _root.holder (I gave the object the instance name of "holder")

2. What co-ordinates to slide (this can be _x/_y/_width/_height)

3. Gave the slide a style.

4. Where to start the slide from

5. Where to finish the slide at

6. The duration of the tween

7. Indicates whether the duration is measured in seconds or frames (a boolean of true for seconds and false for frames is used)

var myHoriTween:Tween = new Tween(_root.holder, "_x", Strong.easeIn, _root.holder._width, _root.holder._width-10000, 1, true);

var myHoriTween:Tween = new Tween(_root.holder, "_y, Strong.easeIn, _root.holder._height, _root.holder._height-10000, 1, true);

However after my research and producing a dummy test I decided to change the transition effect to a simple fade in/fade out.

To enable the slide action I would have had to put the objects needed to slide within a movieclip. This was okay, however the pop up instructions which I delegated this slide action code to was on a seperate movieclip above the game.

This caused a few problems and due to time constraints I decided to make each scene fade in and out using a simple motion tween and alpha transparency. In the future I would like to add this slide action to the game as I think it would enhance the users experience.

Sound

For sound in my project I have decided I will use quiet background music with sound FXs layered over the top accompanying the users actions.

Sound FXs I will need are:

First Scene

- Shop door bell chime
- Ingredients being mixed in a bowl
- Sugar being poured into a bowl
- Flour being poured into a bowl
- Eggs being cracked and poured into a bowl
- Butter being scraped from a butter tray

Second Scene

- Mixture being poured into cupcake case

Third Scene

- Oven door opening and closing
- Oven Bleeps (setting timer)
- Baking tray sliding into oven
- Tray being dropped on wood surface

Forth Scene

- Icing being squeezed out of icing bag

Fifth Scene

- Sprinkles being shook out of the jar

All scenes

- Button clicks
- Quiet background music
- Chalk writing on a chalk board
- Instruction pop up sounds

Background Sound

Here is a track I am contemplating using for my background sound:

http://lullatone.bandcamp.com/track/a-plastic-bag-in-the-wind

Oven Image

Here are the stages of animation for the oven. When the user drags the baking tray with their cupcake on to the oven and animation will play of the oven door opening and the tray being put into the oven.

If I get time I would like it so that the user can turn the oven knobs to set the timer. Oven bleeps will be the Sound FX which will accompany this animation.

Website Mock-up Design

Here is the final mock up design of where the game will be shown.

Mamas Little Bakery Logo

This will be the logo and the branding to the website:

Shop Front Design

Here is the final design for the shopfront for the cupcake store. This will be the starting point to the game. The user will be greeted with a welcome message and then will click on the door to enter the cupcake kitchen.

Inspiration taken from:

My own design sketches.

Here: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyY32F-k-jAxJe7QEuigUyTlXAP_XodrNlCqmM18Ig_dG0AIUexTIqKME8V4WqxBU_Om05GMOa-iqOh7WLi6ywT2-EAPiOpqIJtvEWuPr7VVjBIm7xZb23CQWTOz7cnls5H7TGxKDnqFNT/s1600-h/scan0004.jpg

Sugar Animation

Originally when sketching out my inital ideas for the sugar I wanted to use granulated sugar to make it more realistic. However after many attempts are trying to draw sugar grains in illustrator, I had to choose sugar cubes instead.

Perhaps for future improvements the sugar can be changed to granulated sugar.

Sprinkle Options

Cupcake Sprinkles - Blue Stars

For the cupcake sprinkles the user will have the option of:

- Hearts

- Stars

in 3 colours:

- Baby blue

- Baby pink

- Chocolate

Here is how the animation will be played out:

Sprinkles Sketch

Once the user has finished layering their cupcake with icing, they have the choice to add sprinkles.

I have done a quick sketch of how I would like the jar of sprinkles to look.

Flour Animation Stages

I drew the stages of the animation in illustrator and then imported them to flash. Each individual image was put onto a seperate keyframe and put within a movie clip.

Instructions

During the game, instructions will be shown on what to do on the current stage. I have drawn a chalkboard which will be placed on the kitchen wall above the worktop.

I originally planned to use a sheet of paper stuck to the wall, similar to that of a recipe sheet which has been ripped out of a book.

I thought the chalkboard design worked well with the asthetics and style of the game. The font used is Bitch Cakes, and was downloaded from dafont.com

Egg Animation Stages

Here are a few of the stages of the egg animation. I drew the stages of the animation in illustrator and then imported them to flash. Each individual image was put onto a seperate keyframe and put within a movie clip.

I found this image particularly hard to draw, especially the egg carton. I tried drawing the carton with and without a lid. I found it hard to get the dimensions right in line with the perspective of the game.

Butter Animation Stages

I drew the stages of the animation in illustrator and then imported them to flash. Each individual image was put onto a seperate keyframe and put within a movie clip.

These images show the butter being sliced and put into the mixing bowl. When the user selects the butter and drags it towards the mixing bowl, the animation will play of the butter being added to the mix.

Sugar Animation Sketches

Below are a few sketches of how the animation for the sugar being poured into the mixture bowl would look.

I would like the animation to run once the user has dragged and dropped the bowl of sugar to the mixture bowl.

1950s style kitchen

Below are images I found on google of cute cupcake cafes situated in America.

The fontface used in the sign in the background is reminicent of the 50s style signs.

The image above is a good example for the design of the shopfront in the game.

The striped canopy above the door and the colour scheme is something I would like to incoporate into the 1950s style kitchen.

Oven Research - Images

For the design of the oven, I wanted to draw influence from 1950s style kitchen appliances. I think this style would fit well into the theme of the kitchen.

Oven Vector Stages

Here are a few screen shots of the stages of the oven being drawn. I am pleased with the overall outcome for the design of the oven.

I found it particulary difficult to get the perspective of the oven to fit in with the rest of the kitchen worktop.

I orginally wanted the design to have a 50s kitchen feel, so I opted for a turquoise green colour after some research on 50s kitch ovens.

Egg Animation

To get an idea of how the animation would work for the eggs being poured into the mixing bowl, I drew a step-by-step animation of each frame.

I also drew a quick sketch of how the eggs would look on the shelf. 2 eggs will be needed for the mixture. The user will be able to indiviually select an egg at a time and drag it to the mixing bowl.

As this sketch is based on 3 eggs in a carton, my proposed final illustration will be of a carton with 2 eggs in to eliminate any confusion for the user.

Flour Animation

An animation has been made of the flour bag being poured into the mixing bowl.

White clouds of smoke were drawn in flash in two stages - one at 100% alpha and the other on another frame at 0% alpha.

A motion tween was added between the two stages to create the effect of smoke rising once the flour was poured into the bowl.

Here is a short video taken with my iphone of the flour animation:

Butter Animation Sketches

Here are some quick sketches for the animation of the butter being sliced and put into the bowl of mixing ingredients.

The idea is that the user will select the butter tray with the knife and drag it to the bowl. Once the user has released their mouse the animation will play of the knife cutting a slice of butter and sliding it into the bowl of cupcake ingredients.

Selecting the cupcakes - Depth of field

When the user selects a cupcake case from the shelf in the kitchen, I wanted the case to scale larger to have the appearance that it was coming towards you.

1. Actionscript was used to first define the width and height of the cases. This is so that if the case was dropped on stage it would snap back to its current size.

2. Each case is defined as .this, using the variable .this constitues to anything the mouse is clicked on.

3. The script first starts by saying if the cupcake case is clicked and it is moved more than 74 pixels on the Y axis to scale the case by its original size divided by 2.

Image 1: The blue cupcake case is selected and is noticably bigger than the original pink cupcake case.

Image 2: The blue cupcake case gets bigger as it gets closer to the baking tray.

Image 3: The case keeps its shape when placed on the baking tray by defining its X and Y coordinates to 94 pixels.

New Icing Bags

After gathering feedback on my drawings, it came to light that my original drawings of the icing bags looked to unrealistic and too square.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ZiQhm8GMs_JY6p2w14MOwGFvoNlhdXPDmR3GyCeaqkWsFdSCmWyjp2GxNd7JSpqcJ_WiVlWm0J42v5lhEdDs7PbfooydUYdVFDXNcSk8RxwQoBgjF3iF1xY_gjbSCaC8PGQLbvltq3-L/s1600-h/icing-bag.png

I re-adjusted the look of the icing bag and came up with this design:

The Octonauts - Inspiration

Inspiration for the kitchen style was taken from an image in the book 'The Octonauts and the Frown Fish' I used the same style of kitchen worktop to get the appearance of wood.

http://www.octonauts.com/book.html#octoff

Icing bags design

chocolate, baby blue, baby pink and white

Example Images

Here are some images I found which I liked the design of. All images were taken from iStockphoto. I used some as a template to draw round in illustrator.