Finishing up and story time!

Everything that I wanted to happen has now happened. I would have liked to add a second level to the end of the tutorial stage but I thought it would be just more of the same just with different art which I felt was a little unnecessary given that the tutorial wasn't the way I wanted it exactly. In the end I think I've got across what I set out to do.

Here's a little breakdown of the story for those who're interested, I believe I haven't outlined it yet...

Ella, a young girl with a passion for painting, falls asleep one night and accidentally knocks over a pot of white paint on to the art she's just completed. In her dream she falls into the painting to find that parts of her world are covered in white paint, blocking them out. In the opening scene, Ella stumbles across a magical paintbrush which gives her the power to paint back over the white paint, fixing the various parts of the world. It's her task to help the people of the world in restoring it back to proper order.

If you're really interested in playing the game for yourself then have a wander over here. It's optimised for Google Chrome browser so I'd recommend using it in that!

If you can't physically play the game (if you're on a phone or tablet for example), head on over here to check out my presentation video of the final piece!

Final additions

So I'm coming down the last couple of additions to the game and I've added some further prompts to explain what things are to players, for example, what a checkpoint does and what that mysterious bucket is in the top right hand corner of the screen.

Also if you had noticed, last post I showed some screenshots without any trees. My reasoning behind it was that with the NPC's and the cottage, and other things on the screen, it just looked horrifically cluttered and it just wasn't working design wise. I've since updated it so it now has hills and I feel it looks more like the player is approaching something rather than being lost in the woods. That's my two cents about it anyway.

Here's a couple of the prompts that you'll see when playing the game!

Leading up to the date.

After an oddly long summer of working two jobs and moving house, I've been able to come back to the blog and give you my progress on the game.

First things first, I've added all my design assets into the game. There are a few tweaks to come but as it stands, the game works fine as it is. Here's a run down of the level:

Ella starts off with button prompts telling her what to press to move.
Moving on she has to jump across some gaps in the floor due to not being able to fill them in.
After this, she talks to an NPC to receive an objective.
Ella then has the ability to pick up the brush to fill in objects.
From here she can help out the NPC and free his friend from the house by filling in the door.
After this, Ella hits a checkpoint to save her progress.
Then after another jump there's a gap just too big for her to leap across.
She uses the paintbrush to make the gap small enough to jump past.
End of tutorial.

So it's short but sweet. It give's the necessary information to the player for progression without inundating them with tasks and objectives to fill. There's no lives so the player has no pressure to perform outstandingly (even I die on occasion) and the checkpoint gives the player opportunity to start from a progression point rather than the beginning of the level again.

Here's some screen grabs of a few new things:

Poster!

For one of out assignments, we're required to produce a poster outlining our question from the beginning of the year. I'll upload my final poster here for you guys to look at.

I can't really upload a picture clear enough to read the text so here's a transcript of the entire thing:

Charm - A study in the understanding of the core elements of charm within the gaming industry

Introduction

‘Charm’ - “a power of pleasing or attracting, as through personality or beauty” (Entry, dictionary.com). This word has been used to describe various different aspects of many games to date, but without context or explanation, its meaning is lost. On a personal level, I have opinions of what can make a game like this, whether it be due to the art style, gameplay mechanics or the story. Each part has to fulfil a specific role for it to cross the threshold of what I can consider to be charming, and as such, I often find that I’m attributing this word to games of the puzzle genre without any real knowledge of why. Marty Sliva and Lawrence Sonntag, both notable reviewers for IGN and Inside Gaming respectively, have both commented on charm that can be found in games, Sliva stating that “Yoshi’s Wooly World looks charming as heck” (Sliva, IGN.com) and on Edna and Harvey: Harvey’s new eyes’ “charming enough to want more” (Sonntag, insidegamingdaily.com).

Rationale

