texture atlas for atree connectors

This commit is contained in:
fin444 2022-07-23 13:18:35 -04:00
parent f9e783e56e
commit ecb73af911
49 changed files with 53 additions and 39 deletions

View file

@ -973,7 +973,8 @@ function render_AT(UI_elem, list_elem, tree) {
const parent_id = parent_abil.id; const parent_id = parent_abil.id;
let connect_elem = document.createElement("div"); let connect_elem = document.createElement("div");
connect_elem.style = "background-size: cover; width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated;"; // connect_elem.style = "background-size: cover; width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated;";
connect_elem.style = "width: 112.5%; height: 112.5%; position: absolute; top: -5.55%; left: -5.55%; image-rendering: pixelated; background-image: url('../media/atree/connectors.png'); background-size: 1200% 400%;"
// connect up // connect up
for (let i = ability.display.row - 1; i > parent_abil.display.row; i--) { for (let i = ability.display.row - 1; i > parent_abil.display.row; i--) {
const coord = i + "," + ability.display.col; const coord = i + "," + ability.display.col;
@ -1233,26 +1234,6 @@ function set_connector_type(connector_info) { // left right up down
} }
} }
// draw the connector onto the screen
function atree_render_connection(atree_connectors_map) {
for (let i of atree_connectors_map.keys()) {
let connector_info = atree_connectors_map.get(i);
let connector_elem = connector_info.connector;
let connector_img = document.createElement('img');
set_connector_type(connector_info);
connector_img.src = '../media/atree/connect_'+connector_info.type+'.png';
connector_img.style = "width: 100%; height: 100%;"
connector_elem.replaceChildren(connector_img);
connector_info.highlight = [0, 0, 0, 0];
let target_elem = document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]];
if (target_elem.children.length != 0) {
// janky special case...
connector_elem.style.display = 'none';
}
target_elem.appendChild(connector_elem);
};
};
// toggle the state of a node. // toggle the state of a node.
function atree_set_state(node_wrapper, new_state) { function atree_set_state(node_wrapper, new_state) {
let icon = node_wrapper.ability.display.icon; let icon = node_wrapper.ability.display.icon;
@ -1280,6 +1261,48 @@ function atree_set_state(node_wrapper, new_state) {
} }
}; };
// first key is connector type, second key is highlight, then [x, y] pair of 0-index positions in the tile atlas
const atreeConnectorAtlasPositions = {
"1100": {"0000": [0, 0], "1100": [1, 0]},
"1010": {"0000": [2, 0], "1010": [3, 0]},
"0110": {"0000": [4, 0], "0110": [5, 0]},
"1001": {"0000": [6, 0], "1001": [7, 0]},
"0101": {"0000": [8, 0], "0101": [9, 0]},
"0011": {"0000": [10, 0], "0011": [11, 0]},
"1101": {"0000": [0, 1], "1101": [1, 1], "1100": [2, 1], "1001": [3, 1], "0101": [4, 1]},
"0111": {"0000": [5, 1], "0111": [6, 1], "0110": [7, 1], "0101": [8, 1], "0011": [9, 1]},
"1110": {"0000": [0, 2], "1110": [1, 2], "1100": [2, 2], "1010": [3, 2], "0110": [4, 2]},
"1011": {"0000": [5, 2], "1011": [6, 2], "1010": [7, 2], "1001": [8, 2], "0011": [9, 2]},
"1111": {"0000": [0, 3], "1111": [1, 3], "1110": [2, 3], "1101": [3, 3], "1100": [4, 3], "1011": [5, 3], "1010": [6, 3], "1001": [7, 3], "0111": [8, 3], "0110": [9, 3], "0101": [10, 3], "0011": [11, 3]}
}
function atlasBGPositionCalc(pos, atlasSize) {
// https://css-tricks.com/focusing-background-image-precise-location-percentages/
// p = (c + 0.5/z - 0.5) * z/(z - 1) + 0.5
// z = num tiles in direction
// c = starting pos of tile in percent of total atlas (equal to index/z)
let x = ((pos[0]/atlasSize[0]) + 0.5/atlasSize[0] - 0.5) * atlasSize[0]/(atlasSize[0] - 1) + 0.5
let y = ((pos[1]/atlasSize[1]) + 0.5/atlasSize[1] - 0.5) * atlasSize[1]/(atlasSize[1] - 1) + 0.5
return (x * 100) + "% " + (y * 100) + "%" // multiply by 100 to convert decimal to percent
}
// draw the connector onto the screen
function atree_render_connection(atree_connectors_map) {
for (let i of atree_connectors_map.keys()) {
let connector_info = atree_connectors_map.get(i);
let connector_elem = connector_info.connector;
set_connector_type(connector_info);
connector_info.highlight = [0, 0, 0, 0];
connector_elem.style.backgroundPosition = atlasBGPositionCalc(atreeConnectorAtlasPositions[connector_info.type]["0000"], [12, 4]);
let target_elem = document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]];
if (target_elem.children.length != 0) {
// janky special case...
connector_elem.style.display = 'none';
}
target_elem.appendChild(connector_elem);
};
};
// update the connector (after being drawn the first time by atree_render_connection)
function atree_set_edge(atree_connectors_map, parent, child, state) { function atree_set_edge(atree_connectors_map, parent, child, state) {
const connectors = child.connectors.get(parent); const connectors = child.connectors.get(parent);
const parent_row = parent.ability.display.row; const parent_row = parent.ability.display.row;
@ -1294,8 +1317,6 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
let connector_info = atree_connectors_map.get(connector_label); let connector_info = atree_connectors_map.get(connector_label);
let connector_elem = connector_info.connector; let connector_elem = connector_info.connector;
let highlight_state = connector_info.highlight; // left right up down let highlight_state = connector_info.highlight; // left right up down
let connector_img_elem = document.createElement("img");
connector_img_elem.style = "width: 100%; height: 100%;";
const ctype = connector_info.type; const ctype = connector_info.type;
let num_1s = 0; let num_1s = 0;
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
@ -1323,23 +1344,16 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
render += highlight_state[i] === 0 ? "0" : "1"; render += highlight_state[i] === 0 ? "0" : "1";
} }
if (render == "0000") { connector_elem.style.backgroundPosition = atlasBGPositionCalc(atreeConnectorAtlasPositions[ctype][render], [12, 4]);
connector_img_elem.src = "../media/atree/connect_" + ctype + ".png";
} else {
connector_img_elem.src = "../media/atree/connect_" + ctype + "_" + render + ".png";
}
connector_elem.replaceChildren(connector_img_elem);
continue; continue;
} } else {
// lol bad overloading, [0] is just the whole state // lol bad overloading, [0] is just the whole state
highlight_state[0] += state_delta; highlight_state[0] += state_delta;
if (highlight_state[0] > 0) { if (highlight_state[0] > 0) {
connector_img_elem.src = '../media/atree/connect_' + ctype + '_1.png'; connector_elem.style.backgroundPosition = atlasBGPositionCalc(atreeConnectorAtlasPositions[ctype][ctype], [12, 4]);
connector_elem.replaceChildren(connector_img_elem); } else {
} connector_elem.style.backgroundPosition = atlasBGPositionCalc(atreeConnectorAtlasPositions[ctype]["0000"], [12, 4]);
else { }
connector_img_elem.src = '../media/atree/connect_'+ctype+'.png';
connector_elem.replaceChildren(connector_img_elem);
} }
} }
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 182 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 183 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 178 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 202 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 184 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 177 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 202 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 184 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 205 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 203 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 221 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
media/atree/connectors.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB