HTML5 game to native app

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.

Just... load the game in browser and pop to full screen mode? — user1600124, Sep 29 '13 at 07:20
Anyways there's titanium desktop.. but i am not sure if it's still alive. There's also qt-webkit.. but i am not sure about it's performance. But I do think just using chrome and go into full screen mode is more convenient. And you don't have to maintain the "browser" itself. — user1600124, Sep 29 '13 at 07:27
@user1600124 I am using that currently. The only problem I have is that I would like to sell this game, and possibly on Steam. So, I need a stand-alone version. — pjrader1, Sep 29 '13 at 15:21
There is a similar thread on this topic, and has a detailed list of options. http://stackoverflow.com/a/13563325/1600124 — user1600124, Sep 30 '13 at 02:20

score 10 · Answer 1 · answered Apr 30 '15 at 05:05

10

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!

answered Apr 30 '15 at 05:05

pipedreams2

602
5
24

@cakeisajoke Did this help accomplish what you needed? – pipedreams2 May 04 '15 at 00:27
1

**NOTE:** Electron will only run on 64bit processors. You'd be better off using [nw.js](http://nwjs.io/) for cross platform compatibility. – Michael Schwartz Apr 26 '16 at 16:56

Michael Schwartz · Answer 2 · 2016-07-14T04:05:23.060

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. The WebDGap Application

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.

score 2 · Answer 3 · edited Apr 26 '16 at 18:14

2

For mobile platforms I suggest PhoneGap/PhoneGap Build/Cordova.

For desktops I suggest Nw.js, Chrome App or WebDGap.

Nw.js is the most advanced web technology platform for desktops.

Nw.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with Nw.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

Node.js works on both 32bit and 64bit processors, is upgrading rapidly, the developers are extremely helpful and because it's built off of the chromium it's lightning fast.

edited Apr 26 '16 at 18:14

Michael Schwartz

8,153
14
81
144

answered Apr 19 '16 at 20:01

kailniris

8,856
2
17
24

Last I checked and nw.js was only available for 32-bit processors. (except Mac app work on 64bit processors) That might have changed though. – Michael Schwartz Apr 25 '16 at 12:16
It supports 64 bit architectores too for windows, linux and mac – kailniris Apr 25 '16 at 12:45
Do you know when they did that? – Michael Schwartz Apr 25 '16 at 17:19
1

The first version which suppoerts 64 bit windows platform is v0.11.0 (Nov 11, 2014) – kailniris Apr 25 '16 at 18:06

score 1 · Answer 4 · answered Apr 25 '16 at 15:19

1

This is a list of gmae frameworks based in html5: https://html5gameengine.com/

But some of the most popular are:

https://www.scirra.com/ https://www.scirra.com/

http://impactjs.com/

answered Apr 25 '16 at 15:19

Benjamin RD

11,516
14
87
157

HTML5 game to native app

4 Answers4

Linked