"Life is too short to make bad art."

Wednesday, March 18, 2015

Complete game - background [part 1]



On to the next task - the background. There is a lot of space to cover and with the level of detail in the character, platforms and the enemies it will need some work and detail to match.

Note:
Now that I am done with the step-by-step tutorial and ready to post it here, I realize that I did explain some of this briefly in the tank tutorial a while back. Blame it on my old age or just having written too many of these tutorials to remember properly - but I still hope this is helpful as it's a bit more detailed. 






Next up will be a part on creating pipes, connections and some nice silhouettes for the background.

Monday, March 16, 2015

Complete game - platforms


Next on the list of elements to create are the platforms. They need to match the player and enemy look and feel, stand out enough and be easily identifiable as something solid to stand on.

For this sample game the game play is limited to one screen (with the platforms connecting left and right side. E.g. the player or an enemy moves out to the left only to reappear on the right side). 

Note:
Using blocks and not having to worry about seamless connection of the blocks makes it a lot easier. I will cover some tips and tricks on the creation of seamless tiles in another tutorial that is already waiting for publication. 





Placed on a tinted background the platforms look like this:


I hope you enjoyed this installment of the 'complete game art' tutorial. Next on my list will be the background - which will most likely be broken up into three tutorial posts. Afterwards it's time for the much anticipated and a bit more complex animation tutorials.  

Saturday, March 14, 2015

What's happening?



I posted the last three practical posts on the complete game art tutorial and there have been ZERO, NIL, NULL, KEINE, NO replies. This should probably scare me.
  • Either my tutorials are getting better and people can follow without any problems and questions 
  • or people are just reading and putting it away as nice but too hard and way to complicated to follow and try themselves 
  • or I am just boring my reader so much they fall asleep before they can hit the reply button
  • or people are just not reading them at all - looking at the nice colourful images before clicking on the next website suggested by twitter, feedly, etc.  
... but it won't.... :) 
I will continue on... even if it's just for my own amusement and to hand something to the coders that are currently taking this concept to Gamesalad, libGDX. Ox, Godot and monkeyX. I hope to have some links to their tutorials for you soon. 

Note:
I am still looking for a Unity, Corona and Flash coder to cover more of the popular engines. Stencil, Construct2 or other coders are more than welcome to join. ;) 

Update:
Just as pushed the publish button a reply to the last post came in... Thank you! I am obviously not just doing this for me, myself and I. :)

Friday, March 13, 2015

Complete game - enemy design



The next element to create are the enemies. They should match the style of the main character. 
In this game (the super crate boy style platformer I am aiming for) they should be clearly identifiable as targets and stand out well enough.

Note:
A common problem with a lot of 'coder art' I have seen is the inconsistency in style. This becomes even more visible when the art for the game is 'collected' from across the internet. It's perfectly alright for game engine testing to use whatever is available as long as you remember to bring it inline and replace the bits that are not matching before publishing the game.



Exporting those three designs to our player size of 48x48 pixels looks like this:


   

The animations for our player and the enemies will be covered a little later. Next up are the platforms and the background for the game. That way all the core elements are in place and you can see how they work together. That way you avoid losing yourself in details and eventually having to redo a lot of the work because it's not matching the rest. 

Wednesday, March 11, 2015

Complete game - character design (part3)



We now have all shapes in place and the basic shading works. It’s time to tweak the character to give him a bit more character before creating some test poses.
The last bitmap test showed that the legs are a tad too small and face is rather generic. At the moment the robot is looking straight at us with both eyes perfectly symmetrical.



Another bitmap test comes up with this result. I added the early images for comparison. The robot has a bit more character and better proportions while still fitting inside of our box.


  

Let's try out a few poses that we would need in the game to see how well the robot works for the games need. Next to the idle there will be a run, jump, shoot and die.


In the more dynamic poses like the jump wide and jump up or the getting hit, our main shape leaves the inner box but I kept the pose well within the outer box that will function as the export border.
Exporting the above pose with both containers at 64x64px will give these results.



Once we do the animations we keep the border boxes and set them to fully transparent when creating the png images. This will give us images with the exact same sizes for implementation into the game or creation of a sprite sheet.

Let's look at setting up a run pose.



With the main character's design wrapped up the next step will be the design of background and platforms to match the colours and styles.

Tuesday, March 10, 2015

Complete game - character design (part2)



Let's continue with the design of the main character. I like to flesh the main elements out early in the development process as they define the whole look and feel of the game.

The initial test in the small png size looked alright. It needs tweaking a little bit but the shape itself can work and is recognizable.
It also made the need for rather large eyes clear. In order for a relatively small character to show facial expression and make the poses more interesting, it's helpful to exaggerate the key elements and leave less important parts off (e.g. the elbows, knees and feet).
A simpler design is a lot more readable than trying to add all the detail possible into the small canvas size.




Exported to 48x48 pixels the result looks like this:

 
The shapes are now readable compared with the last version. The joints might need some scaling. Especially the hip and the leg could be a bit larger. 
The 'face' is still a bit bland and could use a bit more work and some variation between the left and right eye. 

Note:
I decided to post smaller steps (as I get them done) rather than wait for the whole section to be finished before posting. It should make it easier for me to keep posting more frequently and not facing the daunting task of a 5 to 6 hour job to create the next step.  



1) I wrote a quick tutorial about finding your colours for shadows and highlights.

Complete game - character design


I stopped with the introduction right when it was starting to get interesting and the main character was about to take shape. 

It's going to be a robot - with a rough size of 48x48px on a 1024x768px screen - some ratios to keep in mind when adding detail to your designs. There simple is not enough space on a small pixel canvas to show all the fancy things we can do in Inkscape.

