I am trying to use a sprite sheet for a game I am building with Javascript.
I noticed that many sprite sheets have colored background. In this case I am trying to use a image with pink background. I understand that in the old days this was common. But I am using the canvas element in Javascript and drawing to it.
I would like to remove the pink background.
I have tried to remove it with Photoshop and the magic eraser tool:
The arrows are good. But the problem is the snow. The snow has some transparency on them so it is mixed with the solid pink color and the edges look ugly.
Does anyone know a way to fix this? I was thinking maybe I could upload the image to a program that actually requires the pink background (like in the old days) and then export it as transparent. But I do not know of such a program.
Related
I am currently developing a 2D pixel art style platformer game in Unity. My main character is an ostrich, and I've made some running animation sprite sheets in a graphics editor. Now I want to be able to add some hats or glasses to the ostrich. The problem is that the ostrich head moves up and down in the animation, so I can't child a glasses or hat sprite and make it precisely follow the head. I have already tried animating the hat on it's own but it is firstly a lot of work, and secondly it smoothly transitions through the positions, hence not fitting to the sprite every frame.
To make myself clear, I want to make a sprite follow a certain position on a spritesheet animated character precisely to the pixel.
How could I achieve this?
Cheers,
Alex
Comment
One option would be to animate the ostrich inside Unity, so that each body part you animate is it's own object. That way you could then add e.g. a hat as the child object of the head. But since you have already made pixel animations outside Unity, this is of course not an ideal solution. It also sounds a bit like this is what you mean with saying "child a glasses or hat sprite", but I wasn't sure if that was in the pixel part of it or not.
Answer
If you animate the head in Unity, that would make the animation for all things you then attach later on, hates, glasses etc.
Now I learning OpenGL ES 2.0 with iOS and try to develop the drawing functions in iPhone.
I have success to draw a line art image and live drawing with finger, thanks to GLPaint.
Live drawing can covered the line art image, but I want the line art drawing without cover the black line.
img This is now I've done with drawing.
Is there any good blend method to do that? Thank you.
I finally done with this issue.
It's simple to use glBlendFunc:
glEnable(GL_BLEND);
glBlendFunc(GL_DST_COLOR, GL_ONE_MINUS_SRC_ALPHA);
The point is
First parameter is destination color (background color), second is source color.
For default, glBlendEquation is set to GL_FUNC_ADD; if you want to do something different, please remember to change with different case.
In this issue, we don't need to change it, cause we need blend background color with brush color, and black color always cover any color when add two of them.
Make sure set "glEnable(GL_BLEND)" after draw background image.
My mistake is, setting glEnable(GL_BLEND) with compile brush shader, and draw after set all shaders.
How to programmatically change the hue of UIImage?
I am using the above page's advice, for Core image filter CIFilter. The only problem I am having is my when I rotate to a yellow hue, it's a dark mustard yellow, and I can't get the brightest vibrant yellow, ie R:255 G:255 B:0. I have images that are on layers that are made up of a simple color R:255 G:0 B:0 I just want to rotate around, to get the basic colors plus orange. Orange works fine tho.
I just don't know why when I rotate from R:255 to try and get R:255 G:255 Yellow it's a dark yellow.
I am using 1.04719755 for the Yellow float, at deltaHueRadians
I don't know it's just weird this is the 3rd attempt at this but I keep getting a dingy yellow.
I realized the problem.
In Photoshop I have done so many Colorize operations when I used to photo edit, I got them confused with Hue Rotation.
Basically when you Colorize in Photoshop, it will "Colorize" the image not just Hue Rotate the values.
The difference between the two is a very thin line depending on what images you use. I don't really feel like going into a complete explanation but...
Say you have a grey cube on a layer, and you COLORIZE the image, the cube will rotate colors as you use a slider. If you Hue rotate it will stay grey.
But if you take a red cube, and hue rotate, then the hue rotation will take you thru colors, not necessarily all of them tho like a colorize.
I believe the issue has to do with all that good ole HSV RGB matrix crazy math problems. Which I am not doing right now. Keeping it simple.
I decided to just do a colorize method with:
CGContextSetBlendMode(context, kCGBlendModeMultiply);
With grey objects and this is perfectly what I wanted.
from googling I found this:
http://coffeeshopped.com/2010/09/iphone-how-to-dynamically-color-a-uiimage
I am working on a simple painting app using LibGDX, and I am having trouble getting it to "paint" properly with the setup I am using. The way I am trying to do this is to draw with sprites, and add these individual sprites into a background texture, using LibGDX's FBO commands, when it is appropriate.
The problem I am having is something relating to blending, in that when the sprites are added to this texture that I am building, any transparent pixels of the sprite that are on top of pixels that have been drawn to previous will be brightened up substantially, which obviously doesn't look very good. The following is what the result looks like, using a circle with a green>red gradient as the "brush". The top row is part of the background texture now, while the bottom one is still in its purely sprite drawn form.
http://i238.photobucket.com/albums/ff307/Muriako/hmm.png
Basically, the transparent areas of each sprite are brightening anything below them, and I need to make them completely transparent. I have messed around with many different blending mode combinations and couldn't find one that was any better. GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA for example did not have this problem, but instead the transparent pixels of each sprite seem to be lowered in alpha and even take on some of the color from the layer below, which seemed even more annoying.
I will be happy to post any code snippets on request, but my code has become a bit of mess since I started trying to fix these problems, so I would rather only put up the necessary bits as necessary.
What order are you drawing the sprites in? Alpha blending only works with respect to pixels already in the target, so you have to draw all alpha-containing things (and everything "behind" them) in Z order to get the right result. I'm using .glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
I'm using Visual Studio icon library (VS2008ImageLibrary), there are some BMP files with a pink background. How can I make the pink background become transparent? What software can I use to do this? Any free one?
Thanks
I used IrfanView's batch conversion tool. It's still some work, because you have to click the pink area on every single icon instead of just specifying pink as transparent color, but it worked. It would be easy to write a simple conversion tool using GDI+ though, which I considered as well.
Note that even though you can use them then as transparent images, many of them unfortunately still have ugly edges when you render them on a dark background or use them as overlay. If you just want very few of them, consider tweaking them individually if you think you'll not always have a bright background.
You can try it online provided you can transform your bmp into a gif first.
Or you can grab PAINT.Net (freeware), and apply a transparent background by following this video instructions.
You can do it by using ImageMagick convert:
convert input.png -transparent magenta output.png
By the way, it is not pink, its magenta colour.
While I don't know the modern .NET answer to your question, it's worth noting the historical reason for these bitmaps with magenta backgrounds:
Back in the Win32-only days, there were some Common Controls (like the Toolbar, and ListView) that took these bitmaps and a colour to be treated as transparent, and then rendered that colour as transparent. I imagine that, behind the scenes, they used functions like TransparentBtl.
I know it's something related to Form.TransparencyKey
but I donno what is exactly that pink, you have to know the exact RGB / system or Web color.
if you know please share us