retrolib
Version:
Render low-res scenes to the canvas in a retro 8-bit era style. Aseprite exported animation wrapper, scene management, sound and image management, particle support.
128 lines • 4.1 kB
JavaScript
import ImageDefinition from "./ImageDefinition";
var images = [];
/**
* Populate images manifest with JSON list of definitions. Manifest is an array of objects
* like { "name": "image id ref", "filename": "file_path/filename.ext" }
* @param json JSON representation of image definitions.
*/
function imageManifestFromJSON(json) {
json.forEach((function (def) { return images.push(ImageDefinition.fromJSON(def)); }));
}
/**
*
* @param imageName Image name/id to use for this asset.
* @param filename Filename/path to image asset.
*/
export function addImageToManifest(imageName, filename) {
var image = { filename: filename, name: imageName, image: null };
images.push(image);
}
// Canvas 2d context.
var ctx = null;
// Set the canvas 2d context.
function setContext(context) {
ctx = context;
}
// Returns the canvas 2d context.
function getContext() {
return ctx;
}
// Return loaded image object from the list.
function getImage(name) {
var img = images.filter(function (f) { return f.name === name; });
return img.length > 0 ? img[0].image : null;
}
// Returns the full list of image objects.
function getImages() {
return images;
}
/**
* Draws an image at x,y coordinates on the canas.
* @param {string} name
* @param {number} x
* @param {number} y
* @param {object} srcRect
* @param {boolean} flipped
*/
function drawImage(name, x, y, srcRect, flipped) {
drawImageCtx(getContext(), name, x, y, srcRect, flipped);
}
/**
* Raw image drawing function (use drawImage unless you want to draw to another 2d context).
* @param {object} context Canvas 2d context.
* @param {string} name
* @param {number} x
* @param {number} y
* @param {object} srcRect
* @param {boolean} flipped
*/
function drawImageCtx(context, name, x, y, srcRect, flipped) {
var img = images.filter(function (f) { return f.name === name; });
if (img.length > 0) {
try {
if (srcRect !== undefined) {
if (flipped) {
context.save();
context.scale(-1, 1);
context.drawImage(img[0].image, srcRect.x, srcRect.y, srcRect.w, srcRect.h, -x - srcRect.w, y, srcRect.w, srcRect.h);
context.restore();
}
else {
context.drawImage(img[0].image, srcRect.x, srcRect.y, srcRect.w, srcRect.h, x, y, srcRect.w, srcRect.h);
}
}
else {
if (flipped) {
context.save();
context.scale(-1, 1);
context.drawImage(img[0].image, x - srcRect.w, y, srcRect.w, srcRect.h);
context.restore();
}
else {
context.drawImage(img[0].image, x, y);
}
}
}
catch (_a) {
// empty
}
}
}
/**
* Load Image
* @param {string} filename
* @returns
*/
function loadImage(filename) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.onload = function () {
resolve(img);
};
img.onerror = function (e) {
console.error("Failed to load file ".concat(filename, ":"), e);
reject(new Error("Failed to load file ".concat(filename, ": ") + e.type));
};
img.src = filename;
});
}
/**
* Load all images in the images list.
* @returns
*/
function loadAllImages() {
var promises = [];
var _loop_1 = function (i) {
var image = images[i];
promises.push(new Promise(function (resolve) { return loadImage(image.filename).then(function (r) {
image.image = r;
resolve(r);
}).catch(function (e) { return console.error('Failed to load', image.filename, e); }); }));
};
for (var i in images) {
_loop_1(i);
}
return Promise.allSettled(promises);
}
export { loadAllImages, loadImage, drawImage, getImage, getImages, setContext, drawImageCtx, getContext, imageManifestFromJSON };
//# sourceMappingURL=images.js.map