-
Notifications
You must be signed in to change notification settings - Fork 0
/
DynamicImage.mjs
96 lines (88 loc) · 3.62 KB
/
DynamicImage.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/**
* Make sure to place tiledbear.png in the same directory as this script.
*/
var DynamicImageDialog = {};
const f = __filename;
DynamicImageDialog.drawUI = function (state) {
var dialog = state.dialog;
dialog.clear();
dialog.windowTitle = "Dynamic Image Dialog";
dialog.addSeparator("Color Choices ");
dialog.addHeading(' ');
dialog.newRowMode = Dialog.ManualRows;
// avoid issues with re-use of the 'colorIndex' variable
const createColorButtonHandler = function (colorIndex) {
return function (newColor) {
tiled.log(`Color button #${colorIndex} (${state.colorNames[colorIndex]}) value changed to ${newColor}`);
state.colors[colorIndex] = newColor;
DynamicImageDialog.drawUI(state);
};
}
for (var colorIndex = 1; colorIndex < state.colors.length; colorIndex++) {
state.colorButtons[colorIndex] = dialog.addColorButton(`${state.colorNames[colorIndex]}`);
state.colorButtons[colorIndex].color = state.colors[colorIndex];
state.colorButtons[colorIndex].colorChanged.connect(createColorButtonHandler(colorIndex));
if ((colorIndex) % 2 ==0){
dialog.addNewRow();
}
}
dialog.newRowMode = Dialog.SameWidgetRows;
dialog.addNewRow();
dialog.addHeading(' ');
state.imageWidget = dialog.addImage('', DynamicImageDialog.createImage(state));
dialog.show();
};
DynamicImageDialog.createImage = function (state) {
var mappedImageData = [];
for (var i = 0; i < state.imgData.length; i++) {
var colorCode = state.imgData[i];
mappedImageData.push(state.colors[parseInt(colorCode, 10)]);
}
var colorsSummary = '';
for (var i = 64; i < 80; i++) {
colorsSummary += mappedImageData[i] + ',';
}
var image = new Image(state.imgWidth, state.imgHeight, Image.Format_RGB32);
for (var x = 0; x < state.imgWidth; x++) {
for (var y = 0; y < state.imgHeight; y++) {
image.setPixelColor(x, y, mappedImageData[x + y * state.imgWidth])
}
}
return image.scaled(state.imgWidth *8, state.imgHeight *8);
}
DynamicImageDialog.testPromptAction = tiled.registerAction("DynamicImageDialog", function (action) {
const defaultColor1 = "#9cfcf0";
const defaultColor2 = "#92809d";
const defaultColor3 = "#5d392a";
const defaultColor4 = "#b87e68";
var state = {
colorButtons: [],
colorNames: ["Background", "Outline", "Highlight", "Midtone", "Accent"],
colors: ["#00000000", defaultColor1, defaultColor2, defaultColor3, defaultColor4],
addColorButton: undefined,
removeColorButton: undefined,
dialog: new Dialog(),
sep: tiled.platform == "windows" ? "\\": "/"
};
// get the image from this same directory
state.baseImagePath= f.substring(0, f.lastIndexOf("/")) + state.sep + "tiledbear.png";
tiled.log(`Loading base image ${state.baseImagePath}`);
var baseImage = new Image(state.baseImagePath);
state.imgWidth = baseImage.width;
state.imgHeight = baseImage.height;
state.imgData = [];
for (var y = 0; y < baseImage.height; y++) {
for (var x = 0; x < baseImage.width; x++) {
var pixelColor = baseImage.pixelColor(x, y);
var colorIndex = state.colors.indexOf(pixelColor.toString());
var colorCode = colorIndex >= 0 ? colorIndex : 0;
state.imgData.push(colorCode);
}
}
DynamicImageDialog.drawUI(state);
});
DynamicImageDialog.testPromptAction.text = "Dynamic Image Dialog";
tiled.extendMenu("Edit", [
{ action: "DynamicImageDialog", before: "SelectAll" },
{ separator: true }
]);