Merge pull request #176 from fin444/atree

switch atree images to canvas
This commit is contained in:
hppeng-wynn 2022-07-28 18:47:16 -07:00 committed by GitHub
commit 564558ad0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 22 deletions

View file

@ -371,11 +371,11 @@ const atree_validate = new (class extends ComputeNode {
const abil = node.ability;
if (atree_state.get(abil.id).active) {
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 {
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 [success, hard_error, reason] = abil_can_activate(node, atree_state, reachable, archetype_count, ap_left);
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;
const parent_id = parent_abil.id;
let connect_elem = document.createElement("div");
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%;"
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 up
for (let i = ability.display.row - 1; i > parent_abil.display.row; i--) {
const coord = i + "," + ability.display.col;
@ -1012,7 +1012,7 @@ function render_AT(UI_elem, list_elem, tree) {
// create node
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);
// create hitbox
@ -1234,11 +1234,11 @@ function atree_set_state(node_wrapper, new_state) {
}
if (new_state) {
node_wrapper.active = true;
node_wrapper.img.style.backgroundPosition = atlasBGPositionCalc([atreeNodeAtlasPositions[icon], 2], atreeNodeAtlasSize);
drawAtlasImage(node_wrapper.img, atreeNodeAtlasImg, [atreeNodeAtlasPositions[icon], 2], atreeNodeTileSize);
}
else {
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;
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
const atreeConnectorAtlasPositions = {
"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]},
"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
const atreeNodeAtlasPositions = {
"node_0": 0,
@ -1280,15 +1284,13 @@ const atreeNodeAtlasPositions = {
"node_assassin": 7,
"node_shaman": 8
}
const atreeNodeAtlasSize = [9, 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
const atreeNodeTileSize = 32;
const atreeNodeAtlasImg = make_elem("img", [], {src: "../media/atree/icons.png"});
function drawAtlasImage(canvas, img, pos, tileSize) {
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, tileSize, tileSize);
ctx.drawImage(img, tileSize * pos[0], tileSize * pos[1], tileSize, tileSize, 0, 0, tileSize, tileSize);
}
// draw the connector onto the screen
@ -1298,7 +1300,7 @@ function atree_render_connection(atree_connectors_map) {
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"], 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]];
if (target_elem.children.length != 0) {
// janky special case...
@ -1350,15 +1352,16 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
for (let i = 0; i < 4; i++) {
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;
} else {
// lol bad overloading, [0] is just the whole state
highlight_state[0] += state_delta;
if (highlight_state[0] > 0) {
connector_elem.style.backgroundPosition = atlasBGPositionCalc(atreeConnectorAtlasPositions[ctype][ctype], atreeConnectorAtlasSize);
drawAtlasImage(connector_elem, atreeConnectorAtlasImg, atreeConnectorAtlasPositions[ctype][ctype], atreeConnectorTileSize);
} 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