• Advertisement
Sign in to follow this  

HTML sprite drawing problem

This topic is 2304 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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

Share this post


Link to post
Share on other sites
Advertisement
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?).

Share this post


Link to post
Share on other sites
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?).

Share this post


Link to post
Share on other sites
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...
    [/quote]
    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.

Share this post


Link to post
Share on other sites

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?[/quote]

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

    [font="Arial"]As noted, he is using HTML5, specifically the[font="Courier New"] <canvas>[/font] element, along with Javascript to draw content within the canvas. The version being used has 9 parameters and is documented here for example.[/font]

    [font="Arial"]OP: Please provide (a) the actual image file being used; (b) the code you use to create the image object [font="Courier New"]background[/font]. 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.

    [/font]

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement