Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by BennyT

Hi all,

I cannot for the life of me figure out how to change the default canvas bgcolor from black to white (for instance)

Is it done by extending a method in impact? I could not manage to figure it out in CSS either.

Thanks

1 decade ago by StuartTresadern

I think this is what you are looking for:
http://impactjs.com/documentation/class-reference/system#clear

1 decade ago by BennyT

Thanks Stuart, that did the job - it changed it white but it did overwrote the rest of the entities on the canvas.

I put it inside my draw() function before the this.parent() call.

Was that correct?

1 decade ago by StuartTresadern

If you want to keep changing the clear color then sure its fine in the draw call. But if you just want to set it to a single color then you only need to set it once. For example set it after you load your level.

1 decade ago by Graphikos

I usually just set it once in the init of main.js.

1 decade ago by BennyT

Hi everyone,

Thanks again for all the feedback! Based on Stuart's comment and Graphikos, I placed the ig.System.clear('#fff') call inside the init method and it did not work - in fact I got the error that the clear function did not exist.

Maybe I am doing it wrong or maybe it is right - but surely I could not be the first person to come across this.

Thanks again for all your help!

1 decade ago by Krisjet

Try this in your init in main.js:

ig.game.clearColor = '#fff';

Impact automatically calls clear for you every frame, using ig.game.clearColor as the color.

1 decade ago by BennyT

Hi Krisjet,

Thanks for that line of code, that worked exactly how I wanted it to.

However, when I had a look at the ImpactJS docs as mentioned by Stuart - using the clear function did not seem to work.

Could anyone explain to me why I have to manually override the variable with ig.game.clearColor rather than use the API?

Thanks,

Ben

1 decade ago by Graphikos

If you look at the impact source the clearing the screen is just using the API.

// system.js, line 98

	clear: function( color ) {
		this.context.fillStyle = color;
		this.context.fillRect( 0, 0, this.realWidth, this.realHeight );
	},

If you want to do it yourself you are fully welcome to. Simply set ig.game.clearColor = null; and do your own draw clearing method in the draw method.

That's what I'm doing because instead of a color I'm drawing full background image which effectively "clears" the screen.

Calling clear() yourself is possible also. But if you do it before this.parent(); in your draw method it&039;s just going to get cleared again by the game (unless you had set it to null). Also it's a function of #ig.system not ig.System. So ig.system.clear('white');.

1 decade ago by zedd45

@graphikos would you mind posting your implementation? I attempted to write my own clear implementation like so:

{main.js}
{init method}
            this.bgFillImg = new Image();
            this.bgFillImg.src = 'media/tiles/background.png';
	
            // wait for the tile to load before launching the game.
            var self = this;
            this.bgFillImg.onload = function () {
                // load the level
                self.loadLevel.call(self, Level1_1);
            };

 {draw method}
            if (!this.pattern) {
                this.pattern = context.createPattern( this.bgFillImg, "repeat");   
            }
            context.fillStyle = this.pattern;
            context.fill();


but it just shows a lot of image "trails" that never seem to get cleared up.

Quote from Graphikos

... {omitted} ...

That's what I'm doing because instead of a color I'm drawing full background image which effectively "clears" the screen.

1 decade ago by zedd45

nevermind @graphikos, I discovered the flaw in my logic. I was trying to rewrite the wheel, instead of riding on it.

For anyone interested, I dropped the draw code, and I am only using the init code, like so:

            // load the custom background image that fills the canvas during the "clear" call in the system
            this.bgFillImg = new Image();
            this.bgFillImg.src = 'media/tiles/background.png';
	
            // wait for the tile to load before launching the game.
            var self = this;
            this.bgFillImg.onload = function () {
                self.clearColor = ig.system.context.createPattern( this, "repeat");
                // load the level                
                self.loadLevel.call(self, Level1_1);
            };
Page 1 of 1
« first « previous next › last »