Quirkiness and charm are “so often absent from our industry's products, and so undervalued” (Nutt, www.gamasutra.com) and it’s usually quickly overlooked in favour of violent video games because at it’s core, “violence sells” (Yenigun, www.npr.org), especially in video games. This had lead to a rise in war games such as Call of Duty and Battlefield and inevitably, leaving the quirky and charming games behind. More developers have fallen to the trend of making violent games as “it's often easier to do violence than it is to generate meaningful, interesting conflict through nonviolent ways.” (Pope, www.gamespot.com). During my research, I aim to find a definition of what’s required to make games that are meaningful and interesting by exploring games that are described of a charming nature.

Research Methodologies

I conducted both primary and secondary research when searching for an overarching definition of ‘charm’ within video games. The former was primarily built around playing games which I had personally felt were charming, taking into account the art style, gameplay and stories contained within each game. I find that this research helps me understand what I feel to be charming, for example, the charm for The Legend of Zelda: A Link Between Worlds comes from a mix of the art style having bright colours and ‘cute’ character design and the game mechanic of merging into walls, opening up the world to a whole new dimension of traversal

The latter part of my research took me online when I found an abundance of reviewers, both professional and amateur, expressing their descriptions of games which, they too themselves, thought were of a ‘charming’ nature.

Both methods provided me with feedback for individual aspects of this style of game, this being what the common denominators are when describing them. Then I was then able to feed this into the development of my project to distinguish a personality which I had been working towards.

Development

I set out with the idea that I wanted to learn what ‘charm’ really meant in a game and so I began my research into which games the word can be pinned to. Several articles published online had lead me toward games like “TownCraft” and “Bravely Default”. I looked at each of the articles I had found and saw that while many refer to the games as charming, they also had similar descriptions respective to art style and gameplay. TownCraft has “adorable artwork” (LeFebvre, www.cultofmac.com) and Bravely Default’s “characters are adorable” (User Review, www.giantbomb.com). These two very different games have a similar frame of reference when the art design is talked about, making it clear that there are similarities within games which overlap and strengthen the idea of ‘charm’ within them. Furthering this, I found, it wasn’t only the art style which was referred to, it was also the game mechanics, the story and the music which all gave these games personality, this lead to finding that each of these elements were deeply embedded in the delivery of the tones and moods of these games.

Results

During the course of my research, I found that the umbrella of ‘charm’ was often used in context with all similar aspects of these games. It was often repeated in different articles about different games but each had their own description eluding to what it means to have a game be ‘charming’.

• Art Style - Often when the art style was mentioned, the words “adorable”, “colourful” and “beautiful” are all mentioned. This ‘cute’ ideal is more than apparent in many of the examples I’ve seen throughout my research.
• Story - As for the stories and where they’re concerned, the narratives are seen to be “both funny and heartfelt” (Webster, www.theverge.com) in reference to ‘Thomas was alone’ and in cases “minimalistic storytelling method preserves some mystery and intrigue” (User Review, www.gamefaqs.com) when discussing Contrast. These methods of storytelling allow the player to really connect with what’s happening within them.
• Characters - Not just the stories however are a major part to this but also, in the case of Peggle 2, the characters being a part of those stories give “the game(s) personality” (Molina, www.usatoday.com). With the characters being relatable, they give an added depth to the player experience.
• Mechanics - When the core mechanic is “well-executed” (User Review, www.gamefaqs.com) and “shakes up what you’d expect from the genre” (O’Rourke, o.canada.com) it becomes a natural part of the player’s actions as they progress through the game. Having intuitive and simplistic controls don’t detract from the tone that the story and art style give off.
• Music - Finally the music has an intense role to play in the overall feel of these games. As the “main theme perfectly captures the mood and tone” (O’Rourke, o.canada.com) in Child of Light and “subtle but moving music playing” (Nutt, www.gamasutra.com) on Animal Crossing: New Leaf, both give an incredible sense of mood and tone to these games, it becomes another part of the package which fits all of these pieces together.

