TiledStack - Web work and Dart client

Thought I'd post another update for TiledStack as I finally had some what of a win for one of the main features I've been trying to get done at various points in the past couple of weeks. Map preview for web. I want users to be able to (if they choose) to let their maps to be visible to rest of TiledStack users. Eg, visible in search/browse and also available to all other users via the API. Instead of users having to do the setup required to get the map loading locally in the MonoGame client (map name and author id), they could just preview the map within the browser with a simple camera to see if they like the look of the tileset and/or design of the map.

# Web Viewer

I've mentioned this previously and had it working as loading a static map with MelonJS (opens new window), but in the end I would like the be able to integrate live changes to be also visible from web, looks cool from MonoGame client and would be nice for people more interested in straight web development to also have access to this with a web example working. After trying simple integration, I found MelonJS quite difficult to work with for integration, but I still think is a great library for html game development and also one of the most (if not the most) feature complete when it comes to Tiled rendering (nice work guys!). I then tried to use 'CanvasEngine' which also has Tiled integration. I tried to get a simple isometric map rendering and just couldn't.. I went through the documentation, stripped everything back and just couldn't get the map on the screen. This project looks well architected, well thought out, but I just couldn't get it rendering. Not sure if there is a bug with the Tiled extensions or I just failed really hard.

# Javascript and Types

I've written quite a bit of Javascript over the past 5 years as a web developer. Part of me as grown to like the language, but I find with any dynamic language (Javascript especially) once a project/website/application/whatever gets large enough, the cost of maintenance and difficulty to understand how everything works together is just too high. I. Love. Types.

I want this to JUST WORK without all the type boilerplate. Now excuse me while I go write these unit tests one by one.

— Rúnar Óli (@runarorama) November 15, 2013 (opens new window)

This sarcastic tweet nails why I love types. After losing many hours to trying to understand other peoples implantation of game engines that happened to support rendering Tiled maps I gave up and decided to dive into learning Dart.

(opens new window)

This decision was validated in about 5 hours of work from barely having touched the language/frameworks.

I ported the data structures, importing and rendering code from the MonoGame client. Worked through the many BUILD errors, learnt some more about canvas rendering, imported game_loop library to get some import working and it worked. There was some head scratching I'll admit, but in all honestly, most of what I lent on was what I was getting back from the auto-complete dialog.

void GetMap() {
        HttpRequest.request(baseAddress + "api/tiled/" + AuthorID + "/maps/" + mapName + "&format=json").then((r) {
          if (r.readyState == HttpRequest.DONE &&
          (r.status == 200)) {

            Map response = JSON.decode(r.responseText);
            MapDto mapDto = new MapDto(response);
            currentMapDto = mapDto;
            currentMap = xTiledLoader.LoadMap(currentMapDto);
            renderRegion = new Rect(canvas.clientLeft,canvas.clientTop,canvas.clientWidth,canvas.clientHeight);
            camera = new Camera(currentMap,renderRegion);
            renderer = new TiledIsometricRenderer(canvas,context,tileProvider,camera);
            mapReady = true;
    }
});

Now, obviously this Dart web viewer is compiling (transpiling?) down to Javascript to work across browsers and I don't have anything against running Javascript, I'm just completely over writing lots of it. Scott Hanselman (opens new window) has written a couple of blog posts about Javascript being 'the assembly language of the web' and at first, I thought it was a silly statement. As I continue to work on larger and larger complex web applications, I find myself agreeing with him. I highly recommend giving "JavaScript is Web Assembly Language and that's OK. (opens new window)" a read. I think it would be a good thing if that in the not to distant future I'm writing the same amount of Javascript as the amount of x86 assembly I'm writing now... that could really backfire, but you know what I mean 😃.

# User Registration/Login UX

Another distraction has been UI and process tweaks for new users coming to the web front end. This is something I find way to easy to sink hours into tweaking. Hoping that most of this work is now out of the way.. until I test it some more and find niggling inconsistencies..

On user registration, I'm hoping there are a few indie game development teams working with Tiled that might be interesting in having a try of this framework in new year. I plan to have the MonoGame client, Dart client and some semi-decent API documentation ready for January public testing. The AWS hosting is obviously not free so this will most likely be limited to cut down on costs. There will still be a lot of missing polish, probably lack of installer and Windows only support for collaboration clients initially but with any luck produce some useful feedback. If nothing else useful comes out of all this, clients are not tied to TiledStack servers and with minimal change can be used as simple Tiled renderers.