, ,

My pet project – RuneScape Treasure Trails

rstt-frontpage I tinker in many things, I love making things, big or small, some times it ends up being pretty decent and I actually follow through. More often than I like though, the ideas are too grande (or too wild/loose) for me to follow through, and I end up dropping them, not because I can’t do it (I’m a quick study, and I love playing with new technology to achieve what I set out to do), but because of time constraints. One of my proudest projects is trotting along by it self pretty much right now, it’s not a profitable project, but it’s one I am proud to show off (and that counts for a lot in my opinion, one should take pride in ones work). The project I speak of is called RSTT and is aimed at a very specialized part of the MMORPG RuneScape by Jagex Ltd. over in the UK, and I’d like to talk a little about what I did, and how it’s built up.

The history

I started working on RSTT a few years back, it started with a friend struggling with the infamous 3×3 sliding puzzles, which are used in the game to complete certain tasks for random rewards. After some research, and thanks to a handful of resourceful (and helpful) people I know, I got a javascript based puzzle solver, which used the images form the game for the solver. This sparked the idea that many people do these little distraction mini games, but with no dedicated resource to help them complete them (there are fansites with sections for them, but nothing exclusive). Queue my first release of RSTT, launched just a few weeks before RuneFest (the RuneScape convention), I had some users, but not many (maybe 10 per day at most), and showed it to some people while at the convention but not much interest from the people there (there was a surprisingly low amounts of enthusiasm for tools around the game considering the crowd).

The second iteration

After returning from RuneFest, with some feedback from Jagex employees to work off, and my own set of ideas to top it all of, I set to work on a new code base, a complete rewrite with the user interaction more in mind than the sheer “power” of my tools. It took a long time, much longer than I had anticipated, but I eventually finished the new code, which was my first foray into a properly structured code that I was pleased with and would happily show users (of course I didn’t, for security sake I didn’t feel comfortable with an open code base). I was now averaging about 40 unique users per day, with around 100 page views total, doesn’t sound that impressive really, but for a pet project intended only for a handful of people at first, it was enough to make me happily working on it. It was around this time I started feeling confident with WordPress (one might even say I’m a bit too confident with it at times), and decided the next iteration would be built on top of this. [caption id="attachment_307" align="alignnone" width="550"]Puzzle Solver The Puzzle Solver[/caption]

Enter WordPress

I’ve built a fair few sites in WordPress for various clients, more than I can count, many with very specific requirements (and some with really awesome plugins I’ve had the pleasure of writing from scratch for their site only), and I thus felt confident enough to build RSTT on WordPress this time. There are clear benefits to using WordPress, I’d not have to worry about the user system my self, all users are subscribers to the site, I can easily translate it using awesome features such as WPML or any other language plugin. There are plugins! The best thing about it all, allowing me to add and remove functionality at a whim depending on needs. I got my buddy down in Australia, Steve, who’s a wizard with Photoshop to whip me up a sexy looking theme, and I set to work, getting some added inspiration by the knowledge that I would be linked to in the most popular toolkit client for RuneScape, SwiftKit. This is where things get interesting, my site features maps of each specific location you can go to (including a map converter, which converts the in-game coordinate system to lat and long addresses for use in Google Maps, which I’ve hooked up with my own custom map of the game world).

The features in WordPress

I added everything in an orderly fashion on the WordPress version, a custom theme (from scratch, not a child theme), and all the bells and whistles done properly. I pride my self in making well written, easy to maintain code, and following the WordPress standardization for coding as described in the contributor handbook.

User accounts

Allow users to log in and track their progression and accumulated wealth,, this also allows you to share your progression with friends through your profile page This was achieved using the author template in WordPress, but I rewrote the slug used to access author pages, from /author/ to /user/

The clues

The data you look up are clues, I used a Custom Post Type (CPT) for these, which allowed me to make categories (taxonomies) to separate the different types of clues. I could have achieved this by just using posts, but I felt this was a much cleaner approach as I have editors helping me flesh out content and making the experience better for the users and this was thus an easier approach than teaching them how to use hierarchy categories.

Clue locations

