Submission product - Beta version

Like I mentioned on my previous post, the game is technically finished, the only things I'll be fixing after is probably touching up some sprites and animations, dialogue timing, music enhancement and camera angles. For the submission, I believe I've reached the requirements, which were a playable level with pixel art.
At this point I'm quite pleased with the quality and with the proficiency on which I feel I can use the engine now. Never the less, I am aware that there's a LOT of room for improvement, and certainly will carry on polishing it for the final year show and the Game Republics student showcase in Huddersfield.
If you want to have a go at it, here's the link to the online file:

Sanctuary (beta version) 

[if there's any obvious problems please refresh the browser. If it doesn't fix the problem, let me know. Also it was designed and mainly tested on Google Chrome, but as far as I'm aware, it should work on Firefox and Safari] (give my level some dignity and don't use Internet Explorer...please...) 

Because I realised that not many people might wan't to have a go at it or probably they get lost ... or just want to cross your arms, lay back, watch and judge my work then here's a screen recording of me playing the game (me knowing what to do). There are conversations with the characters outside the main main storyline, just in case people get lost, and also to give a bit of inside to the story and the characters.

Any feedback would be more than appreciated it, as I still have the end of year show and the Game Republic Student Showcase.

Idle sprites - from concept to pixel art

Although I know that having made fully rendered graphics for the entire game (ie choosing a resolution and drawing it all) would have been slightly more within my comfort zone, I was determined to for once, make an entire project on pixel art. After comming along with some of the main characters' concept art  that mainly where made as promotional art I started making the conversion into in-game graphics.

I knew I was going to make big sprites and stay away from 8 or 16 bit graphics as I wanted to portraid a nice amount of detail. 

The first character I wanted was obviously the main character Kamea, which pretty much has been used as a reference for the rest of the level. Because she's meant to be quite short, all the other characters would normally feel quite tall, therefore I had to think of a way for the sprites to look approachable (with some exceptions). 

From the concept art, Kamea kept quite a lot of features. Same happen with the nymphs Alba And Kera, but in the case of Teles and Azmer it was a total remake from the original concept image, mainly to fit the scene.

I've already talked about the animation for Kamea. She was clearly the most challenging one due to having motion. The rest of the characters only have an idle animation. I was literally make a breathing 2 frame animation, but challenged myself to a bit of extra motion, and managed to get something a bit more exciting in 6 frames for each character:

Alba and Kera

Azmer

 Edric

 Teles

. 

Must admit that pixel art animation is not easy, but I enjoyed animating Teles and the nymphs the most. 

I want to try more flames and liquids next time! :)

Sprite Animation

I've done some work before related to animation in games, yet it always amazes me how hard it is to get it to look right, specially when there are several quick actions the player must make. In this case I'm lucky that the level doesn't feature any complicated mechanics as this keeps the animations to the minimal, giving me more time to work on them and get some fluid movement.

At this point in time I'm already behind, therefore I don't have the luxury of animating every single aspect of the game, yet Kamea is obviously the character that will have most of my attention.

Ryan agreed from the beginning to help me out by comming out with some rough animations which I could the draw over and fit the sprite. This is the walking cycle he came up with:

Knowing tthe amount of work he's got with his own project, I didn't feel like asking him for any corrections or any othe cycles, therefore I opted to adventure myself on the animation process.

No matter how much I looked for video reference I couldn't find something that I felt right so I had to make my own reference (which will never see the daylight ever). 

The idle idea didn't require reference at all as it was just a simple breathing movement, eye blinking, ear moving and perhaps a bit of exaggeration on the movement of the hair, mainly to accentuate the idle animation.

The runnin was a challenge as it was a 10 frame animation with all different frames. The character is not fully on side view as I keep this cartoony feeling of 'always looking at the camera' and that made the refencing a bit difficult. I managed with the front arm to give a bit of depth feeling, but I failed to do the same with the hair. I was quite pleased with the outcome for this running cycle as I tend to always get it weird looking, specially when it's a run that loops endlessly.

For the jump and fall I thought about making a proper animation that included a bit of anticipation, but no matter how I wanted it to fit it in, it will always look weird as the fluidity of the character in play doesn't include that small pause needed. At the end I decided to stick with only two frames for the jump (because of the determined hight that she can jump) and 3 for the fall (in case the player falls from a higher place).

