Github Pages Links

Latest Portfolio

First Website

Previous Portfolio Layout

Web Layout Challenge Site

Flexbox Site

Skills and Tools Learnt from Project One

Over the course of project one, I have used many new skills and tools. Here is a list of those, and the industry job roles that they relate to in a professional capacity.

Software Used:

• GameMaker: Studio - All roles would be involved in working with the game engine.
• Adobe Photoshop
• Adobe Illustrator
• PiskelApp - These three programs would be used by the art team, to create art assets.
• Google Docs
• Google Drive
• Google Slides - These three programs would primarily be used by team leaders, such as lead designer, lead artist, to communicate with their teams.
• Survey Monkey - Survey software would be used by the PR team, to gather feedback from various sources.

Skills Developed:

• Programming in GML - This would be the main skill a programmer would use over the project
• Concept art creating in Photoshop and Illustrator
• Creating pixel art in PiskelApp - These two skills would be used by the art team, also designers and directors would maybe produce some concept art early in the development process when pitching their idea.
• Creating pre-production documents in Google Drive and Google Docs - Used by designers and directors
• Project management - A director would be tasked with managing the entire project, and they would then defer to team leaders to manage their individual teams
• Presentation skills - A director or team leader would use presentation skills to communicate with their team
• Problem solving in GameMaker - This would primarily be a skill used by programmers
• Object Oriented Programming - Again, programmers
• Game Design - Game designers would use their knowledge of game design to craft the experience

Project One Self Evaluation

The brief for project one was to create a 2D game, using GameMaker:Studio. A very broad brief, it gave me a lot of room to make decisions about what kind of game I wanted to create, what themes I wanted to explore, what stories I wanted to tell. I set about researching different styles of games and different games, trying to find something that I thought was a game I would want to create, whilst trying to be realistic in ambition as I only had six weeks to finish the project. I decided to make a top down shooter, with a wild west theme. I have had previous experience using GameMaker:Studio, and believed that with this prior knowledge that this kind of game was achievable in the given timeframe. I created design documents, production schedules, and after the end of a week of pre-production I was ready to begin development. However, before that I decided to re-familiarize myself with GameMaker:Studio, and with object-oriented design(OOD).

GameMaker:Studio is a 2D game development software program, that I have had some previous experience with, but before I began my first full project I wanted to understand the program more. GameMaker was created by Mark Overmars, as a game development tool intended to be both accessible to those new to programming and development, whilst also being a powerful tool in capable hands.

1. “Figure 1 shows the GameMaker interface, which uses an object-oriented, event-driven approach. With GameMaker’s drag-and-drop techniques, users can create games without writing a single line of code - but it also includes an interpreted programming language.” - Mark Overmars, creator of GameMaker: Studio

The program uses an object-oriented design approach, which is a common, modern industry standard method of development. When making games, literally everything in the game is an object, each with it’s own properties and behaviour. These objects and their behaviour will define outcomes when two object interact. Using an object-oriented approach has many different pros and cons:

Pros:

• Increased productivity - Working on individual objects allows for a modular approach to development, meaning that code is easy to maintain, easy to share with collaborators, and easy to reuse.
• Faster development - Increased productivity means faster development times, or the time to work further on certain aspects to perfect them.
• Cheaper development - Lower costs for developers means less reliance on publishers, which results in more original and inventive games.
• Iterative design - Code and objects that can be reused and adapted means that developers can quickly improve upon their previous games when making their next title.

Cons:

• Larger file sizes - Many different objects containing lots of lines of code results in larger files, which equates to more loading and worse performance.
• Slower programs - Calling lines of code from various objects slows the program, as does the increase in instructions that comes with OOD.
• Iterative design - Some developers see the ease at which code can be repurposed, and choose to make very similar games over and over, rather than creating original ideas.

2. “Iteration, as it’s generally known within game development, is the progressive process of planning, creating and testing content.  This is typically expressed as a cycle, where a process is repeated, with each repetition applying lessons learned from the prior.  This cycle is progressive, with each iteration building upon and refining the last.  This concept is widely embraced: many game developers have espoused iteration when discussing the design process.” - Matt Grandstaff, Community Manager at Bethesda Softworks

Gamemaker is an event driven program, meaning that the program is checking for certain events to happen each frame of the game. If one of these events returns true, then the actions specified by the developer will be carried out. This method of development allows the development to set up parameters for certain actions to occur under. Some common examples of events would be collisions, alarms, which would produce actions such as destroying the instance, or creating one.

I chose to develop my game using GameMaker-Language (GML), the coding language used within the program. Whilst you can create a game with the drag-and-drop interface, using GML gives more control over the actions and events in your game. Here are some examples of those events and actions I used within my game:


if keyboard_check_released(ord('R')) { room_restart();}

This piece of code is checking for the the event where the player presses and releases the 'R' key, which upon happening will carry out the action of restarting the room.

if keyboard_check_pressed(vk_escape) { game_end(); }

This piece of code is checking for the event where the player presses the 'escape' key, which upon happening will carry out the action of ending the game.

if x > room_width or x < 0 or y > room_height or y < 0 { instance_destroy(); }

This piece of code is checking for the event where the instance is leaving the room, which upon happening will carry out the action of destroying the instance.

Overall I believe that the project went well. The finished product at the end of the six weeks was a top down shooter, with a wild west theme. Admittedly, it wasn’t precisely what I envisioned the game turning out like, but given that this was my first experience of development, and considering the slender time constraints, I think that I have completed a good amount. The state that the game is currently in is one that can be built upon if desired, I’ve created a good foundation to move forward from.

An example of the level of coding I have achieved during this project

The main take away from this project is that I have learnt a lot. I have learnt practical skills, such as improving my knowledge of GML to the point where I can create scripts that interlink with each other, using equations consisting of variables called from various objects to produce outcomes in the form of actions. The quote below is from the first week of production, where I state that I was struggling with coding, to now, where I feel very confident with GML. Other skills I have learnt include using Photoshop and Illustrator, I have learnt about game feel, I have a better understanding of randomisation in games, and more. Alongside these practical skills, I have learnt a lot about how the development process works. I now understand more about the order in which to develop certain features, I learnt that some things take longer and other shorter than anticipated, I learnt the importance of sticking to a plan. This experience has taught me a lesson in managing expectations as well as time, and not to get carried away with adding features before I have accomplished what I set out to do.

3.  “The majority of my time and effort this week went towards random level generation. Gun Smoke has a pre-determined level layout, with 8 ‘room slots’ which are randomly filled from a list of around 15 different rooms. Getting the slots filled is easy, it’s tuning the composition of these rooms that proved difficult. Early tests resulted in three or four of the same room being thrown up on a level, which was undesirable. I’m no programmer, and after tussling with GameMaker for a few days, it became clear that programming wasn’t a natural talent of mine” - Jake Benbow

As I said previously, the project didn’t turn out quite as I had envisioned, and there were plenty of things that went wrong. The big example was that my game was supposed to be based around the player moving through different rooms and different levels, a system I had to completely cut out to the point of having one single room for the game because time was running out. This wasn’t an easy decision to make, as much of my work up until that decision had been creating that system, which in hindsight equates to a wasted two weeks of development. Other issues that arose were a change in art style to a more reductive aesthetic, not as many enemies and items being in the game as I would have liked. Art style was again due to a lack of time being available to me, whilst the enemies and items were due to myself not allotting enough time during development to create them as they threw up more issues than anticipated.

Upon finishing the game, I conducted a survey as part of the reflection process on how my finished game turned out. The survey creation program we used was SurveyMonkey, a platform which allows you to create your own questions and choose how they are answered. The questions covered topics such as gameplay, controls, graphics, audio, and the answer fields were star ratings out of five, with comment boxes for people to add some notes as to why they answered the way they did. This kind of feedback allows me to, at a glance, quickly see which areas of my game were successful and people liked, and those that people didn’t like so much. But with having comment boxes on the questions, it allows me to take a deeper dive into each question, to get a sense of not just what people liked or disliked, but why. Getting feedback on my game is important. With the game being a product of my own creation, it is hard to be objective about it’s qualities and faults, as there is an inherent bias and cynicism that comes with all creative work. So that’s why it’s important to seek the opinion of others, who can see your game in the cold light of day for exactly what it is, for better or for worse. I think that during my next projects, I will seek this kind of feedback at more regular intervals, to get this kind of feedback during a time where it can still affect the outcome of my project.

An example of the feedback I got from my survey, on one of the questions

4. “The sound is hard hitting and feels like you are truly impacting damage on the enemies and makes the game that more immersive.” - Anonymous Survey Answerer

This project has been a very good experience for me. It’s my first finished game, it’s the first proper project I had completed in games, and that has come with plenty of lessons about what I can do and what I need to work on. The common theme amongst the issues that arose was time. Undoubtedly if I had more time to develop my game then I would have a more fleshed out experience, but ultimately this comes back around to my planning. When presented with the brief, I knew I had just six weeks in which to create it, yet I gave myself too much work. This has been a learning experience, and now I have more of an idea of what level I can achieve in a given timeframe, knowledge that will help me massively in my future projects.

Bibliography:

1. Mark Overmars - Learning Object Oriented Design by Creating Games file://academic.ncn.ac.uk/students/Home/2015/41264192/Downloads/overmars_04_learning_object_oriented.pdf
2. Matt Grandstaff - The Iterative Level Design Process of Bethesda Game Studios http://fr.bethblog.com/2014/06/16/the-iterative-level-design-process-of-bethesda-game-studios/
3. Jake Benbow - Jake’s Game Design Blog http://jakesdesignstuff.blogspot.co.uk/2016/10/end-of-production-week-one-random.html
4. Anonymous Survey Answerer - Gun Smoke Survey https://www.surveymonkey.com/analyze/jvy2GtIPCTxcszYM3r_2F95d5H1oyXShY_2BmxaEUD2nZ8I_3D

Project Feedback Through Survey Monkey

    One of the quickest and most effective methods of getting feedback on any project is to use a survey. Survey Monkey is a survey creation tool that allows you to choose questions and their answers, and share it through different channels such as social media. The benefit of getting feedback through a survey on this particular platform is that you can choose your own questions and answers, so you can create a survey that you believe will give you the most relevant and helpful feedback possible. Another benefit is that Survey Monkey will collate the answers that users give, meaning that you can share the survey, and then check back later to see some clear graphical breakdowns of how the different questions were answered.

Survey Monkey presents you with graphical representations of how the questions were answered

    I had a survey consisting of nine questions, covering topics such as gameplay, graphics, audio etc. This feedback I got from peers is a way that I can analyze the answers and get an overview of what worked well in my game, and what perhaps didn't work so well, so that when it comes to my next project, I know where I need to focus some more of my attention.

Flexbox Layout Site

    Today we looked at using flexbox to structure our websites as opposed to using floats and divs. Flexbox is a new method of structuring websites, in a responsive and intuitive way using two elements; flex containers and flex items. By setting the width and height of the flex container, the content (flex items) inside the container automatically shifts shape and location to fit the screen.
    The benefits of using flexbox over floating is that the system is so simple to use, through functions like space-between, flex direction and more. These simple commands are one line of code that would previously have taken lots of time and frustration to code using divs and floats.

The website created entirely using flexbox

    The flexbox test site is here.

Website Layout Techniques

    There are many different ways to structure a website, each with different pro’s and con’s. The four methods I am looking at today are:

• Tables
• Float
• Flexbox
• Framework

Tables

  Tables are the most basic method of structuring content, and they are coded natively in the HTML document, as opposed to linking a CSS file for your page structure. As expected, they allow you create rows and columns, which you can then fill with content in a linear, side-by-side layout. This is good for beginners, as it is a quick and easy way to give structure to a page.

A table layout, consisting of rows, columns, and merged cells

    Tables can use rowspan and colspan to merge cells together, allowing developers to create layouts that for example have one large cell, alongside four smaller cells that take up the same amount of space as the large one, as pictured above. This means that developers don’t have to have literally all of their content in basic rows and columns, and can use rowspan to create a sidebar element for example, but this is the extent of the flexibility that tables offer in a structuring sense.
    However, whilst tables offer a good basic structure, if you want to create a website with an interesting layout style, their rigidity won’t allow you to create anything other than the linear column and row layout. Furthermore, creating a whole page layout using a nesting table system that has multiple different colspan and rowspan elements will require a lot of code, which can make editing the code more difficult, and will also greatly increase the file size of each of your pages, increasing loading times for your pages.
  Nowadays, the only time tables get any use in web development is for tables that hold data, not for structuring pages.

Float

Used in conjunction with div’s, float allows you to create layouts of infinite combinations. The normal flow of a web page is that every cascades vertically, so usually all your content will follow one after the other. Float allows you to break this flow, and position any number of divs next to each other. Clearing this float then resets this break in the flow, and any content after the clear will resume the normal flow of the page.

