Units 5, 6 and 7 - 2D Game Project


Research Visit to V&A

22/11/18

On the 7th of November, our class went to visit the V&A museum. The purpose of this trip was to help assist us in generating and developing our own original game ideas that will act as a foundation for our projects in the next units.

The first section of the V&A I visited was the section for the last of us. This section featured the many stages of production the game went through during development; Motion Capture, Character Design sheets, early scripts and more. Our first task was to go around and do three quick sketches of characters we found interesting.

The first character I sketched was Joel from the last of us. I chose to draw him as I personally liked his design and wanted to challenge myself by drawing him in the position he was standing in. I liked the tough and grouchy look the character had as it really suited his personality. Because I'm still getting used to drawing human bodies, I do not believe I drew him as well I could've.


These are the many character designs of Joel and Ellie. 


These are the old designs the character Ellie had before her final design. From looking at the designs, you can see how it becomes more apocalyptic like and more tomboyish. This might've happened because as the writing progressed the design need to be changed to fit the characters personality and the story.


This is Joel and Ellie's final Design. From this, you can see how Ellie's design is much more aggressive and less feminine. The crossbow she has also helped display the character's toughness.


This how the developers for the last of us planned out the story. Playing the game myself, I can tell that many of the plot points in this were either scrapped or altered.


I later came across the splatoon section. Similar to the last of us section, this section featured many early characters sheets of the game's development.

This is the character sheet for one of the Inklings.


I also did a sketch on that same inkling. I thought I did a decent job as her design is a lot more simplistic and cartoon-like then that of Joel thus making it easier for me to draw.


These are some of the early concept art for the inklings.




Another section I went through was the no man's sky section. I look through the game concept art, environment and more.


This is the sketch I did for No Man's Sky. I chose to draw this design as I liked the simple and cute design of the creature.


From this visit, I've generated a few ideas for when I create a game. The simple designs of Splatoon Inklings and the over-watch inspired me to give my own character a simple design so it would easier for me and the people I'll be working with to draw the character. Another thing that inspired me was the personality of Joel and Ellie. It inspired me to give my own character some personality and depth to make my character not feel bland or forgettable.

Q-A Testing


Before we started working on Construct 2, we looked at a game our teacher created on the program, called Street Wanderer. We were given a sheet where we were to list of the visual, audio and coding related issues we could find while playing the game.

Visual: 

 - The game lacks a game over animation

- The money counter stops counting once you get more than 5 pound

- The train station, which the games expects you to enter in, is not accessible.

Coding:

- When you crouch, the character quickly switches between crouching and standing.

- When you hold jump the player stays in the air for a while before getting down.

Audio

- Music resets when you go and out a shop

- No sound effect for jumping

I overall had a mixed experience with the game. I enjoyed the visuals and background in the game and like how you can enter and exit buildings. But many bugs I found in the game ruined a lot of my experience in the game and made it slightly frustrating. I did, however, found Q&A testing interesting, as, despite my frustrations, I found it intriguing to play a game and analyze its flaws. It's also something that could help me when testing my own games, as it'll make me look harder for bugs so they don't go unnoticed. 

Construct 2

3/12/18

After we did our Q&A testing, we began to learn about Construct 2, a program used to create games. When we opened up the program, we were introduced with the program's many toolbars and features. 
Properties


On the left side of the canvas, you have properties. In properties, you have many options such as changing the name of the project, the size of the canvas size and the quality.

Projects


On the right side of the canvas is projects, containing many features in it. Here you can find files for music, sound effects, object types, and events sheets. 

Layout


Here is the main layout where you have three tabs above. In the layout tab, you find the canvas which is where you design the level, characters, and enemies. 

Event Sheet


Selecting the tab next to the Layout tab takes you to the event sheet. The event sheet is you add the coding for the game to make sure it functions correctly. You add an event sheet by double-clicking on the blank space before an add event bar will pop up. From there you will get to pick the event you want, which will then lead to an action caused by the event.

Variables

Inside the event sheet, you can find instance and global variables.

A Global Variable is a variable that applies to the whole project. This could be a counter for specific things such as jumping or deaths or could be the amount of damage a player takes (health bar). 

