Tommyflower

Ludum Dare 45

How can this pig change your life forever?

instagram_img09.png

find out at Mr Raccoon's house

Hi everyone! I'm playing games and found great entries. Thank you to all who already played with Not My Hoarder.

Have fun!

Still a bit tired from last night but I love being here and that we managed to join both LudumDare this year! This is our third time. @fanu did a tremendous job. This time the coding work was all on him and it was a complex one. I tried to raise the stakes with a new graphic style and @ioleoso had to study asian percussions to compose the music. So I think the 3 of us had their good challenges :) I really hope you like it and will appreciate your comments!

My classic 'developer wannabe-artist tips' :)

LudumDares have been to me a journey to learn graphics. I’m a developer but the challenge I chose here is getting good at graphics. I started with the simplest character ever on LudumDare38: Spermicorn: it was all wobbly lines. Then it came Zoltan with that zillion of cats animations that kept me very busy.

Now I wanted to move past black outines and try something different. Most of all, I wanted to acheive a more uniform look in my graphics.

It's basically this:

I ditched the outlines and try a different style: ‘trace it freehand with the lasso tool and fill it ’

Need some shadow? Select again the area with the freehand tool and change lightness, or add a black layer in multiply. This is of course the quick dirty way to acheive it, we are talking of producing a lot of graphics in a short time.

you and the pen

Give it a try if you didn’t before. All you need is a good relationship with your pen. (That is acheivable with some boring exercises like tracing a lot of horizontal and vertical lines, or simply by drawing more with it) I say it every time: even a cheap tool will do the job, it’s just a matter of practice.

So here is how to draw Mr Raccoon from scratch:

I took a reference, because I don’t know by heart how raccoons look. I started with the face shape (I made it large and cartoonish) Then I outlined the dark parts And then the white ones. graficaintera.png

Keep everything on separate layers and you’ll have no problems if you make mistakes here.

Then I added the main features. These will stay always on different layers because they need to be changed in order to get the different expressions.

shadows

Now, to give everything some more depth, let’s add the shadows. I usually draw them with black on a different layer and I switch the blending mode to multiply. Then you can adjust the opacity to get the colour you need. But if you need to go faster and are not afraid to make mistakes, you can just select the area you want and change it’s lightness or fill it with a darker colour.

done!

Here we are. That might not be perfect but it was quick. This counts during a jam but also when you are making the game of your life but it needs so many assets that it will take you a year making them all alone. I’ve been there:)

Hope this will help you to improve your games look.

I'd love to hear your tricks and the graphic solutions you found to improve your art in spite of the short time available!

We talked about shadows but...

You said ‘add shadows’, but I don’t really know where shadows should go!

Right...but I got you covered.

Shadows can dramatically change the way your character looks at make it more believable, so it is something that you could want to consider..

All you need to do is deciding where your light comes from.(in a 2d game from above is a good choice), then keep in mind how light behaves with spheres and cubes. This will give you a good approximation even with more complex shapes, that you can consider being made with those primitives.

socialempost/emombre.png

With Mr Raccoon’s head I just shadowed the lower part of the head and the inside of his ears. For the body I shadow the lower part of harms and legs. I put a shadow just under his head because the head prevents the light to reach his shoulders. And then I added some shadow whenever a piece of cloth goes over something: for example a shadow on the hands just where the sleeves end. This must look like a lot of work, but with time it will become automatic to you. If in doubt you can use a simple photograph as a reference.

The annoying part in adding shadows to your character is that when you animate it you must animate them as well. So if he raises his arm you must change the shadow on it and so on. But the final result is really worth it!

Interior design with Mr Raccoon

Drawing rooms can be a long boring task, but I wanted a believable cozy environment for Mr Raccoon. Fortunately it was a minimal one because Mr Raccoons, as we know, hates clutter!

I started by finding the perspective I needed and traced the main walls. You can do this by creating a perspective grid or by downloading one. Something that looks like this: perspective-grid.png

Then I draw the walls: I make walls with 2 layers: one for the texture, one with the colour, I put the colour layer in multiply mode so you see through but still can change the colour whenever you want. stanza1.png

I used a wood texture I simplified a bit for the floor and made sure to transform it so that the perspective was ok.

stanza2.png Then I looked for some furniture. I use photo references and I trace on them. Sometimes if they have a special texture I use some filter to cut out the extra colour, as in the case of the cushion he meditates on.

For the shojis, the japanese doors, I built one and duplicated it wherever I needed it. If you are using photoshop, the smart object feature lets you create templates so if you have to change something later, every window you made will change accordingly. stanza3.png With time you can create your library of furniture to speed up your interior design process.

stanza4.png

At that point everything was still a bit messy flat and random colored. What I did next was: Arranging the furniture where I needed it Adding shadows: mainly shading the corners of the room and all the edges between the walls.

Next I added the outdoor scenery: a garden that I modified to make it look bright, saturated and a bit blurred.

You see in the pictures above the final colours, but this is how everything looked like before I...

stanza5.png

chose a color palette. This is an important step. I wanted all the colour in the scene to make sense. There are different palette generating tool you can use. I like this one: https://coolors.co/app

I decided that my main colour would be the red of Mr Raccoon’s kimono and so I chose the other colours accordingly. Then I saved the palette and went back to my room trying to adjust the hue of everything so that it fell into one of my colours. stanza6.png The final result was so much better this way!

Turn your favourite cushion into a game asset

Since we needed a lot of stuff to fill Mr Raccoon’s home, I needed to find the quickest way to create believable objects. I wish I have had time to polish them more, but here is a way to get a good looking game asset starting from an actual piece of furniture from your home.

This is my super stylish tibetan cushion :) cuscino.png First I cut out the cushion. Easiest way although not always perfect is the magic wand tool in PS. Next I adjust colours a little bit. Usually saturating them works very well. Then I apply a cut palette filter to simplify shapes and reduce the number of colours.

Sometimes you have to fix the final result, but most of the time your asset will look great and ready to use! racconeemsu/emcushino.png

Meditate with Mr Raccoon theme

Ok, this track is quite short, but who has time for a long meditation today?

https://www.youtube.com/watch?v=UU55nYvT94g

Put it in loop and repeat:

em0006/emmedita02.png

... I love games... ... the humankind desperately needs games ... ... I'm a great programmer/artist/composer/writer ... ... I keep learning new skills ... ... I finish what I start ... ... I will make this my day job ...

Hope no delivery boy will interrupt your spiritual moment.

Super Easy Night Scene

Here is an extra tip if you built your beautiful environment and now need a quick night scene.

Just add a layer of dark blue with blending mode multiply. Adjust the opacity and then with a light desaturated blue and a soft brush, on a different layer draw the light you need in the scene. Here it’s moon rays entering the windows. I put this in soft light mode, but you can find what suit you best. Now, if you have any light source in the scene, just use the eraser to remove the blue around them, as I have done with candle flames here, and you are done!

nighscene.png

Mr Raccoon loves to meditate at night.(Because the delivery boy sleeps at that time!)