A blog about Jem making games: Year 3

Everything to do with my BA (hons) Games Design course and me making games in general. Kupo.

[jemmaparkinfutureworks]

TFW you wish you dress painting skills had been this on point 6 months ago... #finishingtouches #honours #bonussketches #uni #princessdress #Fwxb3992 #honoursproject #bagdyear3

[jemmaparkinfutureworks]

Warmed up today by doing some rough Sassy Pants sketches and kinda liked this pose! #XB3992 #honoursproject #unilife #conceptart

[jemmaparkinfutureworks]

This post discusses the background and evolution of camera use in 2D games. It provides numerous examples from the classic coin-ops to contemporary indie games, and offers techniques, terminology and practical solutions applicable in your own game.

20170221 02:43

XB3001 - Side-Scroller Camera Theory

As part of my researching on how to get the screen transition that I want for our side-scroller I came across this really useful and informative article written on Gamasutra.

It breaks down the different possibilities of camera work using different side-scrollers as examples. 

It also shows just how much work and planning goes into camera work, which actually surprised me, because as camera use goes, I had just assumed that side-scrolling cameras were pretty basic. Turns out, they can be as complex and important as camera work in any film.

The transition that I’m looking to use for our game is one that involves the camera snapping to fixed locations. This was often used in beat-em ups or action games to either slow down the pace or completely halt the player while they tackled more difficult foes or bosses. As you can in the clip below from the classic Sega game Gunstar Heroes. While the camera moves with the player for the most part, periodically it remains static preventing the player from moving on until all enemies have been cleared.

(Gunstar Heroes - Sega, 1993)

Each of our levels are separated in to one or two screen-sized puzzles, and I want the camera to only move as the player reaches the edge of the screen they are currently in. 

The smoothest and most flexible way I found to do this is via the use of a timeline within the level blueprints.

This meant that I could keep the same camera and its settings and just tell it exactly where to move to and how long it should take doing it. Keeping the same camera and it’s settings is very useful for us due to our use or orthographic mode. It means we can ensure the camera stays the exact distance away from the set and at the exact height and just have it move along a perfectly straight path along the X axis.

I wanted to also disable the character movement during the transition. Even thought the camera movement is only 0.8 seconds long, I wanted to make sure the player couldn’t run off any edges or return to the previous screen mid-transition.

I tried first by disabling movement, but I found it too clunky, and also couldnt work out how to re-enable the movement again.

I also wanted to try Deactivate (character movement) as seen above, but i couldn’t get this to work at all. I couldn’t outright reference the character movement component  from the level blueprint, but even when casting to 2DSidescrollerCharacter, I couldn’t get this to work.

But, as it stands, I  don’t feel like it’s completely necessary to have the movement disabled as the transition actually feels pretty nice and is very smooth. 

[jemmaparkinfutureworks]

(WIP) Princess Zara in her throne room. I'm little bit in love with my stained glass windows. #conceptart #gamedesignstudent #BAGDYear3 #FWXB3992 #honoursproject #honourslife

[jemmaparkinfutureworks]

20170313

XB3992 (Honours) - Dad and Padd Illustration One: Forest Scene - Final Images

[jemmaparkinfutureworks]

XB3992 (Honours) - Dad & Padd Illustration One: Forest Scene

20170313 14:37

So moving away from character development a little I wanted to get started on some story-boarding and some polished illustrations for the book. 

In this scene, Dad and Padd have just left Chateau de Papillon with their quest to help put the Kingdom of Yoonmin back in it original, peaceful state. 

I started the scene by drawing up the line work as if it were part of an already existing story board [below]. I wanted to set the scene up using a mid-shot of Dad and Padd as they walked away from the castle heading off on the beginning part of their journey. I wanted Padd on Dads shoulders to give a relaxed feel to the scene. Their quest doesn’t feel really serious at this point, it’s more like an adventure.

So once I laid out the scene, I went ahead and started to paint a more detailed version (also on a slightly bigger, A2, Canvas)

I tried a few different versions/ brushes for both the grass and the tree canopys. 

Top-Bottom: Original shading with a wet oils brush. A more defined foliage brush used as more of a stamp than a traditional paint brush. Various foliage stamps layered up. The same as picture three except with altered blend modes and opacity

