Artifact 6

Artifact 6

So our game project is coming to an end and most of the graphical part is finished for our final version. Even though it feels like we could have done so much more if we would have the time, I feel happy and very proud about of own and first made game for the game designer education.

So this week I am going to write about my work on the menu screen. For the beta I did a menu screen with a simple font. I used a moon and sky artwork that Lisa in my group had made for the outdoor level in the game that sadly never got finished due to the time limit. On top of it I drew some simple forest trees and added some shadows . The menu screen had the options “Play”, “options”,  “credits” and “quit game”. The menu screen was enough for the beta but now when we are working on our final version of our game we wanted it to be a bit more suiting.

When I started on the final version of our menu screen I was thinking that some clear bluish colors would fit very well since the gameplay is consisting of colors in different blue shades on the cave level that the player fly through. Therefor I decided to go with one of Lisas other background pictures with a forest and a cave. The colour theme for Lisas picture was in turquoise and greenish shades which fitted together with the colour scheme in our game.  

My first vision was a very colourful and clear background that oozed of blue mist and a clear crisp sky with stars but after some communication together with the group we decided that the strong blue hue was clearly out of the colour range from the rest of our games colours. So I then started to experiment with the turquoise colour combined with the darker clear blue and it gave quite a nice effect.

I started to work on our logo and realized  that black did not seem to fit together with the rest of the colours and I wanted it to stand out more so I changed the logo to white. I then added some effects called “Bevel and Emboss” and “Drop shadow” and changed the shadow effect until it met my groups expectations. 

When I started to work on our game menu text I tried a lot of different fonts and after around 17 different options I decided to go with the font “Papyrus Regular”in size 18 pt.. I added the same effects as for the logo and putted the menu text to the middle under the logo. We had decided that we was not going to use the "option" in the game menu text and instead have a "highscore" option so I changed that.

After that was done I started to work on the details. I added some stars in different sizes across the menu screen and I painted some mist. I then worked on the saturation and shadows and I used tools such as “dodge” and “burn” to get a more glowing effect to the stars and for getting shadow edges around the menu screen to focus the players eyes more to the middle. I also painted some shadows with the "burn" tool on areas where needed and some glow effect with the "burn" and "dodge" tool where it was suited.

When I was happy with the look I experimented with where the logo and text would best be placed. I first placed them on the left side of the screen but later decided that middle seemed to give the player a more balanced visual.

As a last effect I added one of the fireflies made by Lisa, to work as a mouse pointer and I also duplicated it four times to get it to show more in contrast to the background.

Background picture made by Lisa:

 

Final version

Artifact 5

Artifact 5

This week I have been working on the final power up animations for the bat. As I showed in a previous blog post my different versions of the sketches for the power up four of them got chosen, a light blue, a green, a golden and a white one that had a lot of different colors. 

