[Solved] Phaser beginner having limitation-problem in creation function

[Schmiddae]

Hello everyone!

I’m quite new to phaser and after some tutorials, I wanted to recreate an old game of mine. It’s basically minesweeper, but you have to navigate a snake through the maze, while you mark the mines. I’m using Phaser 3.15.1 with node.js 9.10.1 on CentOS 7.

I started by preloading my assets and write the functions to create a random generated game-field.Here is the code:
https://pastebin.com/PfNiFdRK

The random generator creates “free” and “occupied” fields. Free fields should recieve a number inicially to indicate the amount of adjacent mines. The result is pretty much as I expected, but at x=63 y=17, there is always the number, regardless of a occupied field or not, as you can see in the following screenshot:

[Album] Imgur

I tested this with Firefox 64.0 (64 bit) on Windows 7.
Unfortunatly, I develop this offline, so I can’t give you the address to test it for youself.

I hope, someone can tell me, what I did wrong, or what I should do to get this to work. The code is very awful, since I did not work much with javascript. I’m very open to suggestions.

With kind regards and happy holidays!

Schmiddae

[Telokis]

Sorry but I can’t reproduce your issue, there!
I changed the colors a bit to make it more visible and nothin strange showed up. I expected a red zero on top of a grey square but nothing.

Firefox:

Chrome:

As you can see in the console on the right, the one at i === 63 && j === 17 is properly set to 1 but nothing strange happens anyway.

I simply copy/pasted your code inside an index.html, created a dummy grey file of 100px * 100px and put it inside an assets directory with the proper name. I changed the color of the text from white to red to make it show better but nothing on the squares.

With the text in black, it’s even more visible:

By the way, you should never EVER use == in JavaScript, it’s very rare to really need it. Especially when you compare against 0.

• null == 0 is true
• undefined == 0 is true
• "" == 0 is true

It’s very easy to make mistakes. Always use the triple equal === operator which ensures types are equal as well.

[Schmiddae]

Hello Telokis,

first of all, thanks for your reply!

The type comparison was a very good tip. I will watch out for that in the future. I did some further testing myself and changed the code, so it will just set up the array first and then create the gamefield, but the results were even stranger:

for(var i=0; i < 64; i++)
	{
		for(var j=0; j < 32; j++)
		{
			
			if(Phaser.Math.Between(1,100) > 33) 
			{
				gameArr[i][j] = 0;
			}
			else
			{ 
				gameArr[i][j] = 1;
			}
			
		}
	}
	
	for (var i = 0; i < 1600; i+=25) 
	{
		for(var j = 0; j < 800; j+=25)
		{
			if(gameArr[i / 25][j / 25] === 0)
			{
				var x = i + 8.25;
				var y = j + 6.25;
				
				blocks.create(i + 12.5, j + 12.5, "free_inactive").setScale(0.25);
				this.add.text(x, y, '0', { fontSize: '12px', fill: '#ffffff' });
			}
			else
			{
				blocks.create(i + 12.5, j + 12.5, "occupied_inactive").setScale(0.25);
			}
		}
	}

This was the result (tested in Firefox and Chrome):

[Album] Imgur

Even though, I didn’t change any of the assets. I suspected a memory problem with the virtual machine and increased its RAM from 4 to 8 GB, but everything stayed the same. After that, I thought, this might be due to a faulty installation of sorts and reinstalled the machine, but same results.

I think, this might either be a problem with my browser, the Plesk webhost environment or the VirtualBox environment. Since my ISP has thrown me in a new net, I have to wait until tomorrow, so I can access my webserver again from work. There, I will upload the code and see, if the behaviour changes and it will be more comfortable to test.

Thanks again for all the support and happy new year!

Schmiddae

[Telokis]

Hey Schmiddae!

In the new version of the code you showed us, I notice that your two double-loops don’t match.
In the first, you do

for(var i=0; i < 64; i++)
	{
		for(var j=0; j < 32; j++)
		{

with i ranging from 0 to 63 and j from 0 to 31.

However, in the second,

	for (var i = 0; i < 1600; i+=25) 
	{
		for(var j = 0; j < 800; j+=25)
		{

i goes from 0 to 1599 and j from 0 to 799. With steps of 25 but it doesn’t matter for the issue.
What matters more is that you then tries to do

if(gameArr[i][j] === 0)

but there, i and j will eventually have values beyond what you originally initialized your gameArr with. It means the value will always be undefined which is not === 0 so you will enter your else and create an "occupied_inactive" block.

By the way, I have to admit that I’m not sure what the issue is in your screenshot. I assume it’s the strange black square and it’s indeed very odd!

[Schmiddae]

Hey

In the new version of the code you showed us, I notice that your two double-loops don’t match.

Yes, I noticed it too late, since I changed the original code back already. I edited it in the post above.

[Schmiddae]

Hello there!

Sorry, it took a little time to return to work while my vaccation, but today I did it!

The bug persisted, so I think it has nothing to do with the virtual environment.

Here you can test bug #1:
http://91.237.88.205/game2.html
(the one, where the number was always present on occupied fields, as in screenshot below)

[Album] Imgur

and bug #2:
http://91.237.88.205/game3.html
(here the bug is the black square in the middle, but the position changes this time and the appearence also, where it’s just a small black sqare on top of an unoccupied field)

[Album] Imgur

I think, I will start over from scratch and hope, that anything changes.

Thanks for all your support.

Schmiddae

[Milton]

@Schmiddae

I think, I will start over from scratch and hope, that anything changes.

Don’t bother. I think you have found a ‘bug’ or limitation, whatever you want to call it (@rich ) .
Since you use Phaser.AUTO it uses WebGL. Every time you add text Phaser gets a Canvas from the CanvasPool. So either something goes wrong in the pool (canvas not cleared etc), or browsers can’t handle the load. You create a lot of canvases…
Quick fix is to use Phaser.CANVAS or bitmaptext.

[Schmiddae]

Thank you so much, Milton!

Quick fix is to use Phaser.CANVAS or bitmaptext.

Yes, this did solve the problem. I guess you can call it limitation instead of a bug. I will update the title. Thanks again! =)

[rich]

Try this against the current beta version of 3.16 please. You can use this pre-built file.

[Milton]

Seems to have solved it. Care to share what the problem was?

[rich]

The WebGL batch renderer was skipping every 2000th object, using the previous objects texture instead. This is fixed in 3.16.