On the 22nd and 23rd of September Warsaw was host to the first ever HTML5 games conference; OnGameStart. While game development in HTML5 is a relatively new area, the conference managed to bring together almost 300 people from all over the world to discuss the future of gaming and game development in the browser. Among those 300 people were 19 great speakers, a large group of organizers and the 4 major browser vendors.

The talks ranged from how to publish and monetize games online to technical discussions on Oct-Trees and how to implement them. The variety of talks made it apparent that we who are interested in making games in HTML5 is a large and diverse group. There were several large companies present who had invested considerable time and money into making games in HTML5, investments which are only just becoming profitable. Some of these companies make game engines (for example ImpactJS and enchant.js) while others focused on the publishing possibilities of HTML5 games (Spil Games).

Microsoft, Opera, Mozilla and Google all had representatives present to evangelize their browser and boast about gaming on their platform. Even the W3C showed up to discuss features which could be included in HTML5 to make games in browsers even better (Mouse Lock is one such feature soon to make its way into the browser). With such major players all interested in game development in HTML5, the future of browser games looks very bright.

Several unsolved issues with HTML5 gaming were discussed, and especially Rob Hawkes (of Rawkets.com) brought up some interesting points about cheaters and multiplayer games. Since the source code of HTML5 games are sent to all the players, and this code can be edited while the game is running, it becomes very easy to cheat in almost all HTML5 games. This is a major problem with realtime multiplayer games, where a JavaScript hacker can quickly ruin the game for all the other players. Rob discussed measures to prevent this by running the game engine on the server side, which introduced new problems due to the network implementation of WebSockets. Because WebSockets use TCP, packets are guaranteed to arrive in the correct order, at the cost of transmission delay. In a realtime game the delay should be as low as possible, and the value of a packet arriving quickly depreciates. Very few people have looked into this problem for WebSockets, and because it uses TCP instead of UDP, it is still uncertain how much can be borrowed from other multiplayer engines (reddit discussion).

Several demos of games in HTML5 were presented, including the Isogenic engine by Rob Evans, and Team Fortress 2 in WebGL by Brandon Jones. These demos show not only what is possible today, but what is possible in the near future. Based on these demos it is impossible to predict what will be available to gamers in 2 years time, when the technology has matured even further. There was also a large focus on mobile gaming, and several games were shown running on tablets and mobile phones, either in the browser or through technology like PhoneGap. The latter is especially interesting, as it enables game developers to release the same native game for several platforms without any further work.

My talk at OnGameStart2011 was titled "How to build a 3D engine in HTML5" and with it I wanted to show how the Canvas element can be combined with JavaScript to create a simple 3D engine in HTML5. A video of the talk is available at Vimeo, the slides can be found online, and the source code to each of the demos are available in my repository (my SVN server crashed, so I have uploaded the presentation to GitHub). The talk was to be less than an hour long, so I decided to focus on the absolute basics of making a 3D engine, completely from scratch. Instead of using WebGL, I wanted to show how a 3D engine could be made using only 2D API calls. While such an engine would not be as powerful as Brandons Source/Quake/Rage engines, it would demonstrate how 3D engines work, and how to optimize drawing in the 2D context.

In the short time since OnGameStart, several conferences have been held where HTML5 game dev has been discussed, including JSConf.eu, a W3C event and in the beginning of November San Francisco will host the New Game Conf. With all of this focus on browser game development, the future of HTML5 games looks really bright, and with the rapid development of modern browsers, things which were impossible two years ago is now easy in all of the browsers. By extrapolating from this it is obvious that nobody can predict what browser games will look like in a few years.

At the beginning of last semester i started designing a pimpin' Imponator, a Pimponator. This imponator, like all imponators, would use flashing LEDs to impress other students, but I would be able to reprogram it from my cellphone using Bluetooth. The front of the Pimponator would have a 16 by 5 LED matrix, where the brightness of the LEDs could be controlled individually. The design was quickly finished, and I soon had a soldered device to play with. The only problem was that it didn't work. And so it ended up at the bottom of my electronics drawer, along with all the other projects I never finish, and it remained there for almost six months.

A few weeks ago I decided to make it work, no matter how much time it would take. The device had worked in a few tests, just not consistently, so I knew I would eventually get it to work. After a few days of scoping, debugging and soldering I finally got rid of the bugs, and had the Pimponator communicating with my Android phone. It took another few days to put the firmware and Android app together so it would work as intended.

