Working Pure HTML5 RTS Release Advice Required

Aurelius1664 101 Apr 22, 2012 at 15:41 html rts

New to the forum and looking for some advice…

We are a Web Development Company and have done some small to medium web sites using a mixture of C# and Javascript (including some fairly advanced JavaScript stuff). However, we are currently looking at diversifying to create products and one option was small games online and for mobiles.

We’ve developed a Real Time Strategy Engine, or at least a Proof of Concept for one, in pure HTML5. We’ve tested it to a certain degree on most of the modern browsers and on the iPhone (planning on testing on Android ICS but not sure about HTML5 support). All of the move, fire, build code and some visual effects and sounds are all working well (link below). It’s probably about 5 weeks of research and development that originally started around learning the nuances HTML5.

Proof of Concept (Edit: Now works on iphone)

The idea is that the HTML will work not just on normal browser but also on phones creating a nice cross platform game without massive cross paltform effort. We planned to write simple browser wrappers for iPhone and Android to create saleable apps.

However, I’m really rather unsure of what to do next. Is it possible for an independent company to achieve success with something like this? Is there any money to be made from this approach? Is this something that could be taken to a publisher? Or is this just so saturated that attempting anything like this just isn’t worth any more effort?

14 Replies

Please log in or register to post a reply.

TheNut 179 Apr 22, 2012 at 20:16

I think there is going to be a bright future for HTML 5 in gaming, particularly for the indie development; however it’s not quite there yet. There’s quite a few bugs the browser devs need to resolve to make the experience smoother on all platforms. Mobile platforms in particular have notoriously bad experiences because the user input is treated for web browsing and not gaming (pinch zooming, rubber banding, scaling, etc.). The audio support, in particular for Windows Phone, is quite atrocious. For some reason these browser devs have a lot of problems with audio. It took Firefox over a year just to support the audio loop attribute.

If I were building HTML 5 games today it would be for desktops only and they would have to be really simple, like Farmville, Plants vs Zombies, or a Tycoon type game. Chrome and Firefox are generally not that bad, although they still both have small audio issues. Getting them to semi-work on mobile platforms would only be to help promote the technology, although I wouldn’t blow a whole lot of time on it. I think writing native apps is still the best choice for mobile platforms right now. At the least, I would have native code manage audio and user input. You then delegate the rest to the browser.

Aurelius1664 101 Apr 23, 2012 at 12:24

Sound does seem to be a problem, especially on the iphone where it is actually disabled. It seems though that HTML5/Javascript is able to do fairly complex games albeit 2D only without using plug-ins. I was actually quite surprised how clean the cross-browser/cross-platform implementation was.The linked proof of concept works on IE9, Chrome, Firefox and Safari including iphone. The only problems making it support all platforms were with Sound and Xml everything else worked pretty much out of the box including some common but not standard touch events.

I think we were considering using HTML5 as the base and using platform specific wrappers to create packaged apps. These wrappers could act as a kind of abstraction layer to compensate for the weak spots such as sound. That said the next step we are looking at is trying to use HTML5 Websockets to implement multiplayer. If that works then I’m thinking it might actually be a viable approach.

TheNut 179 Apr 23, 2012 at 15:36

Indeed, it is quite powerful in the graphics department. Windows Phone can maintain 30 FPS with \~2 layers of rendering. With native code, the phone supports a maximum of 3 layers before the FPS gets too low, although typically you try not to exceed 2 layers. This puts it on par with native rendering performance. The CPU performance is also pretty good, despite most saying JavaScript isn’t scalable. I remember testing 1000 particles with physics and the phone managed to keep up. Due to fillrate limitations, you probably wouldn’t render more than 5 - 10 particles, so there’s plenty of CPU power left over. More so when you consider the proliferation of mutli-core processors.

Using HTML5 as a base is quite acceptable. There’s a few simple games using PhoneGap that show it’s capable, especially with a backend to power the areas where HTML5 lacks. I’m not sure what to think of Websockets though. I’m waiting to see what the final say will be on cross-domain security.

gamer27lv 101 May 08, 2012 at 04:26

Looks really cool!

rouncer 103 May 08, 2012 at 05:53

shit! a full rts in html, i cant believe it
i gotta check this out MYSELF!

if you wanna make money, you need an original idea, otherwise i see this as a good opportunity for your company, go for it.

lmbarns 101 May 20, 2012 at 02:15

I was messing around with html5 and had a tile engine that could load 150,000 64px square tiles based off an array http://simplehotkey….Tiles/main.html I just repeated the array a lot in notepad to make it huge for testing. Performance varies across browsers and drops as you make the canvas larger.

EA released a html5 game a few years ago called “Lord of Ultima” you might check out their setup as they use MVC for a RTS using html5 and just keep everyone updated with ajax calls, which is probably right up your alley.

You might check out making a custom webkit or application with standalone V8 engine integrated to publish it as an app.

