An interactive Skullgirls Mobile skill tree.
The SVG file can be embedded in other websites. It communicates data to the parent window and can receive instructions from the parent window.
- (Optional) Save a copy of
sgmtree.svg
and thesgmtree
folder. - In your HTML, include the SVG.
<embed id="sgmtree" src="sgmtree.svg">
- If you did not save a copy, replace
sgmtree.svg
withhttps://krazete.github.io/sgmtree/sgmtree.svg
.
- If you did not save a copy, replace
- In your script, listen for message events.
window.addEventListener("message", onMessage);
- In your message listener, filter requests by origin.
function onMessage(e) {if (e.origin == window.origin) { /* CODE */ }}
- If you did not save a copy, replace
window.origin
with"https://krazete.github.io"
.
- If you did not save a copy, replace
- Handle the message data.
{sp: [], cc: [], th: [], fs: 0, at: 0, hp: 0, mandated: false}
sp
andcc
lists node costs if using only Skill Points and Canopy Coins.th
lists node costs if using only Theonite.fs
,at
, andhp
are the total Fighter Score multiplier, Attack multiplier, and Health multiplier.- See Krazete/sgm#stats for an explanation of the Fighter Score formula. Using that notation:
TREE_BOOST
would be 1 +fs
/ 100,ATK_BOOST
would be 1 +at
/ 100, andHP_BOOST
would be 1 +hp
/ 100.
- See Krazete/sgm#stats for an explanation of the Fighter Score formula. Using that notation:
mandated
indicates whether the message was posted as a result of a mandate event.
- (Optional) Check or uncheck nodes by sending a mandate event.
var sgmtree = document.getElementById("sgmtree").getSVGDocument(); sgmtree.dispatchEvent(new CustomEvent("mandate", {detail: {ids: [], on: true}}));
ids
is the list of node ids to affect (e.g.["atk1", "hp2", "juggle"]
).on
is true if checking nodes and false if unchecking nodes.- This feature requires a copy of the SVG on the same site origin. The mandate event will be blocked otherwise.
See index.html
and index.js
for an example of use.
- Cost data was manually recorded for each node of each tier on my SGM Skill Tree Costs spreadsheet.
- In the SVG file, nodes are named according to the counterclockwise direction, not tree order. E.g.
sa1
is actually the second tier of Signature Ability 1 whilesa2
is the first tier of Signature Ability 1. - To test the message feature locally, you must open your HTML with a local server (e.g.
python -m http.server
) due to CORS policy.