6 ms·

Rebuilding An HTML5 Game In Unity

42 points by mrtnkl 12y ago

kevingadd 12y ago
Many mobile devices still have neither hw-accelerated Canvas or WebGL, which makes it pretty hard to run a performant HTML5 game on them. Unfortunate.
lnanek2 12y ago
I wonder if they could have just used CocoonJS, which is basically a reimplementation of WebView with better performance for games. But, anyway, yeah, it's well know the WebView on Android is a disaster. A top Facebook guy famously gave a key note at Android DevCon about why they switched to more native on mobile and said, "We don't hate the web [and HTML], we hate the webview." after going through countless bugs and performance problems they encountered trying to do HTML on Android. > A mechanism such as CSS to style items generated through code would be welcome. Maybe they didn't know, but this is mostly ameliorated by just having an example object setup however you like in the Unity Editor and then in your code you always just clone the example and place it instead of creating some new object. The example is basically your "style" and even non-coders on the team are usually fine with tweaking it.
- yulaow 12y ago
  At this point my question is the following: why on android and ios we have not a javascript/html5 -> native framework? I mean, the guys of windows phone made it. It is awesome and with great performance... why android and ios that came up in the market way before have still not implemented it?
  - kevingadd 12y ago
    HTML/JS apps subvert the Android and iOS walled gardens, so Google and Apple have no incentive to make things work better. It's no coincidence that there's still no straightforward way to deploy Chrome Web Store apps (either in HTML/JS or Native Client) to Android phones. Microsoft made HTML/JS a first class platform for Windows 8 and Windows Mobile, so they don't have that problem - as long as you put your browser app inside their walled garden (so it goes on the store), they don't mind at all that it's a browser app.
  - jaegerpicker 12y ago
    Why would Apple or Google build such a thing? They are already both "winning" the market in their own metrics. They both have huge numbers of developers and have little interest in building tools that allow developers to work in a cross platform way. MS built the HTML5/JS tools because they are behind and need to attract every developer possible.
    - yulaow 12y ago
      Well because there are still more web developers out there than mobile (native) developers. So, in any case, it would help getting more apps in their store -> more happy users -> more money
      - jaegerpicker 12y ago
        They don't want more apps, they want more exclusive apps. The more exclusive apps the harder the lockin to the platform. Apple and Google both remember mid nineties Microsoft. Lock users in and ride that to dominance. It's seems like something I should be furious about but it's hard to angry when it helps to line my own pockets with cash. I can and have written native apps for both iOS and Android so that makes me very much in demand. I'd prefer an open web to win out but IMO native apps still give a much better user experience.
      - zenbowman 12y ago
        Yes, but web technologies generally forbid you from doing anything remotely innovative because of the way they are designed. Most "web apps" work worse than most apps we had two decades earlier, both in terms of design and performance. If you want people to pay for software on the app store, it helps if you put some effort into making your app responsive and exploiting the machine you are on. The only way to do this is with native applications.
        yulaow 12y ago
        And that's why I was talking about creating a framework that use javascript/html5 to create native apps, like winJS on windowsPhone
  - personZ 12y ago
    It is awesome and with great performance. Do you have some examples of this performance claim? Particularly games of the sort built with Unity? I've searched around and found no examples, though maybe I'm looking in the wrong places. The other "walled garden" comments are curious, especially given that we're talking about Unity which can target just about anything with equal ease. Even going to raw metal, a significant portion of a game written for iOS can be easily ported to Android and the NDK, or Blackberry OS, or various other systems. The basic standards of C/C++, standard libraries, and OpenGL, mean that there is very broad "standardization". For those who want cross-platform targeting, a cross-platform tool is critical - build an HTML5 app for Windows Phone and you have built an app that is just for Windows Phone. That it is built on web technologies is no more magical than being built on C++/OpenGL. There are tools like Intel's XDK if you want actual cross platform HTML5 support.