I decided to go with the last iteration of the grass textures. As the rest of the picture is quite soft in paint style with very few discernible strokes, the third iteration was too pattern heavy. Where as the fourth was the same as the third picture, except I’ve changed the layer blend mode to luminosity and turned down the overall opacity of the layer to soften everything up.

Top-Bottom: Original shading with a wet oils brush. A more defined foliage brush used as more of a stamp than a traditional paint brush. Various foliage stamps layered up. 

With the tree canopy, I tried to apply everything I’ve picked up from my research. Again, as with the grass,because my general coloured style is very soft I much preferred the second iteration with the slightly more defined foliage brush to the third iteration with the very styled brush patterns. The second iteration felt much more in keeping with my overall style.

In the final version, I also gave Dad his hat back, in the story boards i drew him without, but felt that it made him too young and more like a big brother than a dad. 

Overall i’m really happy with how this turned out, I really wanted to get a shot of Dad with Padd on his shoulders, and this came out just how I’ve been picturing.

For the finished image see my separate post:

http://jemmaparkinfutureworks.tumblr.com/post/158353920249/20170313xb3992-honours-dad-and-padd

[jemmaparkinfutureworks]

12 of the Most Popular Camera Shots all Actors Should Know

Knowing basic shots and camera angles can be a huge advantage for actors. Here we show you 12 of the Most Popular Camera Shots all Actors Should Know.

20170223 01:47

XB3992 (Honours) - Setting the scene

I know I’m actually producing an art book, so i’m not actually filming anything. But I wanted to study the different key angles used in filming to help with setting up my illustration scenes and story boards. 

This research isn’t just for my honours project though, this kind of knowledge will be invaluable when actually making games, creating beautiful and good scenes in engine with UE4′s Matinee and Sequencer tools.

Also, if i’m honest, the Dolly Zoom, Is one of my favourites. It’s such a great camera trick.

[jemmaparkinfutureworks]

XB3992 (Honours) - Environment Art: Light and transparency

20170216 22:13

Dappled Light

Dappled light is an array of elliptical spots of illumination that are created by the sun shining through a canopy of trees.

The spots will vary in size depending on how high the projecting canopy is above the ground.

A high canopy will lead to larger circles with softer, out of focus edges.

A lower canopy will lead to smaller, much more focused spots of light.

These spots are also generally not perfectly circular in shape due to the oblique angles the light rays shine through the canopy. 

Transparency of foliage

Foliage in trees has different degrees of transparency. When they emerge in spring, tree leaves only partially veil the sky. They have much more transparency thanks to their paper thin textures and usually have a more chormatic-yellow hue to them.

As the leaves develop they gain their chlorophyll, protective layers and become more numerous and dense. Depending on the tree you should look for a range of degrees of transparency.

e.g. an Oak tree will have a much denser leaf base as opposed to a much more wistful Willow tree.

Transmitted light

When sunlight travels through thin semi-transparent material, the light becomes richer in colour.

You can see transmitted light when the sun shines through the green or yellow leaves of a tree. Generally, there are four different foliage colours.

The transmitted light. With a strong chromatic yellow-green colour.

The leaf in shadow (facing downwards). This is the darkest green. It would be even darker if there weren’t any reflected light from the leaves around it.

The leaf in shadow (facing upwards). These planes have a more blue-green hue because of the blue light of the sky.

Sunlight on the top surface of the leaf. This is the highest value and the chroma tends not to be too intenseat these points because most of the light is bouncing off the waxy cuticle of the leaf rather than shining through it completely.

These four foliage colours are usually happening at more of a macro scale. However from further away you should just try to look for the general colour groups and figure out where the different sections would generally lie on the tree as a whole. 

e.g. It will generally be darker towards the middle of the tree as the leaves begin to become more dense and would be increasingly transparent towards the edges as the leaves become more frayed and spread. 

References

Gurney, J. (2010). Color and light (1st ed.). Andrews McMeel Publishing.

26-realistic-tree-paintings. (2017). Webneel.com. Retrieved 13 March 2017, from http://webneel.com/daily/sites/default/files/images/daily/10-2013/26-realistic-tree-painting.jpg

Topalski, D. (2011). Through The Trees -  Oil Painting. Retrieved from http://www.topalski.com/2011/original-fine-art-oil-paintings/through-the-trees/