These points gave me an insight into how to proceed with the building of my project. To build charm into my game, I will have to create a character that the players can relate to and have them fit into a story that can be funny and intriguing. The mechanics will have to be an integral part of the story too; rather than just having options to pick up items and proceed to the end of the level, there needs to be an action which the player has reason perform. Then finally, the music needs to have an air of subtlety, not be too overpowering but has dramatic effects when necessary.

Outcomes

After finding my research had provided me with a greater understanding of how each part can collectively portray a games personality, I should be capable of producing a game of my own design to display the ‘charm’ that I’ve been looking for. The conventions I can apply to my game will enable others to have an easier understanding of this style of game and how they are built.

With the design of ‘Ella’, I wanted to approach the innocence of a child with a creative spark. To begin, I designed her character to look ‘cute’ with a large head and big, wide eyes, to portray a sense of youth and explorative nature. The story has Ella fall asleep whilst painting and becomes a part of the paintings she’s done, the idea is to help out characters by way of painting in the missing (or covered up) objects. With the art style, I’ve kept the design coherent to the story to make the player actually believe they’re playing levels in a painting. This also follows through to the game mechanic, having Ella ‘fill in’ parts of the paintings by using a brush to complete them, rather than have the objects just appear, they’re ‘painted’ in with large brush strokes until they’re complete.

Websites

LeFebvre, R. (2013) Adorably charming game TownCraft gets the job done [Internet], cultofmac.com. Available from: <http://www.cultofmac.com/251396/adorably-charming-game-towncraft-gets-the-job-done-review/>

Molina, B. (2013) ‘Peggle 2’ a charming puzzle game [Internet], usatoday.com. Available from: <http://www.usatoday.com/story/tech/gaming/2013/12/10/peggle-2-review/3950167/>

Nutt, C. (2013) The quiet genius of Animal Crossing: New Leaf [Internet], gamasutra.com. Available from: <http://www.gamasutra.com/view/news/195157/The_quiet_genius_of_Animal_Crossing_New_Leaf.php>

O’Rourke, P. (2014) Child of Light is elegant and charming but lacks depth [Internet], canada.com. Available from:  <http://o.canada.com/technology/gaming/review-child-of-light-is-elegant-and-charming-but-lacks-depth>

Pope, J. [Quote] (2013) Ex-GTA developer explains why he'll never go back to violent games [Internet], gamespot.com. Available from: <http://www.gamespot.com/articles/ex-gta-developer-explains-why-hell-never-go-back-to-violent-games/1100-6408576/>

Sliva, M. (2014) Yoshi’s Wooly World looks charming as heck [Internet], ign.com. Available from: <http://uk.ign.com/articles/2014/06/10/e32014-yoshias-wooly-world-looks-charming-as-heck?abthid=53972f21e6fa906820000007>

Sonntag, L. (2012) Edna and Harvey: Harvey’s New Eyes Review [Internet], insidegamingdaily.com. Available from: <http://www.insidegamingdaily.com/2012/10/31/edna-harvey-harveys-new-eyes-review/>

User Review. (2014) A charming game nearly ruined by poor plot design [Internet], giantbomb.com. Available from: <http://www.giantbomb.com/bravely-default/3030-43731/user-reviews/2200-27297>

User Review. (2014) A charming concept game that successfully strives to be more [Internet], gamefaqs.com. Available from: <http://www.gamefaqs.com/ps4/724522-contrast/reviews/review-156641>

Webster, A. (2014) ‘Thomas Was Alone’ is the iPad’s most charming game [Internet], theverge.com. Available from: <http://www.theverge.com/2014/5/15/5720518/thomas-was-alone-ipad>

Yenigun, S. (2013) Video Game Violence: Why Do We Like It, And What's It Doing To Us? [Internet], npr.org. Available from: <http://www.npr.org/2013/02/11/171698919/video-game-violence-why-do-we-like-it-and-whats-it-doing-to-us>

