Hacking shoes for kids education (almost) – part 2: events in Unity3D

This is the second part of my report about the Code4Play hackathon. You can read part 1 here.

Let's dig into some technical details!

The FootMoov SDK includes a demo Unity project, that displays the current sensor values. The main Controller class exposes raw sensor data expressed as integer values.

To ease the job of the team on the game side, I wanted to wrap the given API with an event dispatcher. You can make components talk in different ways in Unity, but events represent the most efficient pattern for this purpose.

I never used events in C# before, but I was able to make a working abstraction layer in a reasonable time.

The behaviour is pretty simple: I publish a tap event when the pressure sensor passes a threshold value with a certain velocity.

Here are the distilled instructions of what you need to create an event dispatcher in Unity3D and, more in general, in C#.

The basic components are:

• event delegates
• events
• listeners

First of all, you must define the delegate. It's a special C# type which is a sort of function wrapper. You can use the wrapped function as a callback.

public delegate void OnFrontTapEvent(object sender);

Then you create the event object, which is also part of C# syntax. When you define this object, you use the event keyword and the above-mentioned delegate as its type.

private event OnFrontTapEvent OnFrontTap;

The event acts as a container. You can add listeners to it with the += symbol.

OnFrontTap += new OnFrontTapEvent (listener.OnFrontTap);

The event is triggered by calling it like a method. This causes all the attached listeners to be called.

OnFrontTap (this);

You can find the complete code in the GitHub repo of the game projects. In particular, FootMoovAdapter is the class which uses the event system.

Be careful with scopes and locations where these components are initialised!

Hacking shoes for kids education (almost)

Code4Play is a hackathon that took place last Saturday in Milan. The goal was to hack old toys and recyclable material into innovative educational games. Many of the teams used Arduino and Raspberry Pi to give smartness even to the the simplest plastic toy.

The hackable toys

The project that I liked most is a game that teaches kids mathematical operations. It consists of a Raspberry Pi in a box, attached to a big four-pin piece of a block-building game. When you shake the box, it says something like "Compose the number... Six!". The game pieces represent numbers and mathematical symbols, and you have to match them on top of the box to produce the given number. The system is able to recognise every single block by the value of the resistance wired to it.

#pigreco Teaching maths to children. #code4play @Mikamai pic.twitter.com/rtCqB6tgGc
— Giovanni Profeta (@profeta_g) 16 Marzo 2014

So, what did my team do? We decided to use a pair of FootMoov, a set of shoes with pressure and gyroscope sensors. They came together with an SDK for Unity, which we used as platform for the two games we developed.

Our team name and logo on a balloon. Many thanks to the girl who kindly drew it!

Unfortunately, we did not find inspiration for an educational game. Yet, we took this opportunity to create two games with this uncommon controller.

The first game is FlappyPong. It's like Pong, but you tap on the shoe to control one of the bars which jumps like Flappy Bird on every hit.

The second game was a bit different: on the screen you see the image of an animal and the morse alphabet. You have to use the front and back pressure sensors of the shoe as dot and dash to compose the name of the animal in morse code. Maybe a bit awkward to play, but it was funny to show at our presentation.

In the next post I will dig more into the technical details.

MicroNodeAppliance - an ultra light Linux VM with NodeJS

Some time ago, I wanted to run a virtual web server on a machine with not enough storage to hold another complete OS.

I decided to aim at the smallest possible Linux distribution, and I found MicroCore, a ~8MB system at the base of TinyCore. Beautiful! I created a starting environment following this guide, and then installed NodeJS.

There are pros and cons in using this solution:

Pros:

• ~29MB VM image size
• Boots in a few of seconds
• Can create many VMs in the same machine before running out of memory
• It runs in memory, so if you break something just reboot to revert to the last state (see cons)
• CLI only

Cons:

