I'm using atlas feature of pixel graphic sprites. I'm not sure whether it's an error or not, but when the zoom ratio is 3 or higher, there's a phenomenon where the area of atlas and pixels break down. Not all atlas sprites have this issue. I guess only sprites that have large size. It only happens on mobile devices. I guess it is something related to devicePixelRatio, but I couldn't find any relationship.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.80.0/dist/phaser-arcade-physics.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="module" src="javascript.js"></script>
</body>
</html>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#5c5c5c',
scene: {
preload: preload,
create: create
},
render: {
pixelArt: true
}
};
var game = new Phaser.Game(config);
function preload() {
// load example 1 texture
load(this, 'test1', 'example1');
// load example 2 texture
load(this, 'test2', 'example2');
// set zoom (3 or higher)
var camera = this.cameras.main;
camera.setZoom(3);
}
function create() {
// example 1
anim(this, 'weddingzone', 'test1', 400, 280);
// example 2
anim(this, 'Floor_Front', 'test2', 400, 320);
}
function load(scene, texture, name) {
// set file location
var imagePath = `./images/${name}.png`;
var jsonPath = `./images/${name}.json`;
// load as atlas data
scene.load.atlas(texture, imagePath, jsonPath);
}
function anim(scene, prefix, texture, x, y) {
// load texture
var atlasTexture = scene.textures.get(texture);
// get custom data from json
var customData = atlasTexture.frames[`${prefix}_0.png`].customData.customData;
// get frames using prefix
var pattern = new RegExp(`^${prefix}_[0-9]+\\.png$`);
// count frames
var count = Object.keys(atlasTexture.frames).filter(frame => {
return pattern.test(frame);
}).length - 1;
// create animation
scene.anims.create({
key: texture,
frames: scene.anims.generateFrameNames(texture, {
prefix: prefix + '_',
suffix: '.png',
zeroPad: 1,
start: 0,
end: count
}),
frameRate: 1000 / customData.delayTime,
repeat: customData.stopAtLastFrame ? 0 : -1
});
// place and play
scene.add.sprite(x, y, texture)
.play(texture);
}
Version
Phaser Version: 3.80.0
Operating system: Android
Browser: Chrome
Description
I'm using atlas feature of pixel graphic sprites. I'm not sure whether it's an error or not, but when the zoom ratio is 3 or higher, there's a phenomenon where the area of atlas and pixels break down. Not all atlas sprites have this issue. I guess only sprites that have large size. It only happens on mobile devices. I guess it is something related to devicePixelRatio, but I couldn't find any relationship.
Example Test Code
Additional Information
Desktop.mp4
Mobile.mp4
TexturePack.zip - used sprites and json files