So over the last week or so (at the request of @MentalMars) I’ve been working on my first real Borderlands project since I started making stuff to put up on lowlidev.com.au.The task was to bring the official Skill Tree builders back from the dead!
Important: Some of this might lean into the more technical side of things. However I have tried to explain everything as best I can. If it gets too complicated, just skip past things and look at the pictures
With the release of each Borderlands game, Gearbox/2K created a section on the game’s official site that let you spec your characters and share your builds with friends. Unfortunately, over time if not maintained, stuff on the web eventually stops working, or worse, completely disappears when the next new thing comes along. Sometimes it’s just a matter of there no longer being someone around with the expertise to fix the issues that have sprung up over time.
Before I talk about what I’m actually doing, lets have a look at the current state of the official skill tree builders and why MentalMars and myself decided something should be done about it.
[ Brick’s skill tree from Borderlands 1 ]
The website got repurposed as a global hub for all things Borderlands. However with a quick google search you can still find the skill tree pages that are now stranded on some 2K data servers.
- Brick - https://downloads.2kgames.com/borderlands/website/skilltree/brick/
- Lilith - https://downloads.2kgames.com/borderlands/website/skilltree/lilith/
- Roland - https://downloads.2kgames.com/borderlands/website/skilltree/roland/
- Mordecai - https://downloads.2kgames.com/borderlands/website/skilltree/mordecai/
But hang on, they don’t load? That’s because in the last couple of years, Flash was abandoned as a valid medium for serving content on the web. Not only did it lack accessibility features, but it was being constantly hit with security exploits eventually led to many browsers choosing to completely block Flash content by default. It was also never supported by iOS, which was kind of the first big nail in the coffin back when iPhones came out. If you explicitly allow those pages to render Flash content, you can still use those skill tree builders, but that’s about it.
[ Salvador’s skill tree from Borderlands 2 ]
The official game site for Borderlands 2 is just gone. Fortunately there is this wonderful tool called the Wayback Machine, which allowed me to go back in time and rebuild those lost pages.
“Hang on,” you say, "those one don’t load!"
So the problem is here is that the Wayback Machine can only properly cache websites that have no ajax calls. When the skill tree builder is loaded, it pulls down a manifest file with links to all the assets it needs to render the page. These links are all hard coded. Another thing that happened with the internet in recent years was that not running everything via https (the little green padlock in the url) meant your content was insecure. That also goes double for loading files hosted on another domain. Modern browsers will just flat out block this kind of thing.
[ Athena’s skill tree from Borderlands: The Pre-Sequel ]
Borderlands: The Pre-Sequel
The Pre-Sequel was the most recent main Borderlands game to come out (2014), however the skill tree builder is actually a clone of the BL2 one with the characters swapped out. I don’t think you can navigate to these pages via the official site, but again with a bit of google searching, you can find them…
- Athena - https://borderlandsthegame.com/skilltrees/athena.html
- Wilhelm - https://borderlandsthegame.com/skilltrees/wilhelm.html
- Nisha - https://borderlandsthegame.com/skilltrees/nisha.html
- Claptrap - https://borderlandsthegame.com/skilltrees/claptrap.html
- Jack - https://borderlandsthegame.com/skilltrees/jack.html
- Aurelia - https://borderlandsthegame.com/skilltrees/aurelia.html
So now that we know what state the official skill tree builders are in, I am going to go through the process I did to bring them back.
First off, I wanted to get these up and running again. This required a fair amount of what is essentially called website scraping where I’d systematically iterate through everything and download a 1 to 1 local copy of the website files that I could then boot up on my local machine. You also have to fix any hard coded file references and of course disable stuff like that “playSound” hidden Flash player I mentioned for BL2/TPS. The Wayback Machine assisted quite heavily in recovering the majority of the Borderlands 2 assets, though thankfully most of them were actually still up on the 2K data servers so once I knew where to look, I was able to recover everything…Well ok, not EVERYTHING. Axton was the only character across all 3 games who was missing his manifest file (a JSON file with all of his skill tree data and links to assets that need to be loaded). So I had to rebuild that from scratch!
[ The landing page for the Borderlands: The Pre-Sequel skill tree app ]
Truth be told, I only ended up using a couple of things from these websites, being the backgrounds and the character name badges, which were both things I knew I would not be able to get once I started datamining the games themselves. However having working versions of all the official ones is handy because it allows you to see how someone else did it as that might impact how you’ll approach it in your own implementation. Oh and for Borderlands 1, the game is so old, that it was considerably more work to extract image assets from the game files, so I instead extracted the vector assets from the Flash skill tree builders to construct my own sprite sheets!
Despite Flash’s troubled history on the web, it’s actually used quite heavily in games to render user interfaces! It’s called Scaleform GFx and the long story short it is middleware software that enables someone with experience in programs such as Flash to build interfaces that can be rendered within a game engine. What this also means is that a lot of the assets are actually stored in vector format, meaning I would be able to extract stuff at a much higher resolution than I would if they were baked raster images. Unfortunately, the way it actually works is bit more fiddly. Some stuff is stored within the scaleform files as vector assets and other things are baked into raster textures that get loaded in at runtime. So some can be extracted out at a higher resolution and other stuff cannot. This is also the case with a lot of stuff in my Battleborn projects and i imagine will be the case in future Gearbox titles unless they decide to use a different piece of middleware to render their interfaces.
I’m still in the process of putting together all these assets, but here’s some screenshots of where I am at with it. The goal here is to build something that stays faithful to the original, but adheres to modern website standards (ie responsive, not reliant on third party plugins such as Flash to work) and has my own flavour sprinkled on top! Character renders courtesy of MentalMars!
I hope this wall of text was insightful look into something I am quite passionate about (and spent many very late nights putting it together). I hope to post the final app up on my website sometime in December, but I make no promises here! This stuff takes time, and often things come up that cause delays, but it’s feeling pretty good at the moment, which is why I wanted to share where I am at with it.