An Instance Variable is a variable that is tied to one part of the particular object. This could be for items, object, characters etc. (i.e, items, objects, characters, etc.)

Behaviors


Behaviors help design a side-scrolling, jump and run type play-style. Platforms will need a solid behavior so that the player can jump onto the platform without falling through it and being able to traverse through the level.

Udemy Construct Practice

After we learned all the different features and tools in Construct 2, we went through an online tutorial on Udemy, teaching us the basics on how to create a game using their assets.


One of the first things I had to do during this online tutorial was insert a tile-map. To do this, I had to double click on the canvas, select the icon for the tile-map, insert it and click on the canvas again. Afterward, a tile-map bar would open up where you'd have select open and find the assets, which were given by the udemy course, in your files. I then imported one of the assets (which was named "sheet 9") and resized the tile width and height to 16. This was so I could select smaller parts of the tile. Another thing I did was select the "snap to grid" option and made the width and height 16 by 16. This was so I could see where I'd be placing the tiles. I then selected the floor tile, clicked on a canvas and dragged it across, creating the floor for the stage.


The Character





Later during the tutorial, I started to create the character. I got the sprite sheet through the assets given from the tutorial. I had to animate the character walking by copying the first four of the sprite sheet and pasting them into different frames. Some of the tools we had to use include: The behavior tool which was used to add the mechanics for the character, the event sheet for coding the controls and the image point which makes the character stay in the same spot in all the frames, making the animation of the walking more fluid.

References

Anon, (2018). [online] Available at: https://www.udemy.com/learn-construct-2-creating-a-pixel-platformer-in-html5/learn/v4/t/lecture/3617720?start=195 [Accessed 14 Dec. 2018].

2D Game Project

We were later introduced to a new group project in which we'd have to create our very own game. We were put into groups of three and two, to create a game within the next three weeks. One of the ideas we came up with was a 2D plat-former of an animal hybrid. 


17.12.18

This is the sheet where we wrote our ideas on. The first idea we came up with was to create a top down shooter game. This game's target audience would be for kids aged up to 11 years old and would be single player game (potentially multiplayer if possible).  The game consists of a character taking out a wave of monsters, getting progressively harder after each wave. I came up with an idea to have multiple characters to choose from: Police, Soldier, and Survivor, each having different powers and weaknesses e.g Survivor's health is weak but moves fast, Soldier is powerful but moves slow and Police has average strength and speed.

The second Idea we came up was a platformer game which would have more story than the shooter game we came up with. The target audience we chose was still a child-friendly game and also single player. We came out with the idea for the character to be an animal and even considered making it an animal hybrid. We decided to scrap the idea as our first idea was more fleshed out. Looking back our player acting research we've completed, I believe our game's player type will be suited to achiever type players and killer types as the focus of the game is to achieve the highest points and have more challenge as you progress through the game. To suite the player acting, we'll implement a kill counter and will also bigger waves as you progress.

                        

GDD




I drew the lumberjack with two weapons, an axe and a pistol. The one we choose was the lumberjack wielding a pistol however if possible and not time consuming we'd do the pickaxe. 

19/12/18


I redrew the background on a separate paper and gave it a top down view. A style from the V&A that inspired the designs, was Splatoon's. When we started planning out our designs, we went for a cartoony design similar to splatoon, so when we began designing our characters we stuck with that idea. 

This is a top-down background that I took inspiration from when creating the design for the first level.

Related image

Creative Market. (2019). Winterland - Top Down Tileset. [online] Available at: https://creativemarket.com/pzUH/862668-Winterland-Top-Down-Tileset [Accessed 12 Feb. 2019].


This is the design I did for the alien with a weapon. This alien would only have a weapon specifically on the snow level.

This is our schedule for this week
Development of My Character in Art 

18.12.18




This is a sheet I used to sketch faces. 



This is all my sketches I did of the photo above, along with my own original character.




This is an object I sketched the characters head shape on.



This is the completed design of my character.



This is my character after I scanned it.



I imported my character into Photoshop and drew lines around the character so I could add colour.


This is the storyboard I created for my zoetrope. The first pose I came up with was a ballerina pose. I ended up changing it to the character scratching his head as it fit the design of the characters head.








