Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411279 Posts in 69323 Topics- by 58380 Members - Latest Member: bob1029

March 28, 2024, 02:32:03 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperArt (Moderator: JWK5)PNG photos look nice. GIF looks like crap. Please help.
Pages: [1]
Print
Author Topic: PNG photos look nice. GIF looks like crap. Please help.  (Read 896 times)
digsource
Level 0
**


View Profile
« on: July 01, 2015, 12:50:46 PM »







I made the source photos using Inkscape.
I exported them into PNG form and as you can see they look fine.
I opened them in GIMP 2 to convert into GIF.
They looked fine displayed but as you can see when converted into GIF, the gradients disappeared and I'm left with a black and white sprite.

Can anyone recommend a better way to convert my images into GIF?
Logged
Cobralad
Cowardly Baby
Level 10
*****



View Profile
« Reply #1 on: July 01, 2015, 12:54:15 PM »

did you convert gradient into raster?
Logged
digsource
Level 0
**


View Profile
« Reply #2 on: July 01, 2015, 12:55:38 PM »

did you convert gradient into raster?
No. Sorry but I don't know what "raster" means.
Logged
Dacke
Level 10
*****



View Profile
« Reply #3 on: July 01, 2015, 01:22:50 PM »

The problem is that you have made the gradient blue-transparent rather than blue-white. The white isn't actually white, but transparent against a white background (the background of the post on the forum). Since gifs only have on-off with regard to transparency, it turns all mostly-transparent pixels completely off when trying to convert it to a gif.

If you make sure it's actually white in Inkscape it should work right.

GIMP should work fine after that. But if you are comfortable using a terminal then ImageMagick would probably give you a much faster workflow.

This example turns the pngs into gifs while replacing transparency with white (flatten). Then it animates them in the last row.

Code:
$ convert -flatten ghost1.png ghost1.gif
$ convert -flatten ghost2.png ghost2.gif
$ convert -delay 30 ghost*.gif animated-ghost.gif

But you're better off doing the transparency->white conversion in Inkscape, since this turns the entire square white and not just the gradient.


Logged

programming • free software
animal liberation • veganism
anarcho-communism • intersectionality • feminism
digsource
Level 0
**


View Profile
« Reply #4 on: July 01, 2015, 01:31:39 PM »

Code:
$ convert -flatten ghost1.png ghost1.gif
$ convert -flatten ghost2.png ghost2.gif
$ convert -delay 30 ghost*.gif animated-ghost.gif

But you're better off doing the transparency->white conversion in Inkscape, since this turns the entire square white and not just the gradient.



I understand now. Thanks a lot!
That is impressive.
Logged
Dacke
Level 10
*****



View Profile
« Reply #5 on: July 01, 2015, 01:34:21 PM »

Good!

If you fix the gradient in Inkscape, then you don't need to convert the pngs to gifs first. The animation command does that automatically:

Code:
convert -delay 30 ghost*.png animated-ghost.gif
Logged

programming • free software
animal liberation • veganism
anarcho-communism • intersectionality • feminism
Richard Kain
Level 10
*****



View Profile WWW
« Reply #6 on: July 01, 2015, 02:37:23 PM »

You really shouldn't be converting a gradient-focused image into a GIF. GIFs are limited to a fixed color palette. This limitation tends to react poorly with smooth gradients. As long as the colors are limited you could get a gradient looking pretty good, but it would never look great.

This problem is compounded if you are using any level of transparency. (as it looks like you're doing) GIFs can only have a single color be transparent, they can't handle transparency for individual pixels. If you are using a gradient with any level of opacity, the semi-transparent pixels won't show up properly when exporting them to GIF. Put a plain white layer behind your sprite in order to correct this.

If you genuinely do want your sprite to be semi-transparent, than you won't be able to use GIF. GIF does not support that feature, only PNG does.
Logged
Dacke
Level 10
*****



View Profile
« Reply #7 on: July 01, 2015, 02:47:43 PM »

Right, I initially meant to mention that. I just wanted to get the technical problem solved first. But yeah, GIFs are okay for pixel art with limited palettes and for showing low-res-versions of your animations online (for feedback, etc.). But converting vector art into GIFs is not a good idea for your game or any final product. Ideally you'd want to keep them in a vector format, or at least use PNG if you need rastered (pixel-based) images.
Logged

programming • free software
animal liberation • veganism
anarcho-communism • intersectionality • feminism
digsource
Level 0
**


View Profile
« Reply #8 on: July 02, 2015, 10:44:18 AM »

Thanks for all replies.

I assumed I needed to put the pictures into GIF form in order to make them sprites.
By the way, I'm just making sprites right now and have yet to start on the programming aspect.
My only programming background is basic C. From IF-ELSE to Pointers (which I have yet to re-study.)

Having said I should keep my sprites in Vector form, what OPEN SOURCE game engines  that support android/iOS would you recommend?
My long term goal is publication in mobile format. iOS and Android.
Logged
Dacke
Level 10
*****



View Profile
« Reply #9 on: July 02, 2015, 11:26:46 AM »

You should probably pick a game engine that seems easy to use for you. If they have built-in support for vector formats, then you can use that. If not, then simply use pngs. The benefits you get from using vectors are probably not worth the extra work if you are a beginner, anyway. I'm not sure about the best game engine for you to use, you may want to look in Tutorials or Technical or start a thread there.

edit: Maybe the Godot Engine would be a good fit. It's an integrated development enviroment, similar to Unity & Flash. But unlike those it's open source and support most platforms (mobile/computer/web/some consoles).
« Last Edit: July 02, 2015, 11:55:48 AM by Dacke » Logged

programming • free software
animal liberation • veganism
anarcho-communism • intersectionality • feminism
PixelJunkie
Guest
« Reply #10 on: July 13, 2015, 02:48:27 PM »

There's no way in the game engine for you just to have the character's image switch every half a second as a png?
Logged
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic