Creating a progressbar

[oliversb]

I am attempting to create a simple progressbar. I thought it would be more efficient to dynamically draw it rather than use one from a preloaded picture.

 

I am attempting to use bitmapData to achieve this. It don't seem to like it when I call lineStyle. What I am doing wrong here and is there a better way to make a simple progressbar like this? I literally want to make a flat progressbar with the height of 3 and the width of the game's stage.

 

this.preloadBar = game.add.bitmapData(game.width, 3);

this.preloadBar.context.lineStyle(3, '#FFFFFF', 1);

this.preloadBar.context.moveTo(0, 0);

this.preloadBar.context.lineTo(game.width, 0);

this.load.setPreloadSprite(game.add.sprite(0, game.height - 50, this.preloadBar));

 

Thanks

[lewster32]

Use a Graphics object instead - it supports a canvas-like drawing API but works across webGL and canvas:

this.preloadBar = game.add.graphics();this.preloadBar.lineStyle(3, 0xffffff, 1);this.preloadBar.lineTo(game.width, 0)

[oliversb]

 

Use a Graphics object instead - it supports a canvas-like drawing API but works across webGL and canvas:

this.preloadBar = game.add.graphics();this.preloadBar.lineStyle(3, 0xffffff, 1);this.preloadBar.lineTo(game.width, 0)

How do I load this as a progressbar? 'this.load.setPreloadSprite(game.add.sprite(0, game.height - 50, this.preloadBar));' does not work and I have tried other variations of code which also don't work.

 

Thanks

[lewster32]

Hmm, I figured setPreloadSprite would have allowed you to use graphics. In that case, try this:

this.preloadBar = game.add.sprite(0, 0, null);var preloadGraphic = game.add.graphic();preloadGraphic.lineStyle(3, 0xffffff, 1);preloadGraphic.lineTo(game.width, 0);this.preloadBar.addChild(preloadGraphic);

[oliversb]

This seems to work partially:

this.preloadBar = game.add.sprite(0, 50);

this.preloadG = game.add.graphics();

this.preloadG.lineStyle(3, '#FFFFFF', 1);

this.preloadG.moveTo(0, 0);

this.preloadG.lineTo(game.width, 0);

this.preloadBar.addChild(this.preloadG);

this.load.setPreloadSprite(this.preloadBar);

 

The two problems are that the graphic isn't white (but is black) and the loading bar don't move. If you could help me please?

 

Thanks

[lewster32]

You have to pass lineStyle a number for the color, so 0xffffff, not "#ffffff". If you have to use CSS hex strings, use Phaser.Color.hexToRGB("#ffffff") to return it as a number.

 

As for the other issue - it looks like the preloader uses crop rather than scale (which does not work on the contents of the display object annoyingly, just the texture attached directly to the sprite). To circumvent this, rather than use setPreloadSprite, do it manually by adding a loadUpdate function to your state and do it this way instead:

function preload() {  this.preloadBar = game.add.graphics(0, 50);  this.preloadBar.lineStyle(3, 0xffffff, 1);  this.preloadBar.moveTo(0, 0);  this.preloadBar.lineTo(game.width, 0);      this.preloadBar.scale.x = 0; // set the bar to the beginning position}function loadUpdate() {  // every frame during loading, set the scale.x of the bar to the progress (an integer between 0  // and 100) divided by 100 to give a float between 0 and 1  this.preloadBar.scale.x = game.load.progress * 0.01;}

Edit: Some small annoying changes - sorry, tested and working now

Edited June 19, 2014 by lewster32

[oliversb]

You have to pass lineStyle a number for the color, so 0xffffff, not "#ffffff". If you have to use CSS hex strings, use Phaser.Color.hexToRGB("#ffffff") to return it as a number.

 

As for the other issue - it looks like the preloader uses crop rather than scale (which does not work on the contents of the display object annoyingly, just the texture attached directly to the sprite). To circumvent this, rather than use setPreloadSprite, do it manually by adding a loadUpdate function to your state and do it this way instead:

function preload() {  this.preloadBar = game.add.graphics(0, 50);  this.preloadBar.lineStyle(3, 0xffffff, 1);  this.preloadBar.moveTo(0, 0);  this.preloadBar.lineTo(game.width, 0);      this.preloadBar.scale.x = 0; // set the bar to the beginning position}function loadUpdate() {  // every frame during loading, set the scale.x of the bar to the progress (an integer between 0  // and 100) divided by 100 to give a float between 0 and 1  this.preloadBar.scale.x = game.load.progress * 0.01;}

Edit: Some small annoying changes - sorry, tested and working now

No worries. I worked these out myself anyway. Having problems with the progress jumping to 100. I think it might be because I am waiting for PreloadJS which is an external lib. Thanks for helping and I will let you know what happens.

 

Thanks again