Make HTML5 runtime names specific + other requests

Feature requests
#1

When bundling HTML5 builds makes the runtime its version number and not the name of the project. Maybe Defold can then host runtime JS for each version on a public CDN, and have an option when bundling to load the runtime from that public CDN.

So instead of “My project.js” for example name it defold.min.js and put it into a folder with the version number as it name.

You could probably get it hosted on Google CDN https://developers.google.com/speed/libraries/ or CloudFlare CDN (might be easier to get on) https://cdnjs.com/about it would be extra work with each release to get these up (essentially committing the JS to an official public git that these sites pull from), but it would also mean choosing Defold for webgames is an even more appealing option not just for devs but also portal owners. Have which CDN to use if enabled in game.project too. Maybe only having one official CDN would be better so the caching is not fragmented.

Then we could use those CDNs for example like: https://ajax.googleapis.com/ajax/libs/defold/1.2.86/defold.min.js

I dislike how the HTML5 project is set up to modify the canvas style on load, I also dislike how it changes the browser window title by default. I’d like these as options to turn off in the game.project file.

Please add a button to go along with the normal fullscreen to only go fullscreen inside of the current browser window… so take up 100% width and 100% height but not go fullscreen on the monitor. Have this be able to be an option set in game.project as default as well. Users will appreciate it when they discover it as it will be one of the best ways to play games in terms of experience.

Add an option to capture the mouse cursor. This ImpactJS game does this for example and why it’s useful will be clear when you play it http://phoboslab.org/xibalba/

Please add some styling to the canvas tag so that it disables the text select when dragging a mouse cursor over it.

<style type="text/css">
    canvas {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        outline: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
    }   
</style>
style="user-select: none; -webkit-user-select: none; -moz-user-select: none;"

When dragging on Chrome on Windows I see this for example

Right click is not working still and instead brings up this dialog.

Right click is needed in certain kinds of games that are mouse focused and need two primary inputs. Think like shooting left click, reloading with right click.

Some more requests…

Ability to call a specific JS function, and setup a JS listener to get data. The closest I’ve gotten to doing this is: sys.open_url(“javascript:window.alert(‘test’);void(0);”) but it opens on a blank page so it’s useless.

Ability to set the current webpage URL. But if the above were available it would be enough.

5 Likes
#2

Yes, we have talked about this. It’s a good idea.

I dislike how the HTML5 project is set up to modify the canvas style on load, I also dislike how it changes the browser window title by default. I’d like these as options to turn off in the game.project file.

You can provide your own templates for this if you want to. See http://www.defold.com/manuals/html5/#_customizing_html5_applications

3 Likes
#3

AFAIK that won’t entirely help as there was a recent change made in the runtime to cause it. I have not inspected what exactly is happening but I did notice the change.

#4

@sven might know more.

1 Like
#5

:thumbsup::thumbsup::thumbsup:

I have added issues for all the non-CDN things (these are being looked at on another front I think, not something specific for the engine or engine team):

  • Right click support in HTML5: DEF-1858
  • HTML5 should not change window title: DEF-2063
  • Text input cursor when dragging on HTML5: DEF-2064
  • Option to lock and hide mouse pointer: DEF-2065

The “fullscreen inside the browser window” is something I believe game devs need to add themselves to their custom template (it’s just a matter of resizing the canvas element). :slight_smile:

4 Likes
#6

Please add new system identity “Mobile HTML5” or something like this. I know that need “notify user that native app better” but users this is users.

1 Like
#7

Can you explain what you mean by a new system identity?

1 Like
#8

I think he means two targets one HTML5 for desktops and HTML5 optimized for mobile.

@splashshadow you can detect if users are running a mobile browser and force them to the app page. There are multiple solutions for this on github.

4 Likes
#9

Ah, ok. I’m not sure if it’s possible to do much with HTML5 specifically for mobile though.

@sven or @Mathias_Westerdahl might know?

1 Like
#10

It would require writing an entirely new runtime for mobile most likely… the current method is expensive. But apparently HTML5 builds work fine on newer mobile hardware so may always be better to force people to native mobile app pages if devs detect mobile + lower framerate or something.

3 Likes
#11

Yes, thanks for correction. I think mobile HTML5 support in Defold need more love … but i know that Defold team overloaded by tasks.

2 Likes
#12

Well, as it is now this is beyond the scope of what we are doing. If you really need to write performant web code you should write it in javascript directly.

We’ll see if webasm will give us some performance gains further down the line though.

2 Likes
#13

It would be really interesting to benchmark a Defold HTML5 build against the equivalent in Phaser. It is likely that the native Phaser version would be faster most of the time but I wonder how much faster?

The key to a fast Defold game in HTML5 is to write reactive code and avoid lots of Lua code running every frame (since we use vanilla Lua and not LuaJIT in HTML5 builds).

1 Like
#14

WebAssembly / WASM should be a really good speed boost for browsers which support it, but that will most likely be desktop browser which already support WASM for now.

http://caniuse.com/#feat=wasm

I have an iPad 2 and an iPhone 5 I use for app testing, which I think are considered older low end these days, and they lag bad with anything moving and can’t handle any physics. Native apps run really great. This game http://playbiolab.com/ made with http://impactjs.com/ runs really great on my older test devices, it was optimized for mobile web.

The problem is largely in part because of the overhead (Defold HTML5 runtime was made with magic technologies and wasn’t crafted directly) and not Lua vs LuaJIT I think.

Making for mobile web requires really special considerations because of the limitations imposed by mobile browsers vs native apps. Like @britzl says you can’t take things for granted which run fine on desktop such as having trig functions running every frame or your game will chug.

3 Likes
#15

I don’t know where the overhead on mobile is coming from. I’ve seen other emscripten engines run pretty decent on mobile html5 too. Also browsers are now using webgl and accelerated views.
The problem is that it lags even on an iPhone 6 with a bare bone example and a tiny bunch of go.

A bit of love in this area would be greatly appreciated as html5 mobile is often a requirement when dealing with game portals.

1 Like
#16

It does? That is quite surprising. Can you share an example with me?

#17

Even some of your most ismple publicexamples look jerky on my iPhone6.

Tried virtual gamepad and coin magnet, just changing the resolution to fit on the phone.

#18

They use physics for collisions so that’s part of the reason why. They could be recoded to not use physics and those versions would run a bit better.

1 Like
#19

Running tests, and I can definitely see a difference without physics collisions.

Didn’t expect it to be so heavy. I’ll investigate further.

Thanks a lot

1 Like
#20

Released in 1.2.145

Released in 1.2.148

3 Likes