Defold on Facebook Instant Games

With Defold-Orthographic. Like what rendercam supports (it just doesn’t draw beyond the “black bars” for non GUI I think)

It’s not urgent. I’m going to use a larger than window size texture instead of having black bars for backgrounds.

I’m super hyped about Instant Games!

2 Likes

Facebook devs mentioned this for mobile debugging but I’m not sure how to use it https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews#open_a_webview_in_devtools

1 Like

:open_mouth: Those are all the same exact project? Hmm. I have tried rendercam on android a couple times and it seemed to work fine. What do you have your game.project resolution set at? Does it work if you change that to the resolution of your device/container? I may be dealing with that incorrectly.

It is 640x960 in the game.project file . This is in Facebook Instant Games in the Android app not Android directly so may be something weird going on.

Something about the html template is moving the camera down slightly / cutting off incorrectly. It happens in Android app, and local browser, but not in native build.

Direct html5 build and in facebook web container


Native

A little more clear here

It seems to be related to game_canvas.height if I add to it a little bit then it seems to make the canvas line up properly, but not sure of a proper fix for the auto scaling.

1 Like

I tested on an original iPad Retina and it doesn’t have a vertical offset issue so must be something to do with the Android client / Google Chrome vs whatever the iOS clients use. Also the loading progress counter actually does go up over time and doesn’t go from 0-100% instantly so that’s odd.

I applied https://github.com/jonathantneal/sanitize.css and it seems closer to right e in Chrome on desktop

testing on Android now…

It’s better but not perfect.

And it also breaks iOS perfection as well…

And doesn’t look perfectly right in web on Facebook either

I’ll test a different way of handling the canvas size and see if it helps.

1 Like

False alarm, I had a canvas modifier still in the file, it works with https://github.com/jonathantneal/sanitize.css perfectly on all platforms. :sparkles:

So if you use the html template in the example you may need to add this test and see.

2 Likes

What’s the TLDR; Is there a problem with the index.html used in the example?

I think the problem is just the way different browser tech handles things. On iOS it as is looks right, but in Chrome and Android app the game is cut off improperly. The sanitize.css normalizes things so the behavior is the same on iOS and Android etc. the way you want it. It would probably be good to add https://github.com/jonathantneal/sanitize.css directly to the template as it will probably show up for others later too. But there may be a smaller css change that could be made too if you can track down exactly what’s wrong.

2018-03-20%2004_08_51-Instant%20Games

29386694_1539139349532094_740035363455631360_n

Idea for how to produce images like this in HTML5 and convert to base64 image for posting?

Can use stock but personalized would be better. Special render target and then get the texture data of the render target and then convert?

Maybe use Canvas.toDataURL() somehow?

I’ve been thinking of this as well. Some games include a screenshot and that would require us to get screenshots working on HTML5. My extension is currently not handling it (although @AGulev has some ideas). Another is:

I tried this but didn’t get it to work. I haven’t spent that much time with it so it could still be a way forward.

This could also be a viable approach I think.

2 Likes

Our first FB Instant game with Defold released: https://www.facebook.com/instantgames/285409181956230/

Thanks @britzl =)

11 Likes

Got this warning when testing. Looks like Defold team needs to fix a certificate used by g.defold.com that just expired yesterday.

3 Likes

I think it was a cache issue. I got it as well and t was solved with a refresh.

4 Likes

Here is the line which fixes the previous “clipping” issue to make Chrome/Android behave like iOS

canvas{
	vertical-align: middle;
}

The other CSS may still be helpful but this is what fixes the specific issue.

2 Likes

spoke today with Facebook about Instant Games marketing. Basically they have nothing on offer. Kinds of they link to the instant games fb group for it. I understand they’re not sure how it takes off, so holding off any processes/initiatives.

Well, then I suggest you all join their Instant Games support group on FB. Sorry I don’t have the link for it now.

4 Likes

The group is https://www.facebook.com/groups/instantgamedevelopers/

I’ve posted a few questions without answers… but have also been able to answer other questions.

I have 2 simple games for Instant in polish now (one is a “why not” game) and then I’ll be making some more in depth games for it. I’ll make some games with Defold exclusively for Instant for a while to give it a chance. Also an important thing I feel that I’m focusing on is using the features of the API as much as possible.

3 Likes

on the other point, my friends at FB shared plans for a gamejam for instant games. Will follow up on it and share as much as I can.

5 Likes

I’ll 100% participate on that!

2 Likes