There's some bad weather creeping up the east coast.
What's normally a holiday celebration could get rained out. So, I'm turning it into super-nerdy weekend. My goal is to get some real progress done with B.R.O.O.M. over the next three days. I already got started.
For those following along at home, I already sent the B.R.O.O.M. template to @jonathan about two days ago. I probably could have waited for a reply. But like @DBear says, it's better to have Tumult focus on making Hype better. Yet, one of the biggest problems I'm having with B.R.O.O.M. is related to a problem I'm having with Hype — Scene Scaling.
I think I fixed it...
function zoom () {
z = window.innerWidth / 640;
document.body.style.zoom = "" + z;
document.body.style.MozTransform = "scale(" + z + ")";
document.body.style.MozTransformOrigin = "50% 0";
}
zoom();
window.addEventListener("resize", zoom);
So, when the scene loads, run JavaScript. What it's doing is checking for a change in the size of the browser. If there is a change, or when the script is first triggered, the zoom is set to the width of the browser window, divided by the width of the Hype document (640).
This is much easier than grouping every item and then setting the scaling settings. It's also much better for performance. I feel like this should be a default option for Hype.
The performance is so much better now.
If Tumult doesn't make this a default option for Hype, I'm thinking about spinning this into a template. This is important! One of the reasons why Flash was so successful was its ability to scale. With vector graphics, a SWF game could stretch to fill the screen. With Hype, it wasn't so easy – until now
Update #1 - I noticed some problems. The first is that scrollbars might appear. They can simply be hidden...
document.body.style.overflow = "hidden";
Also, this shows an issue with the Hype "Layouts" feature. Using this approach renders them useless. Perhaps there should be a "ratio" option for Layouts, such as 4:3 (iPad / old TV), 3:2 (original iPhone), 16:9 (iPhone / TV) and 1:1 (square). (Those are just landscape ratios. Portrait would add more.)
This is still possible with the current version of Hype. It just needs more scenes. The correct scene is loaded (with JavaScript) based on the ratio.
I'm planning to port this to iPad and iPhone. If I'm feeling ambitious, I can support all three iOS ratios. If I require iOS 10, then it's just 4:3 and 16:9.
The problem with this approach is that I haven't figured out how to center the game vertically, for those monitors that are not quite an exact fit for a standard ratio. But considering this is primarily an iOS game, I'll probably be OK. (If Android support is added, or full-screen on MacOS, then it could get complicated.)
Update #2 - I added a version number to the game, so I could be sure the latest version is showing. It seems that I was having some trouble with an older version of the game being cached. If I don't see today's date, then I know it's not new. HA!
0 - Means it's not finished.
16 - Is the year, not Y2K compliant. (I should be done before the year 2100.)
9 - It's September. Where did the summer go?
2 - Two
That's it for tonight. I think I can finally move past the title screen. It's probably not final, but I think I got the technical issues figured out.
If you're following along, pressing "f" (after clicking the scene) should activate fullscreen mode.
Update #3 – My approach to this project hasn't been following the way of the programmer. Ideally, if there's tedious work, just write some code to automate it. Yet, I'm having trouble visualizing what I want to do. So, I just manually added 200 divs. Hype does not like that...
As more divs are added, the slower Hype gets. This is especially true if symbols are used. I'm also noticing a conflict. Hype adds styles to the divs. If I want to add my own styles using HTML / CSS, I have to use "!important" to override what Hype is doing. This adds unnecessary code to the program.
Ideally, this will all be done programatically. That way, I can add or remove tiles as needed... such as increasing difficulty or matching the screen size. But to jumpstart this project, I found it easier to just add the divs.