27 replies to this topic

[PHL]

To create my sprite I thought I could draw it on paper with a pen , and scan the picture into the computer.
But it would still not look like the sprites made in commercial games.

Look at the 2D sprite of Sora in the GBA game Kingdom Hearts Chain of Memories
It does not look like if it was drawn on paper and directly scanned into the game.
Look at its outline: it is a pixellated black border. How did they do it ? Did they create the sprite with a program like MS Paint instead of scanning it from a paper ?
How did they colour the sprite? Did they make the sprite in black and white before colouring it ?

Tell me, somebody. How do professionals make their 2D sprites ? If they draw on paper before scanning, then what kind of pen or ink or colours do they use ?

[DarkLopo]

http://en.wikipedia....gitizing_tablet

1. draw them
2. Scan them
3. Shrink them
4. Pixel them in
5. Color

[Carnivac]

Drawing sprites and scanning them is only really useful for large sprites such as those found in a 2D beat 'em up (Street Fighter and Guilty Gear and such) to help get the proportions right and can help with animation too. Most smaller ones are just done straight into whatever graphics program the artist uses. Though being able to draw helps when making any sort of sprite just because you know the basics of constructing objects or people or whatever.

Check this out for some useful links to tutorials or software that might help you and just have a look around that forum as a quite a few members of that forum actually work in the games industry in some capacity either fulltime or freelance.
Pixelation's link topic

Edited by Carnivac, 09 January 2010 - 07:46 PM.

[bigttcool2]

One word:
PHOTOSHOP

[jabelar]

No, do not use Photoshop. Use Illustrator. For professional 2d game graphics it is much better to use vector graphics. In Photoshop, if you do scaling you'll have many of the same problems of scaling as in Game Maker -- you'll get pixelation, blurring, and loss of detail. With vector graphics the scaling is perfect because it redetermines the pixels mathematically.

Illustrator is expensive to get legally, but there are free vector graphics programs like Inkscape. Just save as PNG or BMP and then load into Game Maker.

[Carnivac]

For professional 2d game graphics it is much better to use vector graphics.

To hell with that. Vector graphics generally look flat, bland, lack detail and just make your game end up looking like some poor Flash game. I know there are a few games that use vector graphics mainly cos pixelling would take forever in HD but I've never seen one that looked that great.

Even though I'm currently trying to build a small Flash game instead of using vectors I'm using a library (Flashpunk by ChevyRay) that specialises in using bitmaps as proper bitmap sprites just look a thousand times better.

EDIT: the original poster was referring to Kingdom of Hearts on the GBA's sprites which are pixelled and certainly would not be done with vectors at all.

Edited by Carnivac, 09 January 2010 - 08:53 PM.

[Pesmerga]

Drawing them big and scanning them is a waste of time. No matter what size you want your sprites to be, the best is to make them really small like thumbnails (because it's easier to animate when it's small). Just use 2 colors for the small version (I use blue and black). Then resize them to whatever the size you want, and use that as template to draw. I use the pen with photoshop. It does the job. Of course I have a graphic tablet so that helps a lot too.

Check all the sprites that are out there. Look up sites on google and analyse how they render with pixel art. Look at how they express volume and movement. I learned that way.

Edited by Pesmerga, 09 January 2010 - 08:42 PM.

[jabelar]

For professional 2d game graphics it is much better to use vector graphics.

To hell with that. Vector graphics generally look flat, bland, lack detail and just make your game end up looking like some poor Flash game. I know there are a few games that use vector graphics mainly cos pixelling would take forever in HD but I've never seen one that looked that great.

Even though I'm currently trying to build a small Flash game instead of using vectors I'm using a library (Flashpunk by ChevyRay) that specialises in using bitmaps as proper bitmap sprites just look a thousand times better.

That's because you don't know how to use vector graphics well. Vector graphics have all the blending and meshes you need to look fully 3d. Here is how real you can get with Illustrator: Realistic vector art. Make sure you click on the "Outline" links on that page to confirm that it is actually done with vectors, not a photo or manip. I can guarantee you that I can make something look like rendered 3d with Illustrator.


<You can choose a more appropriate image than that>
-Ablach Blackrat

I agree that bitmaps can look better in their native format, but if you have to scale up or down you're pretty much screwed.

Also, many people actually want a flat 2d look for their games and are just looking for crispness and clean lines. Yes it looks like a Flash game, but that is what a lot of people want when they get all mucked up with bitmaps looking bad.