[jemmaparkinfutureworks]

20170203 23:32

XB3992 (Honours) - The Boy Knights; Henry & Lewis. An update

These two characters were really fun to draw, and out of all my characters so far, the easiest. Initially iterations of the same character, I decided that I liked both of them so much that I wanted to keep both the younger and the older version.

I think these characters were easier than others, because I drew them with no preconceptions of how I wanted them to look. With characters like Dad and Padd, i knew what I wanted them to look like, i just couldn't get it down on paper.

I really liked how the colour scheme is coming together for the castle denizens. The blue and yellow of the Princess’s necklace works really well on the Boy Knights.

[jemmaparkinfutureworks]

20170131 17:30

XB3992 (Honours) - A quick lesson in mouths…

Another anatomy crash course in uni from Andrew today, this time in drawing lips. Even though I was using the advice on perspectives from last time [RE: http://jemmaparkinfutureworks.tumblr.com/post/156240054649/20170120-1623xb3992-honours-a-quick-lesson-in] things still weren’t looking quite right.

Always draw the top lip in two halves, like a coat hanger.

Generally speaking you don’t have to draw the top lip on guys, it can end up making them look quite effeminate. (Obviously there are always going to be exceptions, this is character design, you can make the character look however you want)

Women’s lips however, you can pretty much get away with trying anything.

[jemmaparkinfutureworks]

20170131 15:30

XB3992 (Honours) - The Boy Knights; Henry & Lewis

So, embracing my new plan of just drawing more, and being a little more loose with concepts, I started work on one of the last core characters; Henry.

There were two things I really wanted to achieve with this character, skill wise.

Like I already mentioned, I wanted to just try and draw faster, not necessarily better or perfect, but definitely quicker. 

I also wanted to make sure the character wasn’t just another forward facing character. I wanted to put some life in to him. Looking back through my work, everything feels really still. It’s something that I’ve been avoiding really because, well, it’s not easy. Perspective for me, is probably the biggest source of frustration when I’m drawing. Putting things in the right place and at the right size can be incredibly confusing. Especially when certain things start becoming counter intuitive...

Although there were one or two tries at this character to begin with, it really took me no time at all to get the above characters down on paper. Ironically, I found that even though I was quicker and trying hard to not spend a lot of time on the smaller details, I ended up with characters that I really liked. I was trying to test out a couple of different ages for this character. But I love both so much that I decided to keep them and make them duo; Henry being the older boy and Lewis being the younger one - Although they’re not brothers, Henry looks after and cares for Lewis as if they were.

Initially when I was coming up with Henry alone I referenced three main fictional characters: Both Arthur and Merlin from the BBC production of Merlin and Heath Ledgers character William Thatcher from the film A Knights Tale. 

I think the images of Merlin and Arthur together in particular played a big part in my decision to keep both the concepts, I liked the chemistry between them and thought that it would work well between the two. They also reminded a lot of a couple of characters from the cast of one of my favourite games Eternal Sonata, Alegretto (Retto) and Beat.

I tried to keep the clothes on Lewis kind of oversized. I wanted to make him look really young and nothing says young than slightly too big hand me downs. Especially with his boots and sleeves.

I’m looking forward to having these guys done pretty quickly as I really want to get stuck in to some story boarding of some of the scenes in the game, I also want to go back to the two protagonists Dad and Padd and improve on their designs and also try to add a bit more movement and life to them like I’ve been able to with Henry and Lewis. 

[jemmaparkinfutureworks]

20170128 23:02

XB3992 (Honours) - Princess Zara

Princess Zara is the beautiful leader of the land in the bedtime story. Dad and Padd must help the Princess to save her land from the curse set upon it by the villainous Sassy Pants.

With Princess Zara I knew exactly my references points for her. I wanted to base her on my Princess-pink-loving niece of the same name.

She’s intelligent, independent and knows how to get what she wants. I also wanted to reference the Childlike Empress from The Neverending Story. She’s young and sparkly, but also has to be able to run a kingdom!

I don’t know if it’s because I’m feeling more comfortable at the drawing table now or if it’s because I had a very clear idea of what I wanted out of this character (unlike Dad), but Princess Z was a very quick turn around for me and honestly, probably the most fun.

I began to experiment a little with using gradients in Sassy Pants for her hair, and decided to use it again but this time for Princess Z’s dress.

I also had fun spending some time in Krita creating a lace pattern to overlay on the topcoat of her dress. I spent a few hours doing it, and it probably didn’t need to be so polished given the size of it in the picture, but it was certainly very satisfying. Krita is a great open source alternative to Photoshop aimed specifically at painters and artist. It strips back all the photo editing and features in photoshop not really ever needed by a painter, adds some of the better bits of Sketchbook Pro (like the the menu wheel) and focuses on making the important stuff easily accessible and feel nice to use. 

It also has a really great mode called ‘wrap’ which makes creating seamless textures SO much easier with the single click of a key.

The key part in having this feature, is that you can continue to paint while this mode is switched on and get a real time view of the pattern as a whole, meaning you can make it truly seamless very quickly.

Overall, biggest change i had to make with Zara was her eyes, I had to adjust it so her brows sat a little higher and also close her eyes a little as she was beginning to look somewhat surprised!

Following other feedback, I’ll probably look at defining her eyes a little more and also under her chin before she goes in the final book.

[jemmaparkinfutureworks]

20170120 16:23

XB3992 (Honours) - A quick lesson in face angles...

Today at Uni I mentioned to Andrew [Tunney] that some of the expressions I drew of Sass took me way longer than I expected them to because I found that drawing faces from different angles, even just slight ones, proved to be quite tricky and that I only got the ones of Sass completed out of sheer perseverance.

So, he took the reins of my cintiq and offered up some advice to help (which as you can see, I have scrawled all over the drawings so i didn’t forget!)

The two biggest things I embedded in my brain was:

Everything on the far side of the center line of the characters is a little smaller, as you expect with persepctive, however, because the curve of the lips peaks around the center of the face they should be drawn bigger.

Try using a triangle to stop features floating away when playing around with different face angles. If you draw it so it goes straight through the eyes and meets at the lips, you’ll have a solid grid to work from each time.

[jemmaparkinfutureworks]

20170118 23:47 Log

XB3992 (Honours) - Sassy Pants

Sassy Pants is the attitude filled, late teen antogonist of this game. Went I envisioned her, I imagined the kind of character you’d expect to see in a modern fairy tale, I wanted to give her the same vibe you get when you see characters such as the Evil Queen from the popular TV show Once Upon A Time... 

She’s essentially a good kid turned bad from constant misunderstandings and misjudgments.  She gets the blame for most stuff anyway, so why not live up to her reputation?

I didn’t want her to be the kind of villain who is stuck in a lair or throne room somewhere. I wanted her and her outfit to look like she could actively defend herself, like she could just jump up on a horse at any minute to get away.

I looked for characters that were active but had attitude. Characters like Nu-Lara Croft and Kate Beckinsale in Underworld were great references. Also like I said previously, the evil queen from Once Upon A Time gave off just the right level of ‘attitude’. I also used a classmates amazing pout for a little extra reference when trying to get a bit of Sass into Sassy Pants.

I found that Sassy Pants came much easier to me than my last character, Dad. I'm not really sure what the reason behind this is. It could be that Sass is just a character that I’ve had a pretty definite idea of her image since the concept of this whole project, where as Dad I had just thought would be fairly easy and generic to draw until I actually got to him. It could be that since sorting out all my previous issues that I talked about in my last post, I’ve found a renewed sense of motivation with this project. I’ve also been drawing a lot more, so my workflow and general process of getting ideas just out and down on paper is much smoother and quicker. 

I read an interview with Glen Keane, famous Disney artist where he talks about some of his process when creating characters.

So his [Ollie Johnston’s] animation was always a boiled-down sauce, like a spaghetti sauce that got really strong into one clear pose or drawing. Milt’s [Kahl] was about dynamic moving shapes, the poses were wonderful and strong, and Frank’s [Thomas] was very intellectual, very psychological – thousands of little busy lines, feeling the form. He could talk in depth about what was going on with the character, and communicate that way. You could see it in his animation, his characters movements are always rolling and turning in complex little arcs.

And me, I have a problem. I don’t see something clearly in my head. So when I was first animating, Eric Larson would say “So Glen, when you start, you see an image clearly in your mind and you draw it.”

I said “Well, um…I don’t see it”

And he’d say “Well sure you do, because you did the drawing!”

And I’d say “Well no, I really don’t!”

(Steed, 2014)

This was really nice to read for me, because that’s exactly the problem I have more often than not. I know in theory what I want the characters to look like, act like. But I cant translate that from my brain to page. A lot of my work just, appears, and then I have something to work on from that point. Which is what happened with Dad. When it came down to it, I had nothing to go from for a long time. 

But this is something i’m trying to get better at. I’m going to be trying to draw more. Little and often. To try and get better at just translating what I have in my brain to paper.

I started Sass by drawing some different poses using the quickposes website for generic reference shots. I then built up the character from there. Ideally I want to get at least one other iteration of Sass drawn up in a more traditional fantasy-style bad female villain costume. Something like this:

Overall I’m pretty pleased with Sassy Pants so far. Im also pretty pleased with my own personal improvements in general - Next up; Princess Zara.

Citations

Steed, K. (2014, October 7). Interview with Glen Keane, Disney veteran and legendary animation artist (part 1). Retrieved January 22, 2017, from http://www.skwigly.co.uk/glen-keane-interview/

[jemmaparkinfutureworks]

20170102 11:45 Log

XB3992 (Honours) - Dad

 The first concept of Dad is finally finished.

Dad is the second protagonist of the game, the idea being the player can switch between Dad and Padd to complete the many puzzles and challenges. 

He is supposed to be a large guy. I wanted his size to be really emphasised next to Padd, but not ridiculously so. When I spend time with my own Dad these days, he’s just a regular guy (I mean he’s a hero to me, but he’s a regular guy size!), but when I looked up at my dad when I was as young as Padd, he seemed almost gigantic to me. It felt like he was toweringly tall, and that’s the effect that I wanted with my main two characters. 

I also wanted him to be a kind of cool dad, not too old and I wanted him to look like he was an outdoors kind of guy. I originally used the term ‘lumberjack’ but after my research I found that it didn’t really quite give the right image that I wanted.

With all that in mind, I dove into researching for different references. 

Initially, like I said above I began to look for lumberjack references. But the image generated from just that brings forward a much younger kind of guy, and whilst the actual career still exists, the images of the realistic, non-fashionable-working men weren’t quite what I was looking for. 

(Above: Fashionable young model “lumberjack”)

 (Above: What an actual lumberjack looks like)

 So instead, I chose to look at men who are known for being outdoorsy family men. Guys like David Beckham, Ewan McGregor and Hugh Jackman.

Moving into this territory turned out to be perfect for what I wanted as not only were these men the right aesthetic I wanted for my character, I was also able to get difference references of them interacting with their own children. Authentic, realistic responses and actions.

  I particularly referenced Hugh Jackman and his daughter Ava, as when she was younger, he would only ever have her on his shoulders, this was a perfect reference pose for me as this is one of Dad and Padds specialties.

  Initially, I got stuck into dad really quickly, the quick action poses were great, but for some reason I became stuck on the main concept sketch. 

I did get some feedback for the initial sketch and the general anatomy of the guy from my art tutor Mark, and tried to continue using the size references and suggestions

  I also made made a tileable texture using the program Krita for Dads shirt. Having the texture made changing the colours on dads shirt really easily as all i had to do was change the the hue/saturation of the tile.

  It feels like Dad is a perfect representation of the place I was at, mentally, with this project over Christmas. For no particular reason skill wise, I really struggled to focus and get this guy down on paper. I kept putting him off because every time I sat down to finish him, I would end up zooming in on really small details, which meant I would be working a really long time but actually producing very little in the way of work.

This really got me down, and made me question whether doing concept art for my Honours project had been the right choice. I felt like I was too slow, and the my work was really poor and nowhere near strong enough. 

I’d be shown examples of Alumni Beau Lambs, final year project, which was incredible and whilst I knew that I was never gonna have the same art style as him, the sheer amount of work he produced was really daunting. So with that in the back of my mind and also being behind massively on project plan beause of my proscrination, I felt pretty miserable about the project.

However, since Christmas, I’ve spoken to various lecturers and made lists with Pros and Cons of changing my project at this stage, I realised all of the above was basically me just being scared to actually just sit down and draw. 

I’ve now seen an array of illustrative honours projects thanks to Joe, head of the Animation department , so I could see a broader spectrum of what people have done in the past. I’ve got a plan going forward that I made with my own tutor Ken on how to just loosen up and not worry about every little detail being so perfect, as getting ideas down on paper is more important than getting lost in the tiny frustrating, inconsequential details. And thanks to Andrew, tutor from Game Design / Game Art, I know that I just need to draw more, I’ll never improve or get any work done if I don’t actually put that pen to paper / wacom

[jemmaparkinfutureworks]

XB3001 - Final Prototype

Coin Boy & The Root Of All Evil

So the final prototype that we decided on, as you may have guessed, is Prototype One – Coinboy.

It’s about a young boy who sets off from his forest home, to venture to the big city. He has gone from a home where money has no traditional value, to a place where everything costs money. Every step he takes costs money. Every jump. Every change of direction. The player must manage their money to make sure they make to the next checkpoint in the city/end of the level.

As a team we wanted to make the final prototype fun and challenging.

Easy to learn, difficult to master.

We plan on expanding on the initial prototype by:

Planned to be set in the city – so the levels can be more dynamic.

10 levels: fixed camera / single screen, which is why we chose such a high number.

Plan to implement an informative UI for player feedback.

Tax-bot sprite animation will follow player around to also provide instant visual feedback for player.

Use of orthographic camera mode.

As the game designer, I have already implemented all the base mechanics from the original prototype, such as the anim states, money counter and UI, pick up blueprint and respawn mechanic. I have also already implemented a wall jump using the ray cast system and a double jump for the player in later levels.

But the most important mechanic I’ve managed to implement so far is one I’ve called Level mechanic manager. This custom event and set up is initially tied to the 2DSideScrollerCharacte blueprint, but actually enables me to set what mechanics the player has access to depending on what level they are currently playing. So in the earlier levels players will just be mastering the basic principles, as opposed to further down the line when they can ‘unlock’ newer skills, like the wall jump.

Other mechanics I will be creating are:

Crawl

Ladder ClimB

One-way jump through platforms.

Toll booths – so players can pay for shortcuts

Bridge / Lever system

UI – End of level screen 

For this project, I am also the group team leader, so as well as making sure the game play functions, I will also be creating the team schedules and ensuring the rest of the team hit the deadlines and generally ensuring the game actually comes together.

[jemmaparkinfutureworks]

XB3001 - Early Prototyping

Prototype One

This prototype was based on the theme Money. It was a single player sidescroller that combined 2D and 3D aesthetics. The basic principle behind it was that every single action the player took would cost money. Our first main hurdle we wanted to deal with as a team, how we married two very distinct art styles together to make a coherent game. What we ended up with was a two dimensional character within a simple yet aesthetically pleasing three dimensional environment.

As the game designer for our team my job was to figure out all the basic mechanics and ensure the level designer had all the functions he needed to be able to create the level.

The mechanic of the game, where every button costs money from the players on screen wallet, was surprisingly much easier to implement than I had initially imagined. For this prototype I also learned a lot about creating basic UI’s so that I could get the money bar on screen to show the decrease of the players funds. I also managed to link this wallet to the respawn mechanic, so when the player ran out of money, that character input would disable and the level begin again.

I probably don’t give myself enough credit when it comes to my blueprinting abilities. After second year, I felt kind of deflated with how hard I found everything. However, after completing this first prototype in a single week, I really surprised myself with how much I can work out by myself with just a bit of logic and a handful of tutorials.

 Prototype Two, Three and Four

With these prototypes I feel like I probably didn’t get as much out of them as I wanted. There was a fair bit of miscommunication within the team, especially between myself and the level designer. However, there were a couple technical skills that I managed to learn and even implement into the final prototype.

The main skill I gained was from the second prototype, I learned a lot about setting up animation states. I had a massive issue with getting the character animations to face the correct direction. I discovered that because I was using the paper2D flipbooks for the sprite, I didn’t need to have a separate sprite for left and right, because the character already ‘flips’ when the player moves left. Adding a flipbook with a left animation was pointless because when the function was called, it automatically flips the book, regardless of what direction it is already facing, essentially double flipping the animation making it always face right. Still with me?

So to learn how to iron this kink, was very helpful towards the final prototype because it meant the initial basic sprites, like walking, idle and jump for Coinboy went in very quickly without wasting much time at all.