• It runs in memory, so a script must be run to persist the changes to the storage (see pros, if you haven't already done it!)
• Not recommended for beginners

I wonder how would it perform if mounted on the instances of a distributed system!

Here you can download the .ova file:

Download

I'm not sure if stuff like this requires a license, in any case I wrote a bunch of files including a README and a cron file. In doubt, they are released under the WTFPL.

Hopefully it can be used for something good!

The technology behind The Lab - Part 1

Before starting, I want to share my happiness with you: The Lab was selected as a Notable Entry and featured on the GameOn blog!

You can see the post here.

It is a great success to have reached a place among the first 15, given the fact that there were 161 total entries.

---

This is the first of a series of posts about various technical aspects of The Lab, my hackable HTML5 game.

Here I will talk about the Javascript libraries that I integrated and that helped me through the development.

jQuery + jQuery UI - I've been reluctant for some time to use jQuery, as in my opinion it over-simplifies the job. However, given the short time available for the competition, I felt it was time to leverage its ease of use. And in fact it's very helpful for this kind of situations! I didn't require any fancy graphics but only dialogs, accordions and resizable divs, and it's all provided. Thumbs up for jQuery.

jQuery Terminal Emulator - Since The Lab is a game about coding in Javascript (1), a terminal is mandatory unless you force the user to open the browser's developer tools. When you need a specific feature in your web-app, there is a huge chance that "there is a jQuery plugin for that" is a valid answer, and this is the case! There is an interesting topic for one of the next posts: how to eval the user's Javascript?

CodeMirror - Since The Lab is a game about coding in Javascript (2), for some tasks you'd probably prefer using a handy code editor with syntax highlighting rather that writing each instruction on the command line. This is a pretty powerful one, and it runs entirely inside your browser. By the way, its creator Marijn Haverbeke is also working on Tern, a Javascript analysis engine to add autocompletion and other nifty features to your favorite editor.

Buzz - Music and sounds add personality to a game, and they matter a lot to describe entities and situations. I used Buzz for everything that concerns audio.

-prefix-free - Thanks to this small library by Lea Verou you can write your CSS without caring about vendor prefixes. Quite a lot of time saved.

Mutation Summary - This library allows you to play with the DOM and solve some particular puzzles without writing a single line of Javascript. It wraps the Mutation Observer DOM APIs, of which I will probably talk in one of the next posts.


That's all for now, in the meantime you can play The Lab here.

The Lab is ready to rock!

Here it is, The Lab is ready and you can play it here.

I made this HTML5 strategy-RPG-ish game for Mozilla GameOn 2013 Competition, in the category "Hackable games", and can be played on the browser by anyone who knows a bit of Javascript.

It is about a laboratory in which you have to grow bugteria, manipulate their DNA and collect some of them for analysis.

Almost any action requires writing code or using the browser's developer tools, but it's not that hard for a casual gamer with basic programming skills (there are hints and links to documentation).

Enjoy!

p.s.: many thanks to my dear sister for the game logo!

Applied Magic - a CSS glass container

A beautiful CSS flask

The development of The Lab for the Mozilla Game On competition is proceeding. Probably I won't be able to have a complete and polished game ready before the deadline, but at least it will be a decent and good-looking prototype!

In the game there is this element that you see to the right - a glass container that should resemble a test tube or a flask.

Believe it or not, there is no image there, it's all done with CSS.

And it's a single tag!

To do it, I'm taking advantage of the :before and :after pseudo-elements.

Let me show you the different components:

The headless flask

The top of the flask

The tag behind the flask

The flask is made with the following effects:

• The glass effect is created using an inset box-shadow
• The rounded border at the bottom left and right angles is done by setting the border-radius property
• The shadow is a dark gray border-bottom
• The top of the flask seems to grow larger because the border left and right are set, but transparent (and also a non-negative border-top needs to be set)
• To finish, box-sizing: border-box keeps the margins to all the sides of the parent container

The top of the flask is the :before pseudo element. Most of the magic is already explained in the previous list: basically the top of the flask reproduces the same glass effect with the inset box-shadow and a border-radius to the opposite corners to give a nice rounded look to the object.

The tag is the :after pseudo-element. It's supposed to stay behind the flask, this it the reason why it has reduced opacity and the turned text, created through a CSS3 rotation applied to the transform property.

That's it!

Deploying a Yeoman webapp to Heroku+Node.js

I am currently developing a prototypal game for Mozilla GameOn competition, based on my past JS Bugs Lab project. Well, that was already a prototype, but at least this time I'm trying to make it somehow playable by a human.

To build the app, I'm using Yeoman, a very nice set of tools that is helping me speeding up the entire process.

As of now, the deployment step has not yet been introduced into Yeoman's toolchain, so this is what I'm doing to let it happen without requiring to create other build scripts or move files across the build system.

I'm using a very simple Node.js server hosted on Heroku.

The first thing to consider is the fact that both Heroku and I use git for versioning, so I need a solution to handle both repos, as they cannot overlap in the same directory.

To solve this problem, I change the final build output dir defined into Grunt.js from dist to heroku/dist. This way I have a subdirectory of freedom between raw code and built code. The heroku directory is where I'm creating the Heroku repository. The heroku dir needs to be added to the .gitignore file of my app's repo, so that it doesn't track build files.

To create the Heroku app I move to the heroku dir and I follow the instructions provided on their help page from Local workstation setup to Deploy your application to Heroku.

I also need the package.json file in the heroku dir, so I'm creating a hard link from the main app directory instead of copying it, to avoid duplication of data.

I also modified the web.js file, in order to serve gzipped files, using gzippo:

var gzippo = require('gzippo');
var express = require('express');

var app = express.createServer(express.logger());
app.use(gzippo.staticGzip(__dirname + '/dist'));
app.listen(process.env.PORT || 5000);

And here is the package.json. Highlighted in yellow is what should be included in order to work:

{
    "author": "My name",
    "name": "my-project",
    "version": "1.0.0",
    "dependencies": {
        "gzippo" : "0.2.0",
        "express" : "2.x"
    },
    "engines": {
        "node": ">= 0.6.0 < 0.7.0"
    }
}

To summarize, the heroku folder now contains:

• the original Yeoman's dist folder, that contains the app ready to be deployed
• Procfile, which has the instructions for Heroku
• package.json, that lists the project properties and dependencies
• web.js, used to instantiate the node.js server

Doing so, I can build my app with the yeoman build command, and have my files ready to deploy on Heroku without adding any other build scripts!

Moreover the site gets 91/100 points with PageSpeed, I'd say... not bad!

Let me know if you have any questions or suggestions to improve this solution!

If you're interested, here is my app:
http://gfc-thelab.herokuapp.com/

I'll be covering the details when it's done :)