Tamapolis: Javi Agenjo's personal blog

Last week I was in a one-day gamejam focused on weird input interfaces. I thought I could be cool to create a game where the players have to interact with something more tangible than gamepad buttons.

The event was organized by Arsgames, an association focused on promoting game developing for different causes (educational, social, etc).

Teams were assigned randomly, and I ended up with Laura and Dani, whom are also gamedevelopers.

Instead of giving a topic for the whole Jam, organizers gave us random drawings made by other contestants and we ended up with one image that had a security camera.

From there the idea grew to a game where you have to guide somebody based on what you can see through a remote camera.

To create some gameplay I though about using the webcam, grabing the current frame and computing the square-difference with a given image (previously captured with the same webcam).

So after some discussion we ended up with the idea of somebody (the Guest) infront of the webcam pointing at a blank canvas, and then other player (the Observer) woudl be able to see the webcam image and the difference between a target image and the current image so he has to guide the Guest to manipulate objects to get as close as possible to the target image.

To make it easier for the Guest, Laura created some cardboard objects that they must align propertly. It ended up similar to the game Tangram.

Dani helped arranging the UI and creating the narrative texts.

I coded everything in Javascript using Canvas2D and the HTML5 API.

Grabbing the current webcam image was easy using the standard media stream API, from there I created several offscreen canvases where I would store the frame, and using getImageData I would read the pixels to compute the difference between different images.

I binarized the image according to some threshold to avoid problems with different light conditions.

I was worried about the performance so offscreen canvases were small (100×100), it also made it easier for users to get better similarity results.

The main problem with the gameplay was that it required the image to be too precise, tiny movements could make both images too different. So we had to tune a lot the difference equation to improve gameplay.

Next day I decided to improve it a bit adding some CRT TV shaders (thanks to my Canvas2DToWebGL library, very handy), and adding the option to add your own target images (so you can play wherever you are).

Im glad with the results but the gameplay could be improved a lot giving the interface more options to adjust the final image or adding more control to the Observer.

Feel free to try it if you have a webcam plugged!

Thursday, June 6th, 2019 @ 1:29 pm coding, development, gamedev, General, HTML5, javascript, webgl
RSS 2.0 Trackback