[MAC] Be careful with your Window Size and test different screen resolutions!

cocos2d for iPhone » Programming » cocos2d Mac

[MAC] Be careful with your Window Size and test different screen resolutions!

(19 posts) (11 voices)

Started 1 year ago by drPedro
Latest reply from hermesdavidms

Tags:

drPedro
Member

Hi all,

I've got some suprises with the Mac App Store. Another dev using cocos2D told me that some of its users reported that the image of the app was cut off, and several hours after his mail my app had the same problem (and thus I've got bad ratings ;-))

This is my fault, I've set the size of the window (via Interface builder) to 1024x768 but some people has still using lesser resolution on Mac (eg 1024x720 or worst 800x600) and it created the issues since Mac OS automatically reduce the size of the window.

So don't forget to test your app with different screen resolutions !

Pierre

Posted 1 year ago #
finder39
Member

interesting thing to consider, thank you :)

Posted 1 year ago #
Ozden79
Member

I had noticed this during development and came up with a workaround, which is working in our game available at Mac AppStore. In app delegate, before initializing opengl, etc. with the director, set the size of the MacGLView to the size of your planned assets size (1280x800 for example) and after the initialization, set the size of MacGLView back to the original size. This should allow everything to be scaled correctly rather than graphics being cut off...

Posted 1 year ago #
itlgames
Moderator

You cannot make a Mac app with a big fixed size screen, on iPhone/iPod/iPad we know we have only 3 different resolutions, but for computers, you cannot assume everyone has bigger monitors or bigger resolutions. We developers may like tiny fonts and lots of space on our desks, but I know lot of users not using the biggest resolution available simply cos they cannot read the fonts.

I believe the solution is to make your app resizable, where the game scene assets are not scaled for example, but all the HUD is just repositioned depending of the size of the window. You could also scale the game assets, but I don't think it's a good idea, maybe depends of the type of game.

In a way this is similar to UI wed design, where you may only assume a minimum resolution, and then you can either leave it fixed, or reposition elements when resizing the window.

Posted 1 year ago #

drPedro
Member

@OZden79 thanks for the trick!

for others here is the code for this trick (assuming your assets size is 1024x768

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
	CCDirectorMac *director = (CCDirectorMac*) [CCDirector sharedDirector];

	//1/ to handle correctly automatic window resize on mac, we reset to the assets size
	[glView_ setFrameSize:NSMakeSize(1024,768)]; 

	[director setOpenGLView:glView_];

	// EXPERIMENTAL stuff.
	// 'Effects' don't work correctly when autoscale is turned on.
	// Use kCCDirectorResize_NoScale if you don't want auto-scaling.
	[director setResizeMode:kCCDirectorResize_AutoScale];

	//2/ to handle correctly automatic window resize on mac ( minus 42 is for the window bottom and the title bar)
	[glView_ setFrameSize:NSMakeSize(window_.frame.size.width,window_.frame.size.height-42)]; 

	// Enable "moving" mouse event. Default no.
	[window_ setAcceptsMouseMovedEvents:YES];

	//[director runWithScene:[HelloWorld scene]];
	//[director runWithScene:[HelloWorld scene]];
	CCScene *scene= [MenuScene scene];
	[[[scene children] lastObject]  setAppDelegate:self];
	// Run the intro Scene
	[[CCDirector sharedDirector] runWithScene:scene ];
}

In Interface builder , the size of my Window is 1024x788 and the size of the OpenGL view is 1024x768 (x=0,y=20)

Posted 1 year ago #

ImpresionesWeb
Member

Great post!! This fixed all my sprites positions!
Works fine for me, thanks drPedro and Ozden79!

Posted 1 year ago #
Ozden79
Member

You're welcome...

One thing to mention though, instead of hardcoding some caption sizes such as 42 in your example, I suggest you to get the size of glView temporarily at start and than set back at the end ;).

Posted 1 year ago #
cublah
Member

Is there anyway when resizing to make the window scale in proportion, so you don't have the black bars down the sides. You can do this in Windows, but being fairly new to Mac osX does anybody know if this can be done.

Posted 1 year ago #
limtc
Member

I think just don't use 1024x768 - they will show black bars. Try something like 1024x640 (16:10 ratio).

Posted 1 year ago #
cublah
Member

I actually found what I was looking for...

[window_ setContentAspectRatio:NSMakeSize(1024,768)]; or [window_ setContentAspectRatio:NSMakeSize(4,3)];

When you now scale it keeps the window in scale with the glView.

I also limit the size to minimum of 800x600 and a max of 1024x768 so it should be ok for every resolution.

Posted 1 year ago #
drPedro
Member

@cubiah why limit to 1024x768 ? People with bigger screen may want to have a bigger window (and not going full screen)

