Thursday, 16 January 2014

2D Graphics

 since all the concept art had been completed and i had made all the base sprites, i started to animate them, the pixel sprites were on a 64px by 64px grid. i created the sprites in Gimp, a free image software similar to photoshop. i created each frame in Gimp also, before moving the frames to photoshop and using its easy to use animation feature to create the gifs. 

working with pixel sprites was a challenge for me as i had never done it before and due to the limitations of detail available, this made even more challenging. i managed to get used to the process of creating humanoid shapes using pixels very quickly, once i had made one, it became easier to make the rest.compared to 3D art, pixel art was a lot easier, but 3D for me is more entertaining to create. we chose to use pixel art instead of vector art because we already know how to use vector art, i had never created pixel art before and now was my chance to push myself to learn it. 

 When creating the sprites i started with looking at the concept art and deciding how to make the body bade look, when i had a blank base on the screen i started drawing the details like facial features, hair, clothing and such onto another layer above the base layer. i erased any overlapping lines and created a clean, uncoloured pixel character. before i coloured the character, because of the limitations to detail i knew i wasnt going to be able to give it the desired shading, so what i did was i created gradient charts. a tower of colour showing a gradient in pixel form. i used this gradient tower to shade the pixel sprites after colouring them in, the gradient towers ewnsured each sprite had equal shading, mathematically.





after i was happy with the sprite i created 3 more of the same character, one facing to the left, to the right and behind. these were the start of the creation of the walk cycles. when creating the walk cycles i created 5 frames showing the sprite walking, after doing so i decided just moving the legs wasnt enough to make it look like it was really walking. i made the character bob up and down as he walked and i made the arms sway. these added features made the character look as if he was really walking and not just sliding his feet back and forth. when all 5 frames were created, i put them into photoshop in the same order, but repeated the last middle 3 backwards, so when the animation played it would loop back and i would have a clean walking animation.

with the attack cycles, i used the walk cycles as a base, i erased the arms of each frame and created 3 new layers for each frame of a punch. i kept them seperate from the walk frames to make it easier then duplicating and attaching then to the walk layers. 








we had originally created 4 characters for the game, but near the end of creating all of them, ellis told us he wanted a new one. we replaced the wheelchair character that anna had created due to the fact that we couldnt figure out how to animate his attack cycle. we did manage to create a walk cycle where he looked like he was rolling along but thats about all we could manage. we designed a new character together, a chinese martial arts master. we loved the design and created the sprite strait away!

the five frames of a walk cycle:
 




Our group for this 2d game project was made up of 2 artists and 1 designer. The artists and designers have very different jobs when creating the game, the designers were using a program called construct 2. Construct 2 is a simplified way to create 2d games without all the hassle of bade code. Base code in games, is the code which controls all the basic movements of the game. From a scrolling background to damage, the base code controls it all. Construct 2 hides the base code underneath a user-friendly interface, and makes it easy to create your desired 2d games. You can import your own ready made sprite gifs, or make them in construct 2 there and then. Creating collisions around each frame of each sprite creates physics for your game, and stops certain sprites moving through others. Collision physics can also separate background sprites from foreground sprites.
 

No comments:

Post a Comment