5 replies to this topic

[ynkm169]

It is HTML5.
My sprite character bitmap has white as transparent color.

How do I draw it so that the transparency works?

Currently the white color shows up when drawing and appears ugly...

[LorenzoGatti]

I can think of at least three obvious ways to draw sprites and two common errors you might be doing: you should post images (the exact file you use as a "sprite character bitmap" and a capture of the wrong drawing result) and code (how are you drawing your sprite?).

[ynkm169]

It is a simple ctx.drawImage(background, curViewUpperCornerX, curViewUpperCornerY, screenWidth, screenLength, 0, 0, screenWidth, screenLength).
That obviously does not take alpha and transparency into account man...

I can think of at least three obvious ways to draw sprites and two common errors you might be doing: you should post images (the exact file you use as a "sprite character bitmap" and a capture of the wrong drawing result) and code (how are you drawing your sprite?).

[LorenzoGatti]

This forum has one of the best engines I've ever seen, but it doesn't support clairvoyance yet.
Why do you suppose that we know your code and your bugs without you explaining yourself?

It is a simple ctx.drawImage(background, curViewUpperCornerX, curViewUpperCornerY, screenWidth, screenLength, 0, 0, screenWidth, screenLength).

It should be obvious to you, rereading, that this is not an adequate description of what you are doing:

• What is ctx ? Is it from some library?
• Is this drawImage function, wherever it comes from, supposed to support transparency?
• What is background?
• Are the last 8 parameters of the drawImage call coordinates or sizes? Are they right? (Drawing sprites with sizes of, or corners at, screenWidth and screenLength is quite suspect)

That obviously does not take alpha and transparency into account man...

But how? Do you have correct transparency in your source image? What's wrong with the result? As they say, an image (two in this case) is worth a thousand words. Attach them.

[Zahlman]

It should be obvious to you, rereading, that this is not an adequate description of what you are doing:

Fortunately, I happen to know a couple of relevant things here.

• What is ctx ? Is it from some library?
• Is this drawImage function, wherever it comes from, supposed to support transparency?

'ctx' is the canonical name used in examples for the result of
document.getElementById('canvas').getContext('2d');

As noted, he is using HTML5, specifically the <canvas> element, along with Javascript to draw content within the canvas. The version being used has 9 parameters and is documented here for example.

OP: Please provide (a) the actual image file being used; (b) the code you use to create the image object background. I'm pretty sure that you'll lose transparency if you're drawing a section from another canvas; if you are just referring to an image from somewhere else in the DOM (or encoding it in a data url), and the image actually has transparency information, it should Just Work.

[ynkm169]

and the image actually has transparency information, it should Just Work.

Actually, I realized the image itself has no transparency information. It has no alpha value setup correctly. That's why!! thanks.
Nice tutorial here: http://www.axialis.com/tutorials/tutorial-misc001.html