• Advertisement

How to make 8-bit sprites out of 16 or 32-bit ones?

Recommended Posts

Greetings everyone, i am new around here. I came here to see if anyone could help me with making sprites, a full sprite sheet, etc.

As the title says, i want to be able to make 8-bit sprites from existing sprites, but are either 16 or 32-bit. Take for example these two images: https://imgur.com/a/zfutT

How do i "convert" or re-create them in 8-bit?

Share this post


Link to post
Share on other sites
Advertisement

The issue I see with your question is...what defines 16/32-bit as far as sprites go?  I'm guessing you are referring to the limitations some systems had, for example, the PS1 sprites are sometimes considered 32bit, SNES/Genesis as 16bit, and then NES as 8bit.  If that is the case, it would be good to specify.

The NES sprites had limits in both the palette they could choose from, and the amount of colors that could actually be used for each sprite.  If I remember correctly, the palette had around 56 colors(and was lacking in certain colors, like browns), and you could only have 3 colors in use for a single sprite(with the "4th" color being transparency).  If you want to lower "bits" of more modern sprites, a good place to start is simply using less colors per sprite.  You could also find or create a small palette to choose from for all the sprites in a game(or art piece or whatever).  The other thing to consider is lowering the resolution, and a good resolution for "8bit" sprites would be 16x16 in my opinion.

The final catch with this...I don't think there is going to be a good automatic way to do this at all.  You technically could lower resolution in an art program, but details will be lost and will need to be rebuilt(if the new resolution has space).  And you could do some kind of color amount reduction, but I've never seen good results come from that either, at least not with the amount of colors under discussion.

Share this post


Link to post
Share on other sites

The colors aren't much of an issue for the moment, i know how to handle that. what i do want to know is how to make the sprites look "smaller" in simple terms, so they can "fit" in a NES game. For example: using a variation of the 32 bits image i gave you earlier, take a look at this one: https://imgur.com/a/5WRTv

The image from the left is made for the game boy color (or the normal game boy? i don't know) but it has obviously less details than the image of the right, and is also smaller.

 

Sorry if those things i mentioned doesn't define what a 8/16/32 bits sprite is, as i don't know much on the matter.

 

EDIT: Also, credits goes for devianart user MegaRed225 for the image used on the left.

Edited by daniel hernandez

Share this post


Link to post
Share on other sites

I still am much confused what problem you are trying to solve here. To eliminate the confusion, please only talk about the image, and not about systems that may display it.

An image has a size in pixels (in 2 directions), and each pixel has a colour, usually in 3 or 4 channels (normally RGB and an A channel for opaqness). Each channel has a bit depth (number of bits available to express the fraction of eg Red). Further limitations may be that only a limited number of unique RGB combinations may be used (eg gif has 256 colours available from the 24bit RGB space), or that the set of available RGB combinations is fixed (eg the system has already fixed the palette).

EDIT: For valid sizes, you may want to use cropped image sizes, eg not the large white area that you have in some of the examples, as that is non-relevant to the problem.

 

Since you mostly excluded reduction in colours from the question, I assume you are talking about a reduction in size. You can map several pixels from the source image onto one pixel in the destination, by blending their colours.

As an example, converting an image from 10x1 to 5x1 can be done by blending the colours of the first two pixels into the first pixel of the destination, the colours of the 3rd and 4th pixel into the 2nd pixel at the destination, and so on.

The reduction doesn't have to be a power of 2, if you go from 10 pixels to 6 pixels, each pixel in the destination gets 10/6th pixels from the source, using a weighted average, for example. Enlarging is the same process, except you'll very little colour information available.

 

None of these automated techniques will give you good quality images. The computer doesn't understand that one line has more importance than a filled area near to it, for example. In any case, you'll need to improve, or even redraw the images, if you want good quality.

 

Edited by Alberth
clarified that uncropped image size may be confusing too

Share this post


Link to post
Share on other sites
7 hours ago, Alberth said:

As an example, converting an image from 10x1 to 5x1 can be done by blending the colours of the first two pixels into the first pixel of the destination, the colours of the 3rd and 4th pixel into the 2nd pixel at the destination, and so on.

The reduction doesn't have to be a power of 2, if you go from 10 pixels to 6 pixels, each pixel in the destination gets 10/6th pixels from the source, using a weighted average, for example. Enlarging is the same process, except you'll very little colour information available.

 

First of all, sorry for all the confusion. I understand very little about this, so most if not all my explanations lacks the "definition" of what sprite making is...

As for your answer, Yes, i want to create them myself, as stated in my first post. If an automatic process gives a bad quality image, then how can i do all of that manually?

Share this post


Link to post
Share on other sites
22 minutes ago, daniel hernandez said:

As for your answer, Yes, i want to create them myself, as stated in my first post. If an automatic process gives a bad quality image, then how can i do all of that manually?

You'll have to draw them manually, using an image editor (e.g. paint.net -- there might be better suited pixel graphic editors I'm not familiar with).

Instead of starting each image from scratch, I would suggest loading up the original image and resizing it to the intended size, and saving that as your starting point. Using the resized image as your base and the original image as a reference, make changes until you're happy with the result.

For more general advice on creating any sprites, I would recommend searching online for sprite-making resources.

Share this post


Link to post
Share on other sites
Hi, yes I think the original question was really saying ‘How do I convert modem created sprites to look like they belong in an 8bit system’  RATHER than ‘How do I make 8 bit sprites from 32 bit ones’.
If so, this is more of a art type question.  I’m not an artist, but out of interest I took one of your images you supplied (the right one in 5WRTv) then In Gimp software I did this:-
-Reduced the scale by 50%,
-Converted the image to ‘Indexed mode’ ( from RGB) and set the colour palette size to 4.
-I then converted back to RGB mode
-I then did a hue and saturation shift to make the colour match your game boy version.
I ended up with this (see attachment, left image).  As mentioned, you would then need an artist to make it look better.

If I may bore you with some technical information because I think you may be a bit confused.  The term ‘8 bit’ on a ‘8 bit system’ is actually referring to the size of the ‘data bus’ that connects the CPU to the RAM, and ABSOLUTELY nothing to do with the format or resolution of the sprites on the system.
8 bit (1 byte) per pixel graphics really means a sprite which can use up to 256 palette colours.  Typically old ‘8 bit systems’ only had a maximum palette size of 4 to 64 (depending on what system).
Ironically the modern looking image I converted above was already less than 256 colours so could of already been stored as 8 bit (1 byte per pixel) raw format image file.
 
Hope this has helped.

converted2.jpg

Edited by desiado

Share this post


Link to post
Share on other sites

I see... Sorry for confusing matters.

 

So, i take it that this forum doesn't deal with art questions, then? because i have one more... But i'm beginning to think that it doesn't belong here.

Share this post


Link to post
Share on other sites

There is a visual art forum, you may want to try it there.

While beginners forum is for anything, almost all questions here are related to programming, and most readers are programmers. Together with a confusing question about bith depths of images, we (in hindsight incorrectly) considered your question to be a programming question about image formats rather than "make it look like a retro image".

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Advertisement
  • Advertisement
  • Popular Tags

  • Advertisement
  • Popular Now

  • Similar Content

    • By Innoc uous
      I'm working on a space game, and I suck at art. I would love to get some help from someone who is more skilled than me. Things I need include modular space ship parts and GUI elements. Nothing too fancy, just functional so I can get a prototype put together. This could potentially become a serious project, but for now this is just a hobby project.
       
      In this video, you can see a few things I already completed
      :2018-02-24 20-08-13.flv2018-02-24 20-08-13.flv
    • By owenjr
      Hi there.
      I'm pretty new to this and I don't know if it has been asked before, but here I go.
      I'm developing a game using SFML and C++.
      I would like to use the "Tiled" tool to load maps into my game but I don't actually find any tutorial or guide on how to exaclty use it (I know that I have to read an XML file and stuff). I just step into diverse projects that make all a mess. 
      Anyone knows where can I find good information to make my map loader by myself?
      Thanks in advantage!!
    • By GhostarWhite7
      Today again I painted the next drawing. I look at him and I understand that something is wrong in him. Can problems with the prospect or with black and white or with the composition or is everything terrible? help me figure it out, help.. My english is not very well, i'm from russia and i want to draw for game

    • By MHG OstryTM
      Hello guys,
      I've released my game for the first time. I'm very excited about it and I hope you'll enjoy the game - Beer Ranger. It's a retro-like puzzle-platfromer which makes you think a lot or die trying. You have a squad of skilled dwarfs with special powers and your goal is tasty beer. There is a lot of traps as well as many solutions how to endure them - it is up to your choice how to complete the level! 
      Link to the project: Project site
      Link to the Steam site with video: Beer Ranger
      Have fun and please write feedback if you feel up to.
      Some screens: 




    • By Manuel Berger
      Hello fellow devs!
      Once again I started working on an 2D adventure game and right now I'm doing the character-movement/animation. I'm not a big math guy and I was happy about my solution, but soon I realized that it's flawed.
      My player has 5 walking-animations, mirrored for the left side: up, upright, right, downright, down. With the atan2 function I get the angle between player and destination. To get an index from 0 to 4, I divide PI by 5 and see how many times it goes into the player-destination angle.

      In Pseudo-Code:
      angle = atan2(destination.x - player.x, destination.y - player.y) //swapped y and x to get mirrored angle around the y axis
      index = (int) (angle / (PI / 5));
      PlayAnimation(index); //0 = up, 1 = up_right, 2 = right, 3 = down_right, 4 = down

      Besides the fact that when angle is equal to PI it produces an index of 5, this works like a charm. Or at least I thought so at first. When I tested it, I realized that the up and down animation is playing more often than the others, which is pretty logical, since they have double the angle.

      What I'm trying to achieve is something like this, but with equal angles, so that up and down has the same range as all other directions.

      I can't get my head around it. Any suggestions? Is the whole approach doomed?

      Thank you in advance for any input!
       
  • Advertisement