Thursday, 23 January 2014

Game engines and Different types of graphics



The two types of graphics I will be discussing are vector graphics and pixel graphics they both have advantages and disadvantages; I’ll start by comparing these;

Bitmap graphics are made up of pixels (which are tiny squares) of different colours, these are arranged to make an image; you can see these pixels when you zoom in on an image. When you edit an image made up of pixels, you have more control; you will be able to edit each and every pixel of an image (adding more pixels, changing colour, removing pixels). Programs such as Adobe photoshop, GIMP, paint tool sai, etc. will allow you to edit these pixels.
On the other hand vector graphics are made up of objects instead of pixels and they use mathematical formulas to draw lines and curves which then can be used to make objects which then make up the image, to edit vector graphics you have to change the lines and curves that make up the objects, programs such as adobe illustrator and Corel draw allow you to manipulate these lines and curves.

Vector images are more scalable than pixels, when you scale pixel images you will lose the quality because it scales each of the pixels and you will be able to see the tiny squares of different colours that make up the image this is most noticeable on the edge of an image. There are ways of getting around this problem but then the whole image will get blurry. Vector on the other hand uses formulas instead of pixels so it uses that to redraw the lines resulting in no loss of quality.

Vector images have advantages over pixel because they are smaller in file size this is because pixel images have to store information for each and every pixel such as the colour of the pixel, while vector just stores the formula that makes the image. Disadvantage of using vector is that it isn’t supported on the internet (websites), most popular format used to display images are JPEG which are pixels. There are few ways of getting an vector image on the web, you must rasterize it in Photoshop or you have to use adobe flash to make the format into SWF. 

Vector is good for logo design or images that don’t have colour gradient such as some style of cartoons and animations, while pixel should be used for photos and images with a lot of colour gradient and Varity.


What is a game engine and what is it's purpose?
A game engine is what makes a game function. It’s a tool you will use to make your game, however it is incomplete because it doesn’t contain every cog and gear that will make your game work, however it contains the basics which allow the developers to focus on other things such as the detail that will go into their game instead of making everything from scratch which will make it more time consuming so a game engine basically contains reusable software components. It is the core of the game, and game developers use these to cut down the time spent on developing, because the game engines already contain the basics, such as the graphics, AI functions; If the developer wanted something advance they would have to make that themselves and implement it into the engine.


The game engine controls everything such as rendering, physics, Interface, AI, loading, etc. However it doesn’t make the game, it only brings it to life. The models, textures and how everything interacts with each other in the game environment; is what makes the games and not the game engine. Some examples of game engines are UDK (Unreal development kit), Cryengine and frostbite.  Each game engine is different to each other, some are good at one thing the others are good at something else. Like how some cars are good at accelerating while using a lot of fuel on the other hand some cars are good at using less fuel but taking longer to get to the destination.
 

Animation gallery

This is where I've placed most of the animations that I made, these are the final versions. I've left out the sketches and the skeleton animations. Click Read more to see them all...

dragon dying

Final animation that I needed to do was the dragon dying, like I explained few posts ago; hand drawing it each frame and cell shading it would take way to long, so I basically cut the dragon up with polyognal lasso tool again and drew blood on each frame, I used dark red and bright red for the highlights, i wanted it to have some depth and varity.
It is still a bit fast and I might make some more adjustments if I have time, but in my opinion this looks decent enough to go in the game.

Fire beam

After I was done with the previous animation, I went onto doing the flame beam for that animation. I wanted it to be on a different document because then the designer could make it attack or spawn in, plus he would have more control if the animation was done on a separate document.
For making the beam I made a pencil/ charcoal brush which had a grunge feel to it; I held shift and drew two straight lines for the edge of the beams, then for the inside colour I made it orange and added lines that were yellow, then I used the effect gaussian blur on the yellow lines layer which then was duplicated and set to overlay mode. I did a few more layers until I got something that I wanted. Finally, for animating it I basically had it come out of the frame to when it was fully visible.
to make it feel more alive and blazing I made one of the layers with the lines on to move around when the whole flame beam was in frame.

Fixing the animation problem for dragon

After facing the problem of not being able to keep the same quality of detail on the dragon with hand-drawn animations, I decided to use the polygonal lasso tool to cut the jaw of the cell shaded dragon and I placed it on a different layer where I could edit it and or copy/ modify.

I then set the anchor point to the edge of the jaw so when I rotate, the back of the jaw would not move. I created 21 frames after that and animated the jaw opening and closing on this length. After this I set the playback of each of the frames to 0.07 seconds which allowed for it to be smoother, for the opening of the jaw there was no ease in, it was rapid but for the closing there was a small ease in.

After this was done, it looked weird because there was no tongue or teeth, so I went over each of the frames and drew in the teeth, for the tongue I drew it on a separate layer because that needed cell shading.
I think it turned out alright since I just animated it from a still animation.

Dragon attacking animation


I outlined the sketch from the last post with a default brush because I didn't have my own inking brushes preset at college, I could have used the pen tool and stimulate pressure and make it look like it's been inked, but that would take way too long. I was running out of time and I also had to think about the other animation I needed to make for the dragon, such as the idle, dying, etc.

After I finished outlining the dragon I had to add colour and make it match this
which was what I wanted the dragon to look like, after doing the first frame, I realised that it would take way too long and for some reason I could not get the colours right also I could not use the fill tool or the magic wand tool since the brush I used for outlining had a softness to it and that left pixels which were shades of grey. This posed a massive problem since I had to give the designer some time to import and implement the dragon into the game, and the deadline was close, So I decided to scrap that idea of me going over each frame and colouring it by hand; after which I would have to go over it again and add shading, then finally I would have to go over it again to add highlights.

 

Thursday, 16 January 2014

Dragon

I went over that skeleton sketch I posted few days ago, This is 2/4 passes, the first was the skeleton sketch, the second was this, getting the basic form done, the third would be going over this and placing the lines precisely and getting the proportions right the final step would be to add colour and make final adjustments.
I think I'll have to make the flames on a separate document because we'll use the bullet feature in construct to make him shoot out the flames instead of them being attached to the animation.

Animation for dying

The designer said that we needed an animation for when the players die, so we reused the falling animation and cut off the part where the players gets up, instead we had the player stay on the ground and change the eyes to crosses to signify that the player is now dead.



Wednesday, 15 January 2014

Animation for dragon

I did a skeleton sketch for one of the dragon attack animations;
I will now have to go over each frame and draw the dragon on the skeleton. for a fully hand drawn animation i think it's easier if you have a skeleton to work on top of. I can't really use motion tweening anymore and I may not do this animation in Adobe flash because I'm not good at cell shading in flash.
  

I've changed the style of the dragon as well, I didn't like the first one so I did some research on dragons and built a mini mood board. This time I used a brush with pressure on the thickness of the lines, you can see this when you look at the horns, it doesn't have lines which are the same thickness from starting to the end. also this time I used the colours more efficiently, light source is set above the head, and you can now see the highlight. This looks more refined than the previous drawing of the dragon.
I might change the colour of the dragon, which should be easy since I have all the colours on different layers.

Thursday, 9 January 2014

Boss

We are currently debating on having a boss monster, so I already drew concept of it, I asked my team about what the monster should be like and i was told that it's my choice; so therefore I chose a dragon as the boss.
I made an animated GIF of my work process, I first started with the line art, after tweaking it I went to add the base colours for the horns, teeth and the claws. after that I added the highlights and shadows, then I added the red streak near the eye glow and finally I used "colour balance" to bring out the golden horns and claws.
Animating this will prove to be a challenge, but I'll try my best, I drew this in Photoshop so now I'm going to try and re-draw it in flash where animation will be smoother, if i find that to be way to hard or time consuming then I shall settle for Photoshop's choppy animation.

Falling down and jumping up

I've also created falling animation for when the player gets hurt, I would like to add blood but i don't really know how that is going to work in construct. I've got 1 final thing i need to do for the characters; I just got the jump animation to make and then I'm done, I will then move onto create a start screen and the boss monster.
The characters were missing a jump animation, I noticed that movement didn't seem real when we were play testing and I now have jump animation for both player 1 and 2.

Player 2

I've now done all the animations for player 2, doing the post effects went a lot quicker this time around, because i knew all the shortcuts and tricks to save some time. just for reference here are all the gifs for player 2.



GIF size and rig

I've fixed all the resolution problems and now all the GIFs are 300 x 300 pixels, it was a good idea to make a rig of sorts because my next step is to make "player 2" which is going to be the same character but just a different colour and will have a different 'ultimate move'
the reason for having the second player be the same model but a different colour is because it would lessen the workload, because most of the time will be spent on making a boss monster.

I now still have to add post effects to all the GIFs for second player, and these are done frame by frame, so it takes a little longer than actual making of the animation.