The light blue is a power up for when the bat is ready for shooting a projectile, the green one is for the toxic effect that cleared the bat`s path. The golden power up is for when the bat gets a speed boost and the last white one was for giving the player a “bat sense”  that then would give hints for upcoming enemies and obstacles.

We then decided to not use the white “bat sense” power up since it felt that it didn’t add any to game’s fun factor. So we then had three different power up effects that I had to animate.

I started with the blue power up and I used the final bat animation as model for my power up effect.

The program I have used are Photoshop, which might not be the best option, but it is the only program I know at the moment when it comes to animation.  I haven’t learned the timeline animation tool well enough yet so I have been using the frame animation option instead. 

I started to match the power up effect to each position that the bat is making when flying and  I have used different brushes, the eraser tool, the free transformation tool and warp tool to fit the power up effect with the bat´s different positions properly. I have also used “duplicate layer” to create many layers with the same power up effect so I have a lot of space to work with. 

When it was ready and I was happy with the result I started to work with the green toxic one. Since I saved all power up effects in different layers from before when I was working on the sketches I just opened up the toxic version and started to do the same procedure as before. 

When that was ready and I was happy with the result I started to work on the last one.  Some of the problems I faced when making the animations was that it was hard to keep the power ups consistency and style right when u change the form. Another problem was that it was hard to change the colors on the power up layers easily without also change the color of the bat when it was on the same file.

I did some tryouts with different colors but it was hard to achieve the right golden color that I aimed from at start for my last animation. So I tried to use one white instead and one white green and at the end I decided to go with the very light white and green power up instead for the speed.

Artifact 4

Artifact 4- Heartbeat Bat

Our game project is slowly coming to an end and most of our assignments are getting finished. This week I am going to write about my work on the dash effect that our bat is going to use in the game to get to different places faster. The dash effect will be available to use downwards, upwards and forward by double clicking the keyboard buttons "d", "w" and "s". Our group got inspiration from the game “Robot unicorn”for creating a dash effect (http://games.adultswim.com/robot-unicorn-attack-twitchy-online-game.html). In Robot unicorn the dash effect is used to get through different objects but our group wanted to use the dash effect to avoid obstacles or to use it to catch a difficult placed powerup item. 

Since we decided to go with a sparkly and colorful theme I decided to match that with my dash effect as well. I started with painting a white shape for the dash and made the shape fitting for the bats dash effect at the time when it is in full shape. I then started to paint on different effects like glowing stars that I colored in different colors. I wanted the dash effect to be more colorful so I decided to change the all-white shape to a shade of green-blue, blue, pink and purple. I made the outer edges of the dash effect more dark and purple and the front more light to get some kind of feeling of speed.

Here is the dash spritesheet

After my first dash prototype was done I continued to work on several dash pictures for creating an dash animation.

I changed the form on the dash shape from big to small and from "normal" to stretched. At the same time I also changed the color to make the dash effect brightest and more strong colored when the bat are going most upwards/forward or downwards. I also did the dash effect lighter when it is at its peak in the animation with the most power.

For program I used Photoshop with some custom brushes and some of the effects used was “Hue/saturation”, “selective color”, “brightness/contrast” and “dodge tool”.

When the dash effect was ready I had to make sure that I also had an animation of the bat fitting for the dash. I therefor made an animation where I turned the bats body in an flying upward state and changed the wings position and expression of the bat to make it fit more properly.

When all was ready I created an animation using Photoshop’s timeline tool. I created an animation with 19 different frames plus one with the bat included. 19 frames might be to many but the effect it gave looked nice.Our groups programmer will then make the animation go faster in game.

Here is the final result 

Artifact 3, Heartbeat bat

Artifact 3

So this week I am going to write about my work with the bats power up effects.

I started my work with experimenting with some different lightning effects and my first visual thought about the power up. Since the power up literally would give the bat energy and make the bat empowered, my first thought was to make the bat look like he got empowered with lightning and that the lightning would crackle out from the bat wings. I then tried to make a quick animation with the lightning effect to see how it would look if I made it a bit electric. But I came to the conclusion that it wouldn’t really fit our game environment and the sparkly theme that we had decided to use for the bats dash effect.

After that I started to try different options with a more glowing and sparkly visual for the power up. I used Photoshop and many different brushes combined with colors and also different effects in Photoshop such as “brightness and contrast”, “selective color”, “Hue/saturation” and “curves”.

The hardest thing was to choose the right color that matched both the background and the effect that caused it. Our power up effects are consisting of different colored glowing fireflies that the bat pick up. For our game we are going to have four different power ups. 

One power up will give the bat a power to shoot projectiles that will clear the game environment from obstacles and enemies. Another power up will give the bat extra speed that will make it more easy to get a higher score for the player and the third power up will make the bat toxic and clear the environment from enemies and obstacles. The last power up is called “bat sense” and that will give the bat the ability to foresee different hard encounters like obstacles or hard turns.

So for the colors

I chose to have a blue color for the projectile power up since it matched the projectile that will be in the same shade. I also chose to use a sparkly and glowing style of most on the power ups to have a consistency in the game just with different colors. 

  

 For the speed power up I chose a yellow/golden color since it will match the pickup fireflies that gives it. I also felt that yellow was a good choice to show a faster speed.

For the toxic power up I chose green since toxic is generally associated with a green yellowish hue. 

And for the last power up that gives the bat a “bat sense” I chose a white color that sparkles with many different colors.