Blog 5: NPC

 

This week’s feature is a NPC

NPCs, short for Non Playable Character, is a staple of any game. They’re there to enhance the player’s experience of the game and therefore there exists one NPC in our game as well.

In our game Echo, which is a 2D top down view of a mother moth trying to look for its children, we have two distinct enemies – the wasp and the frog. The wasp is easily identifiable as an enemy as it chases you and has a threatening look. But the frog is a stationary enemy which sits on branches and eat bugs. But there is no way to convey the dangers of being near the frog. And here is where the NPC comes in our game.

Our NPC is a light bug, modeled after the firefly. It serves two purposes in our game. The first is to convey the dangers of being near a frog. When the player first encounters the frog, we will have a light bug fly past it. This is when the frog will eat it by sticking it tongue out. This should serve as an indication of danger to the player.

The second purpose it serves is that it is a light source. During the first playtesting session we had received feedback that our game was pretty dark so other light sources including this light bug has been added. It also adds to the overall aesthetics to the game.

I started making rough sketches with the real world firefly in mind. However, I dropped this idea very soon. Since this light bug is supposed to be a NPC it doesn’t require that level of detail as the other sprites did. Moreover it is supposed to be much smaller than the player character, therefore really tiny details could be committed. Therefore I drew a generic insect body with the head, mid portion and the back end. I drew four transparent wings for the insect and colored the back end of the insect with a bright yellow.  A light source would later be added into the back end of the bug in Unity. This was the final result of the sprite:

 

Light bug-2.png

Blog 4: Modular branches

In the previous blog entries I have talked about character animations and sprites for different background elements. In this fourth blog entry I will be talking about something a bit more critical for our game Echo.

This weeks feature is branches. Since our setting for the game takes place in a tree, a very important aspect to consider was creating a path for the player. Our team decided that this was to be done using branches. We were to draw some branches and then lay them out in such a way so as to make a path for the player to navigate around.

We made an initial set of branches and made a layout for the alpha playtesting. This first set of branches were extremely detailed and had small sub-branches poking out. However, after we received feedback from the alpha playtesting we found out that the branches were heavily criticized. The branches had hitbox issues because it was too detailed. Players kept getting stuck and bounced off the branches. Our programmers tried to solved the issue but it was not completely resolved. So, it was decided that a new set of branches was to be made. It was also to be made modular so that we could have more freedom in making the layout for the branches.

So, I started making some very simple straight branches. The challenge was making each branch modular. They are supposed to connect to another section of a branch without looking too awkward or unnatural. I used some techniques to test out how to do this which included using blur and shadows. I had also considerd making a making a main branch with sockets where the smaller branches would fit but that kind of made it semi-modular and it was not exactly what I wanted. In the end, I darkened the edges of all the branches and then used a soft brush to paint over the ends of the branches. This technique actually worked and the result was as I had wanted to be. After this I went on to draw several branches to provide more options when we make the actual map. I used the same technique and made slight variations, such as a slightly curved branch and branches that are bent in some places. The result was satisfactory.

An example of it can be found in the  images below.

 

modular-branchesModular Branches example 2.pngModular Branches example.png

 

 

Blog 3: A place called home

Hello.

The feature for this week’s blog is “home”. In the last blog post I had mentioned about working on the player character’s avatar and its movement animation for the game Echo. We modified the original design document to add some more assets to the game so that we can better achieve the aesthetic goals out team had set for the game. One such asset we decided to add was a home for the moth family. We decided that that’s where we want the player to go to after collecting all its children.

I started looking up images of actual moth nest. I actually didn’t even know it existed. To my surprise it did and it looked beautiful. It looked like a web made of silk threads. My original inspiration came from this particular image.

The_Moth_larvae_Nest.jpg

I decided to go for a similar look while keeping it in 2D. I took some of the branches made beforehand and decided to use it as the base. I chose some anchor points to there the nest would stick to and then started filling in with a silvery grey color. I lowered the opacity of this layer to a desired level and then put another layer on top of it and started painting with the same color but this time I used a soft brush. The end result was that it looked translucent in some parts.

After that I added another layer on top of this to add the fine little details for the nest. I had downloaded a special brush set to paints clouds before. That set contained a special brush to paint diffused clouds. I used that brush and painted it on the new layer with varying opacity levels. The result looked like it was made up of very fine silk like threads. I was quite pleased with this. After this, to mimic the raindrops in the pictured referenced above I added some bright white spots onto the nest. I also added a few dirt spots as well for extra detail. Below is the result  of the final look of the most nest against a drak blackground.

 

Moth Nest-bg.png

Blog 2: Character art and Animation process

This is a second blogpost on the game development for the 2D shooter Echo. In this blog I will more specifically describe the character creation and the animation process for the main mother moth.

I started off by looking up some images of moths and butterflies. The basic idea I had in mind was to create something aesthectically pleasing. I took inspiration from quite a few butterflies. So first I made a sktech of the moth by referencing real moths and then decide to paint it like a certain butterfly. I wanted a fantasy-ish look to it, so I chose the color purple for the butterfly. For the color shading, I used a more darker color for the middle of the wings which gradually became lighter towards the edges. I added some dust effect to the wings to add the fantasy look to it. After I showed this to our team’s lead artst he commented that it had a night like feel to it. I wholeheartedly agreed. It added to the fantasy look, so I enchanced the look by adding more dust to the wings and made it more visible. The end result was this:

Moth-bright.png

 

 

When I made the art for the moth I had painted all its different parts of separate layers. This allowed me to control the movement for each specific part while doing the animation for the moth. I had decided to go for a frame by frame animation method instead of using clip doll as I thought that it would be less work for the current animation cycle needed.
The animation cycle of the moth was a movement animation. Since it as a moth, its movement animation was a flying animation. To do this, all I did was rotate all the wings and antennas by a set degree for every frame, for a grand total of seven frames. Those seven frames cover the movement of the wings downwards. And then I reverse the frames for the wings moving upwards. When I play then all together it gives a fairly smooth animation of a flying moth. This animation is something I was quite satisfied with. I could have made it look better by skewing the wings for some frames. But for now this is what I have for now:

Moth-Movement.gif

Blog 1: Echo

This is my first blog that I am posting about our game development. I am a designer and artist in the group named Cyclops and we are developing a 2D shooter game called Echo. Echo is a game about a moth who is searching for its children in the dark. The player plays as the moth mother as it transverses around in a dangerous dark environment with other harmful insects. We use light, for navigation, in the form of berries which is obtained throughout the game.

For this week I had been working primarily on the background and the powerup which is the aforementioned berry. I had started with the berry. The color chosen for the berry was yellow since I wanted it to radiate bright warm light. Since it was going to be a light source it needed to glow. I Had to try a few stuff to make it have a glow like feel to it. It was tough not to make the berry look like a point of light. In the end I added a bright yellow color in the background to give it a feel at it was a glowing object while still making it distinct enough to see that it was a berry. I also increased the brightness of the color in the middle of the berry to show that it was indeed a light source. Initially it was too bright when put against a dark background so I toned it down till it looked satisfactory. The end result was this fine looking berry:

light-berry

So after this was done, I imported the file into Unity for testing purposes. Our team’s programmers had made a script for a light source which I then applied to the berry. That gave it an actual glow and it looked really good thanks to the extra background color I put in at the back of the berry. But due to the extra light a lot of the details of the berry was lost. The texture was barely visible. I might tone down the brightness again for the berry in the future but we must first playtest other features before tuning anything else because right now it works as it is supposed to.