Transparent background and canvas

[Neil Cauldwell]

Hi all

Is it possible to make the canvas and game background transparent so the HTML elements behind the canvas will show through? 

Thanks

Neil 

[Jason Oster]

Try setting the map background_color property to "rgba(0,0,0,0)" This color is call "transparent black", and it should do the trick.

[Neil Cauldwell]

Thanks Jason

The transparency works, but there's ghosting on anything that moves between frames. It doesn't happen when a solid color or non-transparent background image is set. Does this happen for you?

http://www.freeimagehosting.net/djpqg

[Jason Oster]

I was afraid of that. :( But it makes sense! I have another idea... Create an object that has a special `draw` method which clears the screen:

var ClearScreen = me.Rect.extend({

    init: function() {

        this.parent(new me.Vector2d(0, 0), me.video.getWidth(), me.video.getHeight());

        this.z = -Infinity;

    },

    

    update: function() {

        return true;

    },

    

    draw: function(context) {

        context.clearRect(0, 0, this.width, this.height);

    }

});

var cls = new ClearScreen();

me.game.add(cls);

me.game.sort();

I have not tested this, but it's simple enough to just work. I will warn you that trying to keep a transparent background will make it more difficult to optimize. I have a patch in progress for the "dirtyRegion" feature which tries to speed up all cases, including this one. But give this a try, and let me know how it works for you. If it's too slow, you might want to drop the target framerate to 30fps or so.

[Jason Oster]

Oh, I forgot some important settings for the ClearScreen object! Add the following to the end of the `init` method:

this.isPersistent = true;

this.visible = true;

[melonJS]

One more comment on my side, additionally to the context argument passed to the draw method, the engine also pass the region to be refreshed, while this is mainly corresponding to the whole viewport in regular cases, this will only contained the invalidated rectangles once dirtyRegion is enabled. This to say that you might mimic what i'm doing with the layer image when doing the clear rect (and use the rect coordinates instead).

https://github.com/obiot/melonJS/blob/master/src/level/TMXLayer.js#L170 

giving somethign like (untested as well)

draw: function(context, rect) {

        context.clearRect(rect.left, rect.top,  rect. width,  rect. height);

    }

also to comment on Jason code, be sure to specify a small z value (like a negative value), to be sure this is done as a background element :

me.game.add(cls, -1);  

[Jason Oster]

The code I posted uses this.z = -Infinity; so that should be ok. ;) Good tip with the rectangle passed to draw method! I forgot about that.

[melonJS]

oups, sorry, i read too fast, and missed it in the constructor :)

[Neil Cauldwell]

Thanks guys.

- Jason, your ClearScreen object works well. Here's a pastie of exactly how it was implemented http://pastie.org/4752451

- Olivier, thanks for the comments. I haven't quite understood this yet: If dirtyRegion is enabled does that require ClearScreen object to be specifically told which rectangles to clear? Therefore (if dirtyRegion is enabled) clearing the entire view port won't work anymore(?).

Prior to trying Jason's "ClearScreen" fix, the design of the game was changed to use a background image after-all. The game is a core part of a landing page appearance and is visually tied to other DOM elements. For example, the HTML body tag's background is set to a big image that scrolls as the browser view port is resized, thus filling out the entire width of the port. Originally the plan was to make the body tag's background image appear as though it was also the background image of the game (by making the game canvas transparent!). However, removing the background image from the body tag and setting it in the MelonJS game means that the MelonJS canvas will now need to resize as the browser port is resized. Is this possible? New thread on the way :)

Thanks 

Neil 

[Jason Oster]

To make the ClearScreen object support the dirtyRect feature, simply replace the draw method with the one provided by Olivier.

[Jan]

Hello,

is there already a solution for version 1.1.0 for a transparent canvas?
I ask because I can not find the function 'clearRect' anymore.

Thank you for your help...

[Aaron McLeod]

It's part of the renderer instance now: http://melonjs.github.io/docs/me.CanvasRenderer.html#clearSurface

In your draw calls, you can simply do this:

draw: function (renderer) {

  renderer.clearSurface(renderer.getContext(), '#000000');

}

If you need to call it outside of a draw call (really not recommended, you should only do draws during the draw loop)

me.CanvasRenderer.clearSurface(me.CanvasRenderer.getContext(), '#000000');

Will work fine, but then your code is more coupled to the canvas renderer.

--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
Aaron McLeod
http://agmprojects.com

[griep...@hoch5.com]

Ok, I found this before,

But when I do this, I get a black background, not a transparent one.
Did I miss something?

The hole thing is, because I need to place a Video inside the game. I tried it with the canvas drawImage method, but this gave me some really bad performance results in some browsers.
My solution would be to place the Vid behind the canvas...

[Aaron McLeod]

Oh gotcha. If you're talking about showing a video element, you'll probably need to add CSS opacity to the canvas itself, but this makes everything transparent. Making a single draw call transparent, will not make the element transparent to show things behind it.

[griep...@hoch5.com]

so, there's no solution to show the game-canvas without any background-color?

[Jay Oster]

Clear the surface with an rgba color:

renderer.clearSurface(renderer.getContext(), 'rgba(0,0,0,0)');