I use Google Maps for the in-game map, this is a feature I was very happy when I managed to wrangle into submission as it allowed me to load the map in chunks, which helps on load times for people on slower connections. These are filled in using a custom meta value for everything in the Clue CPT, where the user fills in the RuneScape specific coordinates which is then translated into something usable by the system later on.

Tracking

Normally I would only track a clue when a logged in user clicked a track button, but I discovered very few users actually remembered to click the button (and a lot didn’t even sign up), to remedy this, automated clue tracking was introduced with the WordPress release. This means even users coming in to only view the result of a single clue gets “tracked” (In this privacy infused day and age, no personal identification is collected for this, if they aren’t logged in this is all registered to user ID 0, which doesn’t exist, and is purely for statistical purpose, if they are signed in, it’s stored to their user ID.

Plugins and extensions

As mentioned earlier, the main benefit of WordPress is the plugins system made available to me, it saved me a lot of time, and the site utilizes the following plugins;
  • jQuery Colorbox for opening images in a pretty colorbox to view details
  • Usernoise to handle user feedback and suggestions
  • W3 Total Cache Handles all my cache needs, minifies code, and also implements my CDN instance
  • WordPress SEO The yoast SEO plugin, because I like my google, and I would love to make it even better
I’ve also got the WPML plugin installed, but it i deactivated currently due to incompatibilities with other plugins i find more crucial than having my site available in French 馃檪 I’ve also implemented a Content Delivery network (CDN) to ensure fast serving of static content (my images, stylesheets, javascripts and such) through MaxCDN, and just a few days ago set up CloudFlare as well to increase load times even a little bit more. For those unfamiliar with the difference, a CDN serves static files, such as images, where as CloudFlare serves up a static mirror of your site (so the user would get your “site” served by a server close to the user, and the images on that site would be served by the CDN also from a location close to the user to ensure the fastest loading possible. CloudFlare also adds a layer of security, by serving your content they mitigate DDoS attacks which never reach your server, and identify malicious requests that are blocked for you. [caption id="attachment_305" align="alignnone" width="550"]Clue details Detailed information about a clue[/caption]

After the WordPress move (numbers!)

After the move was done, and the SwiftKit link was added, I now sit at about 150 Unique visitors per day (~55% of which are new users), at any given time of the day there is at least 1 active user, again doesn’t sound like much, but that’s 1 user minimum, every second of every day. page views are about to round 25k per month at this point, and my bounce rate is down from almost 98% to ~47% (I credit most of the bounce rate reduction to the implementation of the CDN and later CloudFlare, it’s been proven time and time again that a fast loading site keeps visitors). In the last 24 hours alone, CloudFlare identified 15 threats (where of 8 were unique) for me, and they serve over 50% of all visitors with a cached version of my site to speed up the experience. The users who don’t get a cached version? They are looking up clues that nobody else has looked up before, so I expect the number of cached hits to new hits to change as more users drop by. And finally, the SwiftKit linking, how did this affect my traffic? Right now, traffic from that link account for 62.5% of my visitors, only 4.8% of the visitors come in directly to the site (most likely because it’s very handy to just click the link in SwiftKit once they knew it was there) and a nice 31.9% come from search engine traffic (My current Google ranking is decent enough, I’m on the first page for all the keywords I can think of with one exception, which I blame on my poor writing skills and I hope will be remedied soon with the addition of more data).

What I learnt so far

This project, like most of my projects, are intended as a learning experience. I like technology, I like trying new things, if I didn’t learn anything new from a project, I feel like I’ve wasted my time. Firstly, this let me experience first hand the huge difference a proper cache system makes for a site, I hadn’t not played with many cache features until this project, but I’m glad i did as it will be a benefit both to me, and clients on future projects. Secondly, the wonders of a clean code base, and easily readable code. My first version of this site was a mess, and I still retain the code to it as a reminder of how terrible I was, and as a testament to how quickly one can adapt a proper style that allows anyone to pick up your files and say “oh, this does that” without banging their head against a wall. Documentation is key. I hate my self for not documenting a single function (as a matter of fact, I didn’t document a single line) in the original version. The first rewrite was much better, but the final version running on WordPress is properly documented, I think this is in part to the fact you NEED to write a comment line to start a theme or a plugin, which makes it a lot easier to just keep doing it throughout the project files.]]>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.