Does Phaser have any loop size limits?

[Garry3001]

Hi

Sorry if this is in the docs somewhere, but I couldn't find it.  Could someone please tell me if Phaser (or possibly Brackets) is deliberately limiting the size of my loops, as I can't seem to get them to work over about 32000 iterations.  I did notice that JSbin has something called "loop protection" but offers a code to turn it off.  Is there a way to do this in Phaser?

[glantucan]

Could you provide an example of that? I don't think there's that kind of protection in Phaser. Are there any errors thrown in the developer console?

Why would you iterate so many times anyway?

[Garry3001]

Ok, here's an example.  Try changing the 1000 iterations in the first loop to 10000 for a strange result, and then to 20000 for an even more strange result.

var i;
function create() {
    graphics = game.add.graphics(0, 0);
    graphics.beginFill(0xFFFFFF);
    for (i = 1; i < 1000; i++) {
        x = Math.random()*300;
        y = Math.random()*300;
        graphics.drawRect(x, y, 1, 1);
    }
    for (i = 1; i < 30000; i++) {
        x = (Math.random()*300)+400;
        y = Math.random()*300;
        graphics.drawRect(x, y, 1, 1);
    }
}

Sometimes the loop limit seems to be about 32k, but other times it's different.  This is completely inconsistent and really annoying!  I understand the reasons for protection due to the silly browsers crashing on infinite loops, but it should be documented how to bypass it for those with genuine need.

[glantucan]

You are right on that it looks strange. But there is no loop limit. If you console.log(i) yo will see every step of the loop is executed. 

I have no idea what's going on though. Is there a limit to the render cache, if there is such a thing, perhaps?

Anyone has a better idea?

 

[symof]

39 minutes ago, Garry3001 said:

Ok, here's an example.  Try changing the 1000 iterations in the first loop to 10000 for a strange result, and then to 20000 for an even more strange result.

var i;
function create() {
    graphics = game.add.graphics(0, 0);
    graphics.beginFill(0xFFFFFF);
    for (i = 1; i < 1000; i++) {
        x = Math.random()*300;
        y = Math.random()*300;
        graphics.drawRect(x, y, 1, 1);
    }
    for (i = 1; i < 30000; i++) {
        x = (Math.random()*300)+400;
        y = Math.random()*300;
        graphics.drawRect(x, y, 1, 1);
    }
}

Sometimes the loop limit seems to be about 32k, but other times it's different.  This is completely inconsistent and really annoying!  I understand the reasons for protection due to the silly browsers crashing on infinite loops, but it should be documented how to bypass it for those with genuine need.

It does seem to have a hard limit on drawrect at around 16300;

This topic provides an alternative of sorts

 

[Garry3001]

Thanks!  Yes the limit is on the number of drawRect() calls.  I guess it's a memory buffer limit.  Any ideas about how to force the screen update to empty the buffer again?  I could then do that every 10000 loops or so.

I tried using lines as an alternative instead but sadly I can't make single pixels with those, unless I'm missing something?

I am going to try next with sprites though I expect they're a bit slower.

[drhayes]

What are you trying to do? BitmapData might be a better fit for what it sounds like you need, but I'm not sure what problem you're solving.

[Garry3001]

I'm trying to plot pixels with alpha, for mathematical graphics plots.  I'd like it as fast as possible and as many pixels per frame as possible.  I know it's not the ideal use case for Phaser, but I do love how Phaser makes it very easy to add all the user interface and have it working on Android+iPhones of various sizes.

[symof]

6 hours ago, Garry3001 said:

I'm trying to plot pixels with alpha, for mathematical graphics plots.  I'd like it as fast as possible and as many pixels per frame as possible.  I know it's not the ideal use case for Phaser, but I do love how Phaser makes it very easy to add all the user interface and have it working on Android+iPhones of various sizes.

Phaser can plot with bitmapdata.

http://phaser.io/examples/v2/bitmapdata/plot

[Garry3001]

Thanks for the suggestion, though I can't find any way to apply alpha with renderdraw.  There also turned out to be a limit on sprite numbers, so I may have to give up on Phaser for this.

[symof]

5 hours ago, Garry3001 said:

Thanks for the suggestion, though I can't find any way to apply alpha with renderdraw.  There also turned out to be a limit on sprite numbers, so I may have to give up on Phaser for this.

I did some followup research on this, and it looks like it's from pixi.js

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create});

var pixel;
var texture;

function preload() {

	//png of a single 1x1 pixel
    game.load.image('pixel', './img/pixel.png');

}

function create() {

    pixel = game.make.sprite(0, 0, 'pixel');

    texture = game.add.renderTexture(800, 600, 'texture');

    game.add.sprite(0, 0, texture);

	plot();
}

function plot() {

    texture.clear();
	
    for (var i = 1; i < 32000; i++) {
        var drawX = Math.random()*300+50;
        var drawY = Math.random()*300+100;
        texture.renderRawXY(pixel, drawX, drawY, false);
    }
    for (var i = 1; i < 30000; i++) {
        var drawX = (Math.random()*300)+440;
        var drawY = Math.random()*300+100;
        texture.renderRawXY(pixel, drawX, drawY, false);
    }
    
}

I'm not sure on how you want to use it but bitmapdata does not have the same issues.

Edited June 9, 2016 by symof
Edited the code to declare all variables.

[Garry3001]

Thanks again, it is well explained via that link.  So I'm back to finding a way of plotting many thousands of pixels with working alpha as quickly as possible, though this is straying from the original topic now.  The most promising answer I had in the other thread was to use getpixel and setpixel with manually adding the RGB values.  I haven't tried that, but It's far easier in pure Javascript so maybe I should just stick to the usual games stuff in Phaser.

[glantucan]

I love Phaser too, but why don't you use a library mor suited for this kind of job?. D3.js or Chart.js seem more suited for the job and have a lot of features already implemented that you won't have to reinvent with Phaser.

[drhayes]

That's good advice. Canvas might be a better approach than D3 if you're well and truly plotting thousands of points. Each one of the D3 points would be a DOM element and would make the chart lag if you zoomed around, etc.

[glantucan]

@drhayes You are right, D3 might not be the best option if you are drawing a lot of points, but Chart.js plots on the canvas and seemed pretty fast and reliable to me when I checked it out a while ago.

BTW, it's also responsive.