update for color palette manager

This commit is contained in:
jdescottes
2014-03-30 03:12:56 +02:00
parent 375c496ff9
commit 9bdd17d456
589 changed files with 11072 additions and 176947 deletions

View File

@ -7,8 +7,8 @@
ns.AbstractRenderer.prototype.getCoordinates = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.setGridEnabled = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.isGridEnabled = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.setGridWidth = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.getGridWidth = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.setZoom = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.getZoom = Constants.ABSTRACT_FUNCTION;

View File

@ -55,14 +55,14 @@
};
ns.CompositeRenderer.prototype.setGridEnabled = function (b) {
ns.CompositeRenderer.prototype.setGridWidth = function (b) {
this.renderers.forEach(function (renderer) {
renderer.setGridEnabled(b);
renderer.setGridWidth(b);
});
};
ns.CompositeRenderer.prototype.isGridEnabled = function () {
return this.getSampleRenderer_().isGridEnabled();
ns.CompositeRenderer.prototype.getGridWidth = function () {
return this.getSampleRenderer_().getGridWidth();
};
ns.CompositeRenderer.prototype.getSampleRenderer_ = function () {

View File

@ -1,165 +0,0 @@
(function () {
var ns = $.namespace("pskl.rendering");
ns.FrameRenderer = function (container, renderingOptions, className) {
this.defaultRenderingOptions = {
'supportGridRendering' : false
};
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
if(container === undefined) {
throw 'Bad FrameRenderer initialization. <container> undefined.';
}
if(isNaN(renderingOptions.dpi)) {
throw 'Bad FrameRenderer initialization. <dpi> not well defined.';
}
this.container = container;
this.dpi = renderingOptions.dpi;
this.className = className;
this.canvas = null;
this.supportGridRendering = renderingOptions.supportGridRendering;
this.enableGrid(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
// Flag to know if the config was altered
this.canvasConfigDirty = true;
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
};
ns.FrameRenderer.prototype.init = function (frame) {
this.render(frame);
this.lastRenderedFrame = frame;
};
ns.FrameRenderer.prototype.updateDPI = function (newDPI) {
this.dpi = newDPI;
this.canvasConfigDirty = true;
};
/**
* @private
*/
ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
if(settingName == pskl.UserSettings.SHOW_GRID) {
this.enableGrid(settingValue);
}
else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
this.updateBackgroundClass_(settingValue);
}
};
/**
* @private
*/
ns.FrameRenderer.prototype.updateBackgroundClass_ = function (newClass) {
var currentClass = this.container.data('current-background-class');
if (currentClass) {
this.container.removeClass(currentClass);
}
this.container.addClass(newClass);
this.container.data('current-background-class', newClass);
};
ns.FrameRenderer.prototype.enableGrid = function (flag) {
this.gridStrokeWidth = (flag && this.supportGridRendering) ? Constants.GRID_STROKE_WIDTH : 0;
this.canvasConfigDirty = true;
};
ns.FrameRenderer.prototype.render = function (frame) {
this.clear(frame);
var context = this.getCanvas_(frame).getContext('2d');
for(var col = 0, width = frame.getWidth(); col < width; col++) {
for(var row = 0, height = frame.getHeight(); row < height; row++) {
var color = frame.getPixel(col, row);
this.renderPixel_(color, col, row, context);
}
}
this.lastRenderedFrame = frame;
};
ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
if(color != Constants.TRANSPARENT_COLOR) {
context.fillStyle = color;
context.fillRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
}
};
ns.FrameRenderer.prototype.clear = function (frame) {
var canvas = this.getCanvas_(frame);
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
};
/**
* Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
* frame) into a sprite coordinate in column and row.
* @public
*/
ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
var cellSize = this.dpi + this.gridStrokeWidth;
return {
"col" : (coords.x - coords.x % cellSize) / cellSize,
"row" : (coords.y - coords.y % cellSize) / cellSize
};
};
/**
* @private
*/
ns.FrameRenderer.prototype.getFramePos_ = function(index) {
return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
};
/**
* @private
*/
ns.FrameRenderer.prototype.drawGrid_ = function(canvas, width, height, col, row) {
var ctx = canvas.getContext("2d");
ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
for(var c=1; c < col; c++) {
ctx.moveTo(this.getFramePos_(c), 0);
ctx.lineTo(this.getFramePos_(c), height);
ctx.stroke();
}
for(var r=1; r < row; r++) {
ctx.moveTo(0, this.getFramePos_(r));
ctx.lineTo(width, this.getFramePos_(r));
ctx.stroke();
}
};
/**
* @private
*/
ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
if(this.canvasConfigDirty) {
$(this.canvas).remove();
var col = frame.getWidth(),
row = frame.getHeight();
var pixelWidth = col * this.dpi + this.gridStrokeWidth * (col - 1);
var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
var classes = ['canvas'];
if (this.className) {
classes.push(this.className);
}
var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, classes);
this.container.append(canvas);
if(this.gridStrokeWidth > 0) {
this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
}
this.canvas = canvas;
this.canvasConfigDirty = false;
}
return this.canvas;
};
})();

View File

@ -5,7 +5,7 @@
ns.PiskelRenderer = function (piskelController) {
var frames = [];
for (var i = 0 ; i < piskelController.getFrameCount() ; i++) {
frames.push(this.piskelController.getFrameAt(i));
frames.push(piskelController.getFrameAt(i));
}
ns.FramesheetRenderer.call(this, frames);
};

View File

@ -1,63 +0,0 @@
(function () {
var ns = $.namespace("pskl.rendering");
ns.SpritesheetRenderer = function (framesheet) {
this.framesheet = framesheet;
};
ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = function () {
var canvas = this.createCanvas_();
for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) {
var frame = this.framesheet.getFrameByIndex(i);
this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0);
}
return canvas.toDataURL("image/png");
};
ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) {
var encoder = new GIFEncoder(), dpi = 10;
encoder.setRepeat(0);
encoder.setDelay(1000/fps);
encoder.start();
encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi);
for (var i = 0 ; i < this.framesheet.frames.length ; i++) {
var frame = this.framesheet.frames[i];
var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
encoder.addFrame(renderer.render());
}
encoder.finish();
var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
return imageData;
};
/**
* TODO(juliandescottes): Mutualize with code already present in FrameRenderer
*/
ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
var context = canvas.getContext('2d');
for(var col = 0, width = frame.getWidth(); col < width; col++) {
for(var row = 0, height = frame.getHeight(); row < height; row++) {
var color = frame.getPixel(col, row);
if(color != Constants.TRANSPARENT_COLOR) {
context.fillStyle = color;
context.fillRect(col + offsetWidth, row + offsetHeight, 1, 1);
}
}
}
};
ns.SpritesheetRenderer.prototype.createCanvas_ = function () {
var frameCount = this.framesheet.getFrameCount();
if (frameCount > 0){
var width = frameCount * this.framesheet.getWidth();
var height = this.framesheet.getHeight();
return pskl.CanvasUtils.createCanvas(width, height);
} else {
throw "Cannot render empty Spritesheet";
}
};
})();

View File

@ -19,7 +19,7 @@
var size = this.getDisplaySize();
var serializedFrame = [
this.getZoom(),
this.isGridEnabled(),
this.getGridWidth(),
offset.x, offset.y,
size.width, size.height,
frame.serialize()

View File

@ -37,7 +37,6 @@
y : 0
};
this.isGridEnabled_ = false;
this.supportGridRendering = renderingOptions.supportGridRendering;
this.classes = classes || [];
@ -56,7 +55,7 @@
this.displayCanvas = null;
this.setDisplaySize(renderingOptions.width, renderingOptions.height);
this.setGridEnabled(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
this.setGridWidth(pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH));
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
@ -77,17 +76,18 @@
};
ns.FrameRenderer.prototype.setZoom = function (zoom) {
// back up center coordinates
var centerX = this.offset.x + (this.displayWidth/(2*this.zoom));
var centerY = this.offset.y + (this.displayHeight/(2*this.zoom));
if (zoom > Constants.MINIMUM_ZOOM) {
// back up center coordinates
var centerX = this.offset.x + (this.displayWidth/(2*this.zoom));
var centerY = this.offset.y + (this.displayHeight/(2*this.zoom));
this.zoom = Math.max(1, zoom);
// recenter
this.setOffset(
centerX - (this.displayWidth/(2*this.zoom)),
centerY - (this.displayHeight/(2*this.zoom))
);
this.zoom = zoom;
// recenter
this.setOffset(
centerX - (this.displayWidth/(2*this.zoom)),
centerY - (this.displayHeight/(2*this.zoom))
);
}
};
ns.FrameRenderer.prototype.getZoom = function () {
@ -136,12 +136,16 @@
this.offset.y = y;
};
ns.FrameRenderer.prototype.setGridEnabled = function (flag) {
this.isGridEnabled_ = flag && this.supportGridRendering;
ns.FrameRenderer.prototype.setGridWidth = function (value) {
this.gridWidth_ = value;
};
ns.FrameRenderer.prototype.isGridEnabled = function () {
return this.isGridEnabled_;
ns.FrameRenderer.prototype.getGridWidth = function () {
if (this.supportGridRendering) {
return this.gridWidth_;
} else {
return 0;
}
};
ns.FrameRenderer.prototype.updateMargins_ = function () {
@ -164,10 +168,10 @@
};
ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
if(settingName == pskl.UserSettings.SHOW_GRID) {
this.setGridEnabled(settingValue);
} else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
this.updateBackgroundClass_(settingValue);
} else if (settingName == pskl.UserSettings.GRID_WIDTH) {
this.setGridWidth(settingValue);
}
};
@ -246,8 +250,10 @@
context.clearRect(0, 0, this.canvas.width*this.zoom, this.canvas.height*this.zoom);
var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10;
if (this.isGridEnabled() || isIE10) {
var gridWidth = this.isGridEnabled() ? Constants.GRID_STROKE_WIDTH : 0;
var gridWidth = this.getGridWidth();
var isGridEnabled = gridWidth > 0;
if (isGridEnabled || isIE10) {
var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth);
context.drawImage(scaled, 0, 0);
} else {

View File

@ -27,7 +27,7 @@
var serializedRendering = [
this.getZoom(),
this.isGridEnabled(),
this.getGridWidth(),
offset.x,
offset.y,
size.width,