Note:
I did alter (update) the design of the tutorials a little bit to show more of the object we are working on and also to allow zooming in and uploading the images in 2x the size. 



It's helpful to know what we are actually getting out of inkscape at the end. Select the inner boundry box [remember to unlock the layer first] and the character and export them with File/ Export PNG Image and selecting the 'Selection'. You can set the pixel size right here and in the case of the robot the 48x48px result looks like this:



Sunday, March 8, 2015

WTF - Thank you very much, viope!



I am in the middle of writing this tutorial series and pass my experience and knowledge FOR FREE and then I get a email from one of the blog readers telling me about a course offered on 2d game design and art using inkscape:


The "TRY FOR FREE" section offers more lessons that are just copies of my blog entries. 

They charge 129 EUR for the complete course.

(Thanks for the find Oron.)

I am more than just a little pissed off right now. Viope contacted me last year to create this course for them but we couldn't agree on a price for my services. 

Now one of the readers of this blog took my articles, added a few dots here and there, changed some colours and sells it of as his own. Thank you! 




I am no lawyer and I am not sure what I can do to stop this from happening but it puts a huge damper on my motivation to continue. 
I am fed us with being screwed over by people obviously knowing how to make money of my work (something I have not figure out yet). 

Thursday, March 5, 2015

Complete Game - the beginning


After a bit of celebrating the 2 million mark (I hope you got the presents alright - according to the stats it was a success), some work finishing projects that would have stopped proper focus on this series of tutorials and a little bit of time to think about the right approach and order - it's finally time to get started.

Let's begin by defining the goals:


  • make all the art to complete a game (which is stating the obvious...)
  • make it a feasible scope (we are not going for a MMO RPG with sheer endless amounts of art assets)
  • make it easy to follow (there is no point going for fancy sketches and illustrations that require some ridiculous talent - it might look nice but is not helpful for the readers of this blog)
  • incorporate different and new tips & tricks in the process (I wand to use elements from previous tutorials but also explain some new ideas that have not yet been covered)
  • keep it within Inkscape / gimp (and I am tempted to give krita a try for this project) so i all done with open source tools
  • create the art for different platforms (Android, iOS and PC)
  • enjoy doing it (it's a lot easier for me to explain things in my tutorials that I enjoy creating (unlike realistic zombies, blood, gore, first person shooters and a lot of other topics I rather leave to people with an interest and talent for doing those)

So... let's start throwing around some ideas. One thing I learned from forgetting all those 'great ideas' I had in the oddest moments (e.g. while diving the Great Barrier reef and seeing some weirder than weird critters and colour combinations that are totally unreal) is to have a notebook and a pen and preferably my mobile phone (camera) with me at all times. Write things down that would be cool for your game - from the old guy with the funny walk and the cane he's carrying but not using to the colours scheme you see while doing grocery shopping on a kid's chewing gum packaging (that you wouldn't want to buy just for reference sake).
I don't bother too much with archiving these things but rather throw them all into a 'reference' sub-folder in the project.

Another great way to get inspired is by playing games that you enjoy and instead of keeping an eye on the game's objective look for the things that stand out, look cool, feel great and try and work out how they created them. 
With visuals it usually helps when you search in Google images for screens of those games / effects later to see them in still image. Save those right away, pin the, pocket them, bookmark them. It's usually lot easier to find them on your hard drive than search the internet for that 'image that got away'.

A lot of these 'idea sparks' will not make it into the game but might lead to something else that turns into a cool feature.

For this project the initial spark was a cog I did for a user interface. The basic cog is easy enough to create (yet a few tips and tricks on how to speed the creation up would make a nice tutorial).



While working on some variations of cogs in different sizes and varying levels of detail the canvas got a bit of a 'steampunk' appearance to me. Those elements would make a nice background for a platform game. It would probably look great if the background would be filled with animated cogs.

I rearranged the cogs a little and put them in a separate layer. On top of it I created some boxes to represent the platforms to give me a quick idea of what it might look like. 



This defined two aspects - the look and feel: I am going for a steampunk atmosphere (using metal, brass and cast iron) and it's going to be some sort of platform game.   

Next up is the character. 

Note: For me the design of the main character defines the whole look and feel more than any other element. You want it to be unique, recognizable and in most cases likeable, able to perform all tasks set by the game design (e.g. walk, run, jump, swing a sword, fire a gun, shoot a hook, etc.) and .


What kind of character would look cool on a background like this. I think most of us have seen enough steampunk illustrations to instantly jump to an image of the gentleman with top hat and a mechanical limb, a big furnace strapped to his back or a crazy contraption of a weapon in hand. As much as I would like to do one of those, he poses two problems: the level of detail would make it hard to fit into just one tutorial and his proportions would create problems with the level design (he would have to be tall - with the hat even adding more height). Usually game characters for platform games are on the square side for obvious reasons. In the old days you had a limited amount of square 'sprites' in (what now appears to be ridiculously small sizes of 8x8 or 16x16 pixels) and you just get more level on the screen when you don't have huge vertical space between platforms.
Note: I do realize that there is a multitude of very successful games that pull it of perfectly.

The main character needs to be something a little more stout. He needs limbs to make animations interesting (and a bit more work). A flying teapot might be fun but not good tutorial material. He also needs to have big eyes - to show some facial expressions during the animations.
I recently added a robot to the BlockBuddies and I did enjoy creating him. There is also a cute robot in the game 'The Adventures of Shuggy' I did the artwork for a few years back. He's featured on a poster in my living room as I do have a soft spot for him. 




Robots connect fine with the steampunk theme, which makes them a good choice for the main game character. The can be simplified enough to explain the creation process and yet do all the animations and game mechanics needed for a platform game.

In the next post I will get started on a character design with some sketches and creation in Inkscape.