Edited by Ablach Blackrat, 11 January 2010 - 05:20 PM.

[Carnivac]

That's because you don't know how to use vector graphics well.

Actually I don't use vectors at all other than the crap I had to do at college as I loathe them.

I agree that bitmaps can look better in their native format, but if you have to scale up or down you're pretty much screwed.

Perhaps to some extent but scaling ingame never bothered me during various games such as some 2D beat 'em ups which would zoom in to some degree and out again depending on how close the combatants were to each other. Never bothered me on the SNES either which was scaling bitmaps in most games. I found it quite appealing.

Also, many people actually want a flat 2d look for their games and are just looking for crispness and clean lines.

Which is not what the original poster was asking. He mentioned the more detailed sprites of a GBA game and what most professional spriters do and they use bitmaps created in programs such as Graphics Gale, sometimes Photoshop but mostly Pro Motion.

[jabelar]

That's because you don't know how to use vector graphics well.

Actually I don't use vectors at all other than the crap I had to do at college as I loathe them.

I agree that bitmaps can look better in their native format, but if you have to scale up or down you're pretty much screwed.

Perhaps to some extent but scaling ingame never bothered me during various games such as some 2D beat 'em ups which would zoom in to some degree and out again depending on how close the combatants were to each other. Never bothered me on the SNES either which was scaling bitmaps in most games. I found it quite appealing.

Also, many people actually want a flat 2d look for their games and are just looking for crispness and clean lines.

Which is not what the original poster was asking. He mentioned the more detailed sprites of a GBA game and what most professional spriters do and they use bitmaps created in programs such as Graphics Gale, sometimes Photoshop but mostly Pro Motion.

GBA sprites are in fact flat and cartoony for the most part.

I updated my post above with examples of what vector graphics can do. Anyway, I'm mainly objecting to you saying they look any flatter than Photoshop. Keep in mind that 3d graphics are also technically vector graphics (for the most part).

Yes, if people know their native resolution, they should go ahead and use bitmap. But we're giving advice to beginning game makers here and you know that they are going to change their mind about resolution/scale, or want to resuse their graphics.

Plus none of us have a team of graphics artists available. The best bang for your buck as a hobbyist game maker is vector. I can make one "perfect" version of Mario and then use it at any scale I want. It is a huge savings in effort.

Edited by jabelar, 09 January 2010 - 09:09 PM.

[Carnivac]

I updated my post above with examples of what vector graphics can do. Anyway, I'm mainly objecting to you saying they look any flatter than Photoshop.

Try doing animated game graphics, sprites and tiles and do it all of that quality then. We're not talking about static images.

The best bang for your buck as a hobbyist game maker is vector.

And yet so many more use bitmaps. Why do you think that is?

[jabelar]

I updated my post above with examples of what vector graphics can do. Anyway, I'm mainly objecting to you saying they look any flatter than Photoshop.

Try doing animated game graphics, sprites and tiles and do it all of that quality then. We're not talking about static images.

How would animating bitmaps be any easier? Animation is much, much easier in vector -- which is why Flash and 3d programs are done that way. Most kids cartoons nowadays are animated in vector graphics.

The best bang for your buck as a hobbyist game maker is vector.

And yet so many more use bitmaps. Why do you think that is?

... but then they also have a lot of complaints about blur and scaling (there are several posts every day here about this).

Many hobbyists also don't have an art background like you and me.

Many hobbyists don't want to pay for the big-name art programs and aren't aware of the free options like Inkscape and GIMP.

Many hobbyists can barely code a FOR Loop, so I wouldn't call what they do is something to emulate ...

Edited by jabelar, 09 January 2010 - 09:31 PM.

[molbal]

One word:
PHOTOSHOP

One other sentence: GIMP (not 2GiB, free, opensource and have the ~80% knowledge of PS)

[PHL]

No, do not use Photoshop. Use Illustrator. For professional 2d game graphics it is much better to use vector graphics. In Photoshop, if you do scaling you'll have many of the same problems of scaling as in Game Maker -- you'll get pixelation, blurring, and loss of detail. With vector graphics the scaling is perfect because it redetermines the pixels mathematically.

Illustrator is expensive to get legally, but there are free vector graphics programs like Inkscape. Just save as PNG or BMP and then load into Game Maker.