- kevingadd 12y ago
  Isn't PhoneGap the same thing? What makes CocoonJS better?
  - agmcleod 12y ago
    Not 100% on this, but I don't think phone gap has a hardware accelerated canvas, and I'm pretty certain it doesn't support WebGL. The WebGL part doesn't really apply to this article, but it's important to note. Ludei built CocoonJS with games in mind. It's definitely not perfect, and somethings can be tricky to debug & figure out, but I think it's the better alternative out there. Me personally, I'm just not big on using unity. I think it's a really awesome tool, but it's just not for me.
    - thoughtpalette 12y ago
      I know you can trigger hardware acceleration with CSS transforms (a life saver), have not checked out how canvas handles that (i've made some small games using canvas on mobile). If HA exists for canvas on desktop (_webkit_), wouldn't it work in a iOS webview?
  - octopus 12y ago
    PhoneGap uses the underlying OS WebView. If the WebView is slow your PhoneGap application will be slow.
- general_failure 12y ago
  Cocoon is primarily JS APIs. It does not support HTML and CSS stuff.
- TD-Linux 12y ago
  Mozilla is working on turning Firefox Mobile into a HTML5 runtime for Android: https://hacks.mozilla.org/2014/04/html-out-of-the-browser/ https://hacks.mozilla.org/2014/04/html-out-of-the-browser/ The idea is to rely on the Firefox runtime for your app, rather than the horrible buggy Webview, in order to make a more consistent experience across devices.
GlickWick 12y ago
My experience with Unity has been pretty solid too. I was incredibly surprised as to how easy it was to get my game prototypes running on pretty much everything. My major gripe, much like the author's, is the Asset Store. It's full of garbage with no real demo or refund system. There's also a lot of assets that were built with old versions of Unity with no real way to identify them as such. This especially sucks for 2D games, as the Unity2D system is pretty new. There's also no great GUI system built into the framework yet, so you're stuck buying nGUI or dfGUI.
ntaso 12y ago
I can recommend Impact.js. It's a commercial engine for 99$ but so far, I enjoyed working with it. It's canvas-based and optimized for tile-based 2D-games, but you can do other 2D-games as well with it. It comes with a nice level editor. You can get near-native performance with Ejecta, which is something like a WebGL enhanced Canvas-only version of a web browser to put the game on the App Store. http://impactjs.com/ http://impactjs.com/ (Note: not affiliated, I just like the engine)
- GlickWick 12y ago
  I used impact.js for a while. Really solid framework for building web games. I'm not sold on Ejecta though. I spent some time with it and found it debilitatingly difficult to debug issues, especially performance problems.
- evo_9 12y ago
  Another option is Phaser - A free, open source game engine similar to Impact: http://phaser.io/ http://phaser.io/
  - kin 12y ago
    I've been seeing Phaser a lot. Does anyone know of any commercially successful games built with these HTML5/JS engines? I understand success should have nothing to do w/ framework but certainly there are limitations/struggles of trying to build a non-native game. I'm basically trying to see if I should bet that mobile browsers will mature enough or if I should simply invest my time in learning native mobile dev
    - thoughtpalette 12y ago
      I've played around with Phaser, and I've played around with PhoneGap. Using what you know will always get your further faster than learning native, but there _could_ be performance issues depending on the game.
camus2 12y ago
do you have a link to numolition in HTML5? i'm curious about how it runs on mobile.
azakai 12y ago
Unity announced they will support exporting to HTML5/WebGL, so it will be possible to do a direct comparison of the original HTML5 version of this game with one written in Unity and then exported to HTML5. http://unity3d.com/5 http://unity3d.com/5
DatBear 12y ago
>Nothing is wrong with charging for add-ons, such as vector drawing and tweening libraries, but it sets the standard for others to charge for their code and is the complete opposite of the realm of the open Web, which everybody is trying to push forward. I don't like it when companies complain about having to pay for code, assets, etc. Not everything should be open source, not everything should be free, sometimes people should be able to be paid for the work that they do for your benefit.
the_gipsy 12y ago
The HTML5 version was using CSS, not canvas or WebGL. Sadly, Unity still can't "export" to html and requires the user to install a plugin for web, which is not available for linux.
- m0rph3v5 12y ago
  WebGL export is coming in Unity5

42 points by mrtnkl 12y ago

Many mobile devices still have neither hw-accelerated Canvas or WebGL, which makes it pretty hard to run a performant HTML5 game on them. Unfortunate.

lnanek2 12y ago

I wonder if they could have just used CocoonJS, which is basically a reimplementation of WebView with better performance for games. But, anyway, yeah, it's well know the WebView on Android is a disaster. A top Facebook guy famously gave a key note at Android DevCon about why they switched to more native on mobile and said, "We don't hate the web [and HTML], we hate the webview." after going through countless bugs and performance problems they encountered trying to do HTML on Android. > A mechanism such as CSS to style items generated through code would be welcome. Maybe they didn't know, but this is mostly ameliorated by just having an example object setup however you like in the Unity Editor and then in your code you always just clone the example and place it instead of creating some new object. The example is basically your "style" and even non-coders on the team are usually fine with tweaking it.

yulaow 12y ago
At this point my question is the following: why on android and ios we have not a javascript/html5 -> native framework? I mean, the guys of windows phone made it. It is awesome and with great performance... why android and ios that came up in the market way before have still not implemented it?
- kevingadd 12y ago
  HTML/JS apps subvert the Android and iOS walled gardens, so Google and Apple have no incentive to make things work better. It's no coincidence that there's still no straightforward way to deploy Chrome Web Store apps (either in HTML/JS or Native Client) to Android phones. Microsoft made HTML/JS a first class platform for Windows 8 and Windows Mobile, so they don't have that problem - as long as you put your browser app inside their walled garden (so it goes on the store), they don't mind at all that it's a browser app.
- jaegerpicker 12y ago
  Why would Apple or Google build such a thing? They are already both "winning" the market in their own metrics. They both have huge numbers of developers and have little interest in building tools that allow developers to work in a cross platform way. MS built the HTML5/JS tools because they are behind and need to attract every developer possible.
  - yulaow 12y ago
    Well because there are still more web developers out there than mobile (native) developers. So, in any case, it would help getting more apps in their store -> more happy users -> more money
    - jaegerpicker 12y ago
      They don't want more apps, they want more exclusive apps. The more exclusive apps the harder the lockin to the platform. Apple and Google both remember mid nineties Microsoft. Lock users in and ride that to dominance. It's seems like something I should be furious about but it's hard to angry when it helps to line my own pockets with cash. I can and have written native apps for both iOS and Android so that makes me very much in demand. I'd prefer an open web to win out but IMO native apps still give a much better user experience.
    - zenbowman 12y ago
      Yes, but web technologies generally forbid you from doing anything remotely innovative because of the way they are designed. Most "web apps" work worse than most apps we had two decades earlier, both in terms of design and performance. If you want people to pay for software on the app store, it helps if you put some effort into making your app responsive and exploiting the machine you are on. The only way to do this is with native applications.
      - yulaow 12y ago
        And that's why I was talking about creating a framework that use javascript/html5 to create native apps, like winJS on windowsPhone
- personZ 12y ago
  It is awesome and with great performance. Do you have some examples of this performance claim? Particularly games of the sort built with Unity? I've searched around and found no examples, though maybe I'm looking in the wrong places. The other "walled garden" comments are curious, especially given that we're talking about Unity which can target just about anything with equal ease. Even going to raw metal, a significant portion of a game written for iOS can be easily ported to Android and the NDK, or Blackberry OS, or various other systems. The basic standards of C/C++, standard libraries, and OpenGL, mean that there is very broad "standardization". For those who want cross-platform targeting, a cross-platform tool is critical - build an HTML5 app for Windows Phone and you have built an app that is just for Windows Phone. That it is built on web technologies is no more magical than being built on C++/OpenGL. There are tools like Intel's XDK if you want actual cross platform HTML5 support.
kevingadd 12y ago
Isn't PhoneGap the same thing? What makes CocoonJS better?
- agmcleod 12y ago
  Not 100% on this, but I don't think phone gap has a hardware accelerated canvas, and I'm pretty certain it doesn't support WebGL. The WebGL part doesn't really apply to this article, but it's important to note. Ludei built CocoonJS with games in mind. It's definitely not perfect, and somethings can be tricky to debug & figure out, but I think it's the better alternative out there. Me personally, I'm just not big on using unity. I think it's a really awesome tool, but it's just not for me.
  - thoughtpalette 12y ago
    I know you can trigger hardware acceleration with CSS transforms (a life saver), have not checked out how canvas handles that (i've made some small games using canvas on mobile). If HA exists for canvas on desktop (_webkit_), wouldn't it work in a iOS webview?
- octopus 12y ago
  PhoneGap uses the underlying OS WebView. If the WebView is slow your PhoneGap application will be slow.
general_failure 12y ago
Cocoon is primarily JS APIs. It does not support HTML and CSS stuff.
TD-Linux 12y ago
Mozilla is working on turning Firefox Mobile into a HTML5 runtime for Android: https://hacks.mozilla.org/2014/04/html-out-of-the-browser/ https://hacks.mozilla.org/2014/04/html-out-of-the-browser/ The idea is to rely on the Firefox runtime for your app, rather than the horrible buggy Webview, in order to make a more consistent experience across devices.

GlickWick 12y ago

My experience with Unity has been pretty solid too. I was incredibly surprised as to how easy it was to get my game prototypes running on pretty much everything. My major gripe, much like the author's, is the Asset Store. It's full of garbage with no real demo or refund system. There's also a lot of assets that were built with old versions of Unity with no real way to identify them as such. This especially sucks for 2D games, as the Unity2D system is pretty new. There's also no great GUI system built into the framework yet, so you're stuck buying nGUI or dfGUI.

ntaso 12y ago

I can recommend Impact.js. It's a commercial engine for 99$ but so far, I enjoyed working with it. It's canvas-based and optimized for tile-based 2D-games, but you can do other 2D-games as well with it. It comes with a nice level editor. You can get near-native performance with Ejecta, which is something like a WebGL enhanced Canvas-only version of a web browser to put the game on the App Store. http://impactjs.com/ http://impactjs.com/ (Note: not affiliated, I just like the engine)

GlickWick 12y ago
I used impact.js for a while. Really solid framework for building web games. I'm not sold on Ejecta though. I spent some time with it and found it debilitatingly difficult to debug issues, especially performance problems.
evo_9 12y ago
Another option is Phaser - A free, open source game engine similar to Impact: http://phaser.io/ http://phaser.io/
- kin 12y ago
  I've been seeing Phaser a lot. Does anyone know of any commercially successful games built with these HTML5/JS engines? I understand success should have nothing to do w/ framework but certainly there are limitations/struggles of trying to build a non-native game. I'm basically trying to see if I should bet that mobile browsers will mature enough or if I should simply invest my time in learning native mobile dev
  - thoughtpalette 12y ago
    I've played around with Phaser, and I've played around with PhoneGap. Using what you know will always get your further faster than learning native, but there _could_ be performance issues depending on the game.

camus2 12y ago

do you have a link to numolition in HTML5? i'm curious about how it runs on mobile.

azakai 12y ago

Unity announced they will support exporting to HTML5/WebGL, so it will be possible to do a direct comparison of the original HTML5 version of this game with one written in Unity and then exported to HTML5. http://unity3d.com/5 http://unity3d.com/5

DatBear 12y ago

>Nothing is wrong with charging for add-ons, such as vector drawing and tweening libraries, but it sets the standard for others to charge for their code and is the complete opposite of the realm of the open Web, which everybody is trying to push forward. I don't like it when companies complain about having to pay for code, assets, etc. Not everything should be open source, not everything should be free, sometimes people should be able to be paid for the work that they do for your benefit.

the_gipsy 12y ago

The HTML5 version was using CSS, not canvas or WebGL. Sadly, Unity still can't "export" to html and requires the user to install a plugin for web, which is not available for linux.

m0rph3v5 12y ago
WebGL export is coming in Unity5