oliversb Posted June 19, 2014 Share Posted June 19, 2014 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 Link to comment Share on other sites More sharing options...
lewster32 Posted June 19, 2014 Share Posted June 19, 2014 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) Link to comment Share on other sites More sharing options...
oliversb Posted June 19, 2014 Author Share Posted June 19, 2014 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 Link to comment Share on other sites More sharing options...
lewster32 Posted June 19, 2014 Share Posted June 19, 2014 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); Link to comment Share on other sites More sharing options...
oliversb Posted June 19, 2014 Author Share Posted June 19, 2014 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 Link to comment Share on other sites More sharing options...
lewster32 Posted June 19, 2014 Share Posted June 19, 2014 (edited) 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 TNelson 1 Link to comment Share on other sites More sharing options...
oliversb Posted June 19, 2014 Author Share Posted June 19, 2014 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 Link to comment Share on other sites More sharing options...
Recommended Posts