Week 6 of Game Development, Pruning the twigs

Well, well. Here we are, the last week of game development and the day before the big presentation. The team have been working hard (still working, and probably will until there is only one minute left to the deadline), and we have now something pretty playable. At least much better then the last milestone, the Beta. There is a lot left to do though, and a lot that we can’t ever in a million years finish. But for us graphical artist there have been nothing new to do really. All the graphical artifacts are done, and almost all the sound ones too. So all the artifacts this week have just been about making some small fixes and touch-ups to our previous assets. Overall though, the biggest and most important artifact this week for me, and the one I’ll write about, have been the making of mock-ups for our Game Design Document.

So you might ask why I’m making mock-ups for our document, or you might even ask, weren’t you already finished with it? Well yes, we had “finished” it and turned it in. But unfortunately it was pretty lacking and we received a lot of feedback on what we could improve on. So this week and last week we have been working on the document. We have all been editing and adding new texts. But I’ve also taken on one of the bigger artifacts, of making mock-ups. As the biggest complaint on our document was the lack of pictures explaining movements and the likes. This is something we all agreed on lacked last time. But it was something we didn’t prioritized doing or implementing last time around. It wasn’t until later we realized its actual importance. As pictures often more easily convey information and it can make it more bearable reading a wall of text. And like the saying goes, a picture says more then a thousand words.

So, in the making of these mock-ups, I decided to go with a pretty simplistic style. So I outlined the walls instead of using the actual background pictures, and also added outlines to the enemies and the ship to make them stand out more. I used the actual sprites from the game, to make it easier to see what’s what. Instead of having shapes like squares representing them. I think this was a good choice. But hindsight, I think it would have been better if I made the sprites in solid color. Since all the details on the ship might make it a bit cluttery, and harder to read. It also might clash a bit with the more clean comic style. But I think in the end it does its job well enough.

Here you can see some of the mock-ups I made for the document.

JumpingSpiderShoal

Thanks for reading my reflections, and I hope you had a fun read! This is the last one for this course too! S o nobody will be unnecessarily tortured again, well unless you chose to read it 😉

Bye bye, have a nice day!

Week 5 of Game development reflections, Say Hello to my little Friend

We are now done with our Beta, and have begun with our first week of Final. It’s now only two weeks left of Game Development. We had a Beta presentation in the beginning of this week, and let’s just say in the nicest of possible way that… it really didn’t go well. Unfortunately a lot of our stuff wasn’t finished and a lot of our sound and graphical assets wasn’t implemented. This is mostly due to this project being too much for a newbie team to take on. And to even remotely finish all the things in the nine weeks given to us was impossible. We just took on too much. But even if it didn’t go well, at least we have learned some valuable lessons, and we have become much better as working individuals.

So, this is often the part where you start writing all the good things that happened, to even out the bad. But that is a bit impossible, since I personally have had a really tough start to the week. I’ve been terribly ill all week and haven’t been able to help my group with any meaningful work. So I have no assets for this week to write about. BUT, luckily for you (?) I worked with some assets over the weekend and so I’ll write about one of them instead (thought you could get away huh, mehehe).

If you already hadn’t guessed what asset I was going to talk about from the really “secret” reference to The Godfather in the title. So lets make it crystal clear, its about WEAPONS of course, yaaaay! So this week’s asset is the making of the secondary weapons, an important artifact to show the different power ups, aka weapons, the player can use. Here comes the working process for the secondary weapons for the Aquila!

First I had to decided how the ship’s weapons should look like. All I knew was that they were supposed to be 1. a missile launcher, 2. a laser gun and 3. a time-bomb. So I started with making the missile launcher. I googled ship missiles and saw that the shape was often a rectangle, big enough to house a couple of missiles. So after looking around for a while, I blocked out the shape in Photoshop and then started adding some details, I also used a few brushes to make it look a bit dirtied. When finished I had to add it to the weapon wheel. Since it was supposed to be a big and heavy object I placed it under the wheel and connected them together with a thick bolted iron belt.

Done with the missile launcher, I started with laser gun. As it didn’t have any real ammunition, but is shooting laser, I wanted it to be really thin. But I also wanted it to be long, to look a bit like a sniper rifle. Once again I just drew our the shape and then added yet again some details. I used a lot of the techniques that I already went over in my older posts. Now done, I think I might have overdone it with the details. Not because it looked bad, but because they actually weren’t that visible later in the smaller sprite. But as it was done, I added it to the top of the wheel.

