“This week we start learning how to program, with a focus on creating our very first playable character.”
The Experiment
Do you love games? Of course. You live and breathe games, you play them, you read about them and you even have an idea for your own game. However the actual process of game development seems like a terrifying and unachievable endeavor. Well this series is for you. During this 5 part series I will be researching whether someone with no experience in game development can learn the ropes. This isn’t a guide to get rich quick, or an overly complex lesson from a member of the industry. This is a series written by someone like you, someone who wants to make games but just doesn’t know how.
Each week we’ll break down a specific aspect of game development, so I highly recommend you check out the series previous entries, so you don’t get lost or confused along the way.
Pt. 1 Coming Up With An Idea (Click here to read)
Pt. 2 Save Time, By Taking Your Time (Click here to read)
Game Development Terms to Learn This Week
- Layer: Layers are used both in the creation of artwork and game design. Each layer will feature a different image. For a piece of art, the top layer might be the outline of the drawing, while the bottom layer might be the images color. This is how characters walk behind or in front of other objects or characters. Layers are important in game design, because you wouldn’t want a character to walk behind the games background art.
- Sprite: A Sprite is essentially an image. A sprite might be the image/ art that represents a character, object or environment within the game.
- Room: A Room is essentially what Game Maker calls the visible area your character is in. A full game will consist of multiple rooms coming together to create levels.
- Object: By turning your sprite into an object, you can start to add functions to it, like movement or attack methods.
- Frame: Games, films and animations run in frames. Most run at 30 frames per second or 60 frames per second. So for every second, 30 still images (frames) will play on screen, creating the illusion of animation or movement.
- Event: Events are kind of like the logic within your game, and where you will start writing code. So an event might be, when the player presses the down button, the playable character moves down. In simple terms, if this happens, then this will occur.
- Tiles: This is a term I made up to refer to the many icons you use in DND. You drag an icon into your event box, fiddle with the settings a little bit, and viola, you’ve made something happen without any code.
So Are We Making A Game Yet?
We’ve come up with an idea, and spent a couple weeks researching avoidable pitfalls and a wealth of tips. Now it’s time to actually jump into our software, Game Maker Studio 2, and start working. As a starting point, let’s create a dud game. The simplest game we can possibly make, a game we have no intention of working on long term, just so we can learn the basics of the design process. We’ll make this game over the next 2 weeks, so that hopefully when we move on to our ACTUAL project, we have an understanding of the software. This gives us roughly 8-9 weeks to actually start and finish work on our main project… we’ll have to see how that goes.
Creating Artwork
First things first, we need to create some artwork. This week we’ll design our main character and the enemies you’ll fight in this little practice game. You can find some really great art on the website, Pixel Game Art. I’ve borrowed some of the work from this site, for the projectile the main character will fire. I’ve chosen a pixelated axe because… why not. I contacted the artist behind the designs, Luis Zuno, and he says all the websites art is free for commercial use. Our playable character will be a drawing of my decapitated head… if I were a zombie. I created the design a while back and never did anything with it, so let’s put it to use. The enemy design is just a rough drawing of Pac Man that I whipped up in a few minutes. So I’ve got a good mix of art I’ve created myself, and some that is borrowed from others. In our final game, all the work will be original and created by myself, but right now we are just trying to learn the basics of programming, so we’re aiming to save time with the art.
Like most people, I began drawing when I was a little kid. I started just by practicing. Then my work began to be influenced by other artists; Dav Pilkey, Psychic Pebbles, Ego Raptor, Matt Stone and Trey Parker, just to name a few. You’ll have your own style, influenced by different people, and that’s what will help your work stand out. If you’ve never been into drawing or are looking to improve, the YouTube channel, Drawing with Jazza, is a great place to start.
I drew all my pictures by hand until I was 17. Then I started using an iOS app called, Animation HD. I recently moved on to Adobe Illustrator, but the zombie head and Pac Man enemies I created for this stage of the process were created with Animation HD. I’m not a professional artist by any means, but I’ve done paid freelance gigs producing 2D animations and graphic designs for companies, so I’m not a complete novice. Bare that in mind if you struggle initially.
How to Use Animation HD
Maybe you prefer to use some other sketching or painting software. There are plenty out there and most offer virtually the same thing. I purchased an iPad in 2012, and this is the software I bought back then and have used ever since.
If you’ve created artwork before, then you can skip this section, but if you want a few tips, this is how I created the Pac Man design.
First you need to draw the outline of the image. Use the pen tool to create this (I also use a cheap pen specifically for drawing on screens as a personal preference). Use reference images if you need to, most artists do. Duplicate this layer three times. One layer will be the drawings outline, one will be for the base colours for the image, and one is for shading. This is what the top layer should look like.
Select the bottom layer. Then use the paint bucket tool to color in your image. Make sure all your lines are connected, otherwise the background will be colored in to. This is what the bottom layer should look like.
Select the second layer. If you’re using Animation HD you’ll have a slider that allows you to brighten or darken whatever colour you’re currently working with. Choose one side to create shadows from. Darken the base colour that you’re shading in, then draw shapes around the curves and lines of the image, where shadows would naturally occur. For a simplistic drawing like this, that process is easy, but it’ll take more time and effort with more complex illustrations. Then lighten the base colour you’re working with, and create some light patches on the opposite side of the image where a light source would hit most prominently. Your second layer should look like this.
Your final image should look like this. Make sure the colour layer is on the bottom, the shading layer is second, and the outline image is on top. This is to make sure the outer lines of the image are prominent.
If you’re working on an iPad like me, export the image and send it to yourself. Open up Game Maker and select create sprite from the panel on the right. Import the image and make sure to make the centre point of the sprite, the centre of your image. Also name your sprite something that you’ll remember (e.g. Player_Sprite). Even though I’ve just outlined how to create the Pac Man image, I’ll be working with my zombie head as my playable character going forward. If you didn’t take my advice about learning the layout of Game Maker last week, or are still struggling, you may find it hard to follow what we’re going to do next. I’ll link to some very helpful video tutorials at the end of the article.
You’ll also want to add some layers to your room. Create three layers. One for your background, one for your character and one for the projectiles you’ll fire. This stops your projectile spawning on top of your character and looking odd. Your character should be on the top, then your projectile below it, then your background.
Making Your Character Move – Drag and Drop vs Coding
Now that we have a character, we want to give them the ability to move. Game Maker Studio 2 gives you 2 options for making your game. You can either use their intuitive Drag and Drop system (DND), which allows you to program your game through a more visual style, or learn the programs coding language, GML. From what I’ve read on forums the Drag and Drop system is a helpful starting point for beginners, but is too time consuming and clunky once you get used to the process of programming. Most Game Maker users recommend trialling the system, but then quickly moving on to GML. According to them, you’ll have to learn to write code eventually anyway. So let’s start with GML and see how we do.
Coding with GML
First we need to link our sprite to an object. A sprite is an image, but an object is something that can actually do physical things within the world of your game. So select, create new object, and then link it to your sprite. You then want to create an event so that your character actually does something. So you can either choose the “step” option or the “key down” option. Basically this just says, when I push this button, this will happen. I followed a relatively straightforward tutorial online and ended up writing my first lines of code. They looked something like this.
if (keyboard_check (vk_right) ) x = x + 4;
if (keyboard_check (vk_left) ) x = x – 4;
if (keyboard_check (vk_up) ) y = y – 4;
if (keyboard_check (vk_down) ) y = y + 4;
image_angle = point_direction (x,y,mouse_x,mouse_y);
It doesn’t look like much, but this code allows my character to move when I push the arrow keys, and my zombie head to rotate in accordance to where my mouse is pointed. To trained programmers, this is pretty basic stuff, but I can’t imagine why you would be following this series if you already know what you’re doing. To someone like myself, who has never tried their hand at coding, this looks like gibberish. So let’s break down what all this means. In regards to the first line of code, the “if” is pretty self-explanatory. If, whatever is written in brackets happens, whatever is written after the brackets will occur. So the action let’s say, will lead to a consequence.
Within the brackets, “keyboard_check,” means the keyboard is being used, and “vk_right” means the right directional button on the keyboard specifically is being used. The first “x” after the brackets represents the current position of your object (your character). I’m not sure if the same applies to other software, but Game Maker breaks down movement within rooms through a grid with an x and y axis. Think back to your high school math days. So if “x” is your characters current position on the grid, “x + 4” is four squares to the right of your current position on the grid.
So to break it down in English…
if (keyboard_check (vk_right) ) x = x + 4;
Means, if you push the right directional button on your keyboard, your object (character) will move four squares to the right of where they are now. The “;” is basically the equivalent of a full stop in GML. Yes, you need proper grammar even when you’re coding. The following three lines of code follow the same rationale but make up the other three directions you’d probably like to move (left, up and down).
The last line of code is related to the direction your character facing, which is guided by your mouse.
So to break it down in English…
image_angle = point_direction (x,y,mouse_x,mouse_y);
Means, the angle your image is facing will be the same as the direction you are pointing your mouse. The x and y coordinates the image faces will be the same as the x and y coordinates of the mouse. For someone who is unfamiliar with this type of work, this may be a lot to take in. I’m only able to explain to you what it means, because I watched a tutorial of someone else writing this same code and explaining it to me. If I had to write code for some other aspect of the game, I wouldn’t even know where to start.
That’s the problem with learning a coding language like GML, it’s like learning an entirely new language. If you’re German, and someone shows you how to write, “Hi my name is Billy,” in English and explains what that sentence means, then sharing that knowledge with others is easy. That doesn’t mean you could write an entire essay about your summer in English fluently. You’d have to learn all the little nuances of the language. Think about how confusing their, there and they’re is to native English speakers. So coding might be the fastest way to make a game, but it will be an incredibly long and arduous process to learn the language.
Working with DND
DND is a lot easier to explain and comprehend. I was able to take my character even further with DND so that they not only moved, but could shoot projectiles. Make sure to create a sprite for your projectile (in my case a pixelated axe) and link it to an object, just like we did with our playable character. You add an event to your object (playable character) once again. Instead of just adding the “step” event and then adding all your code within that, you’ll have multiple events with different information inside.
Event 1 (Key Down – Left): Add the “jump to point” option from the large DND tile set. Change the x and y icons in relation to how much you want your character to move across the screen. So I adjusted the x option to -4 and left the y option at 0. So that when we press down the left key our character moves 4 pixels to the left. You’ll also want to tick the “relative” boxes, so that your character moves 4 pixels to the left from where they currently are, rather than jumping to the actual -4 spot on the grid.
Event 2, 3, and 4: They were all done the same way, but for the other directions you want to move.
Event 5 (Create): I added the “assign variable” icon and named it “cooldown.” We’ll use this later in relation to other functions.
Event 6 (Step): So with this event, I just added a bunch of things that I wanted to happen, every frame of the game. That’s the great thing about DND, you can add a whole bunch of icons that do different things, in one area. Then you can jump to the different things you add instantly, through a list on the right of your work space.
In Event 6 I added;
- The “set point direction” icon and changed the x and y setting to, “mouse_x” and “mouse_y,” so the game knew that my object should point to where my mouse is on the screen.
- The “set instance rotation” icon and changed the angle to “direction.” It then knows from the icon I placed above that the direction is where the mouse is pointing, so the object should rotate to face the player’s mouse too.
- The “if mouse down” icon and connected it to the “create instance” icon. I imported the object that represented my axe in the “create instance” icon. In this same icon you’ll also want to set the layer to whatever you called your projectile layer earlier.
- The “if variable” icon between the “if mouse down” and “create instance icon.” Change the variable to “cooldown,” the “is” setting to “equal or less,” and the value setting to “0.” This basically means that if the cooldown variable we created earlier is equal or less than 0, you can fire your projectile again.
- The “assign variable” icon and linked it beneath the “create instance icon.” Change the name to cooldown so it knows that is what we are talking about, and adjust the value to your liking. I chose 20. This tells the game that you can only shoot a new projectile every 20 frames.
- The “assign variable” icon again and changed the name to cooldown. So once again it knows we are talking about the cooldown between being able to shoot your projectile again. Set the value to “-1” and tick the relative box. This says that with every frame that passes by, the cooldown ticks down by one.
Basically all this stuff relating to the projectile breaks down to, if you click the left mouse button, your character will fire a projectile, but there is a cooldown, so you can only shoot one projectile per 20 frames.
Should we use GML or DND?
It’s a lot to take in, but hopefully the visuals and your own familiarity with Game Maker in the last week will help. DND took a lot longer, to create little more than we did with code. It also included a lot more individual parts. However the process is far more intuitive. The icons clearly symbolise the functions they create and rather than learning how to write 5 lines of code, but be clueless of where to go next, through DND we’ve actually learned a lot about game design logic. It’s easy to see how you would go forward and learn new things through experimentation and curiosity. It seems like a more fun way to learn. There are plenty of tutorials and mentors when it comes to writing code. However the idea of creating an entire game with DND, creating an entire game without writing a single line of code, sounds pretty tantalising.
If you want a more in depth walkthrough of all these processes, check out the Yo Yo Games YouTube channel. That is where I learned everything discussed this week in regards to Game Maker. If you’re looking for more content, to either inspire or learn from, No Clip released a 2 part documentary on how Digital Extremes went from the verge of bankruptcy to massive success with Warframe. You can also find an interesting interview with the director of Sea of Thieves on the latest episode of Unfiltered.
Next week we’ll finish off our dud game by adding enemies and environments and hopefully move on to our official first game.
Quiet Stories 
One thought on “Can you Make a Video Game With No Experience: Pt. 3 – Creating a Playable Character”