Game Development – 6th Blog Entry

Hello again, everyone! I’m back again to write about my work on our team project “Potato Pirates” one last time. It’s been a journey to say the least, as this is the first time I’ve been a part of the development of an actual game.

Lately, the work I’ve been doing on the game is mostly smaller touch ups like updating older graphics assets so that they follow our visual style guide. That is basically also what the task I’m going to write about this week was all about, but in this case it took a little bit of more work than the other artifacts I’ve been working on since last week.

Although I was the one who made it, I’ll be the first to admit that the sprite and animation for our old player controlled character didn’t have the quality that I wished that it did. Not only did it have to be recolored and given a new outline to fit with the aesthetic style that the rest of the game has, but the version of it when it turns to either side was constructed wrong, so that the perspective wasn’t correct.

I thought about how I could solve the problem of correcting the perspective, and eventually realized that it would be the easiest if I recreated the avatar from scratch, instead of trying to just make the new perspectives and to make the details match up with those of the idle state of the plane (the state where it flies straight ahead).

Even as I made extra care to make all the details on the plane match up correctly, it proved to be quite a challenge. Systematic perspective isn’t exactly my strong suite, and this task forced me to think in three dimensions instead of just two.

I started out by just drawing the main body of the airplane in it’s own Photoshop layer. I then drew the details of the plane as seen from straight from above. I put guidelines at the edges of details to help me with drawing them correctly from other perspectives as well.

When it came to drawing the details from other viewing angles I made the perspective by free hand using trial and error instead of using proper vanishing points. This is something that I may have done differently if I went through the process again.

At this stage, the animation was still in a very rough state, and my goal was mainly to make sure that it “felt right” before I polished it. After making the wings as a plain box-shape first, I then went on to refining their shape after getting the first stage right.

I tried experimenting a little bit with color while the animation was still in the “rough” state before going on to polish it. I found that when all the tail fins were red, as in the old avatar, it was hard to distinguish the top fin from one animation frame to a side fin in the next. Because of this, I decided to make the side fins yellow. I also added in more yellow to the wings to break up the red a bit more.

This only shows the avatar tilting upwards and not downwards.

After feeling that I had a clear base of how the avatar would appear, I went on to polish and refine it, making sure that it was symmetrical, in the right size, and colors and outline following the visual style guide. During this process I also added the propeller animation I had created earlier.

Due to feedback from others in my team, I decided to not make the plane use the full tilt when tilting downwards, as it appeared like the perspective was wrong even though it was the exact same as when it tilted upwards.

Due to how the animation is loaded by the game engine, we were also unable to use the “in-between-frame” when the plane tilted downwards without rewriting some of the code. We decided together to skip it and have the avatar snap directly to the new perspective.

After I was done polishing it, I then baked the individual frames into a sprite sheet using GlueIT, and implemented it into the game, replacing the old avatar in the process.

As this is my last blog post about this project, I’ll take this moment to say a goodbye of sorts. Until next time, and next project!

If you wish to download our game to play it yourself, you can do so here: https://bitbucket.org/potatopirates/potato-pirates/downloads/Potato%20Pirate%20Installer.zip

 

Game Development – 5th Blog Entry

Hello again, and welcome to the telling of yet another production week’s work on the concept “Potato Pirates”!

During last week’s production sprint, one of the many artifacts that I worked on was the look of the in-game upgrade store. By completing levels in the game, the player earns in-game currency, which naturally are US-dollar since the game takes place in the United States.

The player can then spend this earned currency in the upgrade store to improve their airplane, for example making it more durable and thus being able to take more hits from enemy planes.

Working in Photoshop, I started out by taking a background that was already in use in another menu, to use as a base to start with when designing this element of the game.

I then went on to make a darker box for the GUI elements to appear in.

I then used the rectangular marquee tool to select an area and filled it with gray using the paint bucket tool. I then applied a white border to it using blending options and then separated that border into another layer. Also using blending options I applied “inner shadow” effects to both the gray area and the border. The shadow effect applied on the rectangle had a “distance” value of zero, so that it gradually got darker towards the edges. The border had a distance value of a few pixels, and the “choke” and “size” values being closer together so that the shadow was less of a smooth gradient and more of a drastic drop off. This gave the border a slight sense of depth.

I then lowered the opacity on the gray area so that it was see-through, but left the opacity of the border at 100%.

I experimented a little while using already existing buttons from other menus, but realized quickly that I couldn’t fit in the necessary amount of information without the design getting cluttered.