Vector graphics ? I do not have a good report of those. See, there is an online vectorization service called Vector Magic. I uploaded a bitmap image to the site, and the vectorized result had changed the detail of the original picture a lot. So it seems that vector graphics are not good for detailed images.

[Rtyp06]

The title of this thread asks how to make sprites like a professional. Jabelar explained it well and vectors are how the pros do it. For the average hobbiest, like me, the problem is the scaling and blurring issues. I'm guessing this is the same issue PHL is having. Now this depends upon what you are trying to do of course, but I've had luck making a sprite say 32 x 32. Instead of using the game maker's sprite scaling tools I'll use the GM sprite editor, GIMP or Paint to scale up the image then go and touch up the blurred pixels manually to say 64 x 64. The idea is to know what size sprite you'll need ahead of time and specificly draw the sprite to that scale.

[Katuko]

Now, I like vector graphics because they look smooth and clean, but i do not think they are as good for 2D games. Most games I've seen use sprites and those who don't either have very simplistic design or are generally not as good gameplay-wise. Game Maker does not natively support vector graphics. While that can be circumvented, also remember that vector graphics keep their quality when scaling and rotating because they are not saved as static points on a grid like pixels. They save the key points and redraw lines and shapes between based on various math functions.
This is why a Flash movie may be smaller than an AVI movie (since less actual data is stored) but be more demanding to view (because the shapes have to be recalculated for every frame).

For me, a full-screen movie with lots of fancy effects runs fine, but a full-screen Flash movie with too many objects will lag. Game Maker is quite heavy on the resources, and so I doubt it would fare much better with high quality vector graphics than it does with high quality sprites. Most sprites are not rotated or scaled anyways unless it's a top-down game.

Also, I personally think sprites have much more charm than vector graphics. I dunno, it's just something about the look.

Edited by Katuko, 10 January 2010 - 04:59 PM.

[serpent36]

One word:
PHOTOSHOP

One other sentence: GIMP (not 2GiB, free, opensource and have the ~80% knowledge of PS)

Don't forget Paint.NET too lol. http://www.getpaint.net/

[shadow_knight]

Making sprites that look good greatly depends upon the style you are after.

Personally, I think that using a vector graphics program like Inkscape or Illustrator is a great way to produce sprites. You can produce very similar results to rendered 3D graphics, as mentioned earlier. At the end of the day it doesn't matter how you produce your sprites, whether its vector graphics or not, as they will all be rasterized and turned into a bitmap at some point anyway (to use them in Gamemaker).

[9_6]

How would animating bitmaps be any easier? Animation is much, much easier in vector -- which is why Flash and 3d programs are done that way. Most kids cartoons nowadays are animated in vector graphics.

Did you ever try doing that?
What is your track record on that matter so far?
Except for assumptions, what do you base that claim on?

The title of this thread asks how to make sprites like a professional. Jabelar explained it well and vectors are how the pros do it.

Do you think megaman/chain of memories/mario etc uses vectorized graphics that are downscaled?
It's obviously hand-pixeled.
There also is no "one professional way" to do sprites, there are many.
Aside from doing it by hand, pre-rendered 3d graphics like in blazing star are another way.
Doing vector graphics is actually a waste of time if you're gonna turn them into bitmaps anyway.
You also have so much more freedom with bitmaps since you literally control every single pixel.

Edited by 9_6, 10 January 2010 - 09:06 PM.

[NakedPaulToast]

Illustrator is expensive to get legally, but there are free vector graphics programs like Inkscape. Just save as PNG or BMP and then load into Game Maker.

On your recommendation, I download and tried Inkscape.

I am amazed, it's absolutely fantastic. I love it.

I owe you one. Thank you.

Do you think megaman/chain of memories/mario etc uses vectorized graphics that are downscaled?
It's obviously hand-pixeled.
There also is no "one professional way" to do sprites, there are many.
Aside from doing it by hand, pre-rendered 3d graphics like in blazing star are another way.
Doing vector graphics is actually a waste of time if you're gonna turn them into bitmaps anyway.
You also have so much more freedom with bitmaps since you literally control every single pixel.

Disagree.

I've seen your graphics, and know my own capabilities, there is no question that your insight into creating graphics is more valuable than my own. But your perspective is that of an advanced graphic artist.

For a graphical hack such as me, attempting to do anything through pixel editing is an awful experience. I absolutely need the tools and the ability to keep objects and vectors in their native format for later resizing and slight manipulations.