Change Old Pixelated Sprites to HD

2

Stats

5,318 visits, 8,024 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 10 Mar, 2014. Last updated 19 Feb, 2019

Few days ago I landed on Construct 2 and I already love it. Hands down, best game maker ever! I was looking to see if it had a built-in function to change old sprites into new HD ones. I reviewed all the tutorials and had a quick look at the manual but didn't find anything on this topic.

Say you want to use sprites from classic games and use them in your game. Back then the screens could display a lot less pixels than the new screens. That's why the sprites were of low quality and pixelated. Today even the small screens on mobile devices show a lot more pixels per inch compared to the old big screens, and all devices have way more memory. So we can use larger better quality sprites in our games. Simply resizing the old sprites won't get rid of the pixelated edges in fact it makes them more visible. Luckily there are easy ways to manipulate and change the sprites.

The only thing I don't like about the "After" is that it has lost facial features but that can be fixed with minimal effort in any graphic software. If needed you can easily copy the face from the old sprite and paste it on the new one. The software that does an amazing job changing sprites is Adobe Illustrated. Better yet it has a trial version that anyone can use free of charge for a month. Following explains how you can change sprites using Adobe Illustrated.

1. Open the sprite in Adobe Illustrated.

2. If needed, press Ctrl and + at the same time to make the preview larger.

3. If Image Trace window is not open, click "Window" and select "Image Trace".

4. Click on the little arrow to the left of "Advanced" to expand image trace shown in the following image with a red arrow.

5. In the Image Trace window set the following values:

Mode: Color;

Palette: Full Tone;

Colors: 0;

Paths: 25%;

Corners: 5%;

Noise: 1px;

Options: Uncheck Snap curves to lines.

After making these changes your Image Trace window should look as following:

6. Click the "Trace" button to apply the changes.

Different sprites require different values to look good. I like these settings for the sprites I downloaded from http://www.spriters-resource.com/playstation_2/capvssnk2/ section. If you are not happy with the result on your specific sprite, try playing around with the values. Check the Preview box on Image Trace window to see the changes as they take place.

Once you are happy with the result, it's time to export the sprite as a .png image.

7. On the menu bar click on "File".

8. Click on "Export…"

9. In the "Save as type:" drop-down list select "PNG (.PNG)"

10. Choose a filename and location for your sprite and click the "Save" button.

11. Change "PNG Options" if you want and then click OK to save the file.

You are done. Use the new HD sprite and make awesome games.

  • 0 Comments

Want to leave a comment? Login or Register an account!