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 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?
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.
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
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 »