Hopefully I'll have enough time to fit in a climbing animation, other wise I'll have to re adapt the level with some platforms instead of climbing ropes. 

As for the rest of the NPCs I'll only stick with a very very VERY basic idle, just to make them stick out as interactive characters, but if I have more time to before the Game Republics student showreel then I'll probably add some extra frames.

Meet: Alba & Kera

Alba and Kera are the two nymphs that lie in the far end of the conservatory. Alba (orange skin) is possess the power of dawn while Kera the power of dusk. Never meet each other while being free, yet once they where captured and locked up in a cell, secluded from the rest, they found out that they where in perfect sync, both body movements and thoughts. Their individual powers are unknown, but definitely strong. They've never convinced forces before, yet they can sense that it can be a powerful weapon. They rely on their voices to cast their powers with words, yet the collars implanted by 'him' prevent them from making any incantation. The cage itself also helps to keep their powers under control. The flame over their heads represents their power and emotions, yet it can't actually make anything caught fire. Ever since they've been there, they have become the main adoration of 'him' and he's been the only one that has come in contact with them. The backstory of the nymphs is unknown. 

Alba and Kera where the must fun and sexy to come up with. There where so many ideas that came to my mind, from plant like humanoids to bird-like creatures. I wanted to avoid an elf look and also a ying yang concept. They're still representing opposite entities, but at least I managed to balance it out with some colour and features like the horns. Most of the features where inspired in biblical images with the halo and the flames, yet I added some horns to Alba (but doesn't mean she's evil). Being nymphs, I couldn't come up with clothing for them, as they represent free natural spirits, so I added a massive amount of hair (although they might still be quite...  provocative). I wanted to keep them secluded from the rest of the characters; by not having much interaction with the players in the level I made them into a special characters (you can only access them near the end). Enjoyed playing with loads of colours, specially on their eyes. Hope their (almost) nudity won't create any kind of trouble...

Branding - logo for everything

Something that I always tend to do is branding my ideas; give them logo, themes and anything that can help making it feel like a unified project. 

In the case of Sanctuary I tried to embraced the art nouveau/ Victorian style as much as possible, by keeping detail and lively colours. Of course this theme is subjective and didn't stick to the rules of any style, but that's mainly to give it a twist of my own creation. 

For the logo at fist I wanted to make something quite stylish, and went all the way with the idea that I liked the most: 

I knew it was saturated, but I think I thought about it far too much to the little flaw on it's creation: it's unreadable! 

People who looked at it just couldn't work it out at first, so what's the point of a logo if it's not easy to recognise. At this point I decided to stop working on it and get rid of it. 

In the mean time I also created little logos for the characters, maybe a bit unnecessary, but I could't help myself. 

I wanted to use iconic imagery from what the mythical creatures behind their creation represent. Kamea has a Unicorn, Edric a medieval dragon. I used a lion for Azmer as Wemics are not common part of mythology. For Teles I didn't wanted to use a mermaid as it would drive people to think he was a girl, instead I used a jewel in the shape of a water drop, to represent a bit of the royalty in his family line. Alba and Kera where the difficult ones; nymphs don't have a representation other than nature so my first thought was flowers, then I thought about the sun and the moon, but I decided to put them as birds, mainly because I didn't wanted to give away the idea of  the source of their powers straight away. 

I didn't really spent much time on these, so I know they could have done with a lot more work, but it was just to have them printed with their names on. 

 After a bit I came back to remake the logo into one of the ideas I had from the beginning. It's more simple and it doesn't have any fancy shapes. Because it was just the word, I wanted to work more on it than just keep it in simple colours. At the end I tried to make it look like a fairy tale book cover by simulating gold and leather in the background. Not sure if I did it right, but at some point before adding more details I thought about it having to be in pixel art as well, therefore I stop to avoid making my life more difficult.

Dialogue script

I knew from the beginning that I didn't have the time to achieve some kind of combat inside the level and keep the metroidvania/rpg/exploration at the same time. Keeping my usual tendency for going for flightless games, I opted to make it more narrative driver, or at least this level. If the game was to go further, I would love to add a combat mechanic, magic spells and power upgrades, but mainly because of the time it takes to make animation sprites, this level will be a small narrative quest.

