Using JavaScript and HTML5 to Develop Games: Creating a Platformer Game with melonJS and Tiled
- Getting Started with melon.js
- Recipe: Creating a Tiled Map
- Recipe: Starting the Game
- Recipe: Adding a Character
- Recipe: Building a Collision Map
- Recipe: Walking and Jumping
- Recipe: Title Screen
- Recipe: Adding Collectables
- Recipe: Enemies
- Recipe: Powerups
- Recipe: Losing, Winning, and Information
- Summary
Read The Web Game Developer’s Cookbook: Using JavaScript and HTML5 to Develop Games and more than 24,000 other books and videos on Safari Books Online. Start a free trial today.
This chapter is from the book
This chapter is from the book
This chapter is from the book
When we think about games, Super Mario Brothers, the canonical platformer originally released on the Nintendo Entertainment System in 1985, frequently comes to mind. This game illustrates a classic genre that has maintained relevance for decades, and continues to be innovated upon today, both in big production houses and in the indie games scene. It may be obvious, but games like this are called “platformers” because they usually involve jumping from one platform to another. These games are frequently created for the web as well as the console, so HTML5 is a perfect fit.
Getting Started with melon.js
For building this chapter’s game, we’re going to be using melonJS. This engine has a simple API for developing games that is straightforward and easy to code against. It even contains prebuilt functions to manage jumping and walking in a side view type environment, which is perfect as you build your platformer. Not only does it make common development tasks very easy, but this engine also provides a ton of functionality to support more complex game behavior.
One feature of melonJS that newcomers to game making can appreciate is its integration with a tilemap editor called Tiled. Tilemap editors are incredibly useful, not only for generating level maps, but also for seeing at a glance what layers and objects are going into the game. In the other games in this book, you form your maps from simpler structures such as arrays. Tiled creates a map in a .tmx format (a type of XML).
If you look in the platformers/initial directory of this book’s project files, you will not see a tmx file. You can either copy it from a later recipe’s directory or create a new one by going to mapeditor.org, downloading Tiled, and following the first recipe, “Creating a Tiled Map.”