preload bar image messed up

[Chupup Games]

I want a preload bar from an png image i created, but the image is kind of messed up, the

only thing the actual bar has in common with my image is the color.

 

i use this code with phaser 1.2:

 

var loader_state = {

 

preloadBar: Phaser.Sprite,

 

preload: function () {

this.preloadBar = game.add.sprite(96, 144, 'preload');

        game.load.setPreloadSprite(this.preloadBar, 0);

 

..........

[rich]

Do you have a screen shot or something? Or more code? because I'm using a preload bar happily in a few 2.0 games. But it could be something I overlooked.

[Chupup Games]

Yes, here is a screenshot of how it should look:

 

 

and here how it actually looks:

 

 

the code:

// Initialize Phaser and create a 480x320px gamevar game = new Phaser.Game(480, 320, Phaser.AUTO, 'stage');var player;var starfield_1;var starfield_2;var starfield_3;// Create a new 'boot' state that will doing some pre-setupvar boot_state = {    preload: function () {        game.load.image('preload', 'assets/preload_bar.png');    },    create: function () {        // Because Multitouch isn't needed the maxPointer is set to 1        game.input.maxPointers = 1;        //  Phaser will automatically pause if the browser tab the game is in loses focus. You can disable that here:        this.stage.disableVisibilityChange = true;        game.stage.backgroundColor = '#000000';        game.scale.minWidth = 480;        game.scale.minHeight = 320;        game.scale.maxWidth = 960;        game.scale.maxHeight = 640;        game.scale.forceLandscape = true;        game.scale.pageAlignHorizontally = true;        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;        game.scale.setShowAll();        game.scale.refresh();        game.state.start('loader');    }};// Create a new 'loader' state that will load all assetsvar loader_state = {    preloadBar: Phaser.Sprite,    preload: function () {        //  Set-up the preloader sprite        this.preloadBar = game.add.sprite(96, 144, 'preload');        game.load.setPreloadSprite(this.preloadBar, 0);        game.load.image('instructions', 'assets/instructions.png');        game.load.spritesheet('starfield', 'assets/starfield.png', 960, 320, 3);        game.load.atlas('tiles', 'assets/tiles.png', 'assets/tiles.json');    },    create: function () {        //game.state.start('menu');    }};

[r00]

I'm having a similar problem. The preload bar appears to be right size, but for some reason the texture is distorted.

[Chupup Games]

Yeah, i get the correct size, too but the texture is not alright.

[Learning By Doing]

Its the same for me since I went from 1.1.6 -> 2.0.0..

[pain_gwar]

Similar problem, i cannot see no more loading bar after passing to 2.0

[Chupup Games]

some news here Rich? Seems like everybody has this problem.

[ctmartinez1992]

I just upgraded to 2.0 and my preload bar doesn't even appear, here's the main code if anyone wants to take a look:

preloadBar: Phaser.Sprite;loadingText: Phaser.Text;        preload() {            //Preload bar and Loading text            this.loadingText = this.add.text(this.world.centerX, this.world.centerY - ((this.world.height / 2) / 2), "Loading", { font: "36px Chunk", fill: "#ffffff", align: "center" });            this.loadingText.anchor.set(0.5, 0.5);            this.preloadBar = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'preloadBar');            this.preloadBar.anchor.setTo(0.5, 0.5);            this.load.setPreloadSprite(this.preloadBar);        }        create() {            //Draw loaded text            this.loadingText.setText("Loaded");            this.loadingText.anchor.set(0.5, 0.5);            //Animate loaded text            this.add.tween(this.loadingText).to({ alpha: 0 }, 1000, Phaser.Easing.Exponential.In, true);            //Animate preload bar up...            this.add.tween(this.preloadBar).to({ alpha: 0 }, 1000, Phaser.Easing.Exponential.In, true);            var tween = this.add.tween(this.preloadBar).to({ y: (this.game.canvas.height / 2) }, 1000, Phaser.Easing.Exponential.In, true);            tween.onComplete.add(this.startLevel, this);        }

[Chupup Games]

@ctmartinez1992: where you load the image for your preload-bar?  use this.load.image and not this.add.sprite.

[clark]

Same with me (It has been around for 4 weeks).

I have a boot state which preloads the Preloader state sprite sheet (logo+100% width bar).  I know my assets are loaded and I can see my logo/bar. 

But when I pass the bar to the PreloadSprite then I no longer see the bar. 

[ManBoy]

I had the same problem with this.load.setPreloadSprite() as well. Here is my workaround:

//this.load.setPreloadSprite(preloadFill);//load assetsthis.load.onFileComplete.add(this.loadProgress, this);loadProgress:function(progress){	this.preloadFill.scale.x = progress/100;	this.preloadPointer.x = this.preloadBg.x + progress/100 * this.preloadBg.width;}

I'm not sure how setPreloadSprite is working as it never worked for me when I tried in 2.0. I assume it utilizes masking. For me scaling works and is enough.

[ctmartinez1992]

@Chupup_Games i load it in my Boot file, the file is almost 99.99999% positive that it is loading correctly, just some problem in the code

[mariogarranz]

Same for me.

 

For some reason, the load bar is working on my smartphone, but not on my desktop computer, in any of the browsers I've tried.

[Chupup Games]

For me don't works on smartphone either, the bar is stll messed up. In the time that have no solution, i changed my bar for a single colored one

[Hsaka]

Same here (http://www.html5gamedevs.com/topic/3778-12-preloader-sprite/). For now, I'm also just using a solid colored bar for the preload sprite.

[abstractizm]

Hi,

i think i have found the bug. Looks like WebGL is messing it up.

Change to Phaser.CANVAS in the constructor() and it will work.

 

Hope i could help @rich.

[rich]

Actually that did help narrow it down a lot. And as a result ...

 

https://github.com/photonstorm/phaser/commit/870d534e50edbde6722672d040db5139bb8554ea

[Chupup Games]

Problem solved? This is great news!