These are the realistic face sketches I did. I believe it didn't look exactly as I wanted it to look as I messed up with the shading. I think to improve I'd sketch lighter so I'd be able to rub out easier.

Digital Background For Survivor Level


This the level I designed for one of the levels of the game. I Imported it into Photoshop and added an extra layer where I drew over the objects and also colored them. Doing this was fairly easy however, I struggled to colour the truck, and deciding the colour of it.

7/1/18

Schedule



This is the schedule we made for our first week back from the two-week half term. I assigned myself with making all the designs I created digitally.

Edited Background on Adobe Animate



I started off by adjusting the first level I drew by moving some of the trees apart to add more gaps. I did this on adobe animate by converting the background to a bitmap, added a white background in another layer and moving the trees apart. This was so the enemies that would appear would be able to come through the gaps and give the player more space to go around them. Another thing I did was make the logs smaller as the looked too big before. This wasn't too difficult of a process however after I traced the bitmap, some of the trees had no outline and had to be re-edited. Unfortunately I didn't have time to start my second task (make the character design digital) and moved it for the next day.

Making Player digital 

8.1.19

Today I focused on making the main player digital. I imported the sketch of the lumberjack on Photoshop and drew lines around it with the paintbrush tool. Once I redrew all the outlines, I coloured it in with the bucket tool.



I did the same for a second sketch I did with a different weapon. This was an easy task for me however I struggled with removing the background.

8.1.19

Today I worked on making the sketch I did of the aliens digitally. I used the same technique I did for the other sketches (drawing an outline and colouring with the paint bucket tool). This idea could potentially be scrapped due to its design, and it's lack of familiarity with the other alien designs. Overall designing the characters digitally was an easy task.


                             

Afterwards, I put my design of the lumberjack into the adobe animate as here was where I would create the walking and idle animation for the player.



Overall I did not progress as smoothly as I hoped for as some tasks took longer than expected causing me to save them for other days. To improve that, I'd make a more realistic schedule where I can work to fit the deadline.

11/01/19

Today I worked on finishing up the last task of my schedule. I went onto animate and continued to work on the walking animation.


This is a top down walk sample I used for creating my character.



Zebugames.com. (2019). [online] Available at: http://zebugames.com/wp-content/uploads/2016/02/boxer_action.png [Accessed 11 Jan. 2019].

I found it difficult to incorporate the foot and legs in the animation as there wasn't much space to show it, so I chose to leave it out.

Schedule for Week 2 

14.1.19

Week 2


This is the schedule we made for Week 2. Here we did the same as the first schedule, writing the tasks we have for each day and the deadline for when they need to be completed. Some tasks were given an extra day depending on how long we believed the task would take.

Idle Animation


Originally I planned on working on my running animation, however, Sam suggested improvements for the design. I remade the animation by adding new layers for the arms and legs. I found it tricky at first when creating this animation as I wanted the animation to not look clunky and the movement to look like an idle animation. A solution I found was to colour the gaps to make them look joined together. I later made an improvement by making the feet briefly show as the player moves its body. This was so the body's movement made sense. Once I was done with it, I exported the file as a PNG sequence in its own separate folder. 



I also worked on the running animation for the character. I decided to revisit it and improve it using the sample I found from the internet:



Zebugames.com. (2019). [online] Available at: http://zebugames.com/wp-content/uploads/2016/02/boxer_action.png [Accessed 11 Jan. 2019].

I made a new layer for the feet and animated it going back and forth like shown in the sample. I also drew drawer lines of the legs to make it fit the lumberjacks look and colour. Once I was done with it, I exported the file as a PNG sequence.

Alien Design

Using a the alien sprite sheet Sam created, I took it to photoshop and made a second layer to recolour the alien. The task at first was quite difficult and took time as I had to draw an outline over the character, however, Sam gave a solution to my problem. He sent the original photoshop file project (instead of the image version) and on a second layer below, coloured the alien. We also decided to give the arm a light colour with dark veins.