The store menu needed to contain both the names of the upgrades, descriptions of them, prizes, a way to show the progression as multiple upgrades stacked and a buy button.

I found all of this hard to combine using already existing GUI elements.

I decided to make a new, more streamlined button from scratch, so that the price information could be placed on it and still be easily readable.

This button has a border similar to the dark background box, but I decided to give the button a little bit of texture so that it would stand out from the background as more of a physical object. The button also isn’t see-through like the box is.

The button has four different display states – one default, one for when the mouse cursor is hovering above it, one for when the button is clicked, and one for when the buy function isn’t available due to the player not having enough money or due to already having bought all versions of the upgrade. I baked these into a sprite sheet using GlueIT.

I also made additional dark boxes to use for the section of each upgrade, to split them up so that the player could easily tell that they are separate from each other.

The upgrade progress is shown through stars that are filled up when the upgrade is unlocked – these was already made by another team member when I started working on the menu.

I exported all static elements of the menu as an image, and our team’s lead coder put together the rest of the elements as a functional menu.

Below you can see how the store appears in-game.

Game Development – 4th Blog Entry

Hello everyone, and welcome again for yet another blog post about the work I’m doing on our team’s school project, Potato Pirates!

One of the artifacts that I worked on last week was the sprite and animation for the enemy plane that is called “Hunter”.

To understand my work process on this design during last week’s production sprint, we must first go back to the very beginning of the project’s production.

One of the very first things I did in the project was to produce a three-page PDF of so-called “thumbnails” of various air plane designs. Thumbnails are simple, quickly-sketched images meant to give a general feel of a character design – generally used as a means to pick out a design to develop further. This was also the purpose of me doing the thumbnails.

After I had done this, I presented them to the rest of our group. We selected a couple of thumbnails to develop into fully realized designs together. These designs were the most urgent ones that was to be implemented into the game in the alpha release – and those were the ones that I worked on at that time. It wasn’t until a while later that the team sat down again to pick out thumbnails to develop for the rest of the enemy plane types.

While some designs had been combinations of sketches, using elements from different thumbnails, the team agreed that the thumb for this enemy type in particular only needed slight adjustments.

Now, let’s jump back to last week’s work!

I started by cleaning up the sketch and refining the line art using Photoshop. While doing this I incorporated some changes that other team members had suggested into the design, such as the rounded back part of the plane and the change from having two rear propellers to one single front propeller. As with the projectile sprite I wrote about last week, I did this in ten times the resolution the finished sprite was to be, as I find that more comfortable when the asset is supposed to be so small in the end.

I then scaled the image down to the appropriate resolution, 120 ×120 pixels. I started colorizing the drawing, picking the colors from the palette in our recently finished graphic style guide. Aside from the colors in their neutral state, his palette also included brighter and darker nuances for shading, and I used those as well.

After being finished with colorizing the plane, I went on to redraw the outline of the plane and some details with the outline brush as dictated by said style guide. I also took a propeller animation that I had done earlier and used it in animating the plane.

After the plane was colorized, in the correct size and with the correct outline and animated, I used the software GlueIT yet again to bake the animation frames into a sprite sheet.

Game Development – 3rd Blog Entry

Hello again, and welcome to my third blog entry in the series where I detail the progress that our team is making in the development of our student project game. If you want more information on the project and earlier work done in it, you can find that in the earlier blog posts.

This week, I will talk about an asset that I created for out game during last week’s production sprint.

Unfortunately, I was sick in a cold for the beginning of the week and the one who was responsible for holding the alpha presentation, so I didn’t complete much work on the actual game.

The asset that I created was an animated sprite for the projectiles used in the game. As the game has a somewhat humorous twist, the projectiles that the both player character and the enemies fire are potatoes. Before I had produced this asset, we used a photo of a real potato as a place holder.

I started out by drawing the general shape of the potato in a Photoshop document that was 320 by 320 pixels in size, and did a basic coloring of the potato using various yellow and brown hues.

I then shrunk the image size to 32 by 32 pixels, the size that the sprite was to appear as in the game.

The reason that I started out in a larger size than the sprite was actually supposed to be was that I found it easier to get a general feeling of the shape when the image was in a higher resolution.

After shrinking down the image to its proper size, I then polished it on a pixel-by-pixel level using the ‘pen’ tool, adding proper shading and refining the outline of the sprite.

This version of the sprite is the one that we used in the live demo part of our alpha presentation last Friday.

One piece of feedback that we got during this event was that the projectiles should have some kind of animation, to give the impression that they are tumbling through the air rather than being shot forward perfectly straight.

As such, I went to work on creating an animation for the projectile. With the sprite already in place, creating the animation with small alterations to it was fairly easy.

With the use of the software GlueIT, I baked the separate sprites in this animation into a sprite sheet. I also implemented this into the game engine with some help from our lead coder.

Although technically not part of last week’s production sprint, earlier this week the graphic artists of our team sat down to make a proper visual style guide together. Style guides are meant to help graphic artists in making the graphics of a game being stylistically coherent. This was something we had not done earlier, to our regret. Due to the decisions made in this style guide, I updated and replaced the projectile animation to have a different outline.

Game Development – 2nd Blog Entry

Hello again, every one!

I’m back again this week to tell you about the progress we’ve been making in our school project.

I’m Peo Johansson and I’m studying video game design and graphics at Uppsala University – Campus Gotland. I’m currently a part of a six-member team undertaking a school assignment.

You can read about what the specifics of said project in the first blog entry.

Now then, onto the detailing of last week’s work!

One of the artifacts that I worked on last week was a number of icons that will represent the power ups that will be in the game.

One of the power ups is a firework that the player can use to take out multiple enemies at once. It is a more powerful attack than the default shooting ability, with a so-called “area of effect”.

After being tasked with undertaking the creation of these assets, I started sketching up a few possible visual directions that I could take with the power up icons. I did this with the firework ability, as it was the one that was the most urgent and I wanted to be sure that it would be completed as quickly as possible. You can see some of the designs that I produced below.

The purpose of the icons was to not only represent the power ups on the game levels in their state where they would be able to be picked up by the player, but also in the game HUD to communicate to the player which power ups are available for use. As such, I wanted them to be as clear and distinct as possible, and aimed to create a minimalistic design that aimed more at basic shapes than at realistic details.

After running the produced concepts past the lead artist on our team, I decided on a more concrete direction for the design of the icons.

After creating the design for the firework power up icon, I went on to start work on another ability called “Moonshine”. I made extra care to make sure that the line work of the two icons was of equal thickness, so that the icons would have a shared visual uniformity in their design.

In the process of working on both power up icon designs, I also decided to color code them to further make them easy to tell apart at a glance. After all, it was important for the player to be able to informed decisions as quick as possible while playing the game, even as the in-game camera is auto-scrolling at a moderate speed.

While the icons isn’t implemented into the game engine as of writing this blog post, below you can see a mockup of how the icons would be used in-game (some other in-game elements outdated).

Game Development – 1st Blog Entry

Hello, and welcome!

My name is Peo Björn Johansson, and I’m currently studying Game Design and Graphics at Uppsala University, Campus Gotland. 

In this series of blog entries I will write about the progress of the group project that I’m currently participating in. The group consists of a team of six people, half of which are coders and half of which are artists. I am one of the artists.

We are developing a video game in the so called “space shooter” genre. It is based on a concept that another team of students designed previously. All team developed their own concepts, and the teams could pick whatever concept they desired to produce as an actual game except for their own.

The concept that our team picked was “Potato Pirates of the Prohibition” and is about an air plane pilot who is smuggling potatoes for use in brewing alcohol. The game takes place in the United States and during the later years of the prohibition era, in the 1930’s.

We are currently in the third week of development on the game, and in this blog entry I will showcase some of the work that I did during the last week of development.

Since the game takes place during the time period that it does, it made sense to us as a team that the general feel of the game would reflect this. For example, the background music in the game will sound similar to the style of music that was popular during the 1930’s. And we also decided that the game should have an art style inspired by the contemporary drawn cartoons of the era.

During the last week of development, one of the artifacts that I worked on was a number of smoke puff sprites (pictured above), for use in effect animations. For example, they would be used when the avatar air plane or when enemy planes are hit by projectiles. This is to accentuate the impact, to give it a bit more “oumph”, so to speak.

During the process of making these smoke puff sprites, I drew inspiration from cartoon depictions of smoke puffs and clouds in general, and the smoke effects from the game “The Legend of Zelda: The Windwaker” (pictured above) in particular. The smoke effect from this game stood out to me in the way it utilized small 2D sprites in a way to create one coherent effect.

My goal while making these smoke puff sprites was that they would share a common, simplistic look, while still being different enough o not look repetitive. They should be able to be interchanged with each other, to be mixed and matched in various animations as a visual effect in the game.

As they’ve yet to be implemented in the actual game engine, I cannot say how well they would work in the finished product. But I can say that judging from the goals I set out for myself, I am satisfied with my work.