Sophia’s first tiles!
Embrace the pixels!

Sophia has been chomping at the bit to make more games. Since it’s been going on two years since I last flexed my gamemaking muscles fully, and since I rather adore Sophia, I’ve been chasing this rainbow.

I’ve been ever more intrigued by the idea of a pure html/javascript game engine of late, and have started taking existing, established tools (like mapeditor.org’s tiled) and putting them into the browser.

Here’s the result: (currently firefox-only). To fully get the pleasure, inspect elements on this example in firebug.

The idea is simple: html/js has affordances baked-in to parse xml documents. This can handle traditional map data. css sprite-sheet techniques have been used for years now, which directly mimic old tilset/vsp-style assets. Combine the two… and you have a effen map. Throw in browser optimizations for visible/hidden elements, and we should have a relatively cheap rendering method.

The above test is fairly simple: one 30×30 map, one layer. It loads instantaneously fast. It’s tiles are a single gif sized 304×144. Fairly economical. I decided to shove each of these boys into a div for now and use the background-image css spriting technique to get a “purist” tiling implementation going.

I opted against using canvas for now because I wanted to see how far I could get without it. So far so good, but I’ve not yet really stressed the system. The next jump will be to take some of my epic 6-layer maps from SotS, translate them into xml, and see how they fair in the browser.

Of the code I wrote, I suppose the “sauce” was a fairly common offset calculation. Although this sort of endeavor may not be so common in the modern age, it’s pretty commonplace to those of us who labored in 320×240 back in DOS. Get off my lawn.

var tileset = {
    tileWidth: 16,
    tileHeight: 16,
    setWidth: 304,
    setHeight: 144,

    getCoordsfromIdx : function( idx ) {
        var idx = parseInt(idx);
        idx--; //tmx is 1-based, not 0-based.  We need to sub 1 to get to a proper mapping.
        //idx--;

        var perRow = this.setWidth / this.tileWidth;

        var x = idx % perRow;
        var y = (idx / perRow);

        return [
            -(parseInt(x)*parseInt(this.tileWidth)),
            -(parseInt(y)*parseInt(this.tileHeight))
        ];
    }
}

This is converting a single tile index into two coordinates for the renderer to consume. For instance, if you want tile 2, it takes a ’2′ at the top, does some maths, and tells you that tile 2′s offset is 16 pixels in from the top-left corner, and 0 pixels down (ie, on the top row). Some strange quirks of this code: I had to decrement the idx, because Tiled’s xml format is 1-based, not 0 (ie, the first tile, the one at (0,0), is index 1, not index 0); and I negate the two numbers I return because the consumer of these coordinates is a css background-position style, and that’s how they work.

Also of note was a small hiccup when I uploaded this to my server. My sandbox had no trouble serving a .tmx file as Content-Type: text/xml, but my big-boy server threw a conniption about it. I didn’t realize that was a problem until I threw some debugger statements into the code that “should’ve just worked” and found that all of the proper stuff was in the responseText attribute, but responseXML was null. So I renamed the mapfile to .xml on the server and everything worked fine.

I guess next step, before trying to stress the system with a super macho map, is to figure out why this isn’t working in Safari/Chrome/IE/Opera/Whatever…

Yesterday, I got the file directory view completed for beta.verge-rpg.com. See it at http://beta.verge-rpg.com/downloads/directory/.

Next up will be the file redirects! Whee.

Hey Kildorf, where’s your post?

I also cleaned up layout errors and corrected a bug in screenshot uploading. Also improved the search result page.

Three minor files section tasks left: A directory link/listing, build the legacy 301 redirect table, and give the files frontpage some polish.

Next major task after that: the Gallery Controller.

The most pedestrian screenshot ever. To what depths has this once-mighty work-journal fallen?

My gruedorf showings are shameful of late, and so are all of yours. The only one holding the line at this moment is Ustor. Perhaps this should be called “UstorUstor”. Or “TorUs”.

At any rate, my small token to personal projects this week is the file management section’s edit page. Woo, now you can edit your files once they exist. Necessary, and very quotidian to a web developer.

Up next on this mystical journey is the upload section’s frontpage, featuring most downloaded recently, newest files, and staff picks (aka, Demo Alarms). After that, we’re a docs section from release. At this point, I think I should screen-scrape my old site’s documentation and import all of that into a wiki. Anyone have objections?

Also I made an schema-application tool to keep track of which .sql files have been applied in what environment.  Trust me, this is useful.

