"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: