Using a sprite sheet

This file demonstrates how to set the source location of the image within an image map.

This example demonstrates how to set the source location of the image within an image map. It uses an image resources/images/stars.png which contains nine separate images in a grid. Each of the nine images is displayed in a loop.

Import the ui.ImageView class.

import ui.ImageView as ImageView;

Class: Application

An application with default settings is defined.

exports = Class(GC.Application, function () {

	this.initUI = function() {

The SheetView class is instantiated with the root view as the parent.

		new SheetView({
			superview: this.view,
			x: 10,
			y: 10,
			width: 26 * 3,
			height: 26 * 3,
			image: "resources/images/stars.png"
		});
	};

	this.launchUI = function () {};
});

Class: SheetView

Create a class to display an image from a sprite map:

var SheetView = Class(ImageView, function(supr) {
	this.init = function(opts) {
		supr(this, "init", [opts]);

The map contains three rows and three columns of images…

		var map = this.getImage().getMap();

Get the initial location, if the image is packed in a sprite sheet then the left top position is probably not (0, 0)

		this._offsetX = map.x;
		this._offsetY = map.y;

Get the size of the image in the sprite sheet, it is posible that the image is scaled.

		this._sizeX = (map.width / 3) | 0;
		this._sizeY = (map.height / 3) | 0;

		this._index = 0;
		this._dt = 500;
	};

The tick function is called each frame.

	this.tick = function (dt) {
		this._dt += dt;
		if (this._dt > 500) {
			this._dt %= 500;

Change the index, there are nine images.

			this._index = (this._index + 1) % 9;

			var map = this.getImage().getMap();

Use the values from the initial map.

			map.width = this._sizeX;
			map.height = this._sizeY;
			map.x = this._offsetX + ((this._index / 3) | 0) * this._sizeX;
			map.y = this._offsetY + (this._index % 3) * this._sizeY;
		}
	};
});

A screenshot of one of the sprites on screen: a sprite