So where did I go for two months, far, far away from Gruedorf?  I honestly can say I was shocked to crack open this dev folder to find the last svn log from July 10.  So wherever I went, it didn’t seem as long as it was. :(

However, I still got 14 commits in.  (All of them Friday morning.)

The work done was all in finalizing the /downloads/complete-new-os/ page, and tracking down and fixing errors that had cropped up in the upload process.

The second item distresses me, presently, since a solid upload system was the main impetus for the rewrite.  finding out that uploads are still fragile and very prone to breaking with forward development, combined with the fact that I don’t have a testing strategy for roundtrip uploads, means I’m kinda nervous.

So, anyone out there have a good solution for a round-trip integration test where you upload, via flash and javascript, a unique file, and then verify that the file exists on a unix filesystem, and then verify that a corresponding database entry and further corresponding webpage works?

Moving forward, I’ll be working on an administrative page to allow file owners/admins to associate file instances as older/newer versions of the same file.

Since last I posted about beta.vrpg, 58 revisions have occurred. In that time:

• I got file submissions up.
• I got (simple, title-based) file searches up.
• I got most of the file details page up (thread spawning, screenshot uploading pending).
• I did a lot of database reworking and massaging, mainly to get to a point where…
• …single file entries can have multiple physical files attached, so one game can have file links to every OS it’s released on

Oh, and I made a Silly 500 Internal Service Error page.

Definitely the most important part of this work.

Going forward will be finishing the file management side of things (letting you deprecate old versions of files in favor of new ones, showing a browsable history, letting you edit and delete files you own), and cranking out the community-based side of things (ie, image uploading and talkback threads on file pages.) After that, advanced search options and a browsable file index, and the section should be complete.

I’m mainly excited to see a upload system that hasn’t seen a failure yet. This was one of the major failures of the current vrpg that prompted the rewrite. I used swfupload for the actual UI/handling of the upload, and integrating it went very smoothly.

A need for a simple one-off occurred Monday evening at work. Some non-engineer coworkers needed to be shown how to make some non-Latin-1 text into html entities.

Basically, they needed a 5 line php script.

Right before sending them to any number of sites that already do this 5-line operation, I decide: what the hell, I’ll just make one of my own. And so, that night after unwinding, I did.

Here’s my HTML Entitizer. Suitable for all your HTML entitizing needs, large or small!

PHP in Escape from L.A.(jokesfornerds)

One of the reasons PHP is so popular is the fact that it’s got so many handy little functions. In this case, htmlentities() is the blade of PHP’s swiss army knife that we’re using. Of course, indiscriminate use of functions like this cause problems like double-escaped characters (&) showing up in databases.

PHP’s solution to this sort of thing is generally to throw new corkscrews and toothpicks onto it’s ever-growing pile of tools on it’s knife. If you look at the documentation page for htmlentities(), you can see that as of version 5.2.3 of PHP, another optional parameter was added: double_encode. Which will

Getting the right escape order can be hard, especially for novices or small teams inheriting code from other small teams. To date I don’t think I’ve inherited work on a webapp whose database wasn’t littered with extraneous &’s and rogue \\’s. It’s only by virtue of verge-rpg.com having a single developer who is really, really annoyed by this problem the the point of neuroticism that & never appears in the database except in posts that actually wanted to display &.

Although even this level of OCD-database-cleansing didn’t prevent escaping-related errors on the first go-round.

Teh (sic) Implementation.

So, the only time-consuming part of getting this script into my wordpress site (other than me taking a bloody half hour to blog about a 2-minute job) was convincing wordpress that it should allow <?php fragments into my posts.

Luckily, other people before me have wanted this very thing. WordPress’s biggest strength is again one of PHP’s: if you want it, it’s already been made for you. In this case the Exec-PHP module will let admin-level users of your blog post for-reals, actual PHP into your posts! You’d better hope your admins don’t have their accounts compromised! (…one moment. Changing my password.)

In PHP’s case, the code that you want that’ already been written for you is in every single function’s talkback thread. These functions may not be hyper-optimized or the best solution for any given problem, but they generally are what you want to prove a point. You scan the docs, you grab the code, you put it in your site, and you move on to the next problem in your own app.

Quick and dirty, the way PHP likes it.

For the curious, here’s the solution I spat out (copy included):

<h1>Escape html</h1>
<p>This is a simple script to give the escaped codes for some html. Useful
for making foreign languages play nice with html, regardless of how the
server handles string encoding.</p>
<?
if( isset($_POST['escape_me']) ) {
echo('<h2>Your escaped html</h2><div'.
     'style="background-color: #ddd; padding: 8px;">');
echo(str_replace('&','&amp;',htmlentities(stripslashes($_POST['escape_me']),
     ENT_NOQUOTES,'UTF-8')));
echo( '</div>' );
}
?>
<form action='/html-entitizer/' method='POST'>
Text to escape:
<textarea name='escape_me' style='width: 550px; height: 200px;'></textarea>
<input type='submit' value='Create my html entities'>
</form>

(weird formatting so it doesn’t run off the side of the screen; I don’t actually code like that. Mostly. ;)

Coda

It is of note that this tiny amount of effort got me two really sincere “thank yous” from the non-engineers. It’s important to note that things that are mindlessly trivial to a programmer can be tedious tasks to someone without the power to bully the computer into doing labor for them. One of the guys, a computer saavy guy who had access to lists of what each escaped character translated to, insisted that he’d just search/replace the offensive characters by hand.

Ostensibly, this was offered to save me work.

How much time did my 2 minutes of code save him?

(Don’t forget a google for “html entity converter” would’ve saved even that, had I cared to not make the tiny toy script of my own. I’ll ramble on about re-using other people’s work more later, but it’s key to remember even what little work I did end up doing was extraneous and largely an exercise in vanity.)

Actually, it’s quite brisk now. Almost 60 revisions have passed in the last week.

Gayo and crew have banged on the forums, and I patched several oversights. Locally I’ve moved on to the new downloads section, which I’m looking forward greatly to finishing. Mainly so there can be an upload script that works for most users and gives progress feedback.

Are all webapps 98% mundane crap? I’ve been doing them for almost a decade now, and I think I have an answer.

(The answer is “yes”.)

As of revision 237, the section is good to go for this run-through.  I’m going to now move on to the file section