Once I recoloured the aliens from the sprite sheet, imported it to adobe animate and put each of the aliens in different frames. When I put it together at first, the movement of the alien was too quick and didn't loop very well. I fixed this issue by first extending the length of the frames (by pressing f5), copying the frames and reversing them. Despite having small difficulties, this task was fairly easy to complete. Once I was done with it, I exported the file as a PNG sequence.

Plans for the next week

Overall I was not entirely on track with my schedule as some tasks took longer than expected. However, due to making our next schedule ahead of time, we found space to finish off incomplete tasks. My task for next week will be to work on the icons for the character select screen and polish up any other tasks.

Week 3


This is the schedule for week 3 which was created before this week started. We estimated which tasks would take long and would need to be completed this week.

Icon Creation

I started this week by drawing the character icons for the character select. My two ideas we came up with for that icon, was a lumberjack hat and a pick-axe. I decided to start with the hat first as I believed the hat made more sense as the player didn't potentially wont carry a pickaxe in the game.




This is how the hat looked at the start. I based the look and angle from the image below. I wasn't happy with the look of the hat at first as there were a lot of gaps between the shapes.

Anon, (2019). [online] Available at: https://www.bobwards.com/outdoor-cap-red-and-black-plaid-hunting-cap-with-earflaps-90767 [Accessed 22 Jan. 2019].


I decided to start again using a different method to colour shapes in the hat. The idea, suggested by Sam, was to use the same method I used when colouring the aliens, (adding colour with the paint brush tool on a layer below the line drawing.) I tried to add lighter shades of black in the shapes on the hand but didn't like how the look turned out. I also wasn't happy with the way I redrew the hat, so I went back to my original drawing. I made a new layer below the drawing and drew with behind the drawing with a black paint brush, hiding the gaps.




I also added the bottom part of the hat.

Sounds

Reporter Mic

Pick up pattern: Omni Direction


 Rode Mic

Pick up pattern: Directional



Today I made a change to my schedule (originally meant to just import designs to construct) and instead worked on audio recordings. I originally intended to use the rode mic, but chose the reporter mic instead as it's better for picking up voice recordings compared to the road mic. This is because the pick up pattern for the reporter mic is omni directional, meaning it picks up sound from everywhere and allows more freedom when recording vocals compared the rode mic's pick up pattern which only focuses on one direction.

The overall recordings went well as a lot of the sounds I recorded were clear and sounded exactly how I wanted it to sound.


I later went on audition and cut the gaps after the sound. I also picked the sounds I liked the most and had the best quality out of them.


Enemy Death Sound

                           


Enemy Death Sound 2

                           

Enemy Death Sound 3

                           


Enemy Death Sound 4

                          

Enemy Shooting Animation

The last thing I worked on this week was a shooting animation for the character.

Week Conclusion

The week as a whole went differently than planned as most of the task I have scheduled was importing my created assets to construct. However, I gave myself other tasks like creating sound effects and adding extra animation. I believe both tasks went well as neither took too long to create and both were liked by the group and I. As we reach our final week of production, I plan to take Sam's place of the coding, and begin doing my own for the player animations.

Final Production week

This is the last schedule we made for this week of production. We chose to use this week for coding and polishing the game.

 Construct - coding on construct

28/1/19

Today I went on construct and added in the animations for one of the playable characters; the lumberjack. I started off with coding in event sheets for the lumberjack character. I set the animation for this character to play when the object "is moving" and also set the idle animation to "play from beginning" when the player is not moving.



I started off by importing the character sprites by selecting the sprite in objects, right clicking on animation frames and selected import frames from files. I then imported all the frames I drew previously from adobe animate, to construct.


Afterwards I went through each of the frames and made sure the collision points were correct. I put the collision point to bottom right and selected quick assign. This was so the muzzle will flash with the gun and that the gun will point where the mouse does. I also dragged all the collision boxes as close as I could to the sprite and applied it to all animations so that all sprites had the accurate collision box.


I followed this same process with the walking, shooting and idle animation. 


I then went to properties for each of the animations and made sure it looped, and gave it a reasonable speed.

This was both and easy task and a difficult task as while I found the coding part to be somewhat difficult, adding the animation despite taking some time was an easy task. I dealt with a few problems such as the animation being slow, and the muzzle flashing the wrong way. This was dealt with by fixing the collision point and setting the speed to 25.

Animation for soldier 

29/1/19

After adding the animation for the lumberjack into Construct, I began to work on animating the soldier on adobe animate. I firstly took the original file from Photoshop from our group drive, and exported it to png. I then imported it into adobe animate where I converted it into a bitmap. Afterwards I cropped out the arms using the lasso tool and copied and pasted it into a different layer. From there I slightly moved the arms side to side while drawing over the gaps throughout the frames to create the idle animation. For the shooting animation, I made the arm go back and forth while also connecting the arms to the body. 


Another thing I did was delete some of the line around the character and made the outlines around the arms thicker to make the design smoother looking.


For the running animation, I used the same method I did for the lumberjack in which I made a new frame for the legs and made it show only a small bit on the leg and foot going back and forth.


Overall creating the animation for the soldier wasn't too difficult as I used the lumberjack's set of animations as reference.

Q A Testing Feedback

30/1/19

Today we did QA testing for our game and received feedback from the class regarding our visuals, audio, and coding. We received positive feedback for our visuals and our animation for lumberjack character but was noted that there wasn't animation for the other characters and that they'd just "slide across the screen". We also received criticism for audio, noting that there was no music or death noise present in the game and that the gun sound was too loud. We then focus on fixing the flaws presented in the feedback, with me working on creating animations for the other two characters.


Invasion (Our final version of the game)

                                        

Evaluation

                        

Our task for this product was to create our own 2D Game using the program, Construct 2. We were assigned in groups to brainstorm ideas and execute them in the game. I initially was intrigued at the project and liked the idea of being able to choose our own type of 2D game. However, I wasn't confident in my own skills on construct as I struggled when first experimenting the program.

Our first task in our groups for the project was to brainstorm ideas. The first idea we came up with was a top down shooter game. The game consisted of a character taking out a wave of monsters, getting progressively harder and harder after each wave. we came up with an idea to have multiple characters to choose from: Police, Soldier, and Survivor, each having different powers and weaknesses e.g Survivor's health is weak but moves fast, Soldier is powerful but moves slow and Police has average strength and speed.

The second idea we came up was a platformer game, this time having more story than the shooter game we came up with. We came out with the idea for the character to be an animal and even considered making it an animal hybrid. We decided to stick with our first idea, since that one seemed more promising and was fleshed out more.

During the production stages, I dealt with a few issues. One of the big issues that I had was keeping up with my schedule. I struggled with this due to some of my tasks taking longer to complete then expected while other times it's because I worked longer on my tasks to improve it and make sure everyone in my group likes it. My solution for this was to make a more realistic schedule where I'd add longer time for tasks I know would take a while and I would show my designs earlier so that I could improve upon it (if they're improvements to be made) faster.

I believe I developed in my drawing skills and animating skills on Adobe Animate. This project allowed me to develop my drawing skills as I was able to draw a top down character and background and was also able to animate a top down walk cycle in adobe animate. This was a challenge for me at first as I wasn't using to drawing in that view but looking at online examples helped me to get the look right.

We referred back to our playing acting and different player type research we did last project when working on our game. We aimed our game's player type to achiever type players and killer types as the focus of the game is to achieve the highest points and have more challenge as you progress through the game.

I believe the biggest shortcoming of our final piece was missing aspects of the game. These missing aspects include the animation for the police character, the sound effects for the enemies, the boss at the end of each wave and the breakable trees in the survivor map. What we could've of done to prevent those shortcomings was swap around the roles more often as I. For example, mostly worked on the animation when I could've gave myself a different role like doing the coding much sooner. Another shortcoming from our final piece was the shooting animation as though we adjusted it so that it wasn't loud, it still didn't sound very good and didn't really resemble a gun noise. To alter this outcome, we would've created more samples for shooting sounds to choose from rather then just one.

Overall, I am pleased with how the game turned out as despite it having a few missing aspects, the game is functional and contains most of the vital parts of the game. The final version of our game is very close to what we initially envisioned, from the different playable characters, to the characters having their own unique attributes. However, our actual game did not feature some of the more detailed aspects like different enemies for each level, different bosses, breakable trees, death animation and more.


No comments:

Post a Comment