Phaser Game Engine
As you can probably guess, HTML5 and Javascript were used to make Mr. Balling. More specifically though Phaser was used as the game engine. Phaser is a very versitile and easy to use framework/game engine. If you are just starting out with game making and even just starting out with javascript Phaser is a great place to start as it makes getting a tutorial up and running quite quickly. I noticed that using phaser I could get about 65% finished with the game really quickly. It has so many things built in and it gets the "shell" of your game going fast. The remaining 35% to get your game to completion takes work, innitiative and checking lots of message boards for phaser and javascript. Along the way you will become more knowledgeable and figure out how to make your game work the way you intended it to.
Digging a little deeper into Phaser, here is some more indepth information about how to get started. First Phaser is the meat of this game, I know it is "written" in javascript, but the Phaser Game Engine sets up loading the assets, the game states and the game loop as well as all of the sprite mechanics and collision detection. Phaser has a great set of documentation and a great community.
Phaser Getting Started
Ok, while this is not a full on phaser tutorial, I will give you a quick into to get started. Clicking the above link will take you to the download section of the Phaser website. To get started all you need to do is create a basic html file. In the header you add a script tag to include the phaser.js file, or the phaser.min.js file either one will work. Then in the body add another script tag to include a main.js file. That's pretty much it for the html file, the rest of the game can go into the javascript file or multiple javascript files. Note: if you have multiple javascript files in your game/project you would add script tags to include each of them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Blank Phaser Start</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<p>Dude your first phaser game</p>
<script src="js/main.js"></script>
</body>
</html>
Back to the phaser javascript file. Notice how we refer to "js/phaser.min.js" so basically the phaser files you downloaded should be in a folder named js. the min is the same as the regular just minified. Minified basically means it has the same content just everything is condensed no spaces and such to make it a smaller file. You can use whichever one boats your float, it won't matter right now at least.
Now, the above us a simple html example, it will point to main.js, then in main.js (which you will also see should be in the "js" folder, you will put some of the basics of a phaser game.
For the main.js file, I'll be completely honest here, I'm not entirely sure if this is unique to phaser projects or if javascript projects in general follow this as phaser was my first intro to javascript. Regardless, there are basically three baseline functions that you need to have, preload, create and update. Preload will contain loading any assets like sprites, background images, etc. Then in the create function you will set those images. sprites and other assets up on the screen or into the game. Update is then called 60 times a second or whatever your game is running at. In the update function is where you'll move stuff around and where the gameplay will occur. Obviously a game won't work with just 3 functions, so any other functions like a jump function or a game over function could be created.
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
preload: function() {
}
create: function() {
}
update: function() {
}
Phaser Examples
I found the examples the most useful as I was programming. I would constantly look through them to get ideas for how to achieve what I had in mind. As I ran into problems I would sift through these, they are organized in an intuitive way and have both the code and a window to show you what the code is doing. The docs are sometimes confusing, so having the example to actually see the code in action is incredibly useful.
Phaser Learn
The learn section on phaser has a ton of tutorials, if you scroll through you will see some amazing tutorials that at first glance you say, "no way," things like learning how to code slither io or 2D platformers. I only went through a couple of these as I found better luck with the course put together by Zenva on Udemy which I discuss in another section of the blog.