forked from sent/waves
1240 lines
44 KiB
TypeScript
1240 lines
44 KiB
TypeScript
/// <reference path="ChangeLinr-0.2.0.ts" />
|
|
/// <reference path="ObjectMakr-0.2.2.ts" />
|
|
/// <reference path="PixelRendr-0.2.0.ts" />
|
|
/// <reference path="QuadsKeepr-0.2.1.ts" />
|
|
/// <reference path="StringFilr-0.2.1.ts" />
|
|
|
|
declare module PixelDrawr {
|
|
/**
|
|
* A typed array of 8-bit unsigned integer values. The contents are initialized
|
|
* to 0. If the requested number of bytes could not be allocated an exception is
|
|
* raised.
|
|
*/
|
|
interface Uint8ClampedArray extends ArrayBufferView {
|
|
[index: number]: number;
|
|
|
|
/**
|
|
* The size in bytes of each element in the array.
|
|
*/
|
|
BYTES_PER_ELEMENT: number;
|
|
|
|
/**
|
|
* The length of the array.
|
|
*/
|
|
length: number;
|
|
|
|
/**
|
|
* Gets the element at the specified index.
|
|
*
|
|
* @param {Number} index The index at which to get the element of the array.
|
|
*/
|
|
get(index: number): number;
|
|
|
|
/**
|
|
* Sets a value or an array of values.
|
|
*
|
|
* @param {Number} index The index of the location to set.
|
|
* @param {Number} value The value to set.
|
|
*/
|
|
set(index: number, value: number): void;
|
|
|
|
/**
|
|
* Sets a value or an array of values.
|
|
*
|
|
* @param {Uint8ClampedArray} array A typed or untyped array of values
|
|
* to set.
|
|
* @param {Number} [offset] The index in the current array at which the
|
|
* values are to be written.
|
|
*/
|
|
set(array: Uint8ClampedArray, offset?: number): void;
|
|
|
|
/**
|
|
* Sets a value or an array of values.
|
|
*
|
|
* @param {Number[]} array A typed or untyped array of values to set.
|
|
* @param {Number} [offset] The index in the current array at which the
|
|
* values are to be written.
|
|
*/
|
|
set(array: number[], offset?: number): void;
|
|
|
|
/**
|
|
* Gets a new Uint8ClampedArray view of the ArrayBuffer Object store for
|
|
* this array, specifying the first and last members of the subarray.
|
|
*
|
|
* @param {Number} begin The index of the beginning of the array.
|
|
* @param {Number} end The index of the end of the array.
|
|
*/
|
|
subarray(begin: number, end?: number): Uint8ClampedArray;
|
|
}
|
|
|
|
var Uint8ClampedArray: {
|
|
prototype: Uint8ClampedArray;
|
|
new (length: number): Uint8ClampedArray;
|
|
new (array: Uint8ClampedArray): Uint8ClampedArray;
|
|
new (array: number[]): Uint8ClampedArray;
|
|
new (buffer: ArrayBuffer, byteOffset?: number, length?: number): Uint8ClampedArray;
|
|
BYTES_PER_ELEMENT: number;
|
|
}
|
|
|
|
export interface IScreenBoundaries {
|
|
top: number;
|
|
right: number;
|
|
bottom: number;
|
|
left: number;
|
|
}
|
|
|
|
export interface IThingCanvases {
|
|
direction: string;
|
|
multiple: boolean;
|
|
middle?: IThingSubCanvas;
|
|
top?: IThingSubCanvas;
|
|
right?: IThingSubCanvas;
|
|
bottom?: IThingSubCanvas;
|
|
left?: IThingSubCanvas;
|
|
topRight?: IThingSubCanvas;
|
|
bottomRight?: IThingSubCanvas;
|
|
bottomLeft?: IThingSubCanvas;
|
|
topLeft?: IThingSubCanvas;
|
|
}
|
|
|
|
export interface IThingSubCanvas {
|
|
"canvas": HTMLCanvasElement;
|
|
"context": CanvasRenderingContext2D;
|
|
}
|
|
|
|
export interface IThing {
|
|
/**
|
|
* The sprite for this Thing to have drawn.
|
|
*/
|
|
sprite: Uint8ClampedArray | PixelRendr.ISpriteMultiple;
|
|
|
|
/**
|
|
* The canvas upon which the Thing's sprite is to be drawn.
|
|
*/
|
|
canvas: HTMLCanvasElement;
|
|
|
|
/**
|
|
* For Things with multiple sprites, the various sprite component canvases.
|
|
*/
|
|
canvases?: IThingCanvases;
|
|
|
|
/**
|
|
* The rendering context used to draw the Thing's sprite on its canvas.
|
|
*/
|
|
context: CanvasRenderingContext2D;
|
|
|
|
/**
|
|
* Whether this shouldn't be drawn (is completely hidden).
|
|
*/
|
|
hidden: boolean;
|
|
|
|
/**
|
|
* How transparent this is, in [0, 1].
|
|
*/
|
|
opacity: number;
|
|
|
|
/**
|
|
* How many sprites this has (1 for regular, 0 or >1 for multiple).
|
|
*/
|
|
numSprites?: number;
|
|
|
|
/**
|
|
* Whether the Thing's sprite should repeat across large canvases.
|
|
*/
|
|
repeat?: boolean;
|
|
|
|
/**
|
|
* How much to expand the Thing's sprite size (by default, 1 for not at all).
|
|
*/
|
|
scale?: number;
|
|
|
|
/**
|
|
* Width in game pixels, equal to width * unitsize.
|
|
*/
|
|
unitwidth?: number;
|
|
|
|
/**
|
|
* Height in game pixels, equal to height * unitsize.
|
|
*/
|
|
unitheight?: number;
|
|
|
|
/**
|
|
* How many pixels wide the output sprite should be.
|
|
*/
|
|
spritewidth: number;
|
|
|
|
/**
|
|
* How many pixels high the output sprite should be.
|
|
*/
|
|
spriteheight: number;
|
|
|
|
/**
|
|
* Sprite width in real-life pixels, equal to spritewidth * scale.
|
|
*/
|
|
spritewidthpixels?: number;
|
|
|
|
/**
|
|
* Sprite height in real-life pixels, equal to spritewidth * scale.
|
|
*/
|
|
spriteheightpixels?: number;
|
|
}
|
|
|
|
export interface IPixelDrawrSettings {
|
|
/**
|
|
* The PixelRendr used for sprite lookups and generation.
|
|
*/
|
|
PixelRender: PixelRendr.IPixelRendr;
|
|
|
|
/**
|
|
* The bounds of the screen for bounds checking (typically a MapScreenr).
|
|
*/
|
|
MapScreener: IScreenBoundaries;
|
|
|
|
/**
|
|
* A Function to create a canvas of a given width and height.
|
|
*/
|
|
createCanvas: (width: number, height: number) => HTMLCanvasElement;
|
|
|
|
/**
|
|
* How much to scale canvases on creation (by default, 1 for not at all).
|
|
*/
|
|
unitsize?: number;
|
|
|
|
/**
|
|
* Whether refills should skip redrawing the background each time.
|
|
*/
|
|
noRefill?: boolean;
|
|
|
|
/**
|
|
* The maximum size of a SpriteMultiple to pre-render (by default, 0 for
|
|
* never pre-rendering).
|
|
*/
|
|
spriteCacheCutoff?: number;
|
|
|
|
/**
|
|
* The names of groups to refill (only used if using Quadrant refilling).
|
|
*/
|
|
groupNames?: string[];
|
|
|
|
/**
|
|
* How often to draw frames (by default, 1 for every time).
|
|
*/
|
|
framerateSkip?: number;
|
|
|
|
/**
|
|
* How to generat ekeys to retrieve sprites from the PixelRendr (by default,
|
|
* Object.toString).
|
|
*/
|
|
generateObjectKey?: (thing: IThing) => string;
|
|
|
|
/**
|
|
* An arbitrarily small minimum opacity for a Thing to be considered not
|
|
* completely transparent (by default, .007).
|
|
*/
|
|
epsilon?: number;
|
|
|
|
/**
|
|
* The attribute name for a Thing's width (by default, "width").
|
|
*/
|
|
keyWidth?: string;
|
|
|
|
/**
|
|
* The attribute name for a Thing's height (by default, "height").
|
|
*/
|
|
keyHeight?: string;
|
|
|
|
/**
|
|
* The attribute name for a Thing's top (by default, "top").
|
|
*/
|
|
keyTop?: string;
|
|
|
|
/**
|
|
* The attribute name for a Thing's right (by default, "right").
|
|
*/
|
|
keyRight?: string;
|
|
|
|
/**
|
|
* The attribute name for a Thing's bottom (by default, "bottom").
|
|
*/
|
|
keyBottom?: string;
|
|
|
|
/**
|
|
* The attribute name for a Thing's left (by default, "left").
|
|
*/
|
|
keyLeft?: string;
|
|
|
|
/**
|
|
* The attribute name for a Thing's horizontal offest (by default, ignored).
|
|
*/
|
|
keyOffsetX?: string;
|
|
|
|
/**
|
|
* The attribute name for a Thing's vertical offset(by default, ignored).
|
|
*/
|
|
keyOffsetY?: string;
|
|
}
|
|
|
|
export interface IPixelDrawr {
|
|
getFramerateSkip(): number;
|
|
getThingArray(): IThing[][];
|
|
getCanvas(): HTMLCanvasElement;
|
|
getContext(): CanvasRenderingContext2D;
|
|
getBackgroundCanvas(): HTMLCanvasElement;
|
|
getBackgroundContext(): CanvasRenderingContext2D;
|
|
getNoRefill(): boolean;
|
|
getEpsilon(): number;
|
|
setFramerateSkip(framerateSkip: number): void;
|
|
setThingArrays(thingArrays: IThing[][]): void;
|
|
setCanvas(canvas: HTMLCanvasElement): void;
|
|
setNoRefill(noRefill: boolean): void;
|
|
setEpsilon(epsilon: number): void;
|
|
resetBackground(): void;
|
|
setBackground(fillStyle: any): void;
|
|
drawBackground(): void;
|
|
setThingSprite(thing: IThing): void;
|
|
refillThingCanvasSingle(thing: IThing): void;
|
|
refillThingCanvasMultiple(thing: IThing): void;
|
|
refillGlobalCanvas(): void;
|
|
refillThingArray(array: IThing[]): void;
|
|
refillQuadrantGroups(groups: QuadsKeepr.IQuadrantRow[]): void;
|
|
refillQuadrants(quadrants: QuadsKeepr.IQuadrant[]): void;
|
|
refillQuadrant(quadrant: QuadsKeepr.IQuadrant): void;
|
|
drawThingOnContext(context: CanvasRenderingContext2D, thing: IThing): void;
|
|
drawThingOnQuadrant(thing: IThing, quadrant: QuadsKeepr.IQuadrant): void;
|
|
drawThingOnContextSingle(
|
|
context: CanvasRenderingContext2D,
|
|
canvas: HTMLCanvasElement,
|
|
thing: IThing,
|
|
left: number,
|
|
top: number): void;
|
|
drawThingOnContextMultiple(
|
|
context: CanvasRenderingContext2D,
|
|
canvases: IThingCanvases,
|
|
thing: IThing,
|
|
left: number,
|
|
top: number
|
|
): void;
|
|
}
|
|
}
|
|
|
|
|
|
module PixelDrawr {
|
|
"use strict";
|
|
|
|
/**
|
|
* A front-end to PixelRendr to automate drawing mass amounts of sprites to a
|
|
* primary canvas. A PixelRendr keeps track of sprite sources, while a
|
|
* MapScreenr maintains boundary information on the screen. Global screen
|
|
* refills may be done by drawing every Thing in the thingArrays, or by
|
|
* Quadrants as a form of dirty rectangles.
|
|
*/
|
|
export class PixelDrawr implements IPixelDrawr {
|
|
/**
|
|
* A PixelRendr used to obtain raw sprite data and canvases.
|
|
*/
|
|
private PixelRender: PixelRendr.IPixelRendr;
|
|
|
|
/**
|
|
* The bounds of the screen for bounds checking (often a MapScreenr).
|
|
*/
|
|
private MapScreener: IScreenBoundaries;
|
|
|
|
/**
|
|
* The canvas element each Thing is to be drawn on.
|
|
*/
|
|
private canvas: HTMLCanvasElement;
|
|
|
|
/**
|
|
* The 2D canvas context associated with the canvas.
|
|
*/
|
|
private context: CanvasRenderingContext2D;
|
|
|
|
/**
|
|
* A separate canvas that keeps the background of the scene.
|
|
*/
|
|
private backgroundCanvas: HTMLCanvasElement;
|
|
|
|
/**
|
|
* The 2D canvas context associated with the background canvas.
|
|
*/
|
|
private backgroundContext: CanvasRenderingContext2D;
|
|
|
|
/**
|
|
* Arrays of Thing[]s that are to be drawn in each refill.
|
|
*/
|
|
private thingArrays: IThing[][];
|
|
|
|
/**
|
|
* Utility Function to create a canvas.
|
|
*/
|
|
private createCanvas: (width: number, height: number) => HTMLCanvasElement;
|
|
|
|
/**
|
|
* How much to scale canvases on creation.
|
|
*/
|
|
private unitsize: number;
|
|
|
|
/**
|
|
* Utility Function to generate a class key for a Thing.
|
|
*/
|
|
private generateObjectKey: (thing: IThing) => string;
|
|
|
|
/**
|
|
* The maximum size of a SpriteMultiple to pre-render.
|
|
*/
|
|
private spriteCacheCutoff: number;
|
|
|
|
/**
|
|
* Whether refills should skip redrawing the background each time.
|
|
*/
|
|
private noRefill: boolean;
|
|
|
|
/**
|
|
* For refillQuadrant, an Array of String names to refill (bottom-to-top).
|
|
*/
|
|
private groupNames: string[];
|
|
|
|
/**
|
|
* How often the screen redraws (1 for always, 2 for every other call, etc).
|
|
*/
|
|
private framerateSkip: number;
|
|
|
|
/**
|
|
* How many frames have been drawn so far.
|
|
*/
|
|
private framesDrawn: number;
|
|
|
|
/**
|
|
* An arbitrarily small minimum for opacity to be completely transparent.
|
|
*/
|
|
private epsilon: number;
|
|
|
|
/**
|
|
* String key under which Things store their height.
|
|
*/
|
|
private keyHeight: string;
|
|
|
|
/**
|
|
* String key under which Things store their width.
|
|
*/
|
|
private keyWidth: string;
|
|
|
|
/**
|
|
* String key under which Things store their top.
|
|
*/
|
|
private keyTop: string;
|
|
|
|
/**
|
|
* String key under which Things store their right.
|
|
*/
|
|
private keyRight: string;
|
|
|
|
/**
|
|
* String key under which Things store their bottom.
|
|
*/
|
|
private keyBottom: string;
|
|
|
|
/**
|
|
* String key under which Things store their left.
|
|
*/
|
|
private keyLeft: string;
|
|
|
|
/**
|
|
* String key under which Things store their horizontal offset.
|
|
*/
|
|
private keyOffsetX: string;
|
|
|
|
/**
|
|
* String key under which Things store their vertical offset.
|
|
*/
|
|
private keyOffsetY: string;
|
|
|
|
/**
|
|
* @param {IPixelDrawrSettings} settings
|
|
*/
|
|
constructor(settings: IPixelDrawrSettings) {
|
|
if (!settings) {
|
|
throw new Error("No settings object given to PixelDrawr.");
|
|
}
|
|
if (typeof settings.PixelRender === "undefined") {
|
|
throw new Error("No PixelRender given to PixelDrawr.");
|
|
}
|
|
if (typeof settings.MapScreener === "undefined") {
|
|
throw new Error("No MapScreener given to PixelDrawr.");
|
|
}
|
|
if (typeof settings.createCanvas === "undefined") {
|
|
throw new Error("No createCanvas given to PixelDrawr.");
|
|
}
|
|
|
|
this.PixelRender = settings.PixelRender;
|
|
this.MapScreener = settings.MapScreener;
|
|
this.createCanvas = settings.createCanvas;
|
|
|
|
this.unitsize = settings.unitsize || 1;
|
|
this.noRefill = settings.noRefill;
|
|
this.spriteCacheCutoff = settings.spriteCacheCutoff || 0;
|
|
this.groupNames = settings.groupNames;
|
|
this.framerateSkip = settings.framerateSkip || 1;
|
|
this.framesDrawn = 0;
|
|
this.epsilon = settings.epsilon || .007;
|
|
|
|
this.keyWidth = settings.keyWidth || "width";
|
|
this.keyHeight = settings.keyHeight || "height";
|
|
this.keyTop = settings.keyTop || "top";
|
|
this.keyRight = settings.keyRight || "right";
|
|
this.keyBottom = settings.keyBottom || "bottom";
|
|
this.keyLeft = settings.keyLeft || "left";
|
|
this.keyOffsetX = settings.keyOffsetX;
|
|
this.keyOffsetY = settings.keyOffsetY;
|
|
|
|
this.generateObjectKey = settings.generateObjectKey || function (thing: IThing): string {
|
|
return thing.toString();
|
|
};
|
|
|
|
this.resetBackground();
|
|
}
|
|
|
|
|
|
/* Simple gets
|
|
*/
|
|
|
|
/**
|
|
* @return {Number} How often refill calls should be skipped.
|
|
*/
|
|
getFramerateSkip(): number {
|
|
return this.framerateSkip;
|
|
}
|
|
|
|
/**
|
|
* @return {Array[]} The Arrays to be redrawn during refill calls.
|
|
*/
|
|
getThingArray(): IThing[][] {
|
|
return this.thingArrays;
|
|
}
|
|
|
|
/**
|
|
* @return {HTMLCanvasElement} The canvas element each Thing is to drawn on.
|
|
*/
|
|
getCanvas(): HTMLCanvasElement {
|
|
return this.canvas;
|
|
}
|
|
|
|
/**
|
|
* @return {CanvasRenderingContext2D} The 2D canvas context associated with
|
|
* the canvas.
|
|
*/
|
|
getContext(): CanvasRenderingContext2D {
|
|
return this.context;
|
|
}
|
|
|
|
/**
|
|
* @return {HTMLCanvasElement} The canvas element used for the background.
|
|
*/
|
|
getBackgroundCanvas(): HTMLCanvasElement {
|
|
return this.backgroundCanvas;
|
|
}
|
|
|
|
/**
|
|
* @return {CanvasRenderingContext2D} The 2D canvas context associated with
|
|
* the background canvas.
|
|
*/
|
|
getBackgroundContext(): CanvasRenderingContext2D {
|
|
return this.backgroundContext;
|
|
}
|
|
|
|
/**
|
|
* @return {Boolean} Whether refills should skip redrawing the background
|
|
* each time.
|
|
*/
|
|
getNoRefill(): boolean {
|
|
return this.noRefill;
|
|
}
|
|
|
|
/**
|
|
* @return {Number} The minimum opacity that will be drawn.
|
|
*/
|
|
getEpsilon(): number {
|
|
return this.epsilon;
|
|
}
|
|
|
|
|
|
/* Simple sets
|
|
*/
|
|
|
|
/**
|
|
* @param {Number} framerateSkip How often refill calls should be skipped.
|
|
*/
|
|
setFramerateSkip(framerateSkip: number): void {
|
|
this.framerateSkip = framerateSkip;
|
|
}
|
|
|
|
/**
|
|
* @param {Array[]} thingArrays The Arrays to be redrawn during refill calls.
|
|
*/
|
|
setThingArrays(thingArrays: IThing[][]): void {
|
|
this.thingArrays = thingArrays;
|
|
}
|
|
|
|
/**
|
|
* Sets the currently drawn canvas and context, and recreates
|
|
* drawThingOnContextBound.
|
|
*
|
|
* @param {HTMLCanvasElement} canvas The new primary canvas to be used.
|
|
*/
|
|
setCanvas(canvas: HTMLCanvasElement): void {
|
|
this.canvas = canvas;
|
|
this.context = <CanvasRenderingContext2D>canvas.getContext("2d");
|
|
}
|
|
|
|
/**
|
|
* @param {Boolean} noRefill Whether refills should now skip redrawing the
|
|
* background each time.
|
|
*/
|
|
setNoRefill(noRefill: boolean): void {
|
|
this.noRefill = noRefill;
|
|
}
|
|
|
|
/**
|
|
* @param {Number} The minimum opacity that will be drawn.
|
|
*/
|
|
setEpsilon(epsilon: number): void {
|
|
this.epsilon = epsilon;
|
|
}
|
|
|
|
|
|
/* Background manipulations
|
|
*/
|
|
|
|
/**
|
|
* Creates a new canvas the size of MapScreener and sets the background
|
|
* canvas to it, then recreates backgroundContext.
|
|
*/
|
|
resetBackground(): void {
|
|
this.backgroundCanvas = this.createCanvas(this.MapScreener[this.keyWidth], this.MapScreener[this.keyHeight]);
|
|
this.backgroundContext = <CanvasRenderingContext2D>this.backgroundCanvas.getContext("2d");
|
|
}
|
|
|
|
/**
|
|
* Refills the background canvas with a new fillStyle.
|
|
*
|
|
* @param {Mixed} fillStyle The new fillStyle for the background context.
|
|
*/
|
|
setBackground(fillStyle: any): void {
|
|
this.backgroundContext.fillStyle = fillStyle;
|
|
this.backgroundContext.fillRect(0, 0, this.MapScreener[this.keyWidth], this.MapScreener[this.keyHeight]);
|
|
}
|
|
|
|
/**
|
|
* Draws the background canvas onto the main canvas' context.
|
|
*/
|
|
drawBackground(): void {
|
|
this.context.drawImage(this.backgroundCanvas, 0, 0);
|
|
}
|
|
|
|
|
|
/* Core rendering
|
|
*/
|
|
|
|
/**
|
|
* Goes through all the motions of finding and parsing a Thing's sprite.
|
|
* This should be called whenever the sprite's appearance changes.
|
|
*
|
|
* @param {Thing} thing A Thing whose sprite must be updated.
|
|
* @return {Self}
|
|
*/
|
|
setThingSprite(thing: IThing): void {
|
|
// If it's set as hidden, don't bother updating it
|
|
if (thing.hidden) {
|
|
return;
|
|
}
|
|
|
|
// PixelRender does most of the work in fetching the rendered sprite
|
|
thing.sprite = this.PixelRender.decode(this.generateObjectKey(thing), thing);
|
|
|
|
// To do: remove dependency on .numSprites
|
|
// For now, it's used to know whether it's had its sprite set, but
|
|
// wouldn't physically having a .sprite do that?
|
|
if (thing.sprite.constructor === PixelRendr.SpriteMultiple) {
|
|
thing.numSprites = 0;
|
|
this.refillThingCanvasMultiple(thing);
|
|
} else {
|
|
thing.numSprites = 1;
|
|
this.refillThingCanvasSingle(thing);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Simply draws a thing's sprite to its canvas by getting and setting
|
|
* a canvas::imageData object via context.getImageData(...).
|
|
*
|
|
* @param {Thing} thing A Thing whose canvas must be updated.
|
|
*/
|
|
refillThingCanvasSingle(thing: IThing): void {
|
|
// Don't draw small Things.
|
|
if (<any>thing[this.keyWidth] < 1 || <any>thing[this.keyHeight] < 1) {
|
|
return;
|
|
}
|
|
|
|
// Retrieve the imageData from the Thing's canvas & renderingContext
|
|
var canvas: HTMLCanvasElement = thing.canvas,
|
|
context: CanvasRenderingContext2D = thing.context,
|
|
imageData: ImageData = context.getImageData(0, 0, canvas[this.keyWidth], canvas[this.keyHeight]);
|
|
|
|
// Copy the thing's sprite to that imageData and into the contextz
|
|
this.PixelRender.memcpyU8(<Uint8ClampedArray>thing.sprite, imageData.data);
|
|
context.putImageData(imageData, 0, 0);
|
|
}
|
|
|
|
/**
|
|
* For SpriteMultiples, this copies the sprite information for each
|
|
* sub-sprite into its own canvas, sets thing.sprites, then draws the newly
|
|
* rendered information onto the thing's canvas.
|
|
*
|
|
* @param {Thing} thing A Thing whose canvas and sprites must be updated.
|
|
*/
|
|
refillThingCanvasMultiple(thing: IThing): void {
|
|
if (thing[this.keyWidth] < 1 || thing[this.keyHeight] < 1) {
|
|
return;
|
|
}
|
|
|
|
var spritesRaw: PixelRendr.SpriteMultiple = <PixelRendr.SpriteMultiple>thing.sprite,
|
|
canvases: any = thing.canvases = {
|
|
"direction": spritesRaw.direction,
|
|
"multiple": true
|
|
},
|
|
canvas: HTMLCanvasElement,
|
|
context: CanvasRenderingContext2D,
|
|
imageData: ImageData,
|
|
i: string;
|
|
|
|
thing.numSprites = 1;
|
|
|
|
for (i in spritesRaw.sprites) {
|
|
if (!spritesRaw.sprites.hasOwnProperty(i)) {
|
|
continue;
|
|
}
|
|
|
|
// Make a new sprite for this individual component
|
|
canvas = this.createCanvas(thing.spritewidth * this.unitsize, thing.spriteheight * this.unitsize);
|
|
context = <CanvasRenderingContext2D>canvas.getContext("2d");
|
|
|
|
// Copy over this sprite's information the same way as refillThingCanvas
|
|
imageData = context.getImageData(0, 0, canvas[this.keyWidth], canvas[this.keyHeight]);
|
|
this.PixelRender.memcpyU8(spritesRaw.sprites[i], imageData.data);
|
|
context.putImageData(imageData, 0, 0);
|
|
|
|
// Record the canvas and context in thing.sprites
|
|
canvases[i] = {
|
|
"canvas": canvas,
|
|
"context": context
|
|
};
|
|
thing.numSprites += 1;
|
|
}
|
|
|
|
// Only pre-render multiple sprites if they're below the cutoff
|
|
if (thing[this.keyWidth] * thing[this.keyHeight] < this.spriteCacheCutoff) {
|
|
thing.canvas[this.keyWidth] = thing[this.keyWidth] * this.unitsize;
|
|
thing.canvas[this.keyHeight] = thing[this.keyHeight] * this.unitsize;
|
|
this.drawThingOnContextMultiple(thing.context, thing.canvases, thing, 0, 0);
|
|
} else {
|
|
thing.canvas[this.keyWidth] = thing.canvas[this.keyHeight] = 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* Core drawing
|
|
*/
|
|
|
|
/**
|
|
* Called every upkeep to refill the entire main canvas. All Thing arrays
|
|
* are made to call this.refillThingArray in order.
|
|
*/
|
|
refillGlobalCanvas(): void {
|
|
this.framesDrawn += 1;
|
|
if (this.framesDrawn % this.framerateSkip !== 0) {
|
|
return;
|
|
}
|
|
|
|
if (!this.noRefill) {
|
|
this.drawBackground();
|
|
}
|
|
|
|
for (var i: number = 0; i < this.thingArrays.length; i += 1) {
|
|
this.refillThingArray(this.thingArrays[i]);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Calls drawThingOnContext on each Thing in the Array.
|
|
*
|
|
* @param {Thing[]} array A listing of Things to be drawn onto the canvas.
|
|
*/
|
|
refillThingArray(array: IThing[]): void {
|
|
for (var i: number = 0; i < array.length; i += 1) {
|
|
this.drawThingOnContext(this.context, array[i]);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Refills the main canvas by calling refillQuadrants on each Quadrant in
|
|
* the groups.
|
|
*
|
|
* @param {QuadrantRow[]} groups QuadrantRows (or QuadrantCols) to be
|
|
* redrawn to the canvas.
|
|
*/
|
|
refillQuadrantGroups(groups: QuadsKeepr.IQuadrantRow[]): void {
|
|
var i: number;
|
|
|
|
this.framesDrawn += 1;
|
|
if (this.framesDrawn % this.framerateSkip !== 0) {
|
|
return;
|
|
}
|
|
|
|
for (i = 0; i < groups.length; i += 1) {
|
|
this.refillQuadrants(groups[i].quadrants);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Refills (part of) the main canvas by drawing each Quadrant's canvas onto
|
|
* it.
|
|
*
|
|
* @param {Quadrant[]} quadrants The Quadrants to have their canvases
|
|
* refilled.
|
|
*/
|
|
refillQuadrants(quadrants: QuadsKeepr.IQuadrant[]): void {
|
|
var quadrant: QuadsKeepr.IQuadrant,
|
|
i: number;
|
|
|
|
for (i = 0; i < quadrants.length; i += 1) {
|
|
quadrant = quadrants[i];
|
|
if (
|
|
quadrant.changed
|
|
&& quadrant[this.keyTop] < this.MapScreener[this.keyHeight]
|
|
&& quadrant[this.keyRight] > 0
|
|
&& quadrant[this.keyBottom] > 0
|
|
&& quadrant[this.keyLeft] < this.MapScreener[this.keyWidth]) {
|
|
this.refillQuadrant(quadrant);
|
|
this.context.drawImage(quadrant.canvas, quadrant[this.keyLeft], quadrant[this.keyTop]);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Refills a Quadrants's canvas by resetting its background and drawing all
|
|
* its Things onto it.
|
|
*
|
|
* @param {Quadrant} quadrant A quadrant whose Things must be drawn onto
|
|
* its canvas.
|
|
*/
|
|
refillQuadrant(quadrant: QuadsKeepr.IQuadrant): void {
|
|
var group: IThing[],
|
|
i: number,
|
|
j: number;
|
|
|
|
// This may be what's causing such bad performance.
|
|
if (!this.noRefill) {
|
|
quadrant.context.drawImage(
|
|
this.backgroundCanvas,
|
|
quadrant[this.keyLeft],
|
|
quadrant[this.keyTop],
|
|
quadrant.canvas[this.keyWidth],
|
|
quadrant.canvas[this.keyHeight],
|
|
0,
|
|
0,
|
|
quadrant.canvas[this.keyWidth],
|
|
quadrant.canvas[this.keyHeight]);
|
|
}
|
|
|
|
for (i = this.groupNames.length - 1; i >= 0; i -= 1) {
|
|
group = quadrant.things[this.groupNames[i]];
|
|
|
|
for (j = 0; j < group.length; j += 1) {
|
|
this.drawThingOnQuadrant(group[j], quadrant);
|
|
}
|
|
}
|
|
|
|
quadrant.changed = false;
|
|
}
|
|
|
|
/**
|
|
* General Function to draw a Thing onto a context. This will call
|
|
* drawThingOnContext[Single/Multiple] with more arguments
|
|
*
|
|
* @param {CanvasRenderingContext2D} context The context to have the Thing
|
|
* drawn on it.
|
|
* @param {Thing} thing The Thing to be drawn onto the context.
|
|
*/
|
|
drawThingOnContext(context: CanvasRenderingContext2D, thing: IThing): void {
|
|
if (
|
|
thing.hidden
|
|
|| thing.opacity < this.epsilon
|
|
|| thing[this.keyHeight] < 1
|
|
|| thing[this.keyWidth] < 1
|
|
|| this.getTop(thing) > this.MapScreener[this.keyHeight]
|
|
|| this.getRight(thing) < 0
|
|
|| this.getBottom(thing) < 0
|
|
|| this.getLeft(thing) > this.MapScreener[this.keyWidth]) {
|
|
return;
|
|
}
|
|
|
|
// If Thing hasn't had a sprite yet (previously hidden), do that first
|
|
if (typeof thing.numSprites === "undefined") {
|
|
this.setThingSprite(thing);
|
|
}
|
|
|
|
// Whether or not the thing has a regular sprite or a SpriteMultiple,
|
|
// that sprite has already been drawn to the thing's canvas, unless it's
|
|
// above the cutoff, in which case that logic happens now.
|
|
if (thing.canvas[this.keyWidth] > 0) {
|
|
this.drawThingOnContextSingle(context, thing.canvas, thing, this.getLeft(thing), this.getTop(thing));
|
|
} else {
|
|
this.drawThingOnContextMultiple(context, thing.canvases, thing, this.getLeft(thing), this.getTop(thing));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Draws a Thing onto a quadrant's canvas. This is a simple wrapper around
|
|
* drawThingOnContextSingle/Multiple that also bounds checks.
|
|
*
|
|
* @param {Thing} thing
|
|
* @param {Quadrant} quadrant
|
|
*/
|
|
drawThingOnQuadrant(thing: IThing, quadrant: QuadsKeepr.IQuadrant): void {
|
|
if (
|
|
thing.hidden
|
|
|| this.getTop(thing) > quadrant[this.keyBottom]
|
|
|| this.getRight(thing) < quadrant[this.keyLeft]
|
|
|| this.getBottom(thing) < quadrant[this.keyTop]
|
|
|| this.getLeft(thing) > quadrant[this.keyRight]
|
|
|| thing.opacity < this.epsilon) {
|
|
return;
|
|
}
|
|
|
|
// If there's just one sprite, it's pretty simple
|
|
if (thing.numSprites === 1) {
|
|
return this.drawThingOnContextSingle(
|
|
quadrant.context,
|
|
thing.canvas,
|
|
thing,
|
|
this.getLeft(thing) - quadrant[this.keyLeft],
|
|
this.getTop(thing) - quadrant[this.keyTop]);
|
|
} else {
|
|
// For multiple sprites, some calculations will be needed
|
|
return this.drawThingOnContextMultiple(
|
|
quadrant.context,
|
|
thing.canvases,
|
|
thing,
|
|
this.getLeft(thing) - quadrant[this.keyLeft],
|
|
this.getTop(thing) - quadrant[this.keyTop]);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Draws a Thing's single canvas onto a context, commonly called by
|
|
* this.drawThingOnContext.
|
|
*
|
|
* @param {CanvasRenderingContext2D} context The context being drawn on.
|
|
* @param {Canvas} canvas The Thing's canvas being drawn onto the context.
|
|
* @param {Thing} thing The Thing whose canvas is being drawn.
|
|
* @param {Number} left The x-position to draw the Thing from.
|
|
* @param {Number} top The y-position to draw the Thing from.
|
|
*/
|
|
drawThingOnContextSingle(
|
|
context: CanvasRenderingContext2D,
|
|
canvas: HTMLCanvasElement,
|
|
thing: IThing,
|
|
left: number,
|
|
top: number): void {
|
|
// If the sprite should repeat, use the pattern equivalent
|
|
if (thing.repeat) {
|
|
this.drawPatternOnContext(context, canvas, left, top, thing.unitwidth, thing.unitheight, thing.opacity || 1);
|
|
} else if (thing.opacity !== 1) {
|
|
// Opacities not equal to one must reset the context afterwards
|
|
context.globalAlpha = thing.opacity;
|
|
context.drawImage(canvas, left, top, canvas.width * thing.scale, canvas.height * thing.scale);
|
|
context.globalAlpha = 1;
|
|
} else {
|
|
context.drawImage(canvas, left, top, canvas.width * thing.scale, canvas.height * thing.scale);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Draws a Thing's multiple canvases onto a context, typicall called by
|
|
* drawThingOnContext. A variety of cases for canvases is allowed:
|
|
* "vertical", "horizontal", and "corners".
|
|
*
|
|
* @param {CanvasRenderingContext2D} context The context being drawn on.
|
|
* @param {Canvas} canvases The canvases being drawn onto the context.
|
|
* @param {Thing} thing The Thing whose canvas is being drawn.
|
|
* @param {Number} left The x-position to draw the Thing from.
|
|
* @param {Number} top The y-position to draw the Thing from.
|
|
*/
|
|
drawThingOnContextMultiple(
|
|
context: CanvasRenderingContext2D,
|
|
canvases: IThingCanvases,
|
|
thing: IThing,
|
|
left: number,
|
|
top: number): void {
|
|
var sprite: PixelRendr.SpriteMultiple = <PixelRendr.SpriteMultiple>thing.sprite,
|
|
topreal: number = top,
|
|
leftreal: number = left,
|
|
rightreal: number = left + thing.unitwidth,
|
|
bottomreal: number = top + thing.unitheight,
|
|
widthreal: number = thing.unitwidth,
|
|
heightreal: number = thing.unitheight,
|
|
spritewidthpixels: number = thing.spritewidthpixels,
|
|
spriteheightpixels: number = thing.spriteheightpixels,
|
|
widthdrawn: number = Math.min(widthreal, spritewidthpixels),
|
|
heightdrawn: number = Math.min(heightreal, spriteheightpixels),
|
|
opacity: number = thing.opacity,
|
|
diffhoriz: number,
|
|
diffvert: number,
|
|
canvasref: IThingSubCanvas;
|
|
|
|
switch (canvases.direction) {
|
|
// Vertical sprites may have 'top', 'bottom', 'middle'
|
|
case "vertical":
|
|
// If there's a bottom, draw that and push up bottomreal
|
|
if ((canvasref = <IThingSubCanvas>canvases[this.keyBottom])) {
|
|
diffvert = sprite.bottomheight ? sprite.bottomheight * this.unitsize : spriteheightpixels;
|
|
this.drawPatternOnContext(
|
|
context,
|
|
canvasref.canvas,
|
|
leftreal,
|
|
bottomreal - diffvert,
|
|
widthreal,
|
|
heightdrawn,
|
|
opacity);
|
|
bottomreal -= diffvert;
|
|
heightreal -= diffvert;
|
|
}
|
|
// If there's a top, draw that and push down topreal
|
|
if ((canvasref = <IThingSubCanvas>canvases[this.keyTop])) {
|
|
diffvert = sprite.topheight ? sprite.topheight * this.unitsize : spriteheightpixels;
|
|
this.drawPatternOnContext(context, canvasref.canvas, leftreal, topreal, widthreal, heightdrawn, opacity);
|
|
topreal += diffvert;
|
|
heightreal -= diffvert;
|
|
}
|
|
break;
|
|
// Horizontal sprites may have 'left', 'right', 'middle'
|
|
case "horizontal":
|
|
// If there's a left, draw that and push forward leftreal
|
|
if ((canvasref = canvases[this.keyLeft])) {
|
|
diffhoriz = sprite.leftwidth ? sprite.leftwidth * this.unitsize : spritewidthpixels;
|
|
this.drawPatternOnContext(context, canvasref.canvas, leftreal, topreal, widthdrawn, heightreal, opacity);
|
|
leftreal += diffhoriz;
|
|
widthreal -= diffhoriz;
|
|
}
|
|
// If there's a right, draw that and push back rightreal
|
|
if ((canvasref = canvases[this.keyRight])) {
|
|
diffhoriz = sprite.rightwidth ? sprite.rightwidth * this.unitsize : spritewidthpixels;
|
|
this.drawPatternOnContext(
|
|
context,
|
|
canvasref.canvas,
|
|
rightreal - diffhoriz,
|
|
topreal,
|
|
widthdrawn,
|
|
heightreal,
|
|
opacity);
|
|
rightreal -= diffhoriz;
|
|
widthreal -= diffhoriz;
|
|
}
|
|
break;
|
|
// Corner (vertical + horizontal + corner) sprites must have corners
|
|
// in 'topRight', 'bottomRight', 'bottomLeft', and 'topLeft'.
|
|
case "corners":
|
|
// topLeft, left, bottomLeft
|
|
diffvert = sprite.topheight ? sprite.topheight * this.unitsize : spriteheightpixels;
|
|
diffhoriz = sprite.leftwidth ? sprite.leftwidth * this.unitsize : spritewidthpixels;
|
|
this.drawPatternOnContext(
|
|
context,
|
|
canvases.topLeft.canvas,
|
|
leftreal,
|
|
topreal,
|
|
widthdrawn,
|
|
heightdrawn,
|
|
opacity);
|
|
this.drawPatternOnContext(
|
|
context,
|
|
canvases[this.keyLeft].canvas,
|
|
leftreal,
|
|
topreal + diffvert,
|
|
widthdrawn,
|
|
heightreal - diffvert * 2,
|
|
opacity);
|
|
this.drawPatternOnContext(
|
|
context,
|
|
canvases.bottomLeft.canvas,
|
|
leftreal,
|
|
bottomreal - diffvert,
|
|
widthdrawn,
|
|
heightdrawn,
|
|
opacity);
|
|
leftreal += diffhoriz;
|
|
widthreal -= diffhoriz;
|
|
|
|
// top, topRight
|
|
diffhoriz = sprite.rightwidth ? sprite.rightwidth * this.unitsize : spritewidthpixels;
|
|
this.drawPatternOnContext(
|
|
context,
|
|
canvases[this.keyTop].canvas,
|
|
leftreal,
|
|
topreal,
|
|
widthreal - diffhoriz,
|
|
heightdrawn,
|
|
opacity);
|
|
this.drawPatternOnContext(
|
|
context,
|
|
canvases.topRight.canvas,
|
|
rightreal - diffhoriz,
|
|
topreal,
|
|
widthdrawn,
|
|
heightdrawn,
|
|
opacity);
|
|
topreal += diffvert;
|
|
heightreal -= diffvert;
|
|
|
|
// right, bottomRight, bottom
|
|
diffvert = sprite.bottomheight ? sprite.bottomheight * this.unitsize : spriteheightpixels;
|
|
this.drawPatternOnContext(
|
|
context,
|
|
canvases[this.keyRight].canvas,
|
|
rightreal - diffhoriz,
|
|
topreal,
|
|
widthdrawn,
|
|
heightreal - diffvert,
|
|
opacity);
|
|
this.drawPatternOnContext(
|
|
context,
|
|
canvases.bottomRight.canvas,
|
|
rightreal - diffhoriz,
|
|
bottomreal - diffvert,
|
|
widthdrawn,
|
|
heightdrawn,
|
|
opacity);
|
|
this.drawPatternOnContext(
|
|
context,
|
|
canvases[this.keyBottom].canvas,
|
|
leftreal,
|
|
bottomreal - diffvert,
|
|
widthreal - diffhoriz,
|
|
heightdrawn,
|
|
opacity);
|
|
rightreal -= diffhoriz;
|
|
widthreal -= diffhoriz;
|
|
bottomreal -= diffvert;
|
|
heightreal -= diffvert;
|
|
break;
|
|
default:
|
|
throw new Error("Unknown or missing direction given in SpriteMultiple.");
|
|
}
|
|
|
|
// If there's still room, draw the actual canvas
|
|
if ((canvasref = canvases.middle) && topreal < bottomreal && leftreal < rightreal) {
|
|
if (sprite.middleStretch) {
|
|
context.globalAlpha = opacity;
|
|
context.drawImage(canvasref.canvas, leftreal, topreal, widthreal, heightreal);
|
|
context.globalAlpha = 1;
|
|
} else {
|
|
this.drawPatternOnContext(context, canvasref.canvas, leftreal, topreal, widthreal, heightreal, opacity);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Position utilities (which should almost always be optimized)
|
|
*/
|
|
|
|
/**
|
|
* @param {Thing} thing
|
|
* @return {Number} The Thing's top position, accounting for vertical
|
|
* offset if needed.
|
|
*/
|
|
private getTop(thing: IThing): number {
|
|
if (this.keyOffsetY) {
|
|
return thing[this.keyTop] + thing[this.keyOffsetY];
|
|
} else {
|
|
return thing[this.keyTop];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {Thing} thing
|
|
* @return {Number} The Thing's right position, accounting for horizontal
|
|
* offset if needed.
|
|
*/
|
|
private getRight(thing: IThing): number {
|
|
if (this.keyOffsetX) {
|
|
return thing[this.keyRight] + thing[this.keyOffsetX];
|
|
} else {
|
|
return thing[this.keyRight];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {Thing} thing
|
|
* @return {Number} The Thing's bottom position, accounting for vertical
|
|
* offset if needed.
|
|
*/
|
|
private getBottom(thing: IThing): number {
|
|
if (this.keyOffsetX) {
|
|
return thing[this.keyBottom] + thing[this.keyOffsetY];
|
|
} else {
|
|
return thing[this.keyBottom];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {Thing} thing
|
|
* @return {Number} The Thing's left position, accounting for horizontal
|
|
* offset if needed.
|
|
*/
|
|
private getLeft(thing: IThing): number {
|
|
if (this.keyOffsetX) {
|
|
return thing[this.keyLeft] + thing[this.keyOffsetX];
|
|
} else {
|
|
return thing[this.keyLeft];
|
|
}
|
|
}
|
|
|
|
|
|
/* Utilities
|
|
*/
|
|
|
|
/**
|
|
* Draws a source pattern onto a context. The pattern is clipped to the size
|
|
* of MapScreener.
|
|
*
|
|
* @param {CanvasRenderingContext2D} context The context the pattern will
|
|
* be drawn onto.
|
|
* @param {Mixed} source The image being repeated as a pattern. This can
|
|
* be a canvas, an image, or similar.
|
|
* @param {Number} left The x-location to draw from.
|
|
* @param {Number} top The y-location to draw from.
|
|
* @param {Number} width How many pixels wide the drawing area should be.
|
|
* @param {Number} left How many pixels high the drawing area should be.
|
|
* @param {Number} opacity How transparent the drawing is, in [0,1].
|
|
*/
|
|
private drawPatternOnContext(
|
|
context: CanvasRenderingContext2D,
|
|
source: any,
|
|
left: number,
|
|
top: number,
|
|
width: number,
|
|
height: number,
|
|
opacity: number): void {
|
|
context.globalAlpha = opacity;
|
|
context.translate(left, top);
|
|
context.fillStyle = context.createPattern(source, "repeat");
|
|
context.fillRect(
|
|
0, 0,
|
|
// Math.max(width, left - MapScreener[keyRight]),
|
|
// Math.max(height, top - MapScreener[keyBottom])
|
|
width, height);
|
|
context.translate(-left, -top);
|
|
context.globalAlpha = 1;
|
|
}
|
|
}
|
|
}
|