switch atree images to canvas
This commit is contained in:
parent
56903da99a
commit
90ef96c300
2 changed files with 25 additions and 22 deletions
47
js/atree.js
47
js/atree.js
|
@ -371,11 +371,11 @@ const atree_validate = new (class extends ComputeNode {
|
||||||
const abil = node.ability;
|
const abil = node.ability;
|
||||||
if (atree_state.get(abil.id).active) {
|
if (atree_state.get(abil.id).active) {
|
||||||
atree_to_add.push([node, 'not reachable', false]);
|
atree_to_add.push([node, 'not reachable', false]);
|
||||||
atree_state.get(abil.id).img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[abil.display.icon], 2], atreeNodeAtlasSize);
|
drawAtlasImage(atree_state.get(abil.id).img, atreeNodeAtlasImg, [atreeNodeAtlasPositions[abil.display.icon], 2], atreeNodeTileSize);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
atree_not_present.push(abil.id);
|
atree_not_present.push(abil.id);
|
||||||
atree_state.get(abil.id).img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[abil.display.icon], 0], atreeNodeAtlasSize);
|
drawAtlasImage(atree_state.get(abil.id).img, atreeNodeAtlasImg, [atreeNodeAtlasPositions[abil.display.icon], 0], atreeNodeTileSize);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -424,7 +424,7 @@ const atree_validate = new (class extends ComputeNode {
|
||||||
const node = atree_state.get(node_id);
|
const node = atree_state.get(node_id);
|
||||||
const [success, hard_error, reason] = abil_can_activate(node, atree_state, reachable, archetype_count, ap_left);
|
const [success, hard_error, reason] = abil_can_activate(node, atree_state, reachable, archetype_count, ap_left);
|
||||||
if (success) {
|
if (success) {
|
||||||
node.img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[node.ability.display.icon], 1], atreeNodeAtlasSize);
|
drawAtlasImage(node.img, atreeNodeAtlasImg, [atreeNodeAtlasPositions[node.ability.display.icon], 1], atreeNodeTileSize);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -975,8 +975,8 @@ function render_AT(UI_elem, list_elem, tree) {
|
||||||
let parent_abil = parent.ability;
|
let parent_abil = parent.ability;
|
||||||
const parent_id = parent_abil.id;
|
const parent_id = parent_abil.id;
|
||||||
|
|
||||||
let connect_elem = document.createElement("div");
|
let connect_elem = make_elem("canvas", [], {style: "width: 112.5%; height: 112.5%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); image-rendering: pixelated;", width: "18", height: "18"});
|
||||||
connect_elem.style = "width: 112.5%; height: 112.5%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; background-image: url('../media/atree/connectors.png'); background-size: 1700% 500%;"
|
|
||||||
// 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;
|
||||||
|
@ -1012,7 +1012,7 @@ function render_AT(UI_elem, list_elem, tree) {
|
||||||
|
|
||||||
// create node
|
// create node
|
||||||
let node_elem = document.getElementById("atree-row-" + ability.display.row).children[ability.display.col];
|
let node_elem = document.getElementById("atree-row-" + ability.display.row).children[ability.display.col];
|
||||||
node_wrap.img = make_elem("div", [], {style: "width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated; z-index: 1; background-image: url('../media/atree/icons.png'); background-size: 900% 300%;"})
|
node_wrap.img = make_elem("canvas", [], {style: "width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated; z-index: 1;", width: "32", height: "32"})
|
||||||
node_elem.appendChild(node_wrap.img);
|
node_elem.appendChild(node_wrap.img);
|
||||||
|
|
||||||
// create hitbox
|
// create hitbox
|
||||||
|
@ -1234,11 +1234,11 @@ function atree_set_state(node_wrapper, new_state) {
|
||||||
}
|
}
|
||||||
if (new_state) {
|
if (new_state) {
|
||||||
node_wrapper.active = true;
|
node_wrapper.active = true;
|
||||||
node_wrapper.img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[icon], 2], atreeNodeAtlasSize);
|
drawAtlasImage(node_wrapper.img, atreeNodeAtlasImg, [atreeNodeAtlasPositions[icon], 2], atreeNodeTileSize);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
node_wrapper.active = false;
|
node_wrapper.active = false;
|
||||||
node_wrapper.img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[icon], 1], atreeNodeAtlasSize);
|
drawAtlasImage(node_wrapper.img, atreeNodeAtlasImg, [atreeNodeAtlasPositions[icon], 1], atreeNodeTileSize);
|
||||||
}
|
}
|
||||||
let atree_connectors_map = node_wrapper.all_connectors_ref;
|
let atree_connectors_map = node_wrapper.all_connectors_ref;
|
||||||
for (const parent of node_wrapper.parents) {
|
for (const parent of node_wrapper.parents) {
|
||||||
|
@ -1253,6 +1253,8 @@ function atree_set_state(node_wrapper, new_state) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// atlas vars
|
||||||
|
|
||||||
// first key is connector type, second key is highlight, then [x, y] pair of 0-index positions in the tile atlas
|
// first key is connector type, second key is highlight, then [x, y] pair of 0-index positions in the tile atlas
|
||||||
const atreeConnectorAtlasPositions = {
|
const atreeConnectorAtlasPositions = {
|
||||||
"1100": {"0000": [0, 0], "1100": [1, 0]},
|
"1100": {"0000": [0, 0], "1100": [1, 0]},
|
||||||
|
@ -1267,7 +1269,9 @@ const atreeConnectorAtlasPositions = {
|
||||||
"1011": {"0000": [5, 2], "1011": [6, 2], "1010": [7, 2], "1001": [8, 2], "0011": [9, 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]}
|
"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]}
|
||||||
}
|
}
|
||||||
const atreeConnectorAtlasSize = [17, 5]
|
const atreeConnectorTileSize = 18;
|
||||||
|
const atreeConnectorAtlasImg = make_elem("img", [], {src: "../media/atree/connectors.png"});
|
||||||
|
|
||||||
// just has the x position, y is based on state
|
// just has the x position, y is based on state
|
||||||
const atreeNodeAtlasPositions = {
|
const atreeNodeAtlasPositions = {
|
||||||
"node_0": 0,
|
"node_0": 0,
|
||||||
|
@ -1280,15 +1284,13 @@ const atreeNodeAtlasPositions = {
|
||||||
"node_assassin": 7,
|
"node_assassin": 7,
|
||||||
"node_shaman": 8
|
"node_shaman": 8
|
||||||
}
|
}
|
||||||
const atreeNodeAtlasSize = [9, 3]
|
const atreeNodeTileSize = 32;
|
||||||
function atlasBGPositionCalc(pos, atlasSize) {
|
const atreeNodeAtlasImg = make_elem("img", [], {src: "../media/atree/icons.png"});
|
||||||
// https://css-tricks.com/focusing-background-image-precise-location-percentages/
|
|
||||||
// p = (c + 0.5/z - 0.5) * z/(z - 1) + 0.5
|
function drawAtlasImage(canvas, img, pos, tileSize) {
|
||||||
// z = num tiles in direction
|
let ctx = canvas.getContext("2d");
|
||||||
// c = starting pos of tile in percent of total atlas (equal to index/z)
|
ctx.clearRect(0, 0, tileSize, tileSize);
|
||||||
let x = ((pos[0]/atlasSize[0]) + 0.5/atlasSize[0] - 0.5) * atlasSize[0]/(atlasSize[0] - 1) + 0.5
|
ctx.drawImage(img, tileSize * pos[0], tileSize * pos[1], tileSize, tileSize, 0, 0, tileSize, tileSize);
|
||||||
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
|
// draw the connector onto the screen
|
||||||
|
@ -1298,7 +1300,7 @@ function atree_render_connection(atree_connectors_map) {
|
||||||
let connector_elem = connector_info.connector;
|
let connector_elem = connector_info.connector;
|
||||||
set_connector_type(connector_info);
|
set_connector_type(connector_info);
|
||||||
connector_info.highlight = [0, 0, 0, 0];
|
connector_info.highlight = [0, 0, 0, 0];
|
||||||
connector_elem.style.backgroundPosition = atlasBGPositionCalc(atreeConnectorAtlasPositions[connector_info.type]["0000"], atreeConnectorAtlasSize);
|
drawAtlasImage(connector_elem, atreeConnectorAtlasImg, atreeConnectorAtlasPositions[connector_info.type]["0000"], atreeConnectorTileSize);
|
||||||
let target_elem = document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]];
|
let target_elem = document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]];
|
||||||
if (target_elem.children.length != 0) {
|
if (target_elem.children.length != 0) {
|
||||||
// janky special case...
|
// janky special case...
|
||||||
|
@ -1350,15 +1352,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";
|
||||||
}
|
}
|
||||||
connector_elem.style.backgroundPosition = atlasBGPositionCalc(atreeConnectorAtlasPositions[ctype][render], atreeConnectorAtlasSize);
|
drawAtlasImage(connector_elem, atreeConnectorAtlasImg, atreeConnectorAtlasPositions[ctype][render], atreeConnectorTileSize);
|
||||||
|
// connector_elem.style.backgroundPosition = atlasBGPositionCalc(atreeConnectorAtlasPositions[ctype][render], atreeConnectorAtlasSize);
|
||||||
continue;
|
continue;
|
||||||
} else {
|
} 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_elem.style.backgroundPosition = atlasBGPositionCalc(atreeConnectorAtlasPositions[ctype][ctype], atreeConnectorAtlasSize);
|
drawAtlasImage(connector_elem, atreeConnectorAtlasImg, atreeConnectorAtlasPositions[ctype][ctype], atreeConnectorTileSize);
|
||||||
} else {
|
} else {
|
||||||
connector_elem.style.backgroundPosition = atlasBGPositionCalc(atreeConnectorAtlasPositions[ctype]["0000"], atreeConnectorAtlasSize);
|
drawAtlasImage(connector_elem, atreeConnectorAtlasImg, atreeConnectorAtlasPositions[ctype]["0000"], atreeConnectorTileSize);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.8 KiB |
Loading…
Reference in a new issue