And now that all the other weapons was done, all that was left was the time bomb. I decided to go with an EMP grenade design, since the bomb would have a similar effect. I went about making it the same way I did the others. Only I added small lights to it that could blink when used. I also added the bomb to the side of the ship instead of the wheel, since it’s activated with another key then the others. It also wont shoot anything from the ship. But just emit a wave that would knock out the enemies on the ship. So in my opinion, not adding it to the weapon wheel, would probably make it easier for the player to realize that it’s used differently from the others.

Here you can see the wheel how it looked like from the beginning,

gun

here it is with the new weapons on,

Missle Launcher2

here is the time-bomb

Layer 7 copy 2

and finally, here they all are on the ship.

Ship SmartObjects 3

Thanks for reading, have a nice day and I hope you had a fun read!

Dum dum dum dduuuuuu, Week 4 of Game development reflections, le Music edition

Heeeyyoooo!! Well, well, back here yet again are we? Yep, that’s right, you guessed it! It’s time for the next post of GAME DEVELOPMENT!! So, we are now six weeks into the course and the Beta is coming to it’s end. I’m starting to sweat bullets, as we still got some things to work out and finish and the deadline is just coming closer and closer. Most of the things left is programming assets and the programmers are staying up day and night to finish it. So because there wasn’t many graphical assets left (at least not already taken ones) I chose to work mostly on the game’s music and sound. And that’s why this week’s chosen artifact is the creation of Colossus Core’s music. For the menu, the in game music and also for the battles.
So, music. Why?, you might ask yourself. Is this really important? Why yes it is!
Music is often used to set the mood to a movie or a game, and is a great tool to show what kind of genre it will be in. Like for example, using a lot of quick strokes on a string instrument will often induce the feeling of fear (horror genre) and/or give the player an indication of danger and there being little time left. So, as this game being set in a futuristic, cybersteampunkesque world, I wanted the music to reflect this in some kind of way. Like perhaps with a futuristic electronic feel to it, but with still some mystery to it, as the player controls a ship in a dark and foreign cave system.

Background picture made by my teammate Oscar<3
Background picture made by my teammate Oscar, edited by me<3

As soon as I had decide on how I wanted it to sound like, I opened up the music program on my computer called Fruity Loops. I chose to work in this programs, as I had used it a bit before a long time ago when I was in upper secondary school. Not being a musical genius, I looked up a lot of tutorials on the internet, to figure out just what I had to do to achieve my goals. After I had watched some tutorials, I started with picking out the instruments I wanted. I decided to go with very electronic sounding instruments, like a deep bass, funky synthesizers and random electronic sounds, basically just sounds that sounded like they could actually come from a real spaceship. I then set it to a pretty low BPM (short for beats per minute, unit to measure the tempo in music) of 60.
When I had all the instruments set, I just wrote in a couple of notes that sounded OK in the piano roll, and then just duplicated these beats over and over again. I did this for all the instruments and then added random effects to it. Mostly everything I did was just random in the end, I just clicked on things until it sounded at least bearable to listen to. This instrumental arrangement later became the game’s menu music. (Of course I also made it to be loopable, as this is important when in a game. As it saves space and so it doesn’t sound strange when it restarts.
All well and done, I then started on the idle and battle music. I copied the menu arrangement, and then slowed down the BPM to 40, so the music would fit atmospherically for the actual in game music. I removed some instruments as the music had to be pretty minimalistic and a lot more silent, so the ambient sounds of the cave could be heard. For the idle music I just removed some more instruments and changed the bass to be long notes instead of short fast ones.
So, here are the finished arrangements for the game so you could listen to them. I also made a bit more sped up version of the menu version. Still don’t know which of them I should go with. You tell me perhaps? 😉 I hope you’ve enjoyed reading my ramblings, and that you also have a nice day!!

Week 3 of Game Development reflections, Mayhem and Destruction!

We are now done with our Alpha, and we will now start our first week of Beta. This mean that we are one step closer to a finished product guys! Yaaay!! Five weeks into the course, things are going pretty well, at least here on the graphical art side of things. So now I’m once again writing my weekly reflection for a chosen artifact, third in a row. This week’s chosen artifact is destruction and mayhem (more precisely the death/destruction animation for the ship), an important artifact to give a real good indication for the player that they’ve lost. And really it would just look terrible if the game just ended with a Game Over screen.

So this time I’ve decided to go more into the creation process of this artifact. To perhaps help others to create, or use similar effects themselves. Here is the semi finished results so you know how the finished results might look like. I might fix some things later though and there will be different effects added in-engine.
Shup
Just a heads up, I work in Photoshop CC. So all the things I’ll describe might not make sense for earlier versions, or work in a completely different program. But here comes the working process for the destruction of Aquila!

First I had to decided how the ship would get destroyed and how it would start out. I decided that I wanted the ship to crack and then explode in a white blinding light. So I started with drawing out cracks with a red brush. Making some zigzag lines over the ship, but always making sure that it looked like the cracks was moving over a 3D shape (following the shape of the ship). When this was finished I drew in a yellow line inside of it, creating an effect of heat. And then I gave the red line an outline of black and white, creating an illusion of depth. This is the same procedure I used when I created the holes in the ship from last weeks artifact. So now the cracking effect was done.

Cracks

Now I wanted the effect of light seeping through the cracks of the ship, making it look like the ship was exploding from within. Making this was pretty easy in the end, but it was really hard to realize how to make it possible in the first place. But after messing around in filters, I finally found the perfect way to create it. What I did was duplicating the cracks layer, recolor it to a solid orange color and then I used the filter, Radial Blur *100 amount, method Zoom. I then gave the new layer a layer style of Outside Glow, here is the settings I used.

Settings1Light

When exploding, there needs to be some small kind of debris. I created this by duplicating the light layer, erasing a bit and recoloring it white. I then applied a new Outer Glow effect in gray to the layer, which created small dots that looked a lot like debris. Here yet again is the settings I used.

Settings2Debris

Now I had all the layers I needed for the animation, well I also made an extra light layer and two layers of solid color in white and orange (I used these layers to create the effect of the ship exploding in a bright light). Then I just used these layers and faded the different layers in and out in the animation timeline in Photoshop, and messed around until it looked OK. Here is the animation. OBS! The file looks a bit weird here on WP, click on it to see how the animation really looks like.

Exploding

Thanks for reading, and I hope this post might have helped you in some way!

Week 2 of Game development reflections, fancy visuaaals

So now we are four weeks into the course, this being my second post, and I’m slowly losing my mind. This week we have our Alpha presentation, and these four weeks of work will be shown in front of the class. Hopefully everything goes well, and hopefully this artifact I’ll be talking about this week will help completing the things we need for this phase in production.
This week’s chosen artifact is the creation of mechanic indications on the ship. The reason why this is important, is because we are trying to go for a really minimalistic HUD for the game. This to immerse the player more in the game-play, and create the atmosphere we want. So the indicator, for example, life, will be shown in some way on the ship. And the selection of the different weapons and how much overcharge (a game mechanic) you have currently. So let’s go through the ones I’ve made and what they are for.

As I said before, we will not be showing a life counter on the screen. But your life will be shown in some way shown on the ship. We decided that this should, of course, be shown by visual damage on the ship. The ship would have three different stages of damage.

Ship SmartObjects

After taking 1/4th damage of it’s health the ship would be slightly damaged. I made this visually so that the ship would look roughed up, scratched and dusty. I created this by making a new layer and just going nuts with brushes in different tones.

After receiving more blows and when the ship’s health is about 2/4th gone, the ship will receive more visual damage and start to smoke and throw sparks. The effects of smoke and sparks was made by my fellow graphical artist Oscar. But the ship damage I designed. So I showed this visually by making large holes and cracks in the hull and making the front window of the ship cracked. Ship SmartObjects2The cracks was created by first making a shape out of black color. I then outlined this with a gray color and then a really light gray. This made it look like it had depth.

The last visual indicator on the ship and when it’s in critical condition, is that the lamp (the one I created last week) will start to flash red. At this point, if the ship receives more damage, it will crash and blow up. This blinking of the lamp will be added in as an effect in the engine, so I didn’t have to make an animation for it.
More then damage indicators, I’ve also made a bar for overcharge and an indication for weapon selection. The overcharge bar would show how much overcharge the player currently have.

1

To show the power increasing, the bars would go up and also change color from red to green, to really show when it’s ready for use. This was later changed though so the bars would start at the bottom and the top to later meet in the middle. I did this so the player could read the power bar even if the ship was upside-down.

The weapon selector was also needed as the ship would later have multiple of different weapons they could switch between. Lineart1So to be able to track which weapon is selected, it would need an indicator. So I made a small bar next to the weapon, that would fill up and glow every time you would select it.

And so these are some of the indicator that are now finished for the alpha. Hope you’ve enjoyed reading my ramblings, and have a nice day!!

A new course, Introduction to Game Development! First week? Wut

2D graphics and applications I is now finished and so I start a new course. Introduction to Game Development, oh so exciting!! This is a continuation on my first course Game Analysis and Game Design, that I had last semester. I have been now moved to a new group, and this time instead of creating a game concept we have to create an actual game based on another groups idea.

So now we are three weeks into the course, not the first week as the headline might imply. BUT, it is the first week of artifact blog post reflection (wow that’s a mouthful)! These posts are for us students to reflect over ONE of the artifacts we’ve created during the last week. Artifacts being programming code bits or in my case the creation of graphical assets. This week’s chosen artifact is the creation of our games avatar sprite. One of the most important artifacts, as this is the actual avatar the player would fly around with. And this is how it was created. From an idea, to a sketch, to redesign to a finished functional sprite!

So let’s start with a quick summary of the game. The game is Colossus Core, which is a 2D side scrolling space shooter. In where you controls a hovercraft flying through an uncharted underground world. The game will have a dark cyber/steam punk style. So when making the avatar, I tried to reflect this in the ship.
Early on I sat down with my graphical artist colleges, and together we decided what important features the ship (named Aquila) had to have to fit in narrative-wise, in the game world and game mechanically. As the game was set in a near future where humankind had almost no resources left and needed to harvest other planets life energies. The ship would have to reflect a vehicle built spaceshipwith last resources but also being able to survive a hostile environment. So we designed Aquila to look made out of iron but reinforced and fixed with brass. This nicely colored the ship and made it look rough. We also made it compact and sturdy, to be able to survive collisions and have space for a lot of cargo. Designed in was also a lot of indications of states of different weapons and overcharge. This, to keep the HUD minimalistic in the way we wanted for the game. Together we voted and decided on a concept that we liked. Here you can see how we initially wanted Aquila to look like.

 

As the concept for the ship was done, I started up Photoshop and began creating the avatar sprite. I blocked out the shape and redesigned it to work out better with the game, and make it workable as an actual functional sprite. When making the sprite I made sure to keep all of the parts on a separate layer. As these different parts would later be animated in the engine, eg. the rotating gun and thrusters. I kept the whale shape (affectionately named so by the artists) and the overall design, but had to make some changes. One of the biggest changes was the removal of the “overcharge core”, as the oval shape clashed with the squarish design. This was replaced with a rectangular power bar and more compartments for storage. I also moved the light to be Aquila_Idle_Originalon the rotating gun and hid the scrap collector, so not to be in the way. Here you can see the “finished” design.

 

 

 

 

Later though, the group decided to make some mechanical changes to the game. The ship had to be able to be upside down. This meant I had to redesign Aquila to look good both right-side up and upside down. This was actually easily fixed, as it only took some small corrections to look good. What I did was making the glass to be both up and down. Adding an upside down version of the name, and also change so the power bars would meet in the middle, instead of just going up. So here is the finished design and also some of the actual game sprites.

Aquila_RemakeAquilaAquila_CanonAquila_Thruster

Overall this has been a very teachable experience, and I believe that I got a good looking and functional asset in the end!

2D Computer Graphics Numero DOS!! I can see colors!

So Hello again! A new year, and a new course begins! This time it’s the continuation of the course 2D 1, which is called… 2D 2~
I’m going to post some pictures from this course now and then. But I will unfortunately (or fortunate for you) not post deep reflections over these. As I’m currently occupied by the development of a game and the reflective posts I’ll be doing on that matter.
So here is the first thing that I’ve done for this course and that I’ll post, is my first ever piece in color! I’ll also post the color chart and the lineart too for it (I think the lineart is much better on it’s own…)

Lineart_Background

Color_Background

Ori_2_Background

Last week, The final countdown!

This week was the final week for the course, so this was my final assignment. We got two things we had to do. One already drawn environment that we had to shade and one rough sketch we had to make solid. This assignment was pretty fun to do but took up a lot of time. Mostly because I’ve had a few problems with my tablet, first losing my pen and then the actual tablet deciding not to work. So everything took a long time to do, since pretty much every line I drew became automatically wobbly. But in the end everything worked out, as a good friend of mine lent me a spare tablet!

The first assignment I started with was the character. I started with drawing out the stick figure to get pose down. When that was done I started to flesh it out with the cylinders and the boxes. As soon as I had the 3D shape, I gave the character his clothes. Seeing the original picture, I thought it looked a lot like a cowboy. So I drew in all the usual cowboy clothes like it was in the picture. But I decided on giving the character more tight-fitting pants. When adding the finishing touches I remembered a picture our teacher had shown us before. A picture from the comic blueberry. So I decided to try to add some in of the line shading they had in the comic, something that look a lot like my normal sketching style. I think it added a lot of character to it. And I’m pretty OK with the finished results.

rough Construction_AmandaSvenssonAlavi

As I finished the previous assignment I started on the other one. I first wanted to make it into a sunset kind of picture. But after discussing with a few friends, I decided on making it into a moonlit night. I started with drawing out the moon in the sky and by using the magical wand I added in the sky and clouds with different brushes. When finished with drawing out the light source I coloured in the whole city with a dark grey colour. I then went in with a light grey and started lighting out the buildings hit with the moonlight. I added some highlights with a white brush to some buildings that was the closest to the moon. With this over I picked out a dark dark grey and drew out all the shadows and gave the objects a dimensional feeling to it. When finished I felt like something was lacking. So I decided that draw in some Chinese lanterns floating on the water. Adding in another small light source. Thinking this looked a bit eerie, instead of backing down, I decided to go all out with adding a kind of smoky fog and small ethereal light blobs. I then added a small quote to really make it extra dark!

backgroundbackground

Taking this course have been so much fun and I’ve learnt so much! When I started out, I couldn’t really draw and now, I think I’m at least adept at it. The tools I’ve learnt have made it possible for someone like me to actually being able to draw something. I’ve learnt how to create characters from the ground up, adding dimensions, drawing vivid poses and learning how to draw other things then a random heart in my book now and then. And the tips I’ve learnt in Photoshop have been invaluable. I now use the blending options all the time, making it much easier to colour in line-art. And being able to use that mask, have allowed me to make bolder decisions, as I’m no longer afraid of removing something I might need (and I don’t have to have million of layers). All in all, I think this course have so far been the one I liked the most out of all I’ve had. And definitely the one that gave me the most experience!

A whole new wooorld, week 6 shading

This week my assignment were to correctly shade my character and place it in a believable scene. For me, this was an unbelievable hard assignment to do. I had absolutely no experience of shadowing, specially since I pretty much learnt how to draw at all from this course. And me being really indecisive about what environment to place Sam in, made it even more impossibly hard for me. Finally I chose to place Sam in an alleyway, in the moment when the portal opened for the first time. This meant I had to massively change the facial expression from a forward smug looking face, to a more neutral/surprised look that faced the portal.
When this was done, I started thinking of what perspective I wanted and where/what my focal points would be. I decided to do a one point perspective scene, a bit to the right, to really make the alley feel never ending. I also decided that I wanted two main focal points. The portal and the character. So I used the composition focal points trick to find out where they would be. I decided that I didn’t want them to be exactly in the middle, so I chose to place the portal over both of the left points and the character on the bottom right one. I also later gave the character its own focal points, on the medallion firstly and the face secondly.
After drawing everything in, I started to try to correctly shade everything. And being a crazy person, I choose not one, not two, but three light sources. The portal, the medallion and also back-light from the city. I started with shading the background, using the back-light first as a light source. I did this by giving the buildings small ”light halos”, making it look like the light came from the back (I later did this to the character as well). I also made the buildings further away a lighter shade. After this I started with the biggest light source, the portal. The portal being a pretty dim light source, meant the scene would still be pretty dark (with dark shadows). But giving objects, especially metal ones, a small glint. When I was done with shading the scene, I started with the character. This was the hardest part, seeing as the character was affected by three different light sources. Wanting the medallion to be another focal point, I made it glow a little bit, but still be affected by the main light source, the portal (massive glint$). Wanting the face to be a secondary focal point, I lightened up the gradient there. When done, I added the character’s casting shadow (two, one from back-light and one stronger one from the portal), I also added in the shadow cast from the beam onto the character, this unfortunately shadowing the face and upper body a bit.

Now as its finished, I feel like Sam is overwhelmingly under-shaded. I think I’ll visit back to fix the shading at a later date.

Background