The Pimponator Android application makes it easy to put together an animation for the device. Several scrolling text phrases can be combined to make an animation, which is compiled into hexcode on the phone before it is transferred using Bluetooth to the device. The device stores the animation in flash memory, so even if the battery is replaced, the animation is still there.

The Pimponator uses an AVR Atmega 128 micro controller, running at 7.372800Mhz, to control the 16 column by 5 row LED matrix. The micro controller has 64KiB of flash available for the animation, which means it can store almost 6000 frames. To transfer animations to the Pimponator an RN41 Bluetooth module, which shows up as a virtual COM port, is used. The Android phone is running an app which opens a serial connection the the AVR when it is time to transfer the animation.

The Android app can store several animations, each made up of one or more sequences of frames. Currently the app only supports scrolling text, but because it is plugin based, it is very easy to write another app which produces a different sequence.

A few weeks ago the remote to our TV went mysteriously missing, and since then we've had to change channels by getting out of our sofa. Obviously this is not the way TV should be enjoyed in the 21 century, so we needed a new remote. Instead of buying one I figured I could make one. At first I attempted to make one for my Android phone, by connecting IR LEDs to the audio jack, but so far that has failed to work. So over the weekend I decided to convert an old NES controller into a remote control.

Step one was to make a PCB that would fit inside the controller and have all the buttons (8), plastic pins (3) and screws (6) align properly. On this PCB I also needed to fit an ATmega168 and a button cell, along with some resistors and capacitors. After printing, exposing, developing and etching the board, it was soldered together and ready for programming.

Step two was programming the AVR. Since the remote would run of a single button cell battery, it needed to use as little power as possible. ATmegas have the ability to sleep, which will turn off everything, including the system clock, and will only wake up when one of the buttons is pressed. In Power Down mode, the remote used 1.5uA, which means it will (theoretically) still work a decade from now on a single battery. When a button is pressed, however, the LED drains quite a lot of power, so it wont last anywhere near that long with active use.

Once a button has been pressed, the remote needs to send an IR signal to the TV. Most IR remotes transmit a 38kHz square wave which is turned on or off to encode bits. We (used to) have a Sony TV remote, which meant I had to replicate the Sony IR protocol. This is a really simple signal to create, since all the pulses are multiples of 600uS. The next step was to find the code each button had to send to the TV, something the LIRC project has available. With each of the buttons programmed to transmit a different code (up and down changes channel, left and right changes the volume, select is mute, start is power, A changes to channel 1 and B changes to a random channel), the remote was complete. I tested the remote with my cell phone and compared the signal (using an oscilloscope) with the intended signal, before heading home and confirming that it works on the TV.

The files for the NES Remote can be found in the Subversion repository: svn.mariusgundersen.net/NESRemote

In my spare time this summer I've been working on a mechanical braiding machine. I'm not sure where the idea came from, but one night I jotted down the design for a mechanism to braid three threads together. The design quickly went from the notepad by my bed to Blender, where it took about 2 weeks of programming (the gears were generated by a python script) and modeling to have a finished braiding machine. Then it took Shapeways exactly one week to print up the device and deliver it to my door

