5 ms·

Use your iPhone/iPad as a controller for an HTML5 browser game.

68 points by poundy 15y ago

wowfat 15y ago
Link on how the demo is created is here http://www.webdigi.co.uk/blog/2012/using-an-ios-device-to-control-a-game-on-your-browser/ http://www.webdigi.co.uk/blog/2012/using-an-ios-device-to-co...
hebejebelus 15y ago
I worked on a project[0] very similar to this just recently. It's definitely not as nice as this, but it's got the added advantage of being able to use javascript events to-spec, and the only lines in your game code are these: iPhone = new Controller(); iPhone.on('touchstart', function(event) { /*...*/ } That's the entire API ;) I'm in two minds over the use of QR codes here. I had two solutions to the problem of pairing browsers: as I do it now, I ask for a pairing code. Another, more hacky (but possibly nicer) solution is to assume that if a controller and a parent browser have the same external IP, you can assume that they want to pair up. Anyway, kudos to the developers - it's a really cool idea, I think. If my code can help out at all, please go right ahead :) (also sorry for hijacking your thread) [0] https://github.com/CarlQLange/Controller.js https://github.com/CarlQLange/Controller.js
josteink 15y ago
iOS only? Meh. It really is true: iOS is the new MSIE. Somewhere down the road iOS-only code will not be accepted, and then we have tons of code already deployed which will never work on anything else, unless Apple's non-standard JS and webkit extensions are accounted for in other browsers. This is hopeless and pathetic. And HN will love it.
- tomjen3 15y ago
  If it is the only accepted code, then it is by definition stand. It is just up to the others to implement these things.
  - tikhonj 15y ago
    There are some very good reasons that, despite IE6's popularity and extreme market share--both larger than iOS, I believe--everybody else did not adopt IE6-only "features" like ActiveX as standards.
- RegEx 15y ago
  I don't understand why fun projects can't just be fun projects...why does everything have to be interpreted as some sort of statement concerning the state of the web?
- smileplease 15y ago
  It's iOS only because Android does NOT support accelerometer within the browser.
  - nagoo 15y ago
    Also no websocket support in Android browser yet (http://caniuse.com/#feat=websockets http://caniuse.com/#feat=websockets). This makes things a little less ideal for realtime gameplay (even with the fallback options provided by socket.io).
    - nkassis 15y ago
      That's pretty sucky. Does anyone know if chrome for Android support it? I was hoping for WebGL and Websockets in 4.0 but I guess neither is around :(
      - ajross 15y ago
        This bug claims that it does: http://code.google.com/p/android/issues/detail?id=25221 http://code.google.com/p/android/issues/detail?id=25221 The current direction does seem to be towards end-of-lifing the Android browser (and ChromeOS) and moving Chrome in as the default.
  - nagoo 15y ago
    Should also note that DeviceOrientation (aka "accelerometer in the browser") is in Android 3.0+ (although that doesn't do much for most of the devices out there). http://caniuse.com/#feat=deviceorientation http://caniuse.com/#feat=deviceorientation
  - idm 15y ago
    It's working with ICS, in the default browser.
- wahnfrieden 15y ago
  It's Android's fault for not supporting the accelerometer in its browser.
- deleted 15y ago
  [deleted]
- J3L2404 15y ago
  Hopeless and pathetic? They make good products. Get over it and make something yourself.
playhard 15y ago
Awesome. loved it!
suhastech 15y ago
I had worked on a similar weekend project where you control an actual toy car with the iPad. (I'll probably blog about it soon) I solved the latency problem by using websockets. I know, it's not a widely used standard but was good enough for a weekend project.
seventyfishes 15y ago
This is a pretty similar idea to what the guys at Clik are doing. http://demos.clikthis.com/ethershock/ http://demos.clikthis.com/ethershock/ I think they have an Android/iPhone companion app that works for these types of web apps.
- taitems 15y ago
  Hmm, that just 404s when scanned.
  - KHPatel 15y ago
    +1. 404'd
zbuc 15y ago
Not working with my iPhone 4. Paired successfully with the game and Safari was showing the accelerometer values(which changed as I moved the phone) but my ship wouldn't move no matter what I did.
- wowfat 15y ago
  The game starts with a landing page (as in the link). After pairing is done then the browser will automatically redirect to the game page. Did that happen for you?
  - rralian 15y ago
    That happened, but it doesn't actually seem to accept the info from the iphone. I see the accelerometer readings on the iphone, but it doesn't seem to do anything with the page. I tried reloading the page on my laptop and on my phone. Best I could do was get it to move all the way to the left once and then just hang there. Neat idea, hopefully you can fix it.
  - zbuc 15y ago
    What rralian said -- it redirects, and I see the game, and my poor ship gets blown to bits because I can't move it.
  - instakill 15y ago
    Mine doesn't redirect.
- Toucan 15y ago
  Likewise, on a 4S with iOS 5.1.
  - sorotpe 15y ago
    just try reloading the page on your browser after pairing and it did work for me!
  - spanktheuser 15y ago
    Fixed a similar problem by turning off private browsing.
trip42 15y ago
I built a slideshow control system for a class project using nearly the same approach. A user uploads a slideshow or authors it online and connects a phone/device via a QR Code or URL to control the presentation. The controller uses websockets to communicate with a nodejs server for events like previous/next, a touch-screen based laser pointer, and presenter notes. I was amazed how responsive the touch movements translated to moving a dot on the screen through a remote node server. We didn't use any accelerometer events, but touch events worked seamlessly on iOS and Android.
endergen 15y ago
We're doing the same thing at Brass Monkey, raised our seed round and are trucking along with lots of features. Hope you guys check us out to. Checkout our website and video demo. http://playbrassmonkey.com/ http://playbrassmonkey.com/
- Mondain 15y ago
  It should be noted that we don't rely solely on HTML5 and nor do our device implementations. :)
  - endergen 15y ago
    True dat. We require a Controller app to be downloaded. But then we have auto-pairing tech. We have more than just HTML5 game support. But Flash and Unity Webplayer games as well.
jaylin 15y ago
I have been working on this similar idea for more than a year now. Really glad seeing more people are interested in this. Ping me if you are interested in chatting a little more about the project.

68 points by poundy 15y ago

Link on how the demo is created is here http://www.webdigi.co.uk/blog/2012/using-an-ios-device-to-control-a-game-on-your-browser/ http://www.webdigi.co.uk/blog/2012/using-an-ios-device-to-co...

hebejebelus 15y ago

I worked on a project[0] very similar to this just recently. It's definitely not as nice as this, but it's got the added advantage of being able to use javascript events to-spec, and the only lines in your game code are these: iPhone = new Controller(); iPhone.on('touchstart', function(event) { /*...*/ } That's the entire API ;) I'm in two minds over the use of QR codes here. I had two solutions to the problem of pairing browsers: as I do it now, I ask for a pairing code. Another, more hacky (but possibly nicer) solution is to assume that if a controller and a parent browser have the same external IP, you can assume that they want to pair up. Anyway, kudos to the developers - it's a really cool idea, I think. If my code can help out at all, please go right ahead :) (also sorry for hijacking your thread) [0] https://github.com/CarlQLange/Controller.js https://github.com/CarlQLange/Controller.js

josteink 15y ago

iOS only? Meh. It really is true: iOS is the new MSIE. Somewhere down the road iOS-only code will not be accepted, and then we have tons of code already deployed which will never work on anything else, unless Apple's non-standard JS and webkit extensions are accounted for in other browsers. This is hopeless and pathetic. And HN will love it.

tomjen3 15y ago
If it is the only accepted code, then it is by definition stand. It is just up to the others to implement these things.
- tikhonj 15y ago
  There are some very good reasons that, despite IE6's popularity and extreme market share--both larger than iOS, I believe--everybody else did not adopt IE6-only "features" like ActiveX as standards.
RegEx 15y ago
I don't understand why fun projects can't just be fun projects...why does everything have to be interpreted as some sort of statement concerning the state of the web?
smileplease 15y ago
It's iOS only because Android does NOT support accelerometer within the browser.
- nagoo 15y ago
  Also no websocket support in Android browser yet (http://caniuse.com/#feat=websockets http://caniuse.com/#feat=websockets). This makes things a little less ideal for realtime gameplay (even with the fallback options provided by socket.io).
  - nkassis 15y ago
    That's pretty sucky. Does anyone know if chrome for Android support it? I was hoping for WebGL and Websockets in 4.0 but I guess neither is around :(
    - ajross 15y ago
      This bug claims that it does: http://code.google.com/p/android/issues/detail?id=25221 http://code.google.com/p/android/issues/detail?id=25221 The current direction does seem to be towards end-of-lifing the Android browser (and ChromeOS) and moving Chrome in as the default.
- nagoo 15y ago
  Should also note that DeviceOrientation (aka "accelerometer in the browser") is in Android 3.0+ (although that doesn't do much for most of the devices out there). http://caniuse.com/#feat=deviceorientation http://caniuse.com/#feat=deviceorientation
- idm 15y ago
  It's working with ICS, in the default browser.
wahnfrieden 15y ago
It's Android's fault for not supporting the accelerometer in its browser.
deleted 15y ago
[deleted]
J3L2404 15y ago
Hopeless and pathetic? They make good products. Get over it and make something yourself.

playhard 15y ago

Awesome. loved it!

suhastech 15y ago

I had worked on a similar weekend project where you control an actual toy car with the iPad. (I'll probably blog about it soon) I solved the latency problem by using websockets. I know, it's not a widely used standard but was good enough for a weekend project.

seventyfishes 15y ago

This is a pretty similar idea to what the guys at Clik are doing. http://demos.clikthis.com/ethershock/ http://demos.clikthis.com/ethershock/ I think they have an Android/iPhone companion app that works for these types of web apps.

taitems 15y ago
Hmm, that just 404s when scanned.
- KHPatel 15y ago
  +1. 404'd

zbuc 15y ago

Not working with my iPhone 4. Paired successfully with the game and Safari was showing the accelerometer values(which changed as I moved the phone) but my ship wouldn't move no matter what I did.

wowfat 15y ago
The game starts with a landing page (as in the link). After pairing is done then the browser will automatically redirect to the game page. Did that happen for you?
- rralian 15y ago
  That happened, but it doesn't actually seem to accept the info from the iphone. I see the accelerometer readings on the iphone, but it doesn't seem to do anything with the page. I tried reloading the page on my laptop and on my phone. Best I could do was get it to move all the way to the left once and then just hang there. Neat idea, hopefully you can fix it.
- zbuc 15y ago
  What rralian said -- it redirects, and I see the game, and my poor ship gets blown to bits because I can't move it.
- instakill 15y ago
  Mine doesn't redirect.
Toucan 15y ago
Likewise, on a 4S with iOS 5.1.
- sorotpe 15y ago
  just try reloading the page on your browser after pairing and it did work for me!
- spanktheuser 15y ago
  Fixed a similar problem by turning off private browsing.

trip42 15y ago

I built a slideshow control system for a class project using nearly the same approach. A user uploads a slideshow or authors it online and connects a phone/device via a QR Code or URL to control the presentation. The controller uses websockets to communicate with a nodejs server for events like previous/next, a touch-screen based laser pointer, and presenter notes. I was amazed how responsive the touch movements translated to moving a dot on the screen through a remote node server. We didn't use any accelerometer events, but touch events worked seamlessly on iOS and Android.

endergen 15y ago

We're doing the same thing at Brass Monkey, raised our seed round and are trucking along with lots of features. Hope you guys check us out to. Checkout our website and video demo. http://playbrassmonkey.com/ http://playbrassmonkey.com/

Mondain 15y ago
It should be noted that we don't rely solely on HTML5 and nor do our device implementations. :)
- endergen 15y ago
  True dat. We require a Controller app to be downloaded. But then we have auto-pairing tech. We have more than just HTML5 game support. But Flash and Unity Webplayer games as well.

jaylin 15y ago

I have been working on this similar idea for more than a year now. Really glad seeing more people are interested in this. Ping me if you are interested in chatting a little more about the project.