A floated layout, with a two column structure

    The fact that floats allow you to break the flow of the page is both good and bad. The good part is obviously that it gives you plenty of control over the structure of your page, and if used correctly gives you infinite possibilities. However, the problem with floats is that they are altering the fundamental structure of the webpage, and this can throw up all kinds of problems such as inexplicable gaps in content, or disappearing containers where the parent of the floated elements shrinks to 0 height. Float’s also offer a lot of scope for human error, for you will need to work out widths, margins, padding otherwise elements will fall onto the next row, and also if you forget to clear all floated elements on a page then this will throw up structuring problems. 

  Float is a method that offers plenty of flexibility in creating layouts, but can quickly become unwieldy. Flexbox is a method that most industry pundits believe will see the end of float as a method of structuring pages, so it is only a matter of time before float is relic of the internet. 

Flexbox

Flexbox has two elements; flex containers, and flex items. By setting the width and height of the flex container, and determining the number of flex items in said container, flexbox will automatically structure the content. This method allows for quick and easy structuring, as there is no need to worry about floating and clearing element. 

From here, you can use CSS styles to format the spacing between elements inside the container, where inside the container the elements will fall (left, right, center, top, bottom etc), the direction of the content within the box (vertical, horizontal, reversed) and much more. These simple functions make positioning elements very simple, whereas with previous methods it would have been a very difficult and length process. 

Flexbox will become the most commonly used method of structuring on the web, as the need for flexible and responsive design increases. However for the time being, the browser support for flexbox isn’t wide enough for the method to be widely used, so it can’t be relied upon to produce consistent results across multiple platforms. This is a problem that over time will be solved, but is unfortunate for the time being.

Different flexbox functions and how they style the container

Frameworks

CSS frameworks are predefined libraries of code that you can use in your own web page to structure your elements in a specific way. Using frameworks allows you to create a well structured page quickly, without having to do all the legwork yourself by writing all the code. Common framework examples that are widely used are grid systems, that will give you the CSS code for a grid system of specific widths, heights and floats etc. 

Frameworks are good for rapidly prototyping a web page, which is good for getting a basic structure in place for you to then work around and tweak with your own styles. They also offer consistent and dependable results, as certain frameworks gain reputation and become common knowledge for developers as a place they can go to get  good code.

The issues with frameworks lie in the lack of control you have over the web page once you have chosen to implement a framework. The code provided may work, but everyone writes code differently, and unless you are particularly skilled at reading code then you will find it particularly difficult to go back into the code and edit.

Typography and Promotional Image Research

    The first thing we looked at today was how to manipulate typography in Adobe Illustrator to achieve some different and unique results. Illustrator has different fonts you can choose from, but to make each of these fonts more unique to the style you are aiming for, you can use anchor points to stretch and distort every single edge of the text into some new shapes. By right clicking on the text, and selecting 'Create Outlines' you are presented with every anchor point on each letter. From here, you can use the direct selection tool to play around and find new ways to change the look of the text.

Four different variations of the same text, created in Adobe Illustrator

    We then looked at the dimensions of promotional material you would use to advertise a game on Steam. By using the Inspect tool in Google Chrome, you can select an image and it will tell you the size of the image. In this case, the profile image on the produce page is 397 x 186 pixels, with a pixel density of 72ppi, as is standard for screen display.

Profile image on the main product page on Steam

    On the main steam page, there is a grid of all the different games, with some images being bigger than others. The small images are 265 x 152 pixels, and the large images are 546 x 313 pixels.

Main Steam page, consisting of a grid of different sized images

    Another storefront that is particularly good for indie titles is itch.io, a site where anyone can put there game on there for free or for a cost. Itch.io has a storefront that is more visually dynamic than Steam, using animated gifs to show the different games that are on offer in action. The layout of the page is they have two large images for featured titles, followed by a grid of smaller images. 

Itch.io storefront

 

Creating a Website from a Preset Layout

    So far we have looked at building websites to our own specifications, using our own created layouts and building that site. Today, we were given a choice of four different layouts and had to emulate one.

    This was the layout that I chose to build from, a website for a movie. I chose this layout because I liked the large, bold splash images and the bold text as well, it's a very simple style but one that takes skill to pull of correctly. Using Sublime Text Editor, I had to build this site from scratch, and upload it to GitHub.

    The main skill I used in this task was creating div elements, and positioning them throughout the page using margins, paddings and floats. In this layout the elements don't all cascade vertically or horizontally in a linear way, so to position the elements in their correct places isn't as easy as it first appears. I also used different typography and images throughout the site, so creating an interesting style using these was fun.

    This is the finished website.

Animating GIFs with Illustrator and Photoshop

    We looked at creating some simple sprite animations using Adobe Illustrator and Photoshop. GIF is a good file format for creating simple pixel art sprites, as GIFs have a low memory usage so can be loaded quickly, they have transparent backgrounds, and they can be animated. I created a simple pixel face in Illustrator, and then by creating different layers, copying and pasting the face over to these layers and changing some details for the next frame of the animation (eg. eyes blinking, smiling), I can easily create an animated sprite.

The four PNG files for each frame of my animation, before they were put together in Photoshop

    The next step is to export these different layers as PNG files, so that they can be put together into an animation cycle in Photoshop. In the export window in Illustrator it gives you some options, the first of which is resolution, which is always 72ppi (pixels per inch) for screen display. The next option is anti-aliasing, which basically means that the pixels on the edge of your image will be smoothed as not to create jagged, harsh edges on your sprites or models. For intricate hand drawn art or models this may be good, but for simple pixel art this will just blur the image, so I chose no anti-aliasing. Then I just checked that background was set to transparent, and exported as a PNG.

    To put these layers into an animated GIF, I loaded them up in Photoshop, and opened the 'Timeline' window. In this window, I created four different frames, and loaded each PNG into it's respective frame. I played around with different delays on each frame to make the GIF animate at the speed I wanted, and when I found the optimal result, I exported it. To export GIFs in Photoshop, I went to 'Save For Web', and changed the file format to GIF. I also lowered the amount of colours in the image, as my sprite didn't have many different colours, and lowering the total amount of colours in the document will decrease the file size and make the image load faster. Once exported, I had an animated GIF that I can post to the web, or use in Gamemaker for a project.

Finished GIF

    This technique is a very quick and easy way to create game art that has character, even with just basic animations.

CSS Layouts and Spooky Trading Cards

    Today we looked at structuring a webpage using CSS styles such as width, heights, floats and clears. The task was to create a series of trading cards using a combination of different divs, and I chose to make a halloween themed set of cards.

Spooky trading cards, made by floating different divs

    Firstly I created the main card, using a div to create a 'cardcontainer'. This container then held four smaller divs, one for heading, image, sub-heading and information. Naturally, divs fall into place vertically so creating this cascading effect for the cards was easy, and was just a case of choosing different widths and heights for each section. The next thing was to center the information inside the card, which is achieved using the 'margin: auto;' CSS style. Once the four divs lay centrally, one after the other inside the container, the next thing to do was to fill them with content, including a background image for each card and also a background image for the 'image' div. After this I had one finished card.

    After creating the remaining eight cards by copying and pasting, they all cascaded vertically, whereas I wanted to have three rows of three cards, as pictured above. To do this, I floated the cards using the 'float: left' style, which would have all of the cards next to each other, until there was no space left on the row, at which point the cards would move onto the next line. To get the three rows of three, I created ' div class="clearfix" ', a class which clears content onto the next line. I placed this div in my code after every three cards, and this gave me my three rows of three.

    To move all of the cards into the middle of the webpage, I created a 'maincontainer' div, that went around all of my cards. Giving this a 'margin:auto' style, and setting 'width:960px' centred my cards on the webpage, leaving plenty of space either side to show off the background image of the entire page.

Creating Art Assets

    In my game, I am implementing a simple pixel art style. Over the half term break, I made some rough art work to generate ideas, and found that I would struggle to create all of the art assets in the style I initially wanted over course of production due to limited time.

    I decided to create some very basic pixel art that I felt was still adequate for my game, and these are some examples of what I came up with.

Enemy

Player

Bullet

Shotgun

Building Roof

Revolver

     I used a web based sprite creation tool called Piskel to create these assets, a simple tool that allows you to create pixel art. I used this program because I don't always have access to Adobe Illustrator, for example when I am at home, and so I wanted to find a tool I can use to create art assets even when not at college. I exported the images in GIF formats, due to the small file size, the transparency of the image backgrounds, and the lower quality of GIF images that is usually a drawback of that particular format won't have much of an effect due to my pixel art style.

    Piskel allows you to export files in any format very easily, and once you have exported a GIF, it's just a simple case of naming it (eg. "building_roof.gif") and moving it into my art assets folder. In Gamemaker it is very simple to import images, and it will even split animated GIFs up into their different frames.

    All of my game files, including art assets, are backed up to my USB drive, my home computer, and my Google Drive. I am also creating weekly version updates of my game on GitHub.

Portfolio Mockup and Background Video

    I started off today by creating mockups of what I want my portfolio website to look like. This is following on from last week when I planned my layout on paper, to today where I made a digital layout in Photoshop.

The Photoshop document of my portfolio mockup

    This gives me a better idea of the website I am going to be creating, even more so than the paper layout drafts, so that when it comes to developing the website I will have a good idea of what I need to be doing, and not wasting time making decisions that could be made previously. Designing in Photoshop means that the project is very flexible, and I can play around with different colours, layouts, fonts to experiment with my website's appearance.

    We then moved on to implementing a background video using HTML in our webpage.

The blurry image in the center of the screen is the background video

    Using the HTML

Weapon Pickups, Shotgun Spread and Reloading

Weapon Pickups 
    Currently I have just two guns in my game, a revolver and a shotgun. The task for the first part of today was to make these weapons into pickups, so that the player could change weapon from one to the other. To do this I created two new objects, 'objShotgunPickup' and 'objRevolverPickup'. These are the objects that will lay on the floor, and which will spawn when an enemy drops a weapon or the player opens a chest. When the player collides with these pickup objects, they will be able to press 'E' to change weapon. This destroys both the player's current weapon and the pickup they just interacted with, and creates a new weapon on the player that corresponds with the pickup (eg. objShotgunPickup' will be destroyed and the player will spawn a new 'objShotgun' that they can shoot). This weapon pickup code has been stored in a script, so that when it comes to adding the other weapons I want to incorporate into my game, it will be a simple task.

The script for weapon pickups - 'argument0' is a variable stored in each weapon object's Create event

Shotgun Spread  
    The next task was to make the shotgun into a proper shotgun, and give it bullet spread. My first port of call for this was to use the random_range function on the direction on each bullet. I found this spread the bullets well, but that it wasn't consistent (obviously, it's random) and the bullets would often clump together in direction. Whilst real shotguns may have an element of unpredictability in the spread of the shot, this makes for frustrating use of the shotgun in a game, as the player doesn't feel that they can trust the weapon and line up their shots properly, and as a result they just won't use it. The solution I settled on was to use a while loop.

Shotgun firing code, using 'spreadAngle' variable in conjunction with the while loop to create bullet spread

    The while loop will check the expression at the top (whileNumberOfBullets...) and will run the code inside the curly braces for every step that that statement is true. In this case, our shotgun can shoot 5 bullets each shot, so the loop is checking every frame whether all 5 shots have been fired. If not, the loop will run, and will create a new bullet. It is important with loops to make sure they have break statements, or they will 'hang' your game and it will crash. The break statement in this case is the 'numberOfBulletsFired' variable, which every time a bullet is fired has +1 added to it. Then, the if statement below the loop is waiting for all of the bullets to have been fired, breaking the loop, and stopping any more bullets being fired. This loop allowed for multiple shots to be fired out almost simultaneously.
 
    To make the bullets spread evenly, that is where the 'spreadAngle' variable is used with the loop. In the shotgun object, the 'spreadAngle' variable is created with a value of -5. When the first bullet is fired, it's direction is the gun's direction -5 degrees. Then, 2.5 is added to 'spreadAngle', so when the loop runs next time the direction of that bullet is the gun's direction - 2.5 degrees. This continues, and the effect is that each bullet is fired slightly to the right of the last, creating a bullet spread effect. The values can be tweaked so that the spread is even if necessary. When the alarm[0] is triggered, the 'spreadAngle' is reset to it's original value, so that next time you fire the same spread will occur. This gives consistent bullet spread that is fair and predictable for the player, making the shotgun a viable choice.

Reloading
    At this point, each weapon had a fire rate alarm, meaning a shotgun can only be fired once every second, or a revolver three times a second, however these guns can shoot indefinitely without the need for reloading. I implemented a reload system,

Reload system flow through different actions and events

    The first box, the 'objShotgun Create' event, establishes the variables for how much ammo the gun has and how long it takes to reload. The second box is the 'Step' event for the shotgun, and this is checking firstly that the player is pressing the reload key, and then if there are any empty slots that need reloading. If this is true, then the 'scrReload' script is run, the next box down. This script takes the 'reloadTimeInSeconds' variable from the create event, and multiplies this by room_speed to set the alarm time. Then, when the alarm is triggered after two seconds, the gun is reloaded by setting the current ammo to the maximum allowed for that gun.

    The aim is to have an 'active reload' system in Gun Smoke, a system made popular by the Gears of War franchise. This is where you hit reload once to start the reload, and there is a point during the reload where if you hit the button again you will reload quicker and also gain a damage boost for the next clip of bullets, however if you screw up and hit the button too early or too late, then your gun jams and it takes even longer to reload than usual. It is a risk/reward decision, but importantly it adds a skill element to reloading, an otherwise frustrating and boring formality of shooters, whereby if you master the active reload you can mow down enemies more efficiently than ever. My game is going to be simple in terms of scope, so I think it's important to have elements like this in there in order to increase the skill ceiling wherever I can.

A diagram of the active reload system in Gears Of War

Tidying Up
    The last thing I did today was tidy up my code. I tried to eliminate breaks and blank spaces between code lines, I indented the nested elements of if statements to make it clear which part of the statement was the outcome and which was the trigger, and I commented everywhere I could. Commenting is important for working on projects such as this, where you will be coming and going between different areas of your code. For example if I came back to my room generation code in four weeks time, I might look at it and not be able to make sense of it, whereas if every line is commented, explaining what it is doing and why, then it'll make it much easier to pick up where I left off and find the areas I am looking for specifically.

A GIF showing weapon pickups, from revolver to shotgun. The long pause between shots is the reloading

 

End of Production Week One - Random Generation

First week of production is over, and I’ve made some decent progress. From starting at square one, I’ve now got a player character (placeholder, admittedly) who can run and sprint around to his heart’s content, and no game is complete without guns, so I gave this little guy a ‘revolver’ so he can shoot. It’s very basic, but it’s a start. I’ve got another five weeks of production then one of post, so I have plenty of time to tweak and fine tune the player movement and shooting.

The majority of my time and effort this week went towards random level generation. Gun Smoke has a pre-determined level layout, with 8 ‘room slots’ which are randomly filled from a list of around 15 different rooms. Getting the slots filled is easy, it’s tuning the composition of these rooms that proved difficult. Early tests resulted in three or four of the same room being thrown up on a level, which was undesirable. I’m no programmer, and after tussling with GameMaker for a few days, it became clear that programming wasn’t a natural talent of mine.

That being said, come the end of the week I now have a system in place that consistently throws up 8 different rooms in the slots. Mission accomplished! The number crunching is done on the loading screen, the room layout is then locked in as a variable, and loaded up into the level. The result is a randomly level composed of randomly selected rooms, that the player can run, sprint and shoot their way around (albeit for no real reason at the moment).

All in all, it’s been a successful week. Like I’ve said previously, I have no experience of making a game or any real programming other than HTML, so to have created a level generation system for my game is quite a cool accomplishment. I am sure in a couple of years time I’ll look back at the code I used to hash together this system and laugh at past me, but for now it works, and that’s all that matters.

Custom Brush and Concept Art

    In Photoshop we used custom brushes to stamp together some concept art images. By downloading an image and using the magic wand tool to create a selection of a certain element of that image, we can then define a custom brush from this selection. This could be trees, foliage, mountains, buildings etc. By downloading multiple images we can grab from multiple different sources an bring them together to form a complete concept scene.

    Today we were tasked with creating two scenes using this technique, and using different shading, tone and values to represent foreground, background, and middle.

    I'm still getting to grips with this technique, but with more practice I will become more comfortable using this to create concept art for my games.

Navigation and Portfolio Planning

    A website is nothing without navigation and buttons. In today's session I added links to my navigation bar, and added some styling to make them pop a bit more.

My lovely navigation buttons in all their glory

    I already had the navigation in my website from last week, using un-ordered lists and the "display:inline-block" CSS styling to get the buttons horizontal, rather than vertical. From here, I added in links to external sites, and also added an internal link. The internal link is found on the final nav button 'Contact', but it just links to the bottom of the page. This is done by giving the destination of the link " tags, and then the link text on the contact button looks like this: "". The # symbol is the key to linking internally on a single page.

    When you make something a link, the browser gives it default styling, usually a purple colour and an underline. I didn't like this, so I changed it. I removed the underline, changed the colour, and also gave the text a drop shadow. The drop shadow really makes the text stand out, and makes it look like a button, which communicates to the user that it's a clickable link. To make this effect even better, I added an "a:hover" style, where the drop shadow inverts when the user hovers the cursor over the text. This gives an effect of the text being pressed in to the page, and again emphasizes that it's a button.

    This site is my portfolio. In it's current state, I don't like it. Luckily, today we were tasked with creating a proper plan for our portfolio. I sketched out a template, and annotated the sections with what they will include and some key features of each section. I am going to have a big image or video on my landing page, which will take up the full width of the screen, and this section will cycle through a number of images, dependent on how many projects I have completed. When scrolling down, each project will have a bit more time and space dedicated to it specifically, followed by sections such as About Me, or Contact/Social. These sections will all contain links to full pages, which will have images, text, videos, just more content for each area of the site. I think this will give a good overview of my work at a glance whilst scrolling, but also gives the option for any user to click onto a page if something in particular catches their eye.

A revised layout sketch of my portfolio website

    I would like to include interactive elements in my site, I even thought of presenting the entire thing as an old school text adventure using Javascript, but the main problem I saw this creating is that my site wouldn't be easy to navigate. I don't want prospective employers to get turned off from my site because they cannot find what they want. If I can design the text adventure in a way that makes it easy to figure out, then I'd love to implement that idea. The other solution would be to have the text adventure alongside the regular site, so that if people just wanted to get to the information then they could do, but this would essentially mean developing two sites, and I think it would be better to absolutely nail one site rather than get two sites kind of right.

Random Level Generation v.1

    In my game, each level is made up of rooms. The rooms are hand designed, but the combination of rooms that spawn is chosen at random. The level has 'room spawner' objects at pre-determined locations, which use the 'choose' function in GameMaker to pick a room from the list. At the location of each of the 'spawner' objects, a random room will appear in the level.

The code is ugly, and it's inefficient, but it work's for now. I'll find a better way at a later date.

GIF of me restarting the room over and over, seeing the random levels that pop in

    The problem with this code as it stands, is that it throws up completely random results. This seems desirable, but this can throw up results where half of the rooms in the level are the same, which is a) not great for freshness and b) not very good in terms of creating believable environments (what kind of wild west town has half of their buildings being post offices?!). The easy solution that I am implementing now is to include certain rooms multiple times in the 'choose' function. This is an easy way to make the results lean towards a certain result, or away from another. I am going to keep looking at other solutions, to limit certain rooms to once per level and such.

Start of Production - Player Movement and Shooting

 Movement

The first task in my production schedule is to code the player movement and shooting. In my game there will be a basic run and a sprint.

Basic movement code

    I set up 'xDirection' and 'yDirection' variables. The value assigned to these variables is dependant on the user input into the equation. The 'keyboard_check' function returns 1 if the user is holding the key, and 0 if they are not. This equation will return either 1, 0 or -1, which is then added to the x or y value, and multiplied by the 'playerWalkingSpeed' variable.

If the player is holding D, but not holding A, then the equation would look like this:

xDirection = 1 - 0;

This means that the 'xDirection' will be 1, so then the outcome of this input is:

x = x + (1 * playerWalkingSpeed);

This will make the player move right across the x axis at the speed set in the 'Create' event. If the player wanted to move left, then they would hold the A key:

xDirection = 0 - 1;

This would return -1, so the player would move left along the x axis. The same equation is used for the y axis to move the player up and down.

The first if statement is checking that the shift key is not being held ('!' before a function means 'not'), which means the player will walk, whereas the second if statement is checking that the shift key is being held down, meaning that the player wants to sprint, thus the movement speed multiplier is changed to the 'playerSprintSpeed' variable.

The bottom line of code is simply changing the 'image_angle' so that the character faces the mouse, the way they will be shooting. 

This is the movement that this code returns.

My basic game movement... How fun!

Shooting

The player shooting code is applied to 'objGun'. 

Shooting code

In the gun's 'Create' event, I set the variable 'firing=false'. The code checks that the player is holding the left mouse button, and that they're not currently firing, and then runs the code, firstly setting 'firing=true' so that the gun won't fire any more bullets until we say so. The next line is setting the alarm, so that the gun only fires twice per second. Then, we create a bullet and assign it the 'myBullet' variable, and proceed to give the bullet a speed, direction and angle. When the alarm triggers, 'firing' is changed back to false, so that we can shoot another bullet.

Pow, pow, pow!