itch.io Community » Game Development » General Development

My HTML5 prototype is running slow

A topic by Titanwork created Feb 04, 2021 Views: 1,683 Replies: 23

Viewing posts 1 to 9

Titanwork3 years ago

Hi everyone, today I have uploaded a part of my game (the project is private) to see how it would perform. Unfortunately, the result wasn't good at all. The sounds and when the game switches backgrounds, at some points, take too long till they execute.
I have made that part using HTML, CSS, JS & JQUERY and the size of the Zip file that I have uploaded is almost 30MB.

Do you guys have any idea what the issue might be? Or should I make my project downloadable to prevent all of those weird issues from happening ?

No Time To PlayModerator3 years ago

Do you suppose it could be the fault of Itch? Because otherwise this belongs in General Development.

That said, what browsers did you test with during development? You're testing with the same browsers now? And it's only slow when uploaded to Itch, not on your desktop? Are you loading any resources from 3rd-party servers?

Titanwork3 years ago

No, I don't suppose that.
I runned it on both Chrome and Firefox during development and now after I uploaded it here on Itch. The result is the same on both browsers, however, I noticed that the better my internet connection is the better the game's performance gets. As for you other question, I 'm not using any resources outside the projet's files.

Itch.io does mention (on "Uploading HTML5 games") something about large HTML5 run better when they are disributed as downloadable instead, but the problem is I'm not that experienced when it comes to converting many files into an actual application. I also wonder if there are technologies out there that are beginner friendly and can help me do just that.

Here is my current project structure:

No Time To PlayModerator3 years ago

There are people uploading web games here that are hundreds of megabytes in size. While 30MB is nothing to sneeze at (my biggest so far are under 10), it's odd that you'd have such big problems. Are you loading assets repeatedly during play? It's a mistake I've seen a lot of beginners make.

Titanwork3 years ago

I'm not 100% sure on how to interpret "loading assets repeatedly", but I think u are asking about if I'm adding/removing new objects/elements in the DOM from time to time during the game's lifetime. If that is the case, then yes.

No Time To PlayModerator3 years ago

I mean every frame, not from time to time. I've seen beginners literally loading a sprite from disk anew every single frame.

Titanwork3 years ago

I'm sorry, I don't know how to reply. I don't understand what " loading a sprite from disk anew every single frame" actually means. Is there an example that I can see somewhere ?

No Time To PlayModerator3 years ago(+1)

You might want to get a more experienced developer look at your code.

Titanwork3 years ago

Thanks for your advice and for trying to help me. I will do that if I find someone. If it's ok I do have one last question. What is the max size of the project that I can upload to Itch if I decide to go with "Downloadable" option?

No Time To PlayModerator3 years ago(+1)

The limit is 1GB by default, two if you use Butler. You can also contact support and ask for an increase if that's not enough.

No Time To PlayModerator moved this topic to General Development 3 years ago

Tadgames3 years ago

Are you using a engine/ide? Like Unity or any others?

Titanwork3 years ago

None of them. Is there anything you would recommend for me ?

Tadgames3 years ago(+1)

Ok, so your making a from scratch project. My guess is that you have multiple image files that you are loading. And you've mentioned backgrounds, so perhaps each background is a separate image? My advice is that you put all of your images together as 1 huge sprite sheet.
And then using 'blitting' to copy from that sprite sheet onto your games canvas.

[ This is how to copy from a section of the source, to a section in the canvas:
canvas.context.drawImage(source, from x, from y, from w, from h, to x, to y, to w, to h) ]

Using drawImage you would copy each background from the sprite sheet onto the display canvas element. So instead of loading a new background you would be drawing from 1 sprite sheet that is fully loaded before the game starts.

You should never have more than 1 or 2 canvas elements in the DOM. For better performance you should use 1 loaded sprite sheet and off screen canvas elements that you draw from onto a single displayed canvas.

If you have static (non-animated) html div elements that need a background, another option is to bake the backgrounds into the css of the div by using a base64 data string of the image as the css background url.

Titanwork3 years ago

Sorry for the late reply and thank you for the amazing tips!
Your guess is correct. I'm using different images on different backgrounds/divs. Every scene/lvl in my prototype is represented by a single div, and there is a special pattern, that I have created, that decides what objects to show or remove on the current scene.

The pre-rendering technique called Blitting that you mentioned seems to be very useful in general and maybe just what I need. But i didn't quite get that "baking" method so I'm gonna need to read more about it.

I wish I knew where I could find all of those hidden techniques that make a huge difference in the outcome, instead of learning them with time. (T __ T)

Tadgames3 years ago(+1)

A few good spots for general html5 learning resources are html5rocks html5gamedevs and developer.mozilla.org. Also w3schools is a great html/javascript reference resource.

To generate a base64 string from your image you can use an online "base64 image encoder".
Then to bake the string into css you'll use a data url like this:

div#backgroundDivId { background: no-repeat url("data:image/png;base64, ...."); }

That way the css and images would get loaded as one before the game starts.

And take heart, as you work on and release projects, you'll only get better and better.

jfkEO1010etc3 years ago (1 edit) (+1)

you may want to use a local server for testing, python for example. Then I'd go trough all scripts an remove external dependencies, DL those scripts and host them locally. I wonder what you need JQuery for...

It's hard to say what's wrong without to know the program structure. Is it using SetTimeout() in JS to execute a "mainloop", or ist it something completely unrelated, like a text adventure in HTML? Anyway, if it is framebuffer oriented, try using the system milliseconds counter to locate the part of the code that slows things down.

edit: you said you're using DIV tags to show and remove elements. I hope you don't create and delete HTML-elements, but instead simply hide them by css attribute display="none".

Titanwork3 years ago

Thank u for your time!
I use JQuery to make it easier for me to select and perform multiple actions (chain) on some of the game's elements. However, I have learned with time that it wasn't too hard to do the same things with pure JS, therefore, I'm thinking of removing JQuery.

Well, I do use use SetTimeout() on many parts in this prototype.

I do use that hiding technique by setting the display="none" as well. As for remove, I use it on elements I don't have need for.

jfkEO1010etc3 years ago(+1)

Maybe use an array and write the system timer to it after every command. then after game exit simply list the array contents and you'll see between which commands the most milliseconds have past.

Suspended account3 years ago

Show post...

looks nice one

TheBoneJarmer3 years ago(+1)

If you are still stuck, I can have a look. I'm quite the experienced web developer if I may say so and I also created my own HTML5 engine. And from what I can read you struggle with stuff I had to deal with years ago. The issue with creating your own HTML5 engine is that it will work for small games but you'll hit performance limits quite easily. To start, you aren't using WebGL, are you? ;)

Titanwork3 years ago

Hello Jamer and sorry for the late reply! I really appreciate your offer, but I don't feel like sharing anything just yet. If I ever change my mind, you will be the first one to know. As for your other question I have only heard of it. Sounds to me like some kind of a framework : )

Diego Orellana224 days ago

I have a similar question. I made a game with just plain js files and one single html

using the babylonjs library (without installing it) and also I load some glb files. Why does it matter where these files are being fetch from? I thought they had to be completely loaded before you can use them. Then why my game performance is half if I'm serving the files from a server rather than my local-host???
Please somebody enlighten me.

Diego Orellana224 days ago

After some debugging I found that firefox was the problem. And also I found out that maybe the version of babylonjs used might drop frames in different browsers.

Diego Orellana224 days ago

Last reply but this link could be useful to people facing similar issues: https://forum.babylonjs.com/t/bad-performance-in-firefox-compared-to-chrome-base...

Log in to reply Join the discussion. Log in or create a free itch.io account to continue.