Problems with building html5

Questions
#1

Hi I’m pretty sure this is solved all over and I’m just not getting it. And I’ve got to admit it the guys who asked before me were more advanced in defold and got the answers they got :sweat:

  1. I want the build html5 to work exactly like my normal build. The first Thing is the default fullscreen without the button to click on (wich by the way doesn’t work on my phone)
    I found a template for that made by @Dragosha but have absolutly no idea how to get it into my game… I think it is an css style sheet? but how do I get that into defold? Or make an css sheet in general?

  2. My Restart button made with the GUI (again in normal build working fine) doesen’t work in the html build :unamused:

Thanks a lot in advance for helping :sob:

#2

Allright update! I now know how to make a css, how to get it into defold an where to put it.

For my brothers and sisters with the same starting problems:

  • you make a css sheet with your editor and simply save it with .css as ending (e.g: style.css)
  • you get the sheet into defold like most things: with drag and drop
  • in your project Settings you go down to the html5 Settings now you can now add the Custom css

Still turns out I’m using the code wrong or it’s simply not meant to do what I want it to :sweat: So no Advance here

Alright next EDIT:
I found @Pkeod s JS File exactly for my Problem magic link
How can I add the JS to the HTML file’s script area as it says? I can’t find anything in the html5 project settings where I could add the JS :confounded:

Sorry for any english mistakes :sweat:

#3

Here’s an example of an HTML5 template that defaults to fullscreen and adapting to various screen sizes or window resizing:

CODE: https://github.com/britzl/publicexamples/tree/master/examples/fullscreen_html5
DEMO: http://britzl.github.io/publicexamples/fullscreen_html5/index.html

2 Likes
#4

Thanks a lot! :heart_eyes: it’s working!
But not on mobile :thinking: somehow it’s not loading at all and I only get the defold loading screen

The Problem with the not clickable button also still remains. Do I have to change anything for the the button to work in html?

#5

Did you wait a bit? The example loads a bit slowly and there is no progress bar in the template I shared.

Which clickable button? There is no clickable button in the example I shared.

@sven could the fairly recently added event.preventDefault() call made the button not clickable?

#6

I did but I’ll try again and wait longer this time… I’ll give u an update
EDIT: It’s working on mobile but very slow and killing my Background. I’ll try to reduce the Heapsize and if necessary the Image Sizes.

Nope the button is not in the example it’s in my game. It’s a GUI Text Node turned into a button with this piece of script attached to make it clickable:

function on_input(self, action_id, action)
		local restart = gui.get_node("restart")
			if action_id == hash("click") and action.pressed then
		if gui.pick_node(gui.get_node("restart") , action.x, action.y) then
			msg.post("@system:", "reboot")

In the browser Nothing happens when clicked :open_mouth:

#7

Can you share a screenshot of your input bindings?

EDIT: Mobile browser or normal desktop browser btw?

#8

Please verify that the button is working in some other way than sending the “reboot” message, because that message isn’t handled on HTML5. For example, add a print or add some visual information when the button is pressed. :slight_smile:

Example:

1 Like
#9

Here the screenshot

screenshot04
screenshot04.jpg1920×1017 251 KB

As I said in the normal Project -> Build it’s working fine.

I’m testing both. Directly from defold (via build html5) in the deskop browser (Microsoft Edge in case that matters) To test on mobile we put the html5 bundle on a server an test it mobile

#10

Ok, looks good. There’s usually a problem if left mouse button uses the same action as multi-touch, but this isn’t the case here.

@froghunter Can you please verify this?

1 Like
#11

Did that :grinning:

Thanks! You’re right!
The button is getting the info and doing what it’s told if I add an enable to it!

So the problem is the “reboot” message. Is there an equivilant for the reboot for html? Or an Exit game command?

#12

One more thing: On mobile we can’t jump wich works fine in the deskop browser too :sob:
Any ideas why that could be? :sweat:

#13

What are you expecting this function to do? :slight_smile: Are you using it to restart a game after a game over for example? In that case it might be better to place all your “game round” specific stuff into a separate collection and use it as a collection proxy in your main collection. Then when you need to “restart” a game you just need to unload and load the collection proxy. I’m not sure if we have an example for this, but you can read more about collection proxies here: https://www.defold.com/manuals/collection-proxy/

I’m not familiar with your game, can you give us some more detail?

1 Like
#14

Exactly, thanks I’ll look into it

Well it’s an “ending runner” game. I took all Code magic from the endless runner tutorial with the frog, the “hero script”. I only added some more Messaging for collission Responses and that the hero char stops when colliding with an end object.
As far as I know the hero runner already has the magic Input to work on mobile with Multi touch too. I have no idea where or how to Change anything in the hero script to make it work :disappointed:

responsible part in the hero.script looks like this


function on_input(self, action_id, action)
	if action_id == hash("jump") or action_id == hash("touch") then
		if action.pressed then
			jump(self)
		elseif action.released then
			abort_jump(self)
		end
	end
end

I switched the Input names for my space-key and the multi-touch too (key-space: touch, multi-touch: jump) on pc the Jumping still works on mobile not. (screen for the Inputs further up)

#15

Here is a super minimal example of using a collection proxy to handle “restarting” of a game. The actual game logic is in the game.collection file, while the “menu” is in main.collection.

Take a look and see if you can get some ideas for your own game:
restartable_game.zip (4.4 KB)

#16

And something similar with a menu and a game:

According to your input bindings which you shared above the “touch” action is bound to multi-touch. This is a special input binding for dealing specifically with multi-touch, ie when two or more fingers are touching the screen at the same time (manual link). By setting an input binding for left mouse button you also get exactly the same action for normal single touch on mobile. This means that whenever you touch the screen with one finger it generates the same action as a left mouse button click, in your case “click”.

2 Likes
#17

Thanks a lot for helping guys, but for now I give up :disappointed_relieved:
I’ll maybe try again some other time but for now I’m done

Really thanks a lot anyway :blush:

#18

Share the entire project with be (bjorn.ritzl@king.com) and I can take a look. Write in the e-mail what’s not working as expected and I’ll try to help. It’s probably something really simple but easy to overlook.

3 Likes