I wasn't planning to play with B.R.O.O.M. today. Instead, I was playing with a new "Free Hype Template" for this week. Progress was slowed, as I was getting a strange error...
SyntaxError: Unexpected token '.'. Expected ';' after var declaration. — index_hype_generated_script.js:4
I didn't understand what this meant. I was wondering if the recent Hype update broke something, as I couldn't trace the source of the error. I even turned off all of the custom JavaScript in my project and I was still getting a problem.
So, I decided to test a different Hype project, to see if I was getting a similar error. Nope, but I did see a different problem. The error counter was going crazy, constantly adding new errors. It was searching for something that wasn't there, as I made major changes to my project.
Here's what I learned...
- Sometimes it might be better to start from scratch, as old code can cause a problem.
- Running lots of JavaScript events, concurrently with heavy animation, can severely tax the CPU.
- This stuff matters. With the death of Flash, HTML5 represents a new golden age of online gaming. One of the big complaints of Flash is that it crashes and killed battery life. HTML5 projects are not immune to these issues, so performance testing is important.
I knew something was wrong when my iPhone SE was heating up – like really hot. That's one of the most powerful iPhones around. A scrolling background, even with an SVG file, shouldn't be that much of problem.
I turned off the JavaScript for that scene, as it's just a title screen. That code is not needed yet. I turned the scrolling animation back on. The updated project does put some strain on the CPU. On my Mac Mini, it's about 62% CPU usage. That's much better than over 100%. The iPhone SE does get warm after a few minutes, but not as hot as before. Also, with a title screen, the user should only be there for a few moments. The game itself does not have constant scrolling.
This is a concern, as I'm not sure how I could create side-scrolling games with Hype. Perhaps improving the physics options could help...
I watched the CPU usage while scrolling the scene in the Matter.js demo. It seemed fairly consistent. (Although, that's without textures or a large SVG background.) This might be an alternative to the current setup.
I conducted one more test. I felt this problem might be related to scaling...
It totally was! This is bad. This very bad!
By turning off scaling, in the scene settings, the CPU usage dropped to a tenth of what it once was. This basically tells me that I shouldn't be scaling scenes.
@Daniel and @jonathan – I think this information is useful to you. As you add features to Hype, you don't want to recreate the issues that caused Flash to fail. Performance seems to be a problem with scene scaling. Perhaps a Matter.js view is a better alternative.