Openfl projects not working in firefox

Help
#1

I am using Stencyl and am trying to get the html5 export to work. However, even if I build a blank project, on firefox, when I test the html5 bulid I always get this error:

IndexSizeError: Index or size is negative or greater than the allowed amount

It points to this line of the generated javascript file.

Anyone got any ideas of what the problem could be?

#2

In a Stencyl install, can you find where the OpenFL files are?

I believe this is occuring within the “CanvasShape” class, located under “openfl/_internal/renderer/canvas/CanvasShape.hx”

Perhaps you could add something like this around line 52:

trace (scrollRect);
trace (graphics.__bounds);

It would be helpful to know the size of both of these values, and to know what they were before it hit this problem. We need to ignore a render call that will have a width or height of <= 0. I wonder if the __graphics.bounds are empty, or if it is a scrollRect that is too small

Thank you for your help!

#3

I get this before the error:

"CanvasShape.hx:52: null" LD31.js:34357:202 "CanvasShape.hx:53: (x=0, y=0, width=660, height=7)" LD31.js:34357:202 "CanvasShape.hx:52: null" LD31.js:34357:202 "CanvasShape.hx:53: (x=0, y=0, width=720, height=480)" LD31.js:34357:202 "CanvasShape.hx:52: null" LD31.js:34357:202 "CanvasShape.hx:53: (x=-2, y=-2, width=124, height=12)" LD31.js:34357:202 "CanvasShape.hx:52: null" LD31.js:34357:202 "CanvasShape.hx:53: (x=0, y=0, width=120, height=8)" LD31.js:34357:202 IndexSizeError: Index or size is negative or greater than the allowed amount LD31.js:49524:0 "CanvasShape.hx:52: (x=0, y=0, width=0, height=8)" LD31.js:34357:202 "CanvasShape.hx:53: (x=0, y=0, width=120, height=8)" LD31.js:34357:202

I’m not sure how much that will help you, but it does appear that the width for one of the rectangles is 0 which breaks it.

#4

I managed to work out this was to do with Stencyl’s preloader which will draw the percentage loaded with a rectangle and if 0% is loaded then it will attempt to draw a rectangle with width 0.

#5

So in that case, the __canvas is not null, but the canvas width is 0?

#6

Yes, I believe so. This came directly after the error:

#7

I’m not sure, but this commit might help:

#8

That seems to work very well so far. I shall let you know if I get any more issues arising about this.

#9

Great! Definitely want to make sure we’re solving this by default in how we handle the rendering. Thank you again for the feedback and your help :slight_smile:

#10

Hmm… Not sure what’s this issue here, but now all rectangles appear black (so black backgrounds and a black loading bar) when I updated. It works fine on flash and was fine for colour using openfl 3.3.1 from 08/22/15. Is there anything that you can think of that could’ve messed this up (and something I need to change on my end)

#11

Hmm, strange. The preloader is working here for me, so I would need to know more/have more in order to reproduce exactly what you’re seeing. Is there some way I can test Stencyl with HTML5 support?

#12

Okay, I had another look at this, because I was confused, and it turned out that I managed to break it when trying to fix the initial issue. However, it also turns out that your fix didn’t work - my attempt at fixing it allowed it to build.

However, now I managed to fix it by modifying around line 52 of the CanvasShape class to read:

[code] if (graphics.__bounds.width > 0 && graphics.__bounds.height > 0){
if (scrollRect == null) {

                    context.drawImage (graphics.__canvas, graphics.__bounds.x, graphics.__bounds.y);
                    
                } else {
                    if (scrollRect.width > 0 && scrollRect.height > 0){    
                        context.drawImage (graphics.__canvas, Math.ceil (graphics.__bounds.x + scrollRect.x), Math.ceil (graphics.__bounds.y + scrollRect.y), scrollRect.width, scrollRect.height, Math.ceil (graphics.__bounds.x + scrollRect.x), Math.ceil (graphics.__bounds.y + scrollRect.y), scrollRect.width, scrollRect.height);
                    }
                }
            }[/code]

It’s not the nicest of fixes but it seems to work on my end.

#13

Okay, does this fix it for you?

#14

You seem to refer to scrollRect before you initiate it which pulls up an error for me, and I also get this error:

[neko] C:/Program Files (x86)/Stencyl/plaf/haxe/lib/openfl/openfl/openfl/display/DisplayObject.hx:172: lines 172-1875 : Defined in this class
[neko] C:/Program Files (x86)/Stencyl/plaf/haxe/lib/openfl/openfl/openfl/_internal/renderer/canvas/CanvasShape.hx:38: characters 71-77 : Cannot inline a not final return
#15

Try updating again, I think its fixed

#16

Sorry to do a little bit of thread necromancy, but I spent about an hour searching online for the exact thread title and this is what came up on the top of google. Another hour of headbanging and I found a solution that may help other people searching here.

My code worked on first compile in Firefox, and nothing after that. Everything seemed to work great in every other target including Flash and Chrome. I opened up the java console and noticed a non-error non-warning that’s hidden by default along side some other erroneous errors that confused the hell out of me.

GET http://localhost:2000/ [HTTP/1.1 304 Not Modified 1ms]

That “Not Modified” part.

So even though the code was being updated and recompiled, Firefox didn’t care. Hitting refresh gave the same series of messages for each file. I had to do the hard refresh (hold shift when clicking the refresh button) to force it to reload everything and VOILA! Firefox ran the program fine.

So, to test in Firefox I need to shift click refresh every single time I open a new version or it breaks.

#17

Apparently, this is a FlashDevelop issue, and you can get around it by building from the command line.

Alternatively, look inside Export/html5/bin for index.html. If you load this file directly, you’ll be able to reload it with an ordinary refresh.

(And just for the record, ctrl-f5 does the same thing as shift-clicking refresh.)