Images

Fig 1. - Yoshi’s Wooly World, Video Game, Nintendo, 15/06/2014

Fig 2. - The Legend of Zelda: A Link Between Worlds, Video Game, Nintendo, 28/11/2013

Fig 3. - Bravely Default, Video Game, Square Enix, 19/06/2014

Fig 4. - Child of Light, Video Game, Ubisoft, 19/06/2014

Mechanics build

After having the design assets build shown off I've gone into making a mechanics build where I've added the core mechanics of the game. Now bear in mind that is incredibly early at this stage and there a couple of initial tweaks I wanted to start with because they weren't working for me. For example the controls now work as 'AWD' (I don't need 'S' for crouch in this instance) rather than the arrow keys. They were too clunky to use and too far away from the rest of the keys to have any sensible function.

I added an encounter with an NPC (in this case he's a rectangle, placeholders right?) where you can talk to them to get instructions on what to do. I've also added two types of events where Ella has to repair a door and a gap in the floor to progress. Bear in mind there are likely to be bugs in this build but I just wanted to get a core idea on the screen before I refine it down.

Here's the mechanics build so go and check it out!

Updates!

The web address I linked last post has now been updated to add something cool! Now, Ella has the ability to pick up the brush and walk around with it. Granted she can't actually do anything with it but it's enough to show an event in the game which players will encounter early on.

Go take another look at it here: Click Me

Parallaxing and prompts

So last post I talked about adding control prompts to help the players figure out the controls. I was going to just have a sign or just a flat image on the screen with the controls but I thought it would be a little quirkier to have the buttons appear above Ella's head and press a couple of times to inform the player that they need pressing to do anything.

So I've put that in the game!

That and I was walking around the stage and found that the background all seemed a little too flat. Everything moved together and it didn't have and physical depth to the level so I've discovered a little feature called Parallax in Construct 2 where I can move different layers at different rates. It makes it look pseudo 3D which is pretty cool in my opinion!

Check it out here: Click me!

Backgrounds and settings

After starting the test stage I realised that I'd want to focus on art assets first instead on the tech side of things so I went ahead and added a background loop of some trees and clouds so it's a little more interesting than just the floor and a white background.

They are a little basic but I kind of feel like that lends to the feel of the game. Maybe the trees need updating but honestly they seem to be adding too much clutter to the scene. I might have to get a woodcutter in to deal with it...

I also need to have some prompts on which buttons to press to move the character since they aren't traditionally 'WASD' by default, they're arrow keys which is just confusing to us gamers.

Building the level

Now I have my character design sprites in place, I've gone ahead and started building a test level in Construct 2 to try and understand how the program works. It seems incredibly straightforward but I'm sure I'll find a way to struggle with it. It runs on conditions and if statements, much like Visual Basic (I did computing in college) but in a more user friendly manner and not just lines of writing code.

For the time being I've gone ahead and made a grass floor sprite so Ella has something to walk on when she's in the game world. The idea is to have some floor sprites with gaps in them when they're covered in paint which aren't solid so Ella can fall through them, thats for a future patch though.

Here's a first draft of the grass:

Casting with and without the brush

So to recap, Ella will be starting off in the game world without the 'magical brush' so there needed to be a whole other set of animations with her not holding the brush. This, in truth, was pretty easy, it was just a case of taking all the animations I already had and deleting the brush from her hand. It was more of the duplication of all the images which added on to an already mounting file size so I have to keep the storage use down somehow to keep the game running smooth. I'll probably end up saving everything in a PNG format so that should solve the file size issue.

Anyway, here's the animation sprites for Ella when she's casting with the brush (for the sprites without, just imagine no brush):

Is that jumping?

Errr, honestly I don't know what to make of this one. Really, I have tried to make it look as natural of jump as possible but I'm not entirely convinced. Maybe it's just me over-analysing it or maybe I've just been looking at it that long that it's starting to look so, so wrong. Kind of like whenever you read a word over and over until you've begun to question it's existence in the Oxford Dictionary as a legitimate word. Or maybe that's just me too...

Moving on:

I mean there's two things I need to take into consideration here, the first being that Ella won't (normally) be jumping this frequently so it's unlikely to be a major concern. The second being the fact that even while typing this, why is the animation so nauseating? Hang on, let me find a bucket (and maybe scroll down past the animation).

Where was I? Oh yeah, the second point is that while I'd like there to be more frames to properly portray the jump and fall, I get the daunting feeling that it may become a hassle to code so I'm going to want it as simple as possible without going into too much detail.

Now, where's that bucket again?

Animating Ella

So now I've got the basic design down to how I like it, I've started animating her model. Now, you've already seen the 'idle' animation, but just in case you missed that post, here it is again (with the added shaders and no jitter this time... hopefully):

I think I'll have to point out that the quality of gifs aren't brilliant (they look fine locally, honest) but I'm sure you're getting the general gist of the animation here. I've also managed to get the 'walk' one done too. This took a while since it was a struggle going back and forth through Photoshop and Illustrator and tweaking the movement to look like an actual person walking. That and making sure there were enough frames for the animation to run smoothly. Again I can't count for upload quality but the basics are all there:

*Upon review, I've noticed it's just the 'idle' that looks shoddy, should be fixed in a future patch...

**I've also now noticed that it's to do with the lack of transparency on the second image, meaning it has a white background instead of none at all.

Refining the style

I've played a little with having solid black outlines and having the line work that I used in my past post on Ella, and having seen the two differences, I've come to the conclusion that I prefer it the first way. Take a look:

That being said, Ella herself seemed to be lacking something so I've added a few shadows to the design and I think it adds a kind of 'paper cut out' effect to her, and as I didn't intend for her to look overly 3D in nature, I feel it lends well to the model.

Adding colour and idle animation

Here's a very short post but I've managed to get my basic drawing of Ella into the computer and with a little tweaking and adding colour I'm a happy with what I've got so far:

She's wearing a night-gown/nightie/whatever-you-call-it, because the story starts with Ella painting/drawing while in bed and she falls asleep whilst doing so, she then dreams about being in the painting which is half complete (cue 'The Unfinished Swan') and so she has to finish the work she already started. Not worked out all the fine print but that's the idea I'm heading up!

Starting Ella

I'm calling my game 'Ella' since that'll be the name of the player controlled character, also I guess I wanted to keep things simple without trying to think of a witty/inventive name for it instead.

This aside, I've started work on the actual design of Ella so I've been taking a look at various different  examples of children's literature to help the design process. Here are just a few which I've taken cues from:

I wanted to keep a drawn look and feel without making it look too polished and refined, similar to the top image, taken from "My Father's Arms Are A Boat". As well as this, I wanted to use a 'pastel' style colour scheme similar to the bottom image to keep the colours neutral and similar to those found in children's literature.

Here's my initial sketches:

Laying the ground work

Alright, I've started to decide what I want my game to look/feel and be like so I thought I'd share it with you guys.

Initially I wanted to have a game which used shadows and a flashlight to help the player navigate in a 2.5D puzzle platform environment. The concept was simple, using the flashlight to cast shadows on the background in order to manipulate the level and alter how the character can get around.

The more I thought about it, I started to stray away from that idea and wanted something to be clean and simple, after all, the game was supposed to come across as 'charming' and that wouldn't fit into a horror-esque genre properly. This led me to drastically alter my plans for using shadows and lean towards a more 'Unfinished Swan' form of gameplay (but in a 2D style). If you've not had the chance to play The Unfinished Swan developed by Giant Sparrow, I'd highly recommend doing so, right now. Get your hands on a PS3 and go have fun. Seriously.

Here's a little look at the game: