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 src="sgmtree.svg">
- If you did not save a copy, replace
sgmtree.svg
withhttps://krazete.github.io/sgmtree/sgmtree.svg
.
- In your script, include a message event listener.
-
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"
.
- 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 with the mandate event.
-
svgDocument.dispatchEvent(new CustomEvent("mandate", {"detail": {"ids": [], "on": true}}));
ids
is the list of node ids to affect.on
is true if checking nodes and false if unchecking nodes.
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's SimpleHTTPServer) due to CORS policy.