For this one I decided on a type of game that I have been wanting to make for a while, a turn based strategy game. Many moons ago I used to play a J2ME (shudder) game called Ancient Empires. It was a great little game with lots of depth and replayabliltiy and I think it deserved a remake of sorts.
This game was far more complex to create than Latesha’s Crib and hence I spent about 43 hours over the last 9 days making this one.
I was able to save some time by reusing parts of the rendering and hopping logic from Latesha’s Crib. As usual I used the Ash Framework with Adobe Starling and Feathers. To code the AI for the computer player I used Tim Conkling’s Excellent Godmode Behaviour Trees library which is truly an excellent AS3 library. The way Behaviour Trees work is really cool, I strongly recommend checking them out if you are going to design any sort of AI.
Special thanks go to Mike Rigby for helping with play testing and Ian Callaghan for suggesting I check out Behaviour Trees
Let me know what you think of it, if people are feeling it then I may turn it into a full-blown mobile game!
Again I recorded the my time spent making this one, heres the log:
9:30am – 2pm
3pm – 7pm
9:30am – 10:30am
12:00pm – 4pm (-1 for josh, -1 for lunch & spanish)
2pm – 19:30pm
1pm – 3:30pm (-1 spanish and lunch)
4pm – 6pm
As promised I have decided to write a few blog posts on some of the technology behind my recently release Chrome extension Recursive.
Because there is quite a lot to cover, the discussion is going to be split over three posts. The first part is about the structure of the extension, Typescript and other tools and tech employed. The second will cover the actual recursing / crawling part of the extension. In the final part i’ll talk about how I went about representing, laying out and rendering all the data that the crawling part generates.
With that out the way lets get on with the show..
General Page Layout
When a user open a new tab or browses a new page in Chrome a background script in Recursive inspects the URL you are visiting and so long as it is of type http:// or https:// it will add a small icon to the omni bar:
Recursive is the first project I have had the opportunity to use Twitter’s Bootstrap. Bootstrap takes much of the pain (I tend to suffer from) out of generating a decent looking HTML interface. Because of it ubiquity it can cause a lot of sites to look very samey, for Recursive however I wasn’t interested in spending all that much time making a unique looking interface so the default style suited me just fine.
General Code Structure
There are three main parts of the application; the HTML and its associated controlling logic (jQuery stuff), the crawling logic and the rendering logic. I have attempted to keep the three parts of the application as separate as possible. The reason being that hopefully it will make things easier in the future should I ever wish to swap out one of these features, for example swapping the canvas2d renderer with a 3d one.
Typescript Code Structure
I have already mentioned in a previous post that I took advantage of the new language Typescript from Microsoft to build Recursive. I won’t reiterate the reasons I really like Typescript (I should be paid for my evangelizing ), go check out my previous post if you are interested in hearing my thoughts on the language.
The way I have structured things in Recursive is to have a central context / entry point in the form of a file called app.ts. This file lives in the root of the project and I use it as a sort of globals file. I know, I know what you are thinking, “Globals! Mike, you should know better!”. In this instance however I think because Recursive is a standable app inside an extension it is unlikely to conflict with any other JS (supposing the libraries I use dont declare any global variables). Besides I don’t like the alternative that involves using RequireJS or AMD due to all the magic strings and non-type safety involved.
App.ts also contains references to every other typescript file in the app. This means that when a new TS file is created I only have to add a single reference back to app.ts and all the classes and types contained in the other files will be available (this solution actually feels kind of icky, much in the same way as globals do, but one of the samples on the Typescript homepage uses this ‘driver’ method so I guess its okay!).
One thing you have to remember with this ‘driver’ method is that every time you create a new TS file, you must also manually add the generated JS file to the html page. Also you must insert the JS files in the correct order in the page head else the types won’t be available when the script is loaded. It would be nice if I could just have included app.js in the html page and then have all other .js files automatically added in the correct order for me. This is what RequireJS is supposed to do for you I guess. Another solution would be to use source-maps to map to the original Typescript code (when debugging in chrome) however I had a great difficulty with getting this to work in Chrome so decided to move on.
One important lesson I learnt while working with Typescript on Recursive and with working with JS in general is to try not to fight it too much. Just because you have type safety doesn’t mean you HAVE to make everything type safe all the time, particularly if its going to take you hours to implement it in a type safe way. Just because you can separate all your classes out into separate files doesn’t mean you have to, sometimes it makes more sense and is easier to implement if a few enums or helper classes sit inside the same file.
Finally, as a little extra I decided to put in a splash screen when you first start up Recursive:
While designing this I was also trying to come up with a logo and name for the app. I was toying with the name Recursive and it got me thinking about fractals and L-Systems. As I am easily distracted I decided to quicky have a go at writing an L-System for the splash screen. It wasn’t hard to implement but tweaking all the parameters turned out to be a lot more fun than I was expecting so I spent most of one Sunday evening just playing with it
Well that’s about it for the first part of my discussion on the internals of Recursive. This post didn’t didn’t contain too many details on what Recursive actually does and how it does it rather it was intended to lay the groundwork for those topics in the next two posts. So stick around for those coming up in the next few days!
Wow, well that took longer than expected! 44 days ago I blogged that I had started work on a second version of my Chrome Crawler extension and have only just managed to get it to a state I was happy with enough to release it. To be fair I had been on a trip to New York during that period so perhaps I can be excused. Having said that however I think the time has been well spent and am fairly proud of the result.
Recursive is an experimental tool for visualising the world wide web. Given a URL it downloads the page search for links and then recursively downloads those. The information is then displayed in a node-based graph.
So what’s this all about? Why is it called ‘Recursive’, why not ‘Chrome Crawler 2′?
Although I would like to have called the spiritual successor to ‘Chrome Crawler’, ‘Chrome Crawler 2′ Chrome’s branding guidelines forbid using the Chrome name or logo (they brought this in since the launch of Chrome Crawler 1).
With that in mind I decided that rather bend Chrome Crawler’s name and logo to fit the guidelines I would create a whole new logo, name and app. The app is a total rewrite from the previous iteration anyway so I thought it justified.
According to dictionary.com there is no definition for “Recursive” or “Recurse” but there is one for “Recursion”:
2. the application of a function to its own values to generate an infinite sequence of values.
So a tool that downloads pages, follows the links on that page to download other pages seemed like a rather apt description of something that is “Recursive”.
Before I go much further, I put together this little video demonstrating some of the extensions core functionality:
Installing and upgrading is dead simple thanks to how Google Chrome’s extension system works. Just head over to this link and hit install:
Then to launch it visit any website and hit the little icon in the Omnibox:
How it works
Recursive works by taking in a starting URL which it uses to download the page it points to:
Once that page is downloaded Recursive parses it looking for links and files. If it finds things it thinks are files then it records them against that URL. It then proceeds to visit all the links in turn, downloading the page then parsing the for yet more files and links.
This cycle continues until a certain “depth” is reached which is the maximum number of links away from the starting URL. You can set the maximum depth allowed in the settings:
One of the key improvements of Recursive over Chrome Crawler is the way it visualises the data as it is returned:
Every page is grouped by its domain and is represented by a circular “node”.
So for example “http://mikecann.co.uk/personal-project/tinkering-with-typescript/” would be grouped under the “mikecann.co.uk” domain. Any other pages found while running that match this domain are added as little page icons inside the host node.
Any files that are found on a given page are given an appropriate icon and added to that page’s domain node.
As Recursive downloads pages and follows links it records the path it takes. It then draws lines between the nodes that are linked:
Using the mouse wheel you can zoom in and out to get a better perspective. Click and drag to move about the recursive space. You can also run the app in fullscreen if you so desire.
If you click on a node it tells Recursive to explore that node for one extra level depth.
Right clicking a node opens a menu that lets you either open all the pages contained in that node or view the files for that node.
By using the context menu for a node you can checkout all the files that Recursive found for that node. The files are separated into various categories which you can toggle on or off:
Then if you wish you can download all the files as a zip.
I think i’ll leave this section for the next blog post as this one is long enough already.
If you would like specific info on the tech in the meantime however or have some suggestions for features then don’t hesitate to contact me: firstname.lastname@example.org
Well that’s about it hope you like it. I had a blast making it even if it did take alot longer than I was expecting. It doesn’t have much purpose really but there is a lot of cool new tech in there, which is reason enough to make it surely?