Jump to content

WEBGL, tileSprite and power of 2


TanPhi
 Share

Recommended Posts

Hi everyone, 

I have a strange issue with the webgl and tilesprite behavior which seems for me to not follow the Phaser documentation.
My background is contained inside a sprite atlas described by a json file. All the sprites have dimension equal to a power of 2 (height and width) and the png file too.
I have followed the tutorial https://phaser.io/examples/v2/tile-sprites/tiling-sprite-atlas

It works great with this example and the octopus dimensions used are "w":62,"h":94
But, when I change one of this parameters to a power of 2, for example: "w":64,"h":94, the tilesprite has a strange behavior: the entire image is displayed from x:0 y:0

No problem with canvas.

I suppose it is a newbee issue... any help? 
Thanks!

Link to comment
Share on other sites

Open your spritesheet file and make sure that the frames are 64x64.

 

PS:94 is not a pow2. You'd need it to be 64 or 128.

If you open console, you should get a warning if the frame was not found, for example.

Link to comment
Share on other sites

you should post relevant parts of your spritesheet.json, and how you load it...

examples:

{"frames": [

{
   "filename": "clear",
   "frame": {"x":0,"y":0,"w":16,"h":16},
   "rotated": false,
   "trimmed": false,
   "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
   "sourceSize": {"w":16,"h":16}
},
// ...etc

loading: 

this.load.atlasJSONHash(
    'icons',
    'assets/icons.png',
    'assets/icons.json'
);

usage:

    sprite = game.add.tileSprite(0, 0, 16, 16, 'icons', 'clear');
 

Unless you give code, or describe your issue in greater detail, we cannot help you :(

Link to comment
Share on other sites

Thank you.

I have always the same issue: the whole image is displayed and no message in the console.
And with w:15 and h:15 it works...

json:

{"frames": {
	"road":{
		"frame": {"x":0,"y":0,"w":16,"h":16},
		"rotated": false,
		"trimmed": true,
		"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
		"sourceSize": {"w":16,"h":16}
	},
	"road2":{
		"frame": {"x":16,"y":0,"w":16,"h":16},
		"rotated": false,
		"trimmed": true,
		"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
		"sourceSize": {"w":16,"h":16}
	}
}
}

preload:

game.load.atlasJSONHash('scene', 'assets/background/scene.png', 'assets/background/scene.json');

call:

sprite = game.add.tileSprite(0, 0, 128, 64, 'scene', 'road');

 

Link to comment
Share on other sites

I have followed the tutorial https://phaser.io/examples/v2/tile-sprites/tiling-sprite-atlas-32x32

The phaser example webpage works but when I test it on my localhost, I have this error: 

[.Offscreen-For-WebGL-0x1f024f3ff800]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...