Quintus is an easy-to-learn, fun-to-use JavaScript HTML5 game engine for mobile, desktop and beyond!

The 2D Module

Up until this point this guide has covered the building blocks of the engine, but not really given you something that is targeted at building a specific type of game.

All the basic pieces: the engine Core, Sprites, Scenes, Animation and Audio are more or less game-type agnostic: you could use them to build a 2D platformer just as easily as a puzzle game. And while Quintus would help you structure your game, it wouldn't provide all that much of a boost in development speed as you would need to still build a fair number of pieces from scratch.

The 2D module aims to solve that by providing a number of specific pieces designed to take the pain out of building simple 2D games. It provides three main pieces to make this happen: a viewport that allows you to move around the stage, a Q.TileLayer class that makes it easy to work with tiled backgrounds and a 2d (notice the lower case d) component that adds default movement behavior to sprites.

Adding in a stage viewport

The viewport component is added directly to the stage and acts almost as a 2D camera onto your game, which you can move around to view different parts of the scene. This component is most useful for scrolling games.

The most common use of the viewport is to follow a specific sprite around (usually the player), this is done by calling follow on the stage after adding the component and passing in the sprite to follow:

Q.scene("myLevel", function(stage) {
  var player = stage.insert(new Player());

  stage.add("viewport")
       .follow(player);
});

When you move the player around after staging the scene above, the viewport will center on that player. If you only want to follow a single direction you can pass an option hash in specifying x and/or y:

stage.add("viewport")
     .follow(player,{ x: true, y: false });

This will only follow in the x direction.

The viewport component also adds a few more methods onto the stage:

Lastly, the viewport has some properties you can set directly:

Remember that, since a viewport applies to a single stage, HUD elements and the like on other stages won't be affected.

Also note that the Touch module is viewport aware, so scaling and moving shouldn't affect touch and drag functionality.

Using a TileLayer

Quintus has good support for a tile grid that can be added to your game (and optionally used as a collision layer.)

This can be useful for games, like platformers or RPGs, where you might want a square grid of tiles rendered and used for collisions (no isometric support yet, sorry)

Creating a tile layer is as simple as creating a new instance of the TileLayer class and adding it to the stage. The main thing to watch for is that you need to pass in a sheet property for the sprite sheet to render the tiles from and a dataAsset property for the asset to pull the initial state of the tiles from.

The TileLayer class expects the dataAsset to be an array of arrays with the number of the frame to render for each tile.

Here's an example:

new Q.TileLayer({
  tileW: 32,  // Default tile width
  tileH: 32,  // Default tile height
  blockTileW: 10,  // Default pre-render size
  blockTileH: 10,
  type: Q.SPRITE_DEFAULT, // Default type (for collisions)
  dataAsset: "tiles.json",
  sheet: "tiles"
});

To use a TileLayer as the collision layer for a stage you can call stage.collisionLayer(tileLayer) which will both insert the tile layer into the stage and use it for per-tile collisions (if you just insert the tile layer as a normal sprite, it will collide its entire bounding box with other objects)

Tile layers can be moved around as you would regular sprites, but they don't yet support rotation or scaling. If you need to scale your tile layer, consider scaling the viewport and your other sprites.

The 2d component

The 2d component can be added to any Sprite and enables basic kinetics (velocity and acceleration) and collision detection on a Sprite.

It also adds in a vertical gravity component for acceleration by default so if you make no other adjustments, your Sprite will fall down.

To turn off gravity, you can either set the global gravity values Q.gravityX and Q.gravityY or set the gravitiy multiplier, p.gravity, on the Sprite itself (for example setting p.gravity to 0 will disable the effect of gravity just for that sprite)

Adding the 2d component also adds in some extra events onto objects: "bump.top", "bump.bottom", "bump.left" and "bump.right" that indicate which of the four directions the collision happened in. This allows you to easily add behaviors like stomping on enemies or breaking bricks (It's a me!)

Here's an example of enemy stomping:

Q.Sprite.extend("Player", {
  init: function(p) {
    this._super(p);

    this.add("2d");
    this.on("bump.bottom",this,"stomp");
  },

  stomp: function(collision) {
    if(collision.obj.isA("Enemy")) {
      collision.obj.destroy();
      this.p.vy = -500; // make the player jump
    }
  }

});

Controls

While they are not technically part of the 2d component, there are two controls components in the Quintus.Input module that are an easy starting point for controls you might need: platformerControls and stepControls.

The first, platformerControls adds in some basic support for moving left, right and jumping.

The second, stepControls adds in controls that move a single step at a time (and if they run into anything, move back to the original location)

Chapter Summary

This Chapter covered the 2D Component, the first (of hopefully at least a couple more) modules dedicated for building specific types of games.

And, you're done! Go back to the documentation page