When I was creating the main NPC and the main character I was picturing their voices and the kind of personalities they would have. They all have very unique characteristic and just like the main character, they have they're own unique qualities and defects. 

It's going to be hard tour triad them on a single sprite and on just one level; they're animation will be very basic due to time constrains so reflecting their personalities on a berthing idle-2/3 frame sprite is nearly impossible.

So, knowing that the dialogue would represent a crucial part to portraid a bit of the personalities, I didn't wanted the NPCs to be saying the same frase all the time so I decided to make a little script to have them saying a different conversation depending on where they are in the level. 

Because I couldn't get the text speed control via pressing a button, it will all have to be timed, so whe the player speaks to a character a bit of a mini event will take place and the conversation between Keara and the NPC will start.

I made my script in excel, as I thought I could organise them in cells per speech bubble and depending on the length I could time it more accurately and quickly.

Now I've never done any dialogue script, so I must admit I felt a bit silly by picturing different voices in my head and try to type it down. Hoping to avoid overly cliche frames and awful misspellings, I asked my friend Sarah for some assistance. She has her own manga project so I assumed she would be familiar with script making.

So far her corrections have been pretty helpful, but I can't add the text until I'm happy with the overall mechanics, otherwise testing will take up a lot more time.

Music ideas

Adam Fergler was kind enough to help me once again with the creation do a melody for the background of my game.

I've never been good to choose myself a soundtrack or even sound effects, but I do appreciate the importance of them.

I know Adam is busy with his own projects, therefore I never thought about anything different to a single simple melody looping in the background. 

After the first few days of talking about what kind of mood I was looking for the game, what the story was, the game play and the main characters personality, he started coming up with ideas of what could be done.

Because at this point I barely touched any sound related topics for the engine, I didn't know what restrictions I would encounter. My original IDE was to have a tune per stage of courage and simply fade in and out between them. 

After trying for a bit I couldn't find a way to make a smooth transitions and having sudden changes of music was not a good idea.

After some talking and considerations we came up with more practical ideas to represent Kamea's courage increase that in this level's case it increases 3 times plus the initial state:

A) have a the same melody 4 times with the exact timing, but with more and more instruments on each level. The idea was to have them all runnin at the same time in the background on mute and just turn the volume up after each courage checkpoint was reached. This created a kind of layering and would avoid an abrupt change of music.

B) have smaller melodies that sound good looping but that the ending of one is the beginning of the next one. With this method, we expected to be able to loop one until a courage point was reache, stop the looping and once the song is finish switch to the next one which then would loop until the next courage point is reach, and so on. 

I decided to make quick and rough testing playable levels to see if they would actually work. It turns out that the 'coding' behind it was pretty simple and managed to get both ideas to work.

Here's idea A and idea B

(Note that A doesn't line up properly, but that's because one song starts slightly later than the other, but the concept is there).
(Also! just noticed that you sometimes have to refresh at least once the browser window to get the audio working properly!) 

I think the easies way for Adam was to go for option B. He said he had more than one idea that he was already working on, more like Kamea's theme song! 

Maybe that melody will be used for the titles screen :D 

Really looking forward to hear more of it.

Sanctuary - test 2

So I finally came around to make a second test to show for a presentation.
This still keeps the original layout as there's no point to expand the level while testing (the smaller, the faster to test). I also haven't tried some of the sprites, mainly because I've been busy trying to sort out the gameplay itself. Probably in that respect it will be hard to notice the huge amount of improvements compared to the first test.

Click HERE to try the second test version.

Keyboard Controls :
A - left
D - right
Spacebar- Jump
S- jump down
W - talk/open door/pick up stuff/climb (interact is a better word) 

Things might be confusing at this point still, but the idea is to talk to both of the NPCs to be able to access the room inside the tree. The final text will be slower and the dialogue will give hints to what the player should do.
But leaving the story aside (that will be arranged in time) the mayor advances in this version would be:
- Global constants working along with the phasing of the story.
- Camera movement moves responding to the character's movement (still needs tweaking).
- Zoom in and out depending on players movement.
- Die and re-spam if falling of the 'level'
- Inside tree layout.
- Dialogue appearance.
- Initial Xbox controller compatibility (yes, you can play it with a controller or keyboard) 