@limtc I agree it is far from perfect when you use 1024x768, but it is easier to port an iPad app - you can reuse all assets and the design you've done with this ratio.

Posted 1 year ago #
cublah
Member

Because all my artwork is done for 1024x768, If they want it bigger then they can put it in fullscreen.

If I want to do it bigger I would turn AutoScale off and re-arrrange everything when it is scaled, Angry Birds is a good example of that, the birds and all the pieces, etc. don't actually scale they just print more around the screen and re-arrange items.

Posted 1 year ago #
drPedro
Member

@cubiah I just wanted to say that it is easier to port (pratically no change at your code). Of course it is really better to do the way you describe but if you are short on time...

Posted 1 year ago #
haqu
Member

@drPedro thank you very much! this is exactly what I was looking for.

Posted 1 year ago #
finder39
Member

What I have been doing for my latest game is using all of my sprites at a .5 scale. this is great because when people go full screen (i dont give the option to resize, that may change) the images are still clear because even on the biggest screen size available (2560 x 1440) they are just under 1:1

It's not the easiest way to code, but in the end it will be worth it

Posted 1 year ago #
Stepan Generalov
Moderator

Probably this blog post should be mentioned here: http://parkourdev.blogspot.com/2011/04/universal-macios-menus-with-cocos2d.html

There's also a russian version here: https://github.com/psineur/CCMenuAdvanced/wiki/%D0%A3%D0%BD%D0%B8%D0%B2%D0%B5%D1%80%D1%81%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-Mac-iOS-Retina-%D0%BC%D0%B5%D0%BD%D1%8E-%D1%81-Cocos2D

Posted 11 months ago #

QuantumDoja
Member

Hi, I'm really confused by this, I've had my app rejected as I get borders and buttons are unable to be pressed when the screen resolution is scaled, any ideas on what I should do? All of my assets were created with 1024/768 in mind:

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
	CCDirectorMac *director = (CCDirectorMac*) [CCDirector sharedDirector];

	//1/ to handle correctly automatic window resize on mac, we reset to the assets size
	[glView_ setFrameSize:NSMakeSize(1024,640)];
    [window_ setContentAspectRatio:NSMakeSize(1024,640)];
    //[glView_ setFrameSize:NSMakeSize(1024,640)]; 

	[director setOpenGLView:glView_];

	// EXPERIMENTAL stuff.
	// 'Effects' don't work correctly when autoscale is turned on.
	// Use kCCDirectorResize_NoScale if you don't want auto-scaling.
	[director setResizeMode:kCCDirectorResize_AutoScale];

	//2/ to handle correctly automatic window resize on mac ( minus 42 is for the window bottom and the title bar)
	//[glView_ setFrameSize:NSMakeSize(window_.frame.size.width,window_.frame.size.height)]; 

	// Enable "moving" mouse event. Default no.
	[window_ setAcceptsMouseMovedEvents:YES];

	// Run the intro Scene
	[[CCDirector sharedDirector] runWithScene:[SplashScene scene] ];
}

Posted 8 months ago #

hermesdavidms
Member

im also fighting with the development of a osx cocos2d game, currently im using a base resolution in which i develop, then i apply a scalar to things which i get by retrieving the current resolution, it still not working very good, if i manage to get a properly working solution, i will share it with all of you

Posted 8 months ago #
hermesdavidms
Member

anyone interested in a way to remove the black bars on autoscale mode??

i modified the CCDirectorMac to be able to scale the image to any resolution and any aspect ratio without black bars, the bad side, its that it can be resized to any aspect ratio so if the resolution is of drastically diferent proportions the images will look stretched or smashed

i will try to make it interchangeable in the future that you can choose to keep the black bars(preserving aspect ratio) or remove the black bars and fit any resolution

you just need to set the original win size to the design proportions..

if there is anyone interested here it is:

around line 205 in CCDirectorMac.m just above the if statement insert this

float resMultiplierX,resMultiplierY,transformedResolutionX,transformedResolutionY;

inside the if, almost at the bottom inser this

resMultiplierX = (float)1 * winSizeInPixels_.width / originalWinSize_.width;
resMultiplierY = (float)1 * winSizeInPixels_.height / originalWinSize_.height;

transformedResolutionX = originalWinSize_.width * resMultiplierX;
transformedResolutionY = originalWinSize_.height * resMultiplierY;

then below theres a switch statement liks this

switch (projection) {
case kCCDirectorProjection2D:

change the line below to glViewport(0, 0, transformedResolutionX, transformedResolutionY);

then in the init of the class put this line

[self setProjection:kCCDirectorProjection2D];

thats it, its a very very hacky solution for now, but it works

Posted 8 months ago #

RSS feed for this topic

Reply

You must log in to post.