Search the Community

const atlasData = { // some data... } this.load.atlas("one", "one.png", atlasData); this.load.atlas("two", "two.png", atlasData); gets this error: File.js:557 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. at Function.File.createObjectURL (File.js:557) at ImageFile.onProcess (ImageFile.js:142) at LoaderPlugin.nextFile (LoaderPlugin.js:827) at ImageFile.onLoad (File.js:328) deleting either line works perfectly fine

Hi, I'm currently preloading in a single sprite atlas (png image with a json data file) for one sprite (by this i mean a character i want to animate). However, the problem is that the sprite atlas image file is pretty big (over 8000x6000 sometimes) and there's FPS drops on lower end machines/older browsers. I'm not 100% sure that the FPS drops are caused by the large image file, but when i reduced the sprite atlas image file's size, it fixed the issue. My question is, is there a good way I can assign multiple sprite atlases to one character/sprite? Also, would that even help the issue? I want to keep decently high resolution frames so in the end this solution doesn't actually reduce the total size of images being preloaded, just preloads multiple smaller images instead of one huge one. I want to do something like: game.load.atlas('mysprite', 'assets/sprites1.png', 'assets/sprites1.json'); game.load.atlas('mysprite', 'assets/sprites2.png', 'assets/sprites2.json'); this.sprite = game.add.sprite(game.world.centerX, 300, 'mysprite'); // 'walking' is part of the sprites1.png this.sprite.animations.add('walking', Phaser.Animation.generateFrameNames('walking', 1, 6), 5, true); // 'flying' is part of the sprites2.png this.sprite.animations.add('flying', Phaser.Animation.generateFrameNames('flying', 1, 6), 5, true);

I have a big problem with screen tearing. Please have a look at the video. I am sorry I can't provide a playground for this (yeah I could maybe), because I am using a port of babylonjs together with the haxe language/compiler. I read much information about the problem in OpenGL forums too, but I did not get a solution. So maybe some 3D WebGL / OpenGL ES Guru knows, how to fix the problem. As you can see in the video, the mesh with the bricks and ladders is flickering and tearing like hell. The mesh is merged together from single meshes (planes) and a sprite atlas is used, so that I can take one material/texture for the whole level-mesh (the foreground). To get the well known sprite art or retro effect, I use Texture.NEAREST_SAMPLINGMODE texture.anisotropicFilteringLevel = 1 texture.wrapU = texture.wrapV = Texture.CLAMP_ADDRESSMODE I tried to adjust the uvs (read about pixels and texels), but I don't get it right. I think that the UVs are not correct and when the camera moves, the drawn texture tile is snapping between two pixels all the time, and that causes the bad tearing effect. But I don't know. Since I am using Babylonjs/Babylonhx, I am asking here for the first place. It's strange too, that it looks like the lines are jumping up and down. And maybe the uvs are right, but the screen tearing is a evil, that comes with the NEAREST_SAMPLINGMODE or the disabled anisotropicFiltering? Btw. I disabled mipmaps too. Hm. It would be easier to just scale the Textures up hm and use another sampling mode? Because now I get it, that not using mipmaps is a bad idea, because I have a little 3D stuff in there, like the sides and the floor. Yeah I know, there is another topic to this topic. But I didn't find the answer there. Yeah, that's great. I think I have the right solution now. Upscaled textures. But to be honest and just to learn how to do it right, is there another way how I can do this? Merging planes with different uvs together and using a very small texture (one tile = 32px) without having artefacts?