HTML5 game to native app [closed]

Question

I am making a game in HTML5. I am most familiar with HTML5, and prefer it over a higher level language, such as C++. HTML5 is a great platform for writing games on. My only issue is that I want to run my game as a native application (that you can startup w/o internet browser features, is fullscreen, etc.), but I don't know what there is to use. I looked around and found stuff for MOBILE platforms (such as PhoneGap), but no desktops (such as Windows, Mac, and Linux). Eventually, searching around as hard as I could, I found TideSDK. TideSDK is similar to PhoneGap, but is for computer operating systems, and ran on all three popular ones (Windows, Mac, and Linux). HOWEVER, TideSDK doesn't really run fast enough for a game. It doesn't support window.requestAnimationFrame, and so doing a setInterval for a game loop made it very slow. So slow that I would take a guess it was going 2 or 3 FPS. I tried the exact same game on Chrome, and it runs fine.

Is there an alternative I can use that will be fast enough for HTML5 games? (I don't want to go through XCode [and other IDE's on other platforms] to make a Webkit frame, it isn't really cross-platform, and is time consuming. I would do it if I had to, though) For my system I am running on, I use a Mac (OSX 10.8, Mountain Lion), but I have access to Windows 7, and Ubuntu 12.04 32-bit.

Answer 1

I would have a look into electron

http://electron.atom.io/

Fairly good documentation and looks to do exactly what you are looking for.

Performance wise it has held up well in the apps I have tried!

Answer 2

I myself was looking for an all around solution for awhile. I tried everything from TideSDK, AppJS, native code in VB.NET, XCode, Python, C++, Electron, nw.js/node-webkit, etc: Basically you name it I've tried it.

Note Electron is nice, but it only runs on 64bit processors. So nw.js/node-webkit is a better solution if you want your app to run on 32bit and 64bit processors.

So I decided to build my own open source solution called WebDGap. WebDGap runs on Windows, Linux, Mac OS X, Google Chrome and as a web application! When you export your app as a Windows, Linux, or Mac Application WebDGap uses nw.js as the framework to run your web app as a desktop application. Because it uses nw.js as the framework for running your app as a desktop application and you don't have to change your code up as much to get your app to work unlike with Electron.

For example if you use JQuery in your application and you export with Electron you can't load JQuery like a regular javascript library.

<script src="libraries/jquery/jquery.js"></script>

You would have to load it like this...

<script>
  window.$ = window.jQuery = require("./libraries/jquery/jquery.js")
  // or if you installed jquery via npm you could use
  // window.$ = window.jQuery = require("jquery")
</script>

Watch the How To Video to learn how to use WebDGap.

Here's a screenshot.

Being that you're a Mac user already you can merge your exported app into 1 .app mac file. This can be done with Automator (and a little shell scripting).

There's also a coding playground I made for mobile users that uses nw.js just like WebDGap for running/converting your web app as a native desktop app called kodeWeave.

Here's a Tic-Tac-Toe game I'm going to export as a Mac App:

Now the web app is running as a native Mac application!

Lastly there are a lot of tools out there to make WebGL powered games.

My favorite and what I recommend is Goo Create because you can do it entirely without code but also works with custom code you can add into it.