edit:: after playing, your game is awesome :)

Aurelius1664 101 Aug 17, 2012 at 14:58

If anyone is interested we’ve got quite far on with this as a bit of a what if experiment and are now putting in into an open BETA. We’ve also got a native iPhone version that we’re testing running from the same core JavaScript and XML files. We came across quite a few problems gettting the game to work on iPhone in “all” JavaScript though. The game runs in the UIWebView however the frame rate is shocking, despite being fine just running in Safari. Turns out this is a common problem with wrapped web apps as Apple does not alow their full Nitro JavaScript engine to be used due to security permissions. So we had to write a native canvas class called by the core javascript and rendered on top of the UIWebView. This seems to work and the framerate is now better than the native HTML5 even in Safari. We also used this method to get around Apple’s restrictions on playing sound in HTML5 without a media player style UI and are attempting to use a smiliar process to enable multiplayer over Bluetooth.

Beta is below, any feedback is appreciated…

TheNut 179 Aug 17, 2012 at 17:05

It worked fine on my desktop, but it loaded too slow on my droid so I gave up. Overall it’s interesting where you’ve ended up. I think the game could use a bit more polish. I would personally class this more along the lines of an alpha release than a beta, but I guess it depends on how much further you want to take this. I think there’s a couple more features you need to add in such as a tutorial, revised UI, fullscreen support, and streaming music to name a few.

Just some suggestions:
1. Change the construction sound. I want to drill a hole in my head every time it loops. Buttons should also play a sound when you click on them.

  1. Scrolling the map is a bit cumbersome. Sometimes it works, other times the cursor leaves the browser and your game won’t register the scroll. Supporting fullscreen will help eliminate this problem. Consider supporting variable scroll speed. When the cursor is anywhere between 0 and 5% from the edge, smoothly accelerate the scrolling. It’s a bit clunky right now. I assume on a mobile phone you support flick scrolling?

  2. The UI could use some love. Buttons should adopt 4-states. Idle, hover, pressed, and disabled (at least for PC, 3-states for mobiles). Some nice sprites to animate this would look great. I know this is for mobile phones, but I would probably stick to a lighter version of the C&C UI. Expand and collapse the panels on the edges of the screen when needed. Avoid popping up panels in the middle because it totally obstructs your view.

  3. Background music with the option to enable/disable (for those listening to something else).

  4. I think you should increase the view area. Selecting tanks to defend your base and not being able to see the enemy one screen down from you makes it a tactical nightmare. At the least, support pinch zooming (you could use the mouse wheel for desktops).

Keep up the good work.

fireside 141 Aug 18, 2012 at 01:03

I have a slow connection (512k) and it just locked up when the little tanks started crossing the field.

Aurelius1664 101 Aug 18, 2012 at 10:44

Thanks for the feedback, I think you’re right about the UI. It is quite hard to get something that works well on both the PC (browser) and Touch - you don’t have the same mouse overs for example and the screen space is so limited on mobiles. A lot of this is being done just to experiment with the various platforms so the UI is loose but hopefully the engine itself, AI and mechanics, are fairly stable now. Might have to detect and display two different UIs one for touch and one for desktop to get around this. We’ll make some changes based on what you’ve said and work on some ideas.

You can play the game in full screen, well full browser area anyway, using the link below. It was a bit of a cop out for ads the way it is now as we’re just playing with ideas for how to possibly make it pay.

We are thinking of releasing an Editor, for the game and the maps, and giving users the chance to publish content that would be available through the menus. Just as a way of extending the game, adding replay value and bringing Mods to mobiles as it were. A lot of the UI, along with the units, maps and factions are customisable.

Will have to look at the slow connection thing - I’ve tried it on 3g from an iPhone and it seemed to run okay though loading times were a bit of an issue. When we go full app all the files are embedded so it doesn’t download anything after the install which will help with this hopefully. The game is only about 25MB at the moment and it loads a lot more than it needs for each level so we’ll look at trying to refine this too.

Aurelius1664 101 Aug 20, 2012 at 13:05

Okay, based on comments, proposed new UI is below which hopefully addresses the feedback but is still both touch and desktop compatible…


TheNut 179 Aug 20, 2012 at 22:05

That’s definitely in a step in the right direction, less the shaky hand drawing :D

Aurelius1664 101 Sep 07, 2012 at 08:30

We have just added multiplayer support for up to four players.

Also updated to show better loading progress on Chrome and Safari and fixed a few other bugs.

Plus it now runs, though a little slow, on the Playstation 3’s browser.

Aurelius1664 101 Oct 22, 2012 at 10:05

We have just taken this into open beta on Facebook. The app now has Facebook integration with their credits api and the ability to challenge friends and play multiplayer in realtime. Still with everything written in HTML5 and Javascript (other than the server side code for multiplayer which is C#/.NET). Any feedback would be much appreciated, link below.