Very new to Haxe and OpenFL, but I’ve been given the task of getting a version of our game that currently compiles fine to flash and native working in js/html5.
The main obstacle I have run into is the fact that we are using tilesheets and drawTiles for all of our graphics, and that is causing bounding issues. I get the impression that this is not the best idea with a js target, but given that what I’m doing is mostly just proof-of-concept I don’t want to rope in a whole new graphics lib if it’s not absolutely necessary.
I understand why it is there, and it doesn’t seem to cause any issues in flash/native. But in js it causes every single sprite to have bounds == the size of the stage, and that’s never corrected. As result, our layout (which relies on the size of the sprites to figure out where to put others) is fubar.
That wouldn’t be the end of the world, I could switch to absolute coordinates for things or pull the bounds from the tilesheet data (we aren’t doing any transforms), except that it’s also causing the clickable area of each sprite to be the size of the stage. That makes the application totally unusable, and I haven’t found a workaround that is sane.
Am I doing something wrong that can be fixed with better code, or do tilesheets just not work in js/html5 without involving js-specific libs?
Doesn’t look like we’re using that option for our flash compile, which works fine. I’ll need to wait until one of the folks who works on the iOS/Android version is around to check with them about how we compile there.
Our exact code, if that would help in the meantime:
tilesheet.drawTiles(sprite.graphics, [offsetX / scale, offsetY / scale, id], false);
sprite.scaleX = scale;
sprite.scaleY = scale; //sprite sheets are currently half-size, so needs to be scaled up by 2 immediately
The resulting sprite is always 2x the size of the stage in both dimensions. The graphic is correctly sized in the upper left corner, but since the bounds are huge it makes the layout and hit testing go haywire. Not sure why it’s not an issue in Flash.
Originally, the bounds were set to the stage size, so it would not resize the canvas element (larger or smaller) if the drawTiles dimensions were different. Also, I wanted to avoid looping through the array to get the bounds size, as I was afraid that nullify the benefit of using tiles for performance
I can think of at least two solutions that might help – one is a way to loop through and get the actual size. This will require a loop through the data, but will give the proper size
Another is to make drawTiles ignored in the bounds size. I can make sure it draws, but it will register as a size of zero.
Still thinking about the right balance, but your feedback helps
Thanks for the responses. Ultimately my concern is just to get everything working, which goes back to my original question: am I the only person trying to use tilesheets in javascript, and assuming I’m not what am I doing differently that’s causing the incorrect bounds to screw up the hit tests?
I’m currently experimenting with having renderer/canvas/CanvasGraphics set the correct bounds in graphics after drawing the tiles, but I assume there’s a good reason to not do this normally?
I’ve just been testing an implementation for enabling shapeFlag support in HTML5, although this does not solve the bounds issue, necessarily, it should allow for mouse events to trigger differently. I guess this doesn’t fix the widths/heights, though I wonder if setting a zero bounds size in these cases would fix your sizes?
I’ve just traced a seperate js/html issue i’ve encountered to the same line of code. It’s made me think i may be using drawtiles incorrectly, and it may be contributing to the incredibly poor framerate my project encounters on mobile browsers. (whilst mobile native runs relatively speedily)
similarly to the op, i have a sprite which is added to the stage which is scaled (in my case the entire project only contains a single sprite which is scaled and centralised) i use a single drawtiles call every frame to draw every game element onto this sprite. (is this the best way to use drawtiles?)
Whenever the stage dimensions are smaller than my required sprite dimensions, e.g., when the browser window is resizes, or the mobile browser is flipped from landscape to portrait, drawtiles currently clips the bottom or right site of my project.
solution? maybe allow the maximum bounds to be overridden by passed them during the drawtiles call ?
