Skip to main content
gamedev.net
🔒 Locked

HTML sprite drawing problem

Started by ynkm169 Nov 2, 2011 at 2:35 AM 4 replies 1.3k views
Original Post
ynkm169
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
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?).
Omae Wa Mou Shindeiru
ynkm169
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
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...
    [/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.
Omae Wa Mou Shindeiru
Zahlman
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?[/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"] [/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]

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.