4 Jun. 2024
Tips for Game Development
Generally speaking, code looks confusing. After all,
why wouldn't it? It's not called "code" for nothing.
You know, Morse code, Enigma code, and... coding code!
It's not meant to be easy to understand!
This blog post discusses how my coding journey began.
Through it, we will realise that code isn't as complicated as it
appears to be at first. However, even if you're
"fluent" at a coding language, it doesn't nessecarily
mean you know what it says at first glance. Programming
code, like a normal code, needs to be broken down into
smaller pieces.
Without further ado, let's get stuck in to the personal
biography of how to make games. But first, let's go
back to where it all started.
Step 1 - Free Up Your Imagination
It all began with a library book called "Computer Coding:
Python Games For Kids," which used Pygame Zero. My
bro and I went through the entire book together
and even though the games themselves were simple, it
was very interesting to look at by the "side" pictures -
the images of potential games that never have and never
will exist.
As you can imagine, seeing exciting pictures of a
game that doesn't exist caused some frustration.
On the other hand, I think - I may be wrong though -
that these illustrations actually provided more
motivation to make games. It was the drive
to make these images a reality.
I vaguely remember a picture that was particularly
inspiring for me at the time. It looked a little like this.
I don't know why, the picture was so simple, but it
really made an impact on me. It made me think about
all these really cool games... but games that only
existed in my own imagination.
One of the most important stages in game development
is just letting your imagination run free. Trust me,
getting excited about your game will make a big
difference to the final product. If you need
inspiration, a library book is a good place to
start. Once you have an idea, try to grow it in
your mind or write it down on a piece of paper.
Step 2 - Start Small
Like learning a language, learning to code takes a
lot of time and effort. Slowly you get a better
understanding of how and why code is a certain way,
and things get easier. You should not expect your
first games to be very good. "Don't run before you
can walk," they say, and it's very true.
After messing around a bit with Pygame Zero, we
decided to upgrade to Pygame, as apparently it could
handle more without slowing the computer down.
When I was younger, I aspired to become like the
"top game developers" - people who (I imagined)
coded their games in pure binary. Sadly, I quickly
learned that literally no one makes games in binary.
In case you have thought along similar lines, let me
take a minute to explain how binary and code actually
work.
All of us speak a language of some kind. Languages
allow us to communicate. Some people who are particularly
interested in language may decide to learn "lower level"
languages like, say, Latin. Coding is very similar. Some
people are content to use easier languages like Python
or JavaScript, while others enjoy learning things like C,
Rust, or even Assembly. The bottom line is - no matter
what language you choose to code in - coding in binary
is like trying to talk to each other via Morse code.
Of course it's possible, but what's the point?
Being an extremely new coder at the time, (and to
think I'm a new coder even now) I quickly realised
something very important. When my game idea was too
big for my current skill level, it never got very far
through development. Instead, I found it was much
easier to get better at coding when I made smaller
projects.
The first "game" my brother and I made was a blue
rectangle falling from the sky. I've completely
re-written the final version in JavaScript code
so you can play it online.
Coin Game
Move the falling rectangle by pressing the left
or right arrow keys (A or D). For mobile devices
you can just on tap either side of the window.
Try to collect all the coins but be careful to
avoid the baddies. Press any key to go to the
next level.
After celebrating our first game, my brother and I
parted ways. I took up the hobby of game development,
while he - who has a brain more like a computer than
I do - went off to make JoBase, and other Complicated
Things like that. (But seriously, who wants complicated
when you can have games?)
After creating a few more demos in Pygame - which I
don't think I'll show you, as they're all quite
basic - I suddenly had the desire to learn
JavaScript. I think the main reason for this was
because JavaScript runs online. And making games
is no fun when only you can play them afterwards,
right?
The first JavaScript game I attempted to make was a
full-length platformer with realistic plant simulations,
various dynamic forms of weather, and a complete physics
engine created entirely from scratch. (I confess, I still
haven't lost that abhorrence to using JavaScript libraries.)
As usual, I gave up quite quickly.
"Well," you say, "what stopped you from continuing?"
Good question! The whole idea of coding is fixing
glitches. Trouble is, us newbies tend to
unintentionally make more glitches than the
experienced coders do. However, as I think I've
mentioned before, glitches can generally be kept
at bay by keeping our projects small to begin with.
Step 3 - Keep Going
As you start creating larger games, you will at some
point face the Boring Part. There is at least one in
the development of every game. Remember, this doesn't
mean there's a boring part to every actual game, but
coding is different.
Some independent developers like to save all the
boring parts till last. Others like to get it over
and done with at the start. Personally, I like to
alternate Boring with Interesting because it helps
me stay awake.
After giving up on my platformer idea, I decided to
cut things right back and just get familiar with how
JavaScript works. This lead to the creation of about
24 "tunnel experiments," which simply consisted of
putting lots of squares on the screen and moving
them in different ways. I've displayed one of these
demos for you below. Please excuse the dreadful code
practices I used.
Demo #20
<body>
<canvas id = canvas>
<script>
// SETUP
document.body.style.margin = 0
document.body.style.overflow = 'hidden'
document.body.style.backgroundColor = "#000"
document.fullscreenEnabled = true
let context = canvas.getContext("2d")
canvas.width = innerWidth
canvas.height = innerHeight
let particles = []
let number = 250
let point = {x: canvas.width / 2, y: canvas.height / 2}
for(let i = 0; i < number; i ++) {
let x = Math.floor(Math.random() * canvas.width)
let y = Math.floor(Math.random() * canvas.height)
let size = 10
let touch = Math.floor(Math.random() * 20) + 50 // distance from particle to screen (gives it depth)
particles.push({x, y, size, touch})
}
function loop() {
canvas.width = canvas.width // clear screen
for (particle of particles) {
// FIND DISTANCE FROM CENTRE TO PARTICLES
let distx = particle.x - point.x // find distance between points on the x
let disty = particle.y - point.y
let distance = Math.sqrt(distx ** 2 + disty ** 2) // find the square root
particle.size = distance / 20
particle.x += distx / particle.touch
particle.y += disty / particle.touch
context.fillStyle = '#f80'
context.fillRect(particle.x, particle.y, particle.size, particle.size)
if (particle.x > canvas.width || particle.x + particle.size < 0 ||
particle.y + particle.size < 0 || particle.y > canvas.height) {
particle.x -= distx
particle.y -= disty
particle.touch = Math.floor(Math.random() * 20) + 50
}
}
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
</script>
</body>
Everything got a bit easier after this stage. And as
I went on to create more "games" - none of them any
good of course - I was slowly getting a better
understanding of how code works.
The best project I made during this period was
definitely the simplified platform game. It was
created just before
The Mitigator,
and was a real milestone for me. All the levels are
"Procedurally Generated," which simply means that
they're created using randomisation, so they're
different every time.
First Platformer
Use the arrows or WASD to jump on the platforms
and collect the coins. Press R to restart each
level. Space to throw shells. Avoid the red squares!
You cannot play this game on a mobile device.
Conclusion
Free up your imagination. You can't make games
if you have no ideas, so really think about the
games you love already, or pictures that inspire
you, and try to build from there.
Start Small. Don't take on big projects
too early. Even the most experienced coders can
get out of their depth, so try to tailor your
projects to fit your current skill level.
Keep Going. Every game has a boring part to its
development. Don't give up! Try to think of the
end result and keep things varied.
That's pretty much everything! All the games from
this point have been published on the
Games
tab of this website. I hope this blog post gave you a bit of
insight into my journey through game development.
If you're new to coding and are interested in using
pure JavaScript to make your own games, please get
in touch I'll try to help you as best I can.
The legacy continues!
