Phaser 3 Pixel flicker effect
On mobile device same odd pixel flicker effect is visible at the button if the background is turnd on.
by ragesoft
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>
<div id="main">
<div id="game">
</div>
</div>
CSS
body, html{
height: 100%;
}
#main{
max-width: 100%;
max-height: 100%;
}
JavaScript
var config = {
parent: 'game',
scale:{
mode: Phaser.Scale.FIT,
fullscreenTarget: 'game', //'main',
autoCenter: Phaser.Scale.CENTER_BOTH,
},
dom: {
createContainer: true,
},
fps: {
target: 30,
},
width: 1366,
height: 768,
scene: {
preload: preload,
create: create,
update: update,
}
};
const fontStyles = {
'dialogtitle': {
fontSize: '28px',
fontStyle: 'bolder',
fill: '#AFAFAF'
},
'default':{
fontSize: '20px',
fontStyle: '',
fill: '#565353',
wordWrap: {
useAdvancedWrap: true,
}
},
'button':{
fontSize: '20px',
fontStyle: '',
fill: '#cccac6'
},
}
function preload(){
let pos = {
x: this.game.config.width / 2,
y: this.game.config.height / 2 + 140,
w: 200,
h: 40,
b: 2,
}
// loading bar
var progressBar = this.add.graphics();
var progressText = this.make.text();
progressText.setPosition(pos.x, pos.y + pos.h + 5)
.setOrigin(0.5);
this.load.on( 'progress', ( value ) => {
progressBar.clear();
progressBar.fillStyle( 0xffffff, 1);
progressBar.fillRect(pos.x - pos.w/2, pos.y - pos.h/2, pos.w, pos.h );
progressBar.fillStyle( 0xff0000, 1);
progressBar.fillRect(pos.x - pos.w/2 + pos.b, pos.y - pos.h/2 + pos.b, value*( pos.w - 2*pos.b), pos.h - 2*pos.b);
});
this.load.on( 'fileprogress', ( file ) => {
let folder = String(file.url).split("/");
progressText.setText(folder[ folder.length - 2]);
});
this.load.on( 'complete', () => {
progressBar.destroy();
progressText.destroy();
});
this.load.image("dlg_background", "https://i.ibb.co/MRdSbdN/background-parchment.png");
this.load.image("dlg_corner",...