Permalink
Browse files

Add new flipgridx image operation

This isn't actually in Starbound, but it lets us create a cached sprite
where all the frames have been mirrored horizontally. This is better in
the HTML5 world than doing the mirroring on the fly (at least the way I
render sprites right now).
  • Loading branch information...
1 parent 8656649 commit aa3138037f2c178d0f31331298ff2f4e3fc2c300 Blixt committed Mar 2, 2014
Showing with 27 additions and 12 deletions.
  1. +27 −12 lib/assetsmanager.js
View
@@ -172,10 +172,17 @@ AssetsManager.prototype.getImage = function (path) {
// Parse all the operations to be applied to the image.
// TODO: addmask, brightness, fade, replace, saturation
- var hue = 0;
+ var hue = 0, flipEveryX = 0;
for (var i = 0; i < ops.length; i++) {
var op = ops[i].split(/[=;]/);
switch (op[0]) {
+ // This operation doesn't exist in Starbound, but is helpful for us.
+ case 'flipgridx':
+ flipEveryX = parseInt(op[1]);
+ if (image.width % flipEveryX) {
+ throw new Error(image.width + ' not divisible by ' + flipEveryX);
+ }
+ break;
case 'hueshift':
hue = parseFloat(op[1]);
break;
@@ -184,24 +191,32 @@ AssetsManager.prototype.getImage = function (path) {
}
}
- var imageData = context.getImageData(0, 0, image.width, image.height),
- data = imageData.data;
- for (var i = 0; i < data.length; i += 4) {
- hsv = convert.rgb2hsv(data[i], data[i + 1], data[i + 2]);
+ if (hue) {
+ var imageData = context.getImageData(0, 0, image.width, image.height),
+ data = imageData.data;
+ for (var i = 0; i < data.length; i += 4) {
+ hsv = convert.rgb2hsv(data[i], data[i + 1], data[i + 2]);
- if (hue) {
hsv[0] += hue;
if (hsv[0] < 0) hsv[0] += 360
else if (hsv[0] >= 360) hsv[0] -= 360;
- }
- rgb = convert.hsv2rgb(hsv);
+ rgb = convert.hsv2rgb(hsv);
- data[i] = rgb[0];
- data[i + 1] = rgb[1];
- data[i + 2] = rgb[2];
+ data[i] = rgb[0];
+ data[i + 1] = rgb[1];
+ data[i + 2] = rgb[2];
+ }
+ context.putImageData(imageData, 0, 0);
+ }
+
+ if (flipEveryX) {
+ context.scale(-1, 1);
+ for (var x = 0; x < image.width; x += flipEveryX) {
+ context.drawImage(canvas, x, 0, flipEveryX, image.height, -(x + flipEveryX), 0, flipEveryX, image.height);
+ }
+ context.scale(1, 1);
}
- context.putImageData(imageData, 0, 0);
// Create a new object for the modified image and cache it.
image = new Image();

0 comments on commit aa31380

Please sign in to comment.