Rotating sprite in Photoshop leaves transparent pixels

Started by JackAnimated, Mon 16/12/2013 22:03:34

Previous topic - Next topic

JackAnimated

I wasn't sure I could post this in here, since its specifically about PS. Anyway, as said I am trying to create diagonal directions for my sprite, but rotating leave nasty transparency around the edges. I'm in 16bit mode. Any tips for avoiding this would be great.

Thanks.

VVK

Just out of curiosity, and realising I may be missing something obvious due to not knowing stuff, why is the transparency a problem?

Unfortunately, I can't really help here; the closest I've done to what you want to do was to remove such effects after the fact in Paintshop Pro.

Khris

I'm guessing you're talking about alpha transparency? To use that, you have to change your game's color depth to 32bit.
With 16bit, you have to remove any pixels of arbitrary transparency. You could select the transparent area using the wand tool, then grow the selection slightly and remove it.

If you want rotation that retains crisp sprite edges, you have to use another program, afaik.

Edit:
festilligambe is correct, works fine (CS6).

festilligambe

I'm not sure what version of PS you are using but if possible you can try this.

Use Edit -> Preferences -> General and change "Image Interpolation" to "Nearest Neighbor (preserve hard edges)" this will turn off the anti-aliasing in some functions.  If that does not work your only option is to use a different program or to go back over each sprite and clean up the edges.
New to programing, old school to adventure games

JackAnimated

I'll give it a try thanks. Transparent pixels are an issue with sprites because when adding them to age, they leave a nasty pink outline to the character, a remnant from the background colour.

I also get an issue that saving to png leaves transparent pixels. I thinks its saving in layers, which I don't want.

Snarky

Quote from: JackAnimated on Tue 17/12/2013 10:34:08
Transparent pixels are an issue with sprites because when adding them to age, they leave a nasty pink outline to the character, a remnant from the background colour.

I also get an issue that saving to png leaves transparent pixels. I thinks its saving in layers, which I don't want.

You're getting this problem because you're doing one or more of the following:

-saving the sprites with a colored background instead of as pngs with a transparent background
-have your game set to 16-bit instead of 32-bit
-not choosing to "use the alpha channel" when importing the sprites

If you address these, you should be able to use sprites with transparent pixels just fine. Using them for sprite rotation will often look better because it's smoother, but if you absolutely don't want to, you can (if festilligamble's method doesn't work) also scale up the image to 1000% using nearest-neighbor, do the rotation, and scale back down to 10% using nearest-neighbor.

Monsieur OUXX

#6
The correct answers have been given, but it's important that you have a general idea of your issue:

When you rotate your image, Photoshop tries to keep it smooth by making the outline pixels partially transparent. Therefore, when all layers get flattened (let's say, when you save your image to .png format), some pixels are just half transparent. When you import the image into AGS without using alpha layers, AGS doesn't know "half transparent". It only knows "completely transparent" (i.e. "completely pink") or "not completely transparent" (i.e. "not completely pink"). The pink pixels are not displayed on-screen. But the not-fully-pink pixels are. Hence the shitty pinkish outline.

What's important is : you can fix the issue from both ends. From Photoshop's end, or from AGS' end. Depending on what you want :
- If you want to keep the soft, antialised outline of your rotated sprite, then you need to import it into AGS with the alpha channel (your game must be 32-bits). The solution is on AGS end.
- If your game is not 32-games, then you have no choice but keeping the crisp outline of the rotated sprite. But as it has been pointed out, Photoshop won't let you do that (it forces you smooth out the rotated image). One of the solutions is to change the interpolation method in photoshop settings (choose "nearest neighbour"). The solution is on Photoshop end.
 

JackAnimated

I was quite happy to use 32bit originally, but couldn't see a way to save from photoshop CS6 to png or bmp.

Snarky


JackAnimated

Still doesn't let me save as png or bitmap. I am using photoshop CS6. Anyone found this issue?

Gilbert

I am a bit lenient on queries in the beginners' tech forum, and since this thread used to be a bit related to using AGS (the setting a game to 16- or 32-bit part to be concise) I decided to leave it here.
But since it's just been drifting towards using a painting programme I will move this thread now.

Also, even though some people here may be experienced enough to answer your question about Photoshop, as these forums are mainly about making adventure games it may be faster to find your answer if you google it, like for example, I've found this and this.

JackAnimated

I don't mind which forum it is in. As it happens, I have browsed the web on this issue, and the 2 links you posted say the same as I have previously found out, that you cannot save as .png in 32bit.

This is why I see it AGS related: AGS supports 32bit game mode, so I think it is reasonable to enquire if I can use photoshop to make 32bit graphics for it? Some comments here have implied that I can. I'd like to find out how.

That is all :smiley:

Babar

When saved as PNGs, semi-transparent images (such as those that would come about from saving a rotated image) are automatically 32bit. You don't have to "set" them as 32bit anywhere in photoshop. in fact, best if you don't mess with any settings that change the colour depth (perhaps in Photoshop the mistake you are making is going to Image->Mode and setting it to 32bits/Channel, which you definitely should not do), just save them as pngs. When importing those images into AGS, make sure to select the option to import the alpha channel as well, and your images should be imported as they are.
The ultimate Professional Amateur

Now, with his very own game: Alien Time Zone

Snarky

Quote from: JackAnimated on Thu 19/12/2013 10:06:00
the 2 links you posted say the same as I have previously found out, that you cannot save as .png in 32bit.

You're confusing 32-bit with 32 bits per channel.

A PNG image with transparency has four channels: red, green, blue and alpha. So 8 bits per channel (the standard) gives you a 32-bit image.

Today's computer environment (the OS, graphics drivers and monitor) can't display any finer color distinctions than that, so higher bit depths are only really useful for intermediate files if you're doing a lot of color adjustments on photos and things like that.

Gilbert

Yeah. That's why I was quoting that two links.

Besides each channel being 32-bit, the thread at adobe.com even mentions that it's using floating point values(not sure whether it's correct), so the image is not directly savable as a .png file.

That other thread also mentions a solution, that you may try to use file -> save for web and devices instead.

JackAnimated

Thanks. So this is all making a bit more sense now. So I can save as png. When importing sprites, ags says it detects alpha transpareny (which is good), I say, yes to that. Then I select "leave as is". Somehow the image doesn't have transparency in AGS though. Any thoughts?

ThreeOhFour

If your game is set to 32 bit mode, and you've imported them like this, then it should be fine.

Sometimes, though, the sprite in the editor won't look like it has imported properly, because the editor displays in a lower colour mode (256 colours, I think, though I could be wrong). Have you actually tried using the graphics in game? Even if they look wrong in the editor, try just importing them as an object to a room and see if they look right in there.

This is an odd little quirk, and one I'd like to see fixed, actually.

Fitz

Yeah, it looks perfect as an object. Which is good news, because I spent way too much time dealing away with anti-aliasing manually in "Monty the Komodo Dragon" and wasn't really looking forward to more of that in a possible sequel. So thanks everyone, this thread's been very very helpful :)

JackAnimated

The sprite seems fine. It's when I load it in to the GUi there is a problem. I set the backkground and border colours to transparent, but they come out in opaque white.

JackAnimated

Just found the answer. Setting background and Border colour number to 0 makes them transparent. Thanks for everyones help.

SMF spam blocked by CleanTalk