-
Notifications
You must be signed in to change notification settings - Fork 7.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Blue Artifacts in WEBGL on Mobile #5659
Comments
Possibly related to #5655 |
Try this in your game config: render: {
batchSize: 1024,
maxTextures: 8
} Also, try |
Thanks for the quick response! Adding the code above changes the color and location of the artifact effect. It now seems to be alternate between the colors of the various background images. Also, adding the code causes the player, background, and tiles to appear blurry and for gray lines to appear between the tiles both on desktop and mobile: Setting maxTextures to 1 results in an empty blue screen: I'm not familiar with the render object or its properties, but after playing around with those properties I found that simply adding an empty render object (render: { }) causes the same blurryness and gray lines. EDIT: This doesn't really help, since everything is displaying incorrectly and I still have the original issue. |
The lines between the tiles is standard texture bleeding and is fixed by using an extruded tileset. |
i got same problem on Android 10, any update here? |
I really need someone to create a minimum-sized reproducible test case for this. Without that, it just delays this getting worked on. |
|
Phaser Version:3.52.0 |
maybe something wrong in WebGLRenderer.CanvasToTexture Or CanvasPool.create , I found that WebGLRenderer.CanvasToTexture & CanvasPool.create is required in both tileSprite and Text objects |
render: { When maxTextures is equal to an odd number, the problem is solved |
MulitPipeline.js - Multi-frag.js compatibility issues with WebGL in Android . you must set maxTextures 2 not 1 to disable batch sprite . |
I have located the cause of the problem , MulitPipeline.js - Multi-frag.js
varying vec4 outTint; Perhaps Shader parameter binding error or vertex buffer error ? When you comment the above script, everything works fine |
@photonstorm the outTintEffect calculation is correct, Otherwise error will occur ! |
I wonder why it makes a difference on Android but works fine on iOS and desktops?! |
This issue has been mentioned on Phaser. There might be relevant details there: https://phaser.discourse.group/t/pixel-error-flicker-effect-on-mobile-browser/9789/4 |
Thank you for submitting this issue. We have fixed this and the fix has been pushed to the |
I have a game with several background tilesprites, some tileset layers, as well as a few sprites and text objects on screen. I am seeing a blue artifact effect appear at various locations on the screen. I'm using Phaser v3.54.0, and I've tested also reproduced the effect with other versions (I went backward until 3.2x, where the code no longer ran).
Unfortunately my phone security settings forbid screenshots, but here's what it looks like:
Here's a summary of the effect:
• Occurs on Android devices (haven't tried iPhone), not on desktop (even in mobile mode)
• Appears in all Android browsers (tried 3 different Android phones)
• Only occurs in WEBGL, not in CANVAS
• Tends to occur along edges of sprites, text, and tiles (shooting a fireball causes the effect to appear all around the player)
• Appears at predictable times and locations (i.e. the same places and times every playthrough, other things constant)
• Changing camera and game object properties (depth, alpha, position) causes the effect to appear at different times and in different locations
After removing everything I could while retaining the effect. I was left with the code below. Here's a summary of what I've found in this example:
• Removing the tilesprites, tilemap layer, images, or text objects causes the effect to disappear
• Failing to preload the background images or player sprite has no impact, but failing to preload the card images, or changing their image source, changes or removes the effect
• Changing the background tilesprite size or location has no effect
• Changing the tilemap size or content has no effect
Here is the example code:
var _game = {
mapIndex: null,
platforms: null,
player: null
};
_game.playScene = new Phaser.Scene('play');
var config = {
type: Phaser.AUTO,
parent: 'game',
width: 450,
height: 800,
pixelArt: true, // Removing pixelArt changes the artifact pattern
scale: {
},
scene: [
_game.playScene
],
physics: {
default: 'arcade',
arcade: {
debug: _game.debugging
}
}
};
_game.game = new Phaser.Game(config);
_game.game.scene.start('play', { map: 0 });
_game.playScene.init = function(data) {
_game.mapIndex = data.map;
};
_game.playScene.preload = function() {
this.load.image('cloudback', 'img/CloudsBack.png');
this.load.image('cloudfront', 'img/CloudsFront.png');
this.load.image('bgback', 'img/BGBack.png');
this.load.image('bgfront', 'img/BGFront.png');
};
_game.playScene.create = function() {
this.cloudback = this.add.tileSprite(0, 0, 100, 100, 'cloudback');
this.cloudfront = this.add.tileSprite(0, 0, 100, 100, 'cloudfront');
this.bgback = this.add.tileSprite(0, 0, 100, 100, 'bgback');
this.bgfront = this.add.tileSprite(0, 0, 100, 100, 'bgfront');
};
Thanks for your time!
Duncan Priebe
The text was updated successfully, but these errors were encountered: