AnimationPreview.js

define([
	"djinn/Game",
	"djinn/assets",
	"djinn/Sprite",
	"djinn/TextView",
	"djinn/utils/viewEffects"
], function (Game, assets, Sprite, TextView, effects) {

	return Game.extend({

		init: function (conf) {
			// Conf
			this._super(conf);
			this.view.backgroundColor = "white";

			// Pull in the assets we need
			assets.load([
				"media/images/seedling.png",
				"media/images/bulb.png",
				"media/images/berry.png"
			]);

			// Create the sprite subject
			var state = "seedling";
			var w = 100;
			var h = 100;
			this.sprite = new Sprite({
				parent: this.view,
				image: "media/images/seedling.png",
				x: 0,
				y: 0,
				width: w,
				height: h,
				animations: {
					"default": {
						frames: [
							[0, 0]
						]
					},
					"put": {
						frameRate: 5,
						frames: [
							[w * 4, 0],
							[w * 3, 0],
							[w * 2, 0],
							[w, 0],
							[0, 0]
						],
						loop: false
					},
					"idle": {
						frameRate: 12,
						frames: [
							[0, h],
							[w, h],
							[w * 2, h],
							[w * 3, h],
							[w * 4, h]
						],
						loop: false
					},
					"grow": {
						frameRate: 8,
						frames: [
							[0, h * 2],
							[w, h * 2],
							[w * 2, h * 2],
							[w * 3, h * 2],
							[w * 4, h * 2]
						],
						loop: false
					},
					"shrink": {
						frameRate: 8,
						frames: [
							[w * 4, h * 2],
							[w * 3, h * 2],
							[w * 2, h * 2],
							[w, h * 2],
							[0, h * 2]
						],
						loop: false
					}
				}
			}).align("center", "center");

			var x = 10;
			var height = TextView.defaults.fontSize = 32;

			// Put
			var putView = new TextView({
				parent: this.view,
				text: "Put",
				x: x,
			}).align("center").on("inputStart", this, function () {
				// Setup
				this.sprite.completeTween();
				this.sprite.opacity = 0;

				// Execute
				this.sprite.playAnimation("put");
				effects.fadeIn(this.sprite, {
					duration: 500
				});
			});

			// Idle
			var idleView = new TextView({
				parent: this.view,
				text: "Idle",
				x: x,
				y: height
			}).align("center").on("inputStart", this, function () {
				this.sprite.playAnimation("idle");
			});

			// Grow
			var growView = new TextView({
				parent: this.view,
				text: "Grow",
				x: x,
				y: height * 2
			}).align("center").on("inputStart", this, function () {
				if (state == "berry") { return; }

				var onAnimationEnd = function () {
					this.sprite.off("animationEnd", this, onAnimationEnd);

					if (state == "seedling") {
						state = "bulb";
						this.sprite.image = "media/images/bulb.png";
					} else {
						state = "berry";
						this.sprite.image = "media/images/berry.png";
					}
					this.sprite.playAnimation("default");
				};

				this.sprite.on("animationEnd", this, onAnimationEnd);
				this.sprite.playAnimation("grow");
			});

			// Shrink
			var shrinkView = new TextView({
				parent: this.view,
				text: "Shrink",
				x: x,
				y: height * 3
			}).align("center").on("inputStart", this, function () {
				if (state == "seedling") { return; }

				if (state == "berry") {
					state = "bulb";
					this.sprite.image = "media/images/bulb.png";
				} else {
					state = "seedling";
					this.sprite.image = "media/images/seedling.png";
				}

				var onAnimationEnd = function () {
					this.sprite.off("animationEnd", this, onAnimationEnd);

					this.sprite.playAnimation("default");
				};

				this.sprite.on("animationEnd", this, onAnimationEnd);
				this.sprite.playAnimation("shrink");
			});
		}

	});

});