Correct and "smart" way of rescaling sprites for a cross-platform project

cocos2d-x C++
#1

I’ve done a simple game and did a few tests in iPhone, iPad, and Android Tablet. It worked fine on iPhone and iPad but in the Android Tablet, I got problems with the sprites not being rescaled according to the size of the device. So I added a setScale to every sprite that I did.

However, the sprites were scaled poorly, with the output being blurry and all (the sprite was originally 64x64). My question is, how do you properly scale a sprite? My guess is that have my sprites all in HD (very big resolutions) and rescale them according to the screen size of the device. Any help on this?

#2

http://www.cocos2d-x.org/projects/cocos2d-x/wiki/How_does_cocos2d-x_support_multi-resolution enjoy :slight_smile:

#3

If I scale using setScale( float ) the sprites get blurred up (because they are small). Should I have used high resolution images instead?

#4

You can have a try of HelloCPP with latest codes https://github.com/cocos2d/cocos2d-x.git.

#5

I’ve read the code, and here are my questions.

  1. I am using v2.0.1 but I don’t have CCDirector::sharedDirector( ) -> getVisibleSize( );. How do I get that?
  2. What does getVisibleSize( ) return?
  3. Is there a way to position sprites at a certain location from another sprite’s position? My setup is this. I have a background image which fills the screen (after it gets rescaled, depending on size). Then I want to position the Close Button on the lower right corner of the Background Image, not the screen itself.
#6

Lance Gray wrote:

I’ve read the code, and here are my questions.
>

  1. I am using v2.0.1 but I don’t have CCDirector::sharedDirector( ) -> getVisibleSize( );. How do I get that?
  2. What does getVisibleSize( ) return?
  3. Is there a way to position sprites at a certain location from another sprite’s position? My setup is this. I have a background image which fills the screen (after it gets rescaled, depending on size). Then I want to position the Close Button on the lower right corner of the Background Image, not the screen itself.

I use CCDirector::sharedDirector()->getWinSize(); which returns a CCSize with width and height variables you can use to position stuff at different fractions of the screen. You could for example do

CCSize winSize = CCDirector::sharedDirector()->getWinSize();
sprite->setPosition( ccp(winSize.width * 0.5, winSize.height * 0.5) );

to position “sprite” at the middle of the screen.

To instead position “sprite” at the lower right corner of the background sprite “background” you could do

sprite->setPosition( ccp(background->getPositionX() + background->getContentSize().width * 0.5 * background->getScaleX(),
    background->getPositionY() - background->getContentSize().height * 0.5 * background->getScaleY()) );

assuming the sprite “background” is centered at it’s position, ie. having anchorPoint = (0,0).

#7

I’ve been having the same problem with scaling of sprites. If the original is smaller, the result is blurry. If the original is bigger, the result is a jagged image.

Have anyone tried implementing scaling of the original data in cocos2d-x? What I mean is an addition to the sprite loading API that give you the opportunity to ask the game to load the resource, rescale the data to a size of your choosing and then create the texture from the rescaled data. I think this would increase the quality of the resulting sprite A LOT if you ask the game to load it in the resolution you will display it.

This is the only good and clean solution I have come up with. I can understand that you can get cocos2d-x to work nicely as is on iOS where there are just a couple of resolutions out there. But on android you have to support many different resolutions and I don’t want my game to look blurry/jagged on half of them or have to create some intricate system of 10 different .pngs per image in different prescaled sizes and choose from them “manually” at run time.

Any thoughts?

Image processing before let sprite load it?
#8

You’re telling exactly the same as i wanted. Is there any solution to prepare (resize) images before use it as sprite?
Scale from big to small makes jagged sprite, small to big makes blurry sprite.

It easy to work with iOS but with Android its hard to have good graphic quality.
After 4 years, there’s any solution to solve it?