{"id":860,"date":"2019-06-06T13:29:12","date_gmt":"2019-06-06T14:29:12","guid":{"rendered":"http:\/\/www.tamats.com\/blog\/?p=860"},"modified":"2020-10-15T16:10:54","modified_gmt":"2020-10-15T17:10:54","slug":"gamejam-about-different-input-interfaces","status":"publish","type":"post","link":"https:\/\/www.tamats.com\/blog\/?p=860","title":{"rendered":"GameJam about different input-interfaces"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n\n\n\n\nThe event was organized by Arsgames<\/a>, an association focused on promoting game developing for different causes (educational, social, etc).\n\n\n\n

Teams were assigned randomly, and I ended up with Laura and Dani, whom are also gamedevelopers.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

From there the idea grew to a game where you have to guide somebody based on what you can see through a remote camera.<\/p>\n\n\n\n

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).<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Dani helped arranging the UI and creating the narrative texts.<\/p>\n\n\n\n

I coded everything in Javascript using Canvas2D and the HTML5 API.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

I binarized the image according to some threshold to avoid problems with different light conditions.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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

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.<\/p>\n\n\n\n

Feel free to try it<\/a> if you have a webcam plugged!<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,3,25,1,29,26,24],"tags":[],"class_list":["post-860","post","type-post","status-publish","format-standard","hentry","category-coding","category-devlog","category-gamedev","category-uncategorized","category-html5","category-javascript","category-webgl"],"_links":{"self":[{"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=860"}],"version-history":[{"count":3,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/860\/revisions"}],"predecessor-version":[{"id":891,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/860\/revisions\/891"}],"wp:attachment":[{"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}