xgamejs/src/JS/XNA_Classes/SpriteBatch.js

/**
 * Enables a group of sprites to be drawn using the same settings.
 * @constructor
 * @param {GraphicsDevice} graphicsDevice - The graphics device where sprites will be drawn.
 */
function SpriteBatch(graphicsDevice) {
	"use strict";
	this.ctx = graphicsDevice.canvas.getContext("2d");
}

/**
 * Adds a sprite to a batch of sprites for rendering using the specified texture, position, and source rectangle.
 * @name Draw
 * @function
 * @param {Texture2D} texture - A texture.
 * @param {Vector2} position - The location (in screen coordinates) to draw the sprite.
 * @param {Rectangle} sourceRectangle - A rectangle that specifies (in texels) the source texels from a texture.
 * @param {Number} rotation - Specifies the angle (in radians) to rotate the sprite about its center.
 * @param {Vector2} scale - Scale factor.
 * @param {SpriteEffects} effects - Effects to apply.
 * @memberOf SpriteBatch
 */
SpriteBatch.prototype.Draw = function (texture, position, sourceRectangle, rotation, scale, effects) {
	"use strict";
	/*global SpriteEffects*/
	var self = this,
		flipHorizontally = 1,
		flipVertically = 1,
		aspectRatio = texture.Width() / texture.Height(),
		sourceAspectRatio = sourceRectangle.Width / sourceRectangle.Height,
		textureWidth = texture.Width(),
        posX = 0,
        posY = 0;
	
	//Save the context to restore later
	self.ctx.save();

	//Rotate the image if required
	if (rotation !== 0) {
		self.ctx.translate(Math.floor(position.X + texture.HalfWidth() * scale.X), Math.floor(position.Y + texture.HalfHeight() * scale.Y));
		self.ctx.rotate(rotation * Math.PI / 180);
		posX = -texture.HalfWidth() * scale.X;
		posY = -texture.HalfHeight() * scale.Y;
	} else {
        posX = position.X;
		posY = position.Y;
    }

	//Apply sprite effects if needed
	if (effects === SpriteEffects.FlipHorizontally) {
		flipHorizontally = -1;
	} else if (effects === SpriteEffects.FlipVertically) {
		flipVertically = -1;
	}

	//Scale the image
	self.ctx.scale(scale.X * flipHorizontally, scale.Y * flipVertically);

	if (aspectRatio !== sourceAspectRatio) {
		textureWidth /= aspectRatio;
	}
	
	//Draw the image
	self.ctx.drawImage(texture.Image,
			sourceRectangle.X, sourceRectangle.Y,
			sourceRectangle.Width, sourceRectangle.Height,
			Math.floor(posX) * flipHorizontally / scale.X, Math.floor(posY) * flipVertically / scale.Y,
			textureWidth * flipHorizontally, texture.Height() * flipVertically
		);

	//Restore the canvas context
	self.ctx.restore();
};

/**
 * Adds a string to a batch of sprites for rendering using the specified font, text, position, color and scale.
 * @name DrawString
 * @function
 * @param {String} font - A string representing the font for displaying text (example: "normal bold 20px Helvetica").
 * @param {String} text - A text string.
 * @param {Vector2} position - The location (in screen coordinates) to draw the sprite.
 * @param {String} color - A string representing the color (example: "#FF00F0").
 * @param {Vector2} scale - Scale factor.
 * @memberOf SpriteBatch
 */
SpriteBatch.prototype.DrawString = function (font, text, position, color, scale) {
	"use strict";
	var self = this;
	
	//Save the context to restore later
	self.ctx.save();
	
	//Scale the image
	self.ctx.scale(scale.X, scale.Y);
	
	//Determine the font, color and baseline, and then draw the given text
	self.ctx.font = font;
	self.ctx.fillStyle = color;
	self.ctx.textBaseline = "top";
	self.ctx.fillText(text, position.X, position.Y);
	
	//Restore the canvas context
	self.ctx.restore();
};

/**
 * Draw a given rectangle.
 * @name DrawRectangle
 * @function
 * @param {Rectangle} rectangle - The rectangle to draw.
 * @param {String} lineWidth - the width of the line to be drawn.
 * @param {String} color - A string representing the color (example: "#FF00F0").
 * @memberOf SpriteBatch
 */
SpriteBatch.prototype.DrawRectangle = function (rectangle, lineWidth, color) {
	"use strict";
	var self = this;

	//If the line width is null or undefined set a default value
	if (lineWidth === null || typeof lineWidth === "undefined") {
		lineWidth = "1";
	}
	
	//If the color is null or undefined set a default color (black)
	if (color === null || typeof color === "undefined") {
		color = "#000000";
	}
	
	//Save the context to restore later
	self.ctx.save();

	//Set the line width and the line color
	self.ctx.lineWidth = lineWidth;
	self.ctx.strokeStyle = color;

	//Draw the rectangle
	self.ctx.strokeRect(
		rectangle.X,
		rectangle.Y,
		rectangle.Width,
		rectangle.Height
	);

	//Restore the canvas context
	self.ctx.restore();
};

/**
 * Draw a given segment.
 * @name DrawSegment
 * @function
 * @param {Segment} segment - The segment to draw.
 * @param {String} lineWidth - the width of the line to be drawn.
 * @param {String} color - A string representing the color (example: "#FF00F0").
 * @memberOf SpriteBatch
 */
SpriteBatch.prototype.DrawSegment = function (segment, lineWidth, color) {
	"use strict";
	var self = this;

	//If the line width is null or undefined set a default value
	if (lineWidth === null || typeof lineWidth === "undefined") {
		lineWidth = "1";
	}
	
	//If the color is null or undefined set a default color (black)
	if (color === null || typeof color === "undefined") {
		color = "#000000";
	}
	
	//Save the context to restore later
	self.ctx.save();

	//Set the line width and the line color
	self.ctx.lineWidth = lineWidth;
	self.ctx.strokeStyle = color;

	//Draw the segment
	self.ctx.beginPath();
    self.ctx.moveTo(segment.pointA.X, segment.pointA.Y);
    self.ctx.lineTo(segment.pointB.X, segment.pointB.Y);
    self.ctx.stroke();

	//Restore the canvas context
	self.ctx.restore();
};