• Hi, Guest!
    Some images might be missing as we move away from using embedded images, sorry for the mess!
    From now on, you'll be required to use a third party to host images. You can learn how to add images here, and if your thread is missing images you can request them here.
    Do not use Discord to host any images you post, these links expire quickly!
Downscaling + Indexing Game Assets

Downscaling + Indexing Game Assets 2023-05-10

Pokémon Essentials Version
Non-applicable
(Apologies if I did a poor job explaining, this is the first tutorial resource I've made!)
While we're in the age that isn't bound to the same restrictions that the older consoles had, I'm a sucker for having things be authentic towards the original source material. Some may remember that older games actually used downscaled art or logos rather than proper pixel art, which can be common for games that were ported to many systems (like Puyo POP), or just simply a downscaled logo like we see in games such as Pokémon most of the time (for things like title screens!).

The question we'd essentially be asking is...
How do we turn this:
2560px-International_Pok%C3%A9mon_logo.svg.png

Into something like this?
1683748236992.png

Disclaimer: For this tutorial, we'd be using Aseprite. Other programs may be able to do this as well, but this is really the most comfortable program for me. It has some convenient features such as being able to quickly make a palette out of what's given to it, which is what will be used in this tutorial.

While I could use some art for this, I'll be using a logo for the game I'm developing instead. Art is a different story to this that I'll explain after I cover the basics.
pokemon bravery logo.png
Step 1: Open up the logo in Aseprite (or your preferred art program). As we can see at first glance, Aseprite tries to generate a palette from the image but since there are too many colors it sort of just... Overflows. This is typically normal and not really much of a big deal; we'll be dealing with that regardless.
1683748833576.png
Step 2: Click the drop-down menu above the palette and select "New Palette from Sprite".
1683749003082.png
From here, we can now see that we have the option of selecting how big the palette would be! How convenient. That number's up to your preference, but for the sake of my logo I'll be setting it to 32.
1683749094830.png
Now then, with that done, you can see that Aseprite has generated a palette of your choice of colors. It's not gonna be in any fancy order; but, it wouldn't really matter either way. What matters is that a palette was generated. (Technically there are 31 colors here, but since PNGs are transparent the 32nd color is made into transparency.)
1683749177200.png
Step 3: It's time to properly downscale it. Click on Sprite then navigate to Sprite Size...
1683749439984.png
From here, a menu will come up asking what size you'd like to change the sprite to, as well as what interpolation method the scaling will use.
1683749532781.png
The interpolation method matters a lot. This isn't a simple question that can be answered; it really depends on what you're downscaling. More complex art may benefit from bilinear, and more simple logos may benefit from nearest neighbor. Experiment and see what you like more. It's okay if you don't find something you like right away. For the sake of this tutorial (and my own taste), I'll be using nearest neighbor for the Bravery logo.
(Also, just a side note, RotSprite is meant more for rotating sprites in Aseprite. It'd most likely be identical to nearest neighbor.)
Now, you should have something like this, which means it's time for step 4:
1683750213379.png
Step 4: Indexing your logo is quite simple. Navigate back to the Sprite tab again, and hover over Color Mode. You'll see 3 options presented to you; out of the three, select Indexed.
1683750267719.png

1683750298271.png

woa look at that you dun did it :D​
That's pretty much the gist of making game logos look like how it did on the DS. If anything, I'd recommend changing the setting back to RGB so that you don't have any sort of technical issues with it later on.
You don't have to make a palette just from the image alone as well. Have a specific palette made for your game? Put it into Aseprite and index it like that!

Game art on the other hand is a slightly different story.
While logos are simple to convert, game art is a bit weird. As much fun as it is to have it be crusty, it really is quite jarring to see something like this:
image.png
For context, on the left is the official sprite for Amitie in Puyo POP Fever (DS). On the right is a downscaled version of the official art made using this method. There's an obvious difference in quality. While it's unknown as to how SEGA pulled it off, it's safe to assume that there's a lot of cleanup involved when doing something like this.
When downscaling game art, remember to clean it up and make it more accurate to the original art at hand. It's best not to be lazy with it or else you'd get something truly crusty to look at.

Hopefully this helped a lot! There's not much else I can add to this topic, or at least not much that I know of.
Credits
There's no credits necessary for this thread, as anyone can do it.
As for the respective properties:
  • The Pokémon logo belongs to The Pokémon Company.
  • Pokémon!! Bravery is a fan work in development by me, FrivolousAqua. Please don't use it for your own purposes without asking.
  • Amitie is a character from Puyo Puyo, which belongs to SEGA.
Author
FrivolousAqua
Views
1,797
First release
Last update
Rating
5.00 star(s) 2 ratings

More resources from FrivolousAqua

Back
Top