templates-office.com
Minggu, 06 Mei 2012
Still alive...
Jumat, 04 Mei 2012
Back to the Future: The Game Review
Hi my name is Nik and i am going to take a look at another of my favorite games of last year:
Back to the Future: The Game when i first heard about this i was like: "What? Can Telltale games give this game the story that a Back to the Future game deserves ,or they will screw it up like some many movie licensed games".And i was so surprised when i played it for the first time and it was good.
The game is a point and click adventure, divided into 5 episodes. It takes place a few mounts after the third movie and you are playing the roll of Marty Mcfly.The story starts with the fact that Doc has being missing for several mounts, he has a depth to play to the bank and they are about to sell his house. So you'r mission is to find him and get him back to 1985. Sunnenly the just as you walk around Doc's house,looking for clues, the DeLorean appears with Einstein and a recording from Doc. You track him down, using a old newspaper, back to 1931 where he is accused of burning down Kid Tannen's speakeasy and will be killed by his gangsters. I am not going to spoil the rest of the story for you, but i am going to say that its very interesting to see how your actions in the past have effect on the future, just like in the movie.
Gameplay wise the game is a point and click so you mostly solve puzzles. Some of them are really good, some of them don't make any sense at all and if you are like me and hates puzzles witch make no sense you will love the hint tool.Its basically what it says, a menu in the game that has hints you how to solve some of the challenges, the nice thing about this tool is that it usually has more then one "layers" of hints. The first layer is a very miner hint, the second a bigger hits and the third usually tells you how to complete the puzzle. Of course i am not trying to say that all puzzles are bad, same are really good, like the house of glass in episode 5, or making the fuel in episode 1,the problem is that they are few and far between.Graphicly the game is very unique,it reminds me kind of cartoonie feel of other games from Telltale. But the thing that really gets you, besides the grate story, is the sound design. All of the music is straight from the movie, all of the voice actors do there job perfectly and this gives the game the feel of the movies.
So to top it all up Back to the Future:The Game is a very fun, very atmospheric game with a story what will blow you away. You will love it if you are a fan of the movies, like me, and you will like it if you are a fan of point and click.
You can get the game on PC(it will run on anything), PS3 , IOs and Wii.
I hope you liked my review of Back to the Future:The Game.
If you did please comment and share with your friends.
Have a nice day.
Minggu, 08 April 2012
Happy Easter!
I hope you are all having a great Easter.
I surely did (even while working through most of a perfectly sunny day). As usual working made me think of great topics for the next tutorials...
Once I am over the current mountain of work I have another 4 tutorials to write - just to put some fun into the mix. I wonder why work can't be a nice steady flow than dry spells and monsters waves - well... I guess it's just a freelancer's life ;)
Enjoy your day! I am going to call it a night... :)
templates-office.com
Minggu, 01 April 2012
Top down view - Soldier
I am jumping wildly from iso to shading and now to a top down view. I apologize for the lack of order in the tutorial posts at the moment but I just felt like writing this one after creating the art for a request.
Top down characters - there really is not that much to see when you look straight down on a character. You see the top of the head, the shoulders, a bit of the legs and the arms when they move.
One way to show what the shape really represents is by adding a nice long shadow of the shape - which works well in 3D engines but it a proper pain to reproduce in 2D as the shadow needs to move with the character.
When animating the character it's pretty much just down to the feet and the shoulders corresponding to the leg movement - in a more limited way as our soldier holds his gun with both hands which restricts the movement a little.
Top down characters - there really is not that much to see when you look straight down on a character. You see the top of the head, the shoulders, a bit of the legs and the arms when they move. One way to show what the shape really represents is by adding a nice long shadow of the shape - which works well in 3D engines but it a proper pain to reproduce in 2D as the shadow needs to move with the character.
Alternatively you can add more detail to describe the parts better and make them recognizable.
In the case of the top down soldier it's going to be a matter of creating a helmet that is visibly a helmet, show parts of the gun he's carrying and give him a pose that connects the gun to helmet in a believable way (e.g. a rifle standing out to in the centre of the figure is not really believable as it would ram into his stomach).
When animating the character it's pretty much just down to the feet and the shoulders corresponding to the leg movement - in a more limited way as our soldier holds his gun with both hands which restricts the movement a little.
As with all the tutorials it's a matter of taking this and playing around with the ideas and create variations. How would a knight in armor look from above or a caveman or a girl with piggy tails?
Note:
I didn't go into great detail on topics covered in earlier tutorial posts (e.g. the manipulation of nodes or the gradients). If you have problems with those please check out the earlier posts on this blog. Thanks!
I didn't go into great detail on topics covered in earlier tutorial posts (e.g. the manipulation of nodes or the gradients). If you have problems with those please check out the earlier posts on this blog. Thanks!
I hope you enjoyed this tutorial as much as I did creating the art.
Get the source art (svg file) of this tutorial for
USD 5.00
templates-office.com
Selasa, 13 Maret 2012
Basic shading - the ball
This has to be one of the most requested tutorials has to be on shading. How do you do it? Why do it? Where do I add shadows and what colours do I use? Lighting is vast area and the possibilities are shear endless. In this tutorial I tried to cover the absolute basics with one of the simplest shapes - the ball.
If used correctly light and shadow will make your scene / object look a lot more spectacular, real and visually appealing.
Let's start with a circle - I know this must be the 100s time I have written those words - but it's still the easiest object to work from.
The result is not realistic and not overly cartoon like. If you aim for the latter cell shading with 2 to 4 colours will do the trick. To get the ball to look more realistic the highlight elements would require more work - and a Google image search for something like Christmas decoration.
As the ball gets closer to the light source the effect of the light should be stronger - lighter highlights and darker shadows with the effect of the secondary light source less visible.
If used correctly light and shadow will make your scene / object look a lot more spectacular, real and visually appealing.
Let's start with a circle - I know this must be the 100s time I have written those words - but it's still the easiest object to work from.
The result is not realistic and not overly cartoon like. If you aim for the latter cell shading with 2 to 4 colours will do the trick. To get the ball to look more realistic the highlight elements would require more work - and a Google image search for something like Christmas decoration.
Let's take a quick look at the effect of changing light on our ball.
As the ball gets closer to the light source the effect of the light should be stronger - lighter highlights and darker shadows with the effect of the secondary light source less visible.
One question I have been asked a lot concerns the choice of colours. The very basic shading would be by simply using white for the highlights and black for the shadows. In my opinion the result usually looks dead and cold. I prefer warmer light and my favorite shadow colours are dark purple or dark brown (with adjusted alpha). That way you get warmer tones and more lively colours.
Then again the scene you are trying to influences the colours of your light and shadows. E.g. an underwater scene would look very odd with brown or red shadows - you would choose a white/ blue/ green colour-scheme. A summer afternoon would have a light yellow/ gold/ dark brown or deep red palette - while a winter's day would have white/ blueish grey and black.
Here are a few examples of the effect colours have on the shading of an object.
In the end it's a matter of playing around, finding the right light to set the mood for your scene and then stick to it for all the objects in your scene. Have fun with it! Try to find something that enhances the mood and the atmosphere you are after and don't be afraid to try 'odd' colour combinations.
Note:
If you create game assets keep changes to the scene in mind. To avoid having to create dynamic lighting - which looks awesome but is a lot of work on the coding as well as the art creation side of things - I would suggest sticking to a standard light setting (e.g. top down - that way flipping a character horizontally to walk in the opposite direction does not mean creating new assets to keep the scene looking consistent). It can also be very helpful to separate the shadows form the objects for allow jumps and walking on non-horizontal surfaces to look right.
I hope this was helpful so far and I plan to add to this tutorial in future with some more advanced objects and more complex shapes. Enjoy!
Get the source art (svg file) of this tutorial for
USD 3.00
templates-office.com
Rabu, 07 Maret 2012
I want you...
After five month of having fun with these tutorials the reality of life is slowly catching up with me - geee... I loved my little castle in the sky...
I decided to offer the source art of the tutorials for a very small contribution to my monthly bills.
There are the single tutorial art files for USD 3.00 or USD 5.00 for the more complex tutorials and also a bundle of all tutorial art (which will either be variable as the amount of art will increase as I continue writing the tutorials or put into 6 monthly packs).
Note:
You can use the art for any hobby or commercial game as long as you don't sell the art by itself or bundled. Enjoy!
templates-office.com
Selasa, 28 Februari 2012
Building isometric art in vectors - step 1
I have had a few request to do something isometric - usually the requests cover characters and animation or more complex elements like buildings. As usual I am trying to start a little easier to ease the learning curve and create a simple isometric grass block (how boring of me ;) )... but... the next tutorial is already in the making and I find isometric art a lot of fun - well more fun now than back in the old days when I had to pixel them in 16x16 blocks with a handful of colours and still make them look good...
According to wikipedia isometric projection is: 'Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. It is an axonometric projection in which the three coordinate axes appear equally foreshortened and the angles between any two of them are 120 degrees.'
Now that's a mouthful... and please... don't ask me to explain it.... I just use it... ;) Basically it's an attempt to fake a three dimensional feel in 2D by rotating the ground 45 degrees and ignoring the perspective scaling (objects do not get smaller when they are further away).
Let's get started with some basic steps into isometric projection. This is close to 'true isometric' but not quite there - but a lot easier to handle artwise.
Note:
With different game engines you might encounter slightly different proportions as far as the vertical scaling goes... but the process of creating the elements would be very similar. 
For my little scene I added a quick tree - with a couple of circles (keeping the 1/2 deformation ratio in mind) and some simple rocks based on the same circles - and it's already starting to look like something you would expect to see in a game.
The main problem you will encounter when creating whole scenarios in inkscape based on 'isometric blocks' is the depth sorting. It will only look right if the tiles are stacked properly and the furthest away (top left corner of the screen) are on the bottom of the pile and the closest (front right corner) are on top of the other shapes.
I hope you enjoyed this quick post and it's a start into the creation of isometric tile-sets. I will continue this tutorial with props and buildings next (and yes.. I will do characters and animations as well... ).
Note:Turning on the snapping in Inkscape makes aligning nodes in step 5 a lot easier.
Turn on the snapping View/ Snap (%) to align nodes precisely to others. In the snap button bar there is a button to 'snap nodes or handles' (7th from the top) and by turning on the sub-function 'snap to cusp nodes' (10th from the top) allows you to snap nodes perfectly.
In case it's still not as responsive as you would like go to the Inkscape Preferences (Shift+Ctrl+P) and change the weight for the snapping there.
Get the source art (svg file) of this tutorial for
USD 3.00
templates-office.com
Rabu, 22 Februari 2012
Working with bitmap output in mind
Here's another request (or a a combination of requests) put into a tutorial. How to create vector art that looks good in a small e.g. 48x48 px size.
One of the advantages of vector graphics is it's lossless scalability. You can easily create an image and scale it up and down without sacrificing the quality. There will be no jagged edges or visible blocks when you increase it's size by a tenfold. It also works nicely the other way round by creating source files that can be used for smaller in-game images.
To me it's a lot easier to create a few circles and boxes than to pixel a character from scratch. It can then be animated in inkscape and exported to bitmap and worked on with a bitmap tool (e.g. gimp) afterwards.
I like to work with files 2x the output image for a slightly larger work area - and because I find the scaling algorithms work better in bitmap tools then exporting straight to the small size in inkscape.
The main elements are there and it's time to check what our little character will look like in its small in-game size. I primarily want to check if the outlines will still work in 48x48 or if they become too thin to be readable or are just too big and overwhelm the character.
Now we have our character and it's exported to a bitmap file.
Note:
I skipped the adding of more detail (e.g. the shadow line of the hair (which is basically just a copy of the hair shape without the stroke and coloured in a 50% alpha dark violet) and the highlight in the hair (which is a quick squiggle with the freehand lines tool).
I skipped the adding of more detail (e.g. the shadow line of the hair (which is basically just a copy of the hair shape without the stroke and coloured in a 50% alpha dark violet) and the highlight in the hair (which is a quick squiggle with the freehand lines tool).
You should have something like this: a 96x96 px image with a transparent background and the little guy in his full glory. Thanks to the antialiasing it doesn't look much different from our vector shape.
Now we open the file in the bitmap tool (e.g. gimp).
In gimp we reduce the size via 'Image/ Scale Image' to 48x48 and should get something like this. It still has the antialiasing which rounds of the edges and smoothes the steps. 
If you are after a more pixelated look I suggest reducing the colours (e.g. to just 16 colours) and manually touch up the image, removing AA outlines and redrawing the outer lines to be even.
This would be a topic for a whole new tutorial - and I will add it to my todo list. For now I hope you enjoyed this tutorial and keep creative with inkscape.
Note:
Some engines (especially for the iOS and android require set dpi (dots per inch or x and y resolution). I find it hard to adjust my art properly in inkscape to export to the right dpi straight away. Instead I change the dpi in the bitmap tool whenever needed. In gimp it's done in the 'Scale image' tool. You can set the x resolution and y resolution (e.g. to 72 dp[i for iOS applications) when scaling down.
Get the source art (svg file) of this tutorial for
USD 3.00
templates-office.com
Senin, 20 Februari 2012
Creating a brick building
This is a tutorial requested by one of the readers on how to create a building made of brick. In order to clarify what he meant I quickly created this one and wrote up the tutorial to explain the steps.
There are a few problem when adding pattern added to a shape. You have to make sure it's seamless (it tiles properly horizontally and vertically). You have to make sure it scales well with your object (too much detail might be lost in a smaller view and too little detail will look boring) and you need to make sure it matches the illustration style (a bitmap photo in a vector illustration might cause serious inconsistency in the look and feel).
This is a brick building. We all recognize the pattern but it looks boring because the blocks are too big and too even. It's also not the best design for a house.
Let's get started with a bunch of rectangles and build a more interesting looking house and then add the nicer brick pattern to it.
So... We got a simple yet decent looking house...
put into a row with varying colours it looks rather nice. It's open to a lot of designs now (e.g. you could add wood boards as a pattern and place it in Scandinavia.).
For now we are after bricks so let's add some pattern.
When creating a pattern always try and look at the larger project rather than the one element you are working on. Will you need to reuse the pattern? Will there be colour variations? Do I need to make it scalable? You can save a lot of time and repetitive work if you keep those questions in mind. Work with e.g. transparent elements for shaders rather than tinted variation of the base colour or convert your lines into paths to allow for a proper scaling.
I hope you enjoyed the tutorial as much as I did creating it. Have a great day and keep your creativity flowing.
There are a few problem when adding pattern added to a shape. You have to make sure it's seamless (it tiles properly horizontally and vertically). You have to make sure it scales well with your object (too much detail might be lost in a smaller view and too little detail will look boring) and you need to make sure it matches the illustration style (a bitmap photo in a vector illustration might cause serious inconsistency in the look and feel).
Let's get started with a bunch of rectangles and build a more interesting looking house and then add the nicer brick pattern to it.
So... We got a simple yet decent looking house...
For now we are after bricks so let's add some pattern.
I hope you enjoyed the tutorial as much as I did creating it. Have a great day and keep your creativity flowing.
Get the source art (svg file) of this tutorial for
USD 3.00
templates-office.com
Kamis, 16 Februari 2012
Creating a character with outlines
Here's one request I have read a few times now: 'How do you make a character with outlines?'. It's not much different from any other character creations you just add a little more difficulty and a few problems to work around.
The main problems I see with a lot illustrations using outlines are: a) the inconsistent line weight (different thickness of the stroke for different elements on the screen). It's a little more complicated and takes some thought to design the screen balanced. My advice is to keep it either keep it all at the same thickness or use a thicker brush for all the focus elements (eg. characters, logo, UI elements) and create the background with a thinner stroke. b) the colouring of stroke vs. the colour of the shape. c) the line weight does not correspond with the illustration. You might have noticed it in comic books, illustrations or animated cartoons - the stroke is not consistent in thickness. It starts thinner, goes thick and ends thin again giving it more of a brush feeling. If it's done right it really enhances the image but it's a time-consuming art. Simply using tools in Adobe Illustrator or Corel Draw to create dynamic brushes usual ends up looking wrong.
All those problems aside. Let's start with something simple.In this tutorial we will do a little piglet with a plain black stroke that stays consistent throughout the elements. In one of the next tutorials I will cover more complex and modified outlines.
The last two steps show one of the main problems with outlines - the overlapping of elements creates lines we don't want to see. You could just combine the snout and the head. Simply making it one object would result in problems animating it afterwards. This becomes even more visible in arms and legs. I prefer just adding shapes to cover those overlaps.
The tail might not the usual corkscrew design you see in a lot of pig illustrations - it was one of those cases of thinking you know how it looks versus the way it looks. In the end I checked on Google images [the best invention since sliced bread] and had a look at real piglets and found this cute little tail more appropriate.
And the last step - I forgot to add it to the tutorial pages - (remember I am fresh off the vacation) is a cover shape for the legs to join them with the body.
I hope you enjoyed this tutorial. Get out inkscape and start creating!
Get the source art (svg file) of this tutorial for
USD 3.00
templates-office.com
Langganan:
Postingan (Atom)