There are still far too many problems that need fixing, to list a few:
-Fix camera movement
-Incorporate initial and final cinematic events (need to figure out how to do that :-/ )
-Avoid dialogue boxes to overlap
-Fix characters sprite movement (specially with the xbox controller)
-Set a menu screen
-by miracle... hope to figure out how to control text speed and appearance by pressing keys, instead of having it timed.

There are still loads and loads of things that need fixing, but it's certainly time to speed up with the sprites; any future testing might seem with less improvements as I'll have to balance more between the 'coding' and assets' creation.
Any feedback would be appreciated.

Some pixel art process

In my previous post I mentioned a blog that had a compilation of some 'rules' with regards the creation of pixel art. 

The type of pixel sprites that I'll be doing for the game are relatively big, and the level of detail is high in comparison to initial pixel art where characters could have a 24x24 sprite (like the old megaman games) to a more detailed 150 pixel sprite. 

I've documented the initial part of the process of the creation of the sprites of one of the elements that I like the most: the fountain of the Harpy.

The idea started as a sketch where I added some watercolour, but this was just to give me an idea (and play with watercolours for a bit). I scanned it and modify the background, mainly just to make it easy to work with. 

Then I made it semi transparent and using the pencil tool and preferences that will help me to keep hard edges in case of any movement or modification. I start with a very loose line, mainly just following the contour, as if I was to redo the line work. 

After all that is finished then I can turn off the reference and go into detail to fix the line. The image below is the outcome of a quick line. 

The image below is the how it looks after cleaning up, the idea is to avoid having any overlapping pixels. This will give an effect from further as a clean curvy line. This could be one of the processes that take the longer as is a matter of individually erasing and painting pixels all over the line. At the same time, you need to be zooming in and out to make sure the line is taking the shape desired, as is very easy to get it to look wonky...and in fact sometimes is just hard to correct and can only be corrected once the rest of the solid colour is along. 

This is the difference between the quick first line and the final clean up. This 'rule' wont apply everywhere as the hand that's suppose to be closer I decided to make its line thicker mainly to use a comic like technique of line weight. 

After that I started blocking out colour and shadows, which roughly follows the idea of cellshading with hard edges on the change of each colour/ shadow, this is mainly to give a sharp contrast and help the perception of the shape. In this case the statue is some sort of plaster material with its own shadows, while it will be cover with mould due to the dampness. Eventually I'll add the water falling down. This process is not finished as the shading requires just as much work as the line work. Also the main line will have colour and will nicely blend along with the rest of the colours. This kind of big landmarks on the level need to be very detailed, in comparison to the rest of the props, so I'll keep posting some of the further finished props as I go. 

Would have like...

Using Construct 2 is certainly a very rewarding experience, as I never thought I could pull out a game on my own. I feel like I've already learned a whole different set of skills and experienced loads of different new concepts that I'm sure come along when working on bigger teams and projects. I feel like I can work in a better way to make graphics fit the workflow of coders and at the same time respond to what they can ask me for.
Despite all this I can't help to feel that I would have like to go a bit further; if I was working along with more people, I think I would have liked to get a bit more of a 3D feeling but keeping the same type of graphics.
Games that come to mind straight away that have similar approach to what I originally envisioned are games like Fez or the upcoming Child of light.

Fez (above) has way too much of a pixely look than what I'd like to go for; a very cubic Minecraft-like feel to it, yet I like the textures that are slightly more detail and the happy feeling it has all around. The obvious feature I admire the most is the flat feeling you get until you twist the view around and you realise that the entire environment is in 3D and that all the shadows are there for a reason. 

 

Other games such as Child of light and Okami (above) are games that are in the mayority made on 3D (including the character) yet they manage with the texture to keep a very flat like environment giving the effect of a painted/drawn look. 

 

 

