Prototyping games
I always had the dream of making a game. Knowing that drawing or graphical stuff in general is not my strength, I realized that I'd had to give myself constraints on the type and size of the game I'd wanted to make, to still be able to create (and complete!) something.
To be able to just play them without installing, the web has been my favourite way to start, with various frameworks on the way, which I'd like to elaborate on a bit below.
Some of my projects turned out into playable, completed Minigames, so check them out if you wish :-)
Prototyping, practice, time
Sometimes things take time and practice. I started a really long time ago with playing around with frameworks, like SDL, LibGDX or some other ones in Java, too, like LWJGL. I never really got further than the demo project, exploring the basics of the framework.
That was until I discovered Pygame - having used Python for scripting and prototyping, this seemed like the perfect framework, and I built some smaller projects with it, like visualizations or simple GUIs.
The problem was, still: I build a cool minigame, but to show it to any of my (non-techie) friends, I had to let them install Python, which was kind of a trouble (and didn't even work because of missing dependencies).
That was a real headache, and I decided to focus on the web - anyone that could browse onto your website could open and play your game.
Getting onto the web
This is where I really got into playing around more, and creating prototypes. One of the first frameworks I encountered was Quintus.
Starting from the demo, I added a animated character, and played around with sprites and sprite animations.
Quintus works with plugins (like Input, Sprites, etc.), extending things, and callbacks. For example, the orange enemies look like this:
Q.Sprite.extend('Enemy',{
init: function(p) {
this._super(p, { sheet: 'enemy', vx: 100 });
this.add('2d, aiBounce');
this.on('hit.sprite',function(collision) {
if (collision.obj.isA('Player')) {
Q.stageScene('level1');
}
});
}
});Playable prototype 1: Quintus
(You can click on it to start using the arrow keys, jump with "up".)
Tiled + MelonJS
This was also where I encountered Tiled, and started editing levels. Tiled is a great editor for preparing levels, which can then be loaded into a game.
With Tiled, I created a first simple level: Some scenery for a jump-n-run game:
The cool thing about Tiled is that you can have multiple layers and directly include objects like player, collectables (like coins) and enemies. Notice how the enemy is bound on the middle platform.
Playable prototype 2: MelonJS
Level generation
Another technique which I used later for example for Phoenix was a generated level, of which only a small portion is shown to the player. I made a small prototype in EaselJS, which is basically a Doodle jump clone.
I got the first time in touch with physics: The falling speed of Mario is determined by "gravitation", so he accelerates the longer he is falling. Mario can do a double jump and should always be able to reach the next platform.
Playable prototype 3: EaselJS
Jump (and double jump) with space.
Enter Phaser
Looking for something better, I found Phaser, and have been happy with it since. It allows very modular, class-based development, TypeScript is fully supported since some time.
(Most of the Minigames mentioned in the beginning of this post are made with Phaser.)
I started out with customizing the demo project, and then creating a big map with randomly generated asteroids.
Here, I learned some things about UI: Health & fuel bars, adding a menu and therefore also managing game state. You can open a menu (which was thought to provide settings and some kind of shop) when flying over a planet - it will pause the whole game physics, even flying bullets will freeze in the air. The menu is navigatable with the mouse.
Also, some asteroids will drop a collectable (iron or copper), which could be used to trade or upgrade existing gear
Playable prototype 4: Phaser space game
Navigate with arrow keys, fire with space. Press D to open the menu (if on a planet).
Jump n run again
The following is a prototype I worked on with a friend (who's better at graphical things :-)), and we started iterating and brainstorming through some ideas, including animated character, "bullet", enemy, and a simple first level including a death pit :-)
Playable prototype 5: "Awesome game"
(Click on the white part to the left or white to activate control via keyboard. Use space to confirm or fire.)
What I also realized was that I wouldn't need some fancy graphics from the beginning on - either I could keep it simplistic in general (like Pushr), or I could just use some placeholders, and build the game around those. This would also allow me to get a better grip of what graphical content I'd actually need.
Playable prototype 6: SimpleTD
You can choose a tower type in the lower right and place it by clicking anywhere on the field (but not on the path itself).
Conclusion
So while I started a lot of games without actually finishing them, I learnt something new every time - digging through all these old projects and compiling the list for this post was fun, and I'm glad I tried so many things.
It was also fun recapitulating all the different ideas and chapters of frameworks and code - and the fact those prototypes still work today (the earliest is 9 years old!).
Thanks for reading!