When I received it, a few parts were merged together, probably because of low clearance. Both the gears were merged with their respective axles, but a careful twist got them loose. The only other assembly required was to push the top axle with the gears into position (it was left out of position so the gears wouldn't merge together).

The BraidMaker worked as intended right away, except for locking up once in a while. This is solved by gently tapping the device so the pieces fall into the right spot (I have to do this a few times in the video). It runs smoother the more you use it though, probably a combination of me learning how to operate it properly and the track getting smoothed by the moving parts.

Some of the parts of the device are very thin, like the gear teeth (which are no more than a millimeter thick) but it is still very tough and handles being used very well. The material is truly white, strong and flexible. When running it leaves a thin blanket of white dust on the ground, probably from the moving parts grinding against each other, but that is (hopefully) only while it is new.

All in all I'm very satisfied with the BraidMaker. I was expecting several parts to be merged together, the gear teeth to be too thin and therefore snap when I'd try to use it, and the device failing to braid at all. Nothing has broken off yet, and it is quite capable of braiding (thin) threads!

The BraidMaker is available at my Shapeways shop for $17 in WSF.

I've fixed the biggest bug from the previous version of Wake Me Up Spotify; it is now possible to use a playlist to wake you up! The fix was simple, and like the rest of the app, a hack. It just closes spotify 2 minutes before you want to wake up. Then it reopens it again (T minus 1 minute), and starts playing at the specified wake up time.

The latest version can be downloaded here: WakeMeUpSpotify (0.2)

Using Wake Me Up Spotify

When you start Wake Me Up Spotify for the first time, a yellow banner (1) at the top of the app will indicate that you need to locate Spotify on your computer. Click on the banner, and find the folder where Spotify is installed (usually C:\Program Files\Spotify). You only have to do this once.

Now you need to specify the time you want to wake up at. Enter the time (in hours:minutes) in the small text box (2). Next you need to find a song or playlist that you want to wake up to. Open Spotify and find a song or playlist, right click it, and click "Copy Spotify URI". Then paste it in the large textbox in Wake Me Up Spotify (3). Now you are ready to go to sleep!

You can hide Wake Me Up Spotify by clicking the minimize arrow on the toolbar. This will minimize the app to the taskbar (the bottom right corner of Windows). The app will still run from here. If you close it, it will not wake you up.

I just received my first ever 3D printed object from Shapeways, a CentripetalBox. Shapeways provide a cheap and simple way to 3D print anything you can imagine in a variety of materials, including ABS (like Lego), stainless steel and even color printed 3D objects. This is the first time I have 3D printed anything, so I was quite excited, but at the same time expecting a designflaw showing up in the finished product.

The design I got printed was a CentripetalBox, a cube which needs to be spun around quickly to be opened. You can see a video of how it works below. The original design had 4 plugs which would fit inside the 4 slots in the box and lid, but due to the inaccuracy of the printing process, the plugs where slightly too big. The lid was also a bit too big, and needed to be sanded down slightly to fit inside the box. This was expected, but what was not expected was how tough the material was. I printed in White, Strong and Flexible, and while the surface is quite rough and seems fragile (small particles of the raw material powder will come loose if you scratch it), the actual box is pretty solid. I tried sanding down the plugs so they would fit inside the slots, but quickly moved to a file instead. A Dremel might have been a good tool to have handy. Instead of using the printed plastic plugs I used a thin steel rod cut into plugs. It might even be that the plastic plugs are too light to work. A few more days of sanding/filing, and I'll know.

Having discussed the end result and design with my dad, we came up with some improvements. I'll make a new version for the Shapeways shop with those improvements (and bug fixes, like smaller plugs, and a tiny gap between the lid and the box). This is the first thing I have ever made in Blender and then 3D printed, and the fact that it works (with a bit of post-production work) is more than I expected. I have a few other ideas for 3D printing, and I'll work on them this spring (or autumn, if you are in Australia).

I made this blog to have a place to post the applications and programs I have made, and for that I needed a Content Management System (CMS). I looked at some CMS plugins for WordPress, but most of them are overkill for what I need. Instead I decided to use the built inn Categories of WordPress. I created a category called Project, and for each project (a program, website or anything else I made) I would add a sub-category with that projects name. With this simple method I could create several posts describing the progress of a project. Now all I needed was a page with all the projects listed, and maybe the latest posts for each one.

I solved this by making a page Template (not to be confused with Theme, which is something completely different). The template lists all the subcategories of a category, specified in the page metadata, along with the category description and the last 5 posts for each category. This way you can list all the projects on one page and link to the most recent information for each one. Because the category name is specified in the page metadata, you can have multiple CMS pages, for example, ideas, projects or experiments.

Add the template file to /wp-content/themes/<active theme>. To use this template, make a new page, then select the template called 'CMS' from the list of templates. The content will be shown at the top of the page. Next you need to add a metadata (also called custom field) to the page, with name 'category' and value equal to the category you want the page to show. You might need to edit the template slightly for it to display properly with your theme.

<?php

/*

Template Name: CMS

*/

?>

<?php get_header(); ?>

<?php if (have_posts()) : the_post(); update_post_caches($posts); ?>

  <div class="post" id="post-<?php the_ID(); ?>">

    <h1><?php the_title(); ?></h1>

    <div class="content">

      <?php the_content(); ?>

      <?php if(count(get_post_custom_values('category')) > 0 ): ?>

        <?php $category_slug = get_post_custom_values('category'); $category_slug = $category_slug[0];?>

        <?php if(($category = get_category_by_slug($category_slug)) != null): ?>

          <?php $categories = get_categories(array('child_of' => $category->term_id, 'orderby' => 'name', 'order' => 'asc')); ?>

          <?php foreach($categories as $category): ?>

            <div class="post">

              <h2><a class="title" href="/category/<?php echo $category_slug."/".$category->category_nicename; ?>"><?php echo $category->name; ?></a></h2>

              <div class="content">

                <p><?php echo $category->description; ?></p>

                <!--Latest post -->

                <?php $posts = get_posts("cat=$category->term_id&numberposts=5&order=DESC&orderby=date"); ?>

                <h5>Latest posts</h5>

                <?php foreach($posts as $post): ?>

                  <?php setup_postdata($post); ?>

                  <div class="content">

                    <a class="title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

                    <span style="float:right" class="date"><?php the_time(__('F jS, Y', 'inove')); ?></span>

                  </div>

                <?php endforeach; ?>

              </div>

            </div>

          <?php endforeach; ?>

        <?php else: ?>

          <div class="errorbox">

            <?php echo("Category '$category_slug' was not found!"); ?>

          </div>

        <?php endif; ?>

      <?php else: ?>

        <div class="errorbox">

          <?php echo("Add a custom field with name 'category' and value equal to the name of a category"); ?>

        </div>

      <?php endif; ?>

    </div>

  </div>

<?php else : ?>

  <div class="errorbox">

    <?php echo('Sorry, no posts matched your criteria.'); ?>

  </div>

<?php endif; ?>

<?php get_footer(); ?>

Wake Me Up Spotify

This simple app lets you wake up to your favorite song or playlist by using Spotify as an alarm clock. Just set the time you want to wake up and the Spotify URI you want it to play, and your done. It will automatically open Spotify and start playing, and you can minimize it to the tray so it stays out of the way.

This is the first program I've ever made in C# and WinForms, so it's pretty simple. Most of the development time was spent making WinForms look nice, something it's definitively not designed for. For example, to add the nice shadow around the app, I had to sacrifice the blinking caret in the textboxes. Styling textboxes is also pretty difficult, so the simplest thing is to position so they line up with a background picture of the form. The rest of the time was  spent making it work with Spotify, using the Spotify Remote API. Spotify gives you very little control; I'm only able to play, pause, stop, play next and previous song and change the volume. To play a song specified by a Spotify URI I have to start Spotify with that URI as argument.

The program still has a few bugs, so don't use it as the only way to wake up. For example, while it is possible to play a song at any time by starting Spotify with a song URI, it is not possible to make it play playlist when it is already open. If you want to wake up to a playlist, make sure you close the Spotify before you go to bed!

Download WakeMeUpSpotify (65kB)

This week I set out to make a simple batch application for renaming files. Specifically I wanted to rename folders containing episodes of a TV-show. These files tend to have very ugly names, containing the name of the show, the season and episode, the guy who uploaded it and the file type. I want my collection to contain prettier names, and so I decided to make a batch renamer that could make the folder look more appealing.

I decided to make the application using XUL Runner. XUL Runner is made by Mozilla, and is essentially what Firefox and Thunderbird runs in. It lets you create an GUI using XUL, JavaScript and CSS and then run it as an application. Having made a few extensions to Firefox in my time, XUL was a familiar concept and it didn't take long until I had a simple working version.

Regex Renamer lets you pick a pattern from a drop down list. It will then look for files that match the regular expression, and renames only those files. This means that if you have a folder where all the files have similar names, then you can rename all of them with a single click. The application also lets you create custom patterns, import and export the list of patterns from/to a file.

It's not the most user friendly application in the world, and it could do with some work on editing the pattern list, and maybe have a cheatsheet on regex built inn. But for a simple application that took less than a week to code up, it works pretty well.

You can download the application for windows below. It should run on any system that XUL Runner runs on, which would include Windows, Linux and OS X, but you need to download XUL Runner for the last two platforms.

RegexRenamer

I have made some updates to EcmaCalc, and it's reached version 0.4. The new features includes:

• Abortion of long-running scripts
• Syntax highlighting (still a bit buggy)
• Help

There are a few bugs left to sort out, but this version is a lot better than 0.1, so I decided to release it. If you notice any bugs or have any new ideas, post them in the comments.

EcmaCalc 0.4