More examples of the work of plane images layered and positioned to give the illusion of depth (which is something that I'll try to achieve) are games like Rayman Legends, Odin's Sphere and Muramasa. All of them , within their unique style, are very beautiful (in my opinion). Despite competing with 'realistic' looking graphics with other games on the same consoles, they manage to stand out, establish their own style and create an incredible level of immersion along with their own story. 

Hopefully I'll manage to portrait something of this magnitude, even if it is just within a small level. 

Dialog construction - script

After I started using Construct 2, I slowly managed to get my head around the type of 'coding' or logic behind it. When I think about it, it's a very logic way to make everything work, and at the same time, there's a lot of room to miss something along the way that won't make things work properly. 

Something that I roughly managed to get working is the dialog, which instead of being scripted so that the player has control of the speed of the text (by pressing 'x or y' button) it will be timed. So when the player enters in contact with the NPC collision and presses a button, the character will stop moving and the timed dialogs will appear as speech bubbles. 

The dialog will be subjected to a global conditional, which I might represent as with a graphic bar as bravery that will be filling up depending on the 'confidence' of the main character Kamea. This will make an emphasis on the insecurities the main character has enhancing the character development. This global conditional will be increasing as she speaks with the right NPCs in the right order, and in the mean time the text will seem varied and less repetitive. 

Another feature will be the idea of Kamea having several thoughts throughout the progress of the game, this again to get the player to understand the character a bit more. 

The dialog creation is something that goes way beyond what I thought I would be doing. Dialog writing surely requires a lot more talent that what I expected. So far I've written most of it, yet I can't help to feel that the dialogs might sound cliché when someone else reads it, not to mention either silly, long or hard to understand. To avoid looking silly in case I make a grammatical mistake, my friend Sarah is willing to help me proof reading it. She has a lot more experience on this as she works as a media consultant and also works on a comic as a personal side project.  

Hopefully I can have the proper text working on the game soon, the only reason why I haven't implemented it is for testing reasons, as I need dialogs to be short and quick so that it doesn't take me long every timeI'm testing any modification I make. 

Starting to get 'pixely'

Today I decided to start giving it a go to what the in-game sprite artwork is going to look like, before I carry on making complicated NPCs full of detail and colour.
Obviously I wanted to test Keara first as is the main character and she will have pretty much most of the animations.
This is just a quick test of her with a pixel line, although the final sprite will feel less linebase and the pixels more blended. The hight I'm happy with is 167px aprox., mainly because the animation of the hair might vary the over all hight.
Also today I spoke to Ryan and the process of the animation will begin. He will be helping me to get a rough animation mainly for the running/jogging animation. I couldn't resist to make a quick test for the idle, which clearly needs a lot of work, but I think is a progress overall. The main movement will happen on the hair, second by the dress. Luckily the hair won't have as much detail as in the full rendered version, as hair is not one of my strong points to draw. Later on I'll start making some test with the colours applied on pixels.

References for the making of a platform game

Thinking of level design and game making I came across with many many concepts that I probably didn't consider before. Ideas that I probably had in the back of my mind after years of playing different games, yet it's been so enlightening to find people expressing those ideas and knowing that it wasn't me just being picky with some game is also pretty comforting.
It's pretty hard , nearly impossible,  to generalise guidelines and 'must' to all games, as part of the beauty of game making is being creative and inventing new ways of playing is always a possibility.
In my particular case, while working on Sanctuary, I started making looking at ideas of how to make a Metroidvania game, but because is a mixture of styles, I ended up looking at the individual styles. In the case of the platforming mechanics, I came across with Kynan Pearson's blog called Subtractive Design and a very helpful 'guide' for the making of platforming guide.
These are some of the main ideas I got from the article:

- Don't Underestimate: Anything you plan to do will take 3-4 times longer and require more effort than you will anticipate. This ones is terrifying, but at least is a warning that will hopefully improve my time management.

- Foundation:
+The camera is my game.
+Camera must be stable and smooth.
+Don't keep the character on the centre of the screen.
+Build the levels to support a particular style of camera.

-Jumps:
+Make the jumping feel great!
+Good jump is responsive, weighty and forgiving.
+Consider the retention of inertia in the art (moving while jumping).
+If there's no air control after the jump, then the level design has to be measured under a strict grid.
+Controlled jumps, wall jump, late jump, edge assistance, ledge grab; there are many other considerations when configuring the jump.

-Level:
+Level collisions should be very clean and precise.
+Avoid round ledges.
+Interaction with enemies/NPC should feel consistent.
+If it's awkward, fix it!
+Keep background and interactive/playable aspects with an obvious separation.
+Even pacing isn't always good. Mix up difficulties within reason.

-Branding:
+Names matter; define levels, it will inspire people to do more.
+Take the easy path; polish if there's extra time.
+Give it Character.
+Make it Memorable.
+Landmarks! and if they move is better.

As I'm writing this I'm quickly testing and trying the Construct 2 engine, and I feel like there's a lot of these ideas I'd like to implement or fix.
There's a lot more on this blogpost, and if you're thinking on making one game yourself I would totally recommend to read it. (also you can follow him on twitter)

Quick introduction to the characters - initial concept art

The ideas I came up with Sanctuary started just as a way to merge my interest in stylised imagery and fantasy, creating a pleasant looking game. After working on the conceptualisation on the main character and some of the principal NPC, I started to reflect some of the personalities of people around me, and even more I started reflecting some of my own personal problems into the characters. 

Without going too into detail or to literally just make a fantasy version of my friends/family, I started creating some personalities for each character. This initial level that I'll be working on, only compels the escape and intro of the potential game. The NPC's that appear here are not necessarily going to be playable characters, but if the project was to go further, I would certainly want to give them an important role in the story. Pretty much all their personalities clash; each character will posses not only a determined personality, but they will have their own insecurities, concerns, strength and weakness. The main character will be an unusual hero type, as I want her to be the one who experiences the world and her task while dealing with insecurities and anxieties about herself. 

Loneliness is a key concept here; each NPC is the last one of their type, and this is the 'quality' that will unite them as a 'family' later on. 

Once I finish each of the characters final art, I'll go in depth on their personalities, in the mean time, here's some of the initial concept art: 

Kamea: The main character of the story, unicorn.

Alba & Kera: Dawn and dusk nymphs.

Teles: The male nordic siren 

Azmer: The Centaur/Wemic

The dragon (working on name)

This is just quick ideas for the 'bad guys'. I thought of rabbits/hares well dressed, as they're serving a rich and powerful wizard. Also wanted to play with the idea of some of them just not caring about their jobs and not being aggressive... this guys might not be on the final level, as I'm not entirely sure if I'll be able to put a battle system. 

Clothing details

After spending weeks and weeks focusing in getting the face right I noticed that the body was made, but not polished at all.

I started re-sculpting pretty much everything because by this point I was more used to zbrush and its interface. 

I started to get some ideas of the type if materials I wanted for each part of the clothing but because I really wanted to go into detail I had to look for close up references of stuff like the type of stitching and seams I wanted to go for. I found that a good place to look for this kind if references where clothing shops online where you can not only see every angle, but you can also zoom in when you place the mouse over (pretty much I used YesStyle).

For the top vest I wanted it to be all leather with some 'cushion' parts on the sides. The logo I've been using to 'brand' my project is an eagle-type logo which I want to include somehow in the clothing so I'll probably put it as a decorative symbol in the back. 

Something I realised I didn't took in consideration when I originally drew the design was "how is he going to take the best off?". Not that he will, but part of the topics I wanted to touch on my essay was the believability so I couldn't let this little details pass by. I had to add an extra feature on the front where he could tide it up. Didn't go for a zipper because of the style I wanted to achieve so I used laces as if it was a corsette. 

Things that I never thought I've be looking up such as types of stitching for different kind of materials certainly became a priority. This only made me realise how little attention I've been paying to my surroundings.

At this point I also discovered a very easy technique to simulate cloth within Zbrush that I will probably be using for the baggy shirt. Also the boots required a bit of attention as the integration of parts of metal weren't so common to find in other items. 

I thought that adding the details was going to be laborious and repetitive, but luckily is incredibly easy to work out how to create stencils, brushes and alphas that can convert the stylus into a sewing matching :)

These are some screen shots of the details on most of the clothing. The next process will be retopologyising everything (probably everything in one single mesh). Hopefully the details will look good on the normal maps.

Vest:

Straps: (I had to retopologised them early on to get the sharp edges). 

Gloves: I added some extra details that weren't on the original concept 

Shirt: 

Boots: I didn't like the original concept at, so before I took it to any details I ended up changing them pretty much entirely. 

This is the detail on the back of the vest. I'm planning to use that 'eagle' as the logo of my project.

These are not final colours, it was just to block out the groups and get a rough idea. Polypaint is not something I planned to do as I'll be working manually on the textures after the UV's have been made.