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.