I noticed that many of the sprites on the internet has a solid color background and not transparent i am sure there is a reason behind that but what is it ?
like this one :
http://www.spriters-resource.com/gameboy_advance/gs2/sheet/47045
I can remove the bg using photoshop but if this was the purpose why people didn't save it as transparent png in the first place.
what is the easier way to use this sprites in flash it doesn't make sense to me to cut each one and put it in a separate frame i am sure there is an easier way.
Sprite sheets are not meant to be sliced up into different images before compilation. Rather, they are mainly used for a technique called blitting which involves copying the pixels from the spritesheet onto the display at runtime (traditionally done for a performance gain over the standard Flash display list rendering).
You can read up on blitting here: http://www.8bitrocket.com/2008/7/2/Tutorial-AS3-The-basics-of-tile-sheet-animation-or-blitting/
And on how to actually remove the background when blitting: http://active.tutsplus.com/tutorials/animation/blitting-with-as3-removing-a-bitmaps-background-color/
Related
I'll start with the pictures:
Comparison Of Different Publishing Methods From Flash CC
It seems like there is a huge difference between what's published by through Flash CC HTML5 with CreateJS and what's actually created on the program although they are exact copies (I'm not talking about the pose of the character)
The shapes making up the body parts are all triangles with a solid fill and no stroke.
However, in the HTML5 published versions it looks like all those shapes now have a thin transparent stroke around them in between each other.
Any explanation or official support is greatly appreciated!
UPDATE:
The accepted answer definitely improved some of the problem but unfortunately not enough.
Since it's a platform limitation, I decided to work around it by doubling up all the assets of every layer and minutely overlapping them as best as I can.
Here's a link of the work around being implemented if you wanted an update:
link
This is an unfortunate issue with Canvas. The SWF format actually draws lines with fills on both sides, which enables the SWF (and Flash/Animate IDE) to create seamless edges when drawing shapes with edges that line up. Canvas can not do that, so the antialiasing causes the effect you are seeing.
A possible approach would be to cache it at a larger size, and scale it down.
var bounds = character.nominalBounds; // Added by Flash export
character.cache(bounds.x, bounds.y, bounds.width, bounds.height, 2);
The last parameter is the cache scale factor (in this case it doubles the cache size). It will still draw at the expected scale though.
I made a quick sample to show the difference, and it does help. Note that caching is also a good way to get rid of aliasing on edges. You can download the sample here. Uses Adobe Animate 2016.
Plain shapes exported from Adobe Animate
Cached the shape container
Doubled the cache size
You also might want to consider dropping in a shape behind it that is closer to the color of the shapes, so if the edges show through, it is not the dark grey background.
I've been searching for answer for about 2 hours now and I haven't found my desired answer. My question is, Is it possible, and how, to draw a circle-shaped texture, so that outside the circle, texture would be transparent, is it even possible?
Thanks in advance! This site has been a great help so far!
The easiest way is to open a program like Photoshop and make an image with an alpha-channel. That means: Start with a completely transparent image and draw a circle on it. Then save it as .png
You can then just load it in your game and render it using a SpriteBatch. It (or better your graphics card) knows how to handle the alphachannel and will keep everything but the circle completely invisible.
This way you do not have to manipulate any pixmaps at runtime and you are not limited to simple shapes like circles.
If the portion of the texture you want to see in the circle is not meant to change during execution, the easiest way is to open Photoshop, make what you want, export it as an image and then load it in a Texture or a Sprite object in your code.
But this can also be done at runtime, via OpenGL using a Stencil test. This is the only solution if the portion displayed in the circle will have to be alterable during execution.
pixmap use this link if u are using other than .png format for your images
Apart form it if you are using png images then just draw the cirlce. Outside the circle will remain transparent.
I am loading some images and I want to go from PNG to JPG to have a smaller file size. However as JPG there is no transparency information so the background of the image shows up as white.
How can I make this white background be transparent once I load my images?
Thanks in advance
I am assuming that you want to change the white pixels to transparent pixels at runtime. First I'll just say that the BEST answer , is to just use the PNG format. My opinion is that doing something like this at runtime is not a good solution. If you have that many images that the file size matters, then the runtime processing brings along it's own negative of a long pause while processing the images.
I personally would explore what I could do to decrease the size of the PNG files, and would likely NEVER use a solution like this.
However, if you choose to go this route, what you need to do is this :
Convert the image to a BitmapData with an alpha channel.
Loop through the BitmapData and make those pixels transparent.
or
Use the threshold() method of BitmapData.
As someone mentioned in the comments for your question, using white as the background color is not a good idea as ALL white pixels will be made transparent, not just the background ones.
So choosing a color that is not in the palette of any of these images is what you want to use as a background color
As a commenter noted, the threshold() method of BitmapData would probably work best.
JPG (Technically, JPEG File Interchange Format) files, as understood by common browsers and graphics applications, do not support storing an alpha channel with the image like PNG does. Depending on your application, you might want to store a separate black-and-white "image" file which is the transparency mask for the JPG, and use the pair. There are extensions to the format that can be used in custom software, but they won't be understood elsewhere.
But first, make sure that JPG is really what you want to use. JPG is only appropriate for "photographic" images, which don't typically have transparency masks (though there are certainly exceptions). If the image is more Icon/Drawing-like, then it is likely that JPG won't be much smaller than the PNG anyway, and have ugly aliasing artifacts, so just optimizing the PNG will give you better results.
You may want to consider embedding the png's in a Flash library, then export as swf. You can then use Flash to compress your png using the lossy JPEG algorithm, but it will still keep the alpha channel. This could result in much smaller file sizes but with the benefit of keeping the 8-bit alpha channel (each pixel has 256 transparency levels).
By masking out a specific color, you'll only get a 1-bit alpha mask (a pixel is either fully visible or completely hidden.) You can also run into problems like when the color in the image corresponds with the matte color, which deletes pixels from the actual image you want to display.
The other problem with using a matte color in a JPEG image is that the JPEG compression will leave artifacts, especially around the edges of the object and the matte color. This makes it hard to properly mask out a specific color.
I was wondering how one would go about automatically making an image map based on just the opaque parts of a png image. You are normally able to click anywhere on the png image, even transparent areas, and it will register as clicking the image. Is there any way to exclude transparent areas and only have opaque areas register?
I assume there is some sort of javascript color detection feature, or something along those lines. I have access to jQuery on my website, as well.
Thank you for taking time to read and answer.
Trying to do this with images will be a major headache. It's possible that there is a javascript library out there to detect colors, but that's very complex stuff.
Maybe give svg a go if the graphics are simple.
This site (not mine) has a nice map using svg.
I'm working on a 2d tile based HTML5 canvas application and I would like to know what kind of special effects I can apply to the images as their being drawn ( context.drawImage(...) ). The only trick I've come across is modifying the canvas.globalAlpha value. This leaves some color from the previous frames, creating a blurring or dazed effect if things on the canvas object are moving from frame to frame.
Is there something for rendering images that is comparable to setting the context.fillStyle to an ARGB value for primitive shapes?
Is there a multiply mode? ie: multiply the image pixel color by the destination color. This could be used for primitive lighting. (I've toyed around with context.globalCompositionOperation but didn't find anything interesting)
Are there any other cool effects you've come across?
NOTE: I don't want to use WebGL for this application, and it's a game. That means it's realtime and I can't modify each pixel with javascript code because that takes too long. (although I could probably do that when the player dies and nothing is moving on the screen anymore)
Canvas doesn't provide any predefined effects.
To manipulate the image shape you can use matrix transformations.
To manipulate the image pixels and colors you should use getImageData method - http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation.
Then use google to find algorithms to apply some effects like swirl, blur, emboss etc.