Retina graphics error on iOS

General discussion about the R.U.B.E editor
banarne
Posts: 19
Joined: Fri Aug 23, 2013 1:30 pm

Retina graphics error on iOS

Post by banarne »

I just purchased Rube and it's awesome!

I just have one error that I can't seem to resolve no matter what I try.
My scene is created in Rube, exports fine and imports correctly using the loader supplied in cocos2d sample project folder. It works perfectly on a sd device.

However - when I run the code on a retina device or in the simulator(retina) there seems to be an offset/scale error. It does load the correct "img-hd.png" files when running retina but the sprites/images are shown i.e. under/above the position it's supposed to be at.

My PTM_RATIO is set at 32 and it needs to be 32.

Ps. I've added retina images, enabled "[director_ enableRetinaDisplay:YES];" in my AppDelegate.
iforce2d
Site Admin
Posts: 861
Joined: Sat Dec 22, 2012 7:20 pm

Re: Retina graphics error on iOS

Post by iforce2d »

I tried to get this to happen but I could not. Here is what I did.

1. Download the sample source code.
2. Copy planetcute-player.png to planetcute-player-hd.png, and planetcute-grass.png to planetcute-grass-hd.png (I also scaled the hd images up to be twice the size, just in case, although it should not matter). Scribble something on the hd images to tell them apart.
3. Build the project.
4. Run the app to get it on the simulator.
5. Switch between device types on the simulator to check that the hd version of the image with the scribble on it is being used for retina devices.

I tried the whole sequence with both the files included with the trial, and those available separately in the members section, just in case they were different. I did not try on any actual devices. As far as I can tell everything seems to be working fine. Perhaps you could try this sequence and let me know the first step where things go wrong.

Incidentally, I found that running on the iPad retina initially gave me a completely black screen, which was fixed by this: http://stackoverflow.com/questions/1031 ... na-display
banarne
Posts: 19
Joined: Fri Aug 23, 2013 1:30 pm

Re: Retina graphics error on iOS

Post by banarne »

Thanks for your quick reply!

When I did what you did - it worked!

However when I'm implementing Rube in a Cocos2d v2.x project. I still have the same problem for some reason.
In sd - perfectly aligned physicsbodies/sprites - in retina it's completely off. :(

I did it again using your youtube video on Cocos2d (http://youtube.com/watch?v=0UsKnXuZ2nQ) but it didn't help.

If I change the -(void)setImagePositionsFromPhysicsBodies positions to:

pos.x = localPos.x*CC_CONTENT_SCALE_FACTOR();
pos.y = localPos.y*CC_CONTENT_SCALE_FACTOR();

this made the sprites somewhat align with the physicsbodies but it's still off and messes up interactions.

I had to change this (in Rubelayer.mm)
[sprite setScale:img->scale / [sprite contentSizeInPixels].height * contentScaleFactor];
to
[sprite setScale:img->scale / [sprite contentSize].height * contentScaleFactor];

for my project to build, I don't know if it's got anything to do with this?

Any help is greatly appreciated!

EDIT: it actually looks like this guy had a similar problem: viewtopic.php?f=6&t=170&p=684

EDIT2: I've been trying this all day (!) and still can't get it to work. I was thinking that since I got the sprites correctly placed using CC_CONTENT_SCALE_FACTOR(), it could have something to do with the cc touch methods not using cgpoints correctly for retina? just a thought.
iforce2d
Site Admin
Posts: 861
Joined: Sat Dec 22, 2012 7:20 pm

Re: Retina graphics error on iOS

Post by iforce2d »

If I understand it correctly, 'contentSizeInPixels' gives you pixels and 'contentSize' gives you points. In retina mode the latter would be half of the former. I have not used cocos2d v2 but it's bound to be just a matter of multiplying anything related to scale (and also the local pos) by 2. Or maybe, dividing it by 2 :) To be honest I usually just fumble my way through because it's a 50/50 chance which is correct.

Note that as well as the main loading method, the updating of sprite positions after each step to match the physics world will also need adjusting. Oh... you already noted that, ok. Try multiplying by the scale factor before the rotation (the line with b2Mul).
banarne
Posts: 19
Joined: Fri Aug 23, 2013 1:30 pm

Re: Retina graphics error on iOS

Post by banarne »

ok the scaling now works perfectly. just had to make sure that:

pos.x = localPos.x * CC_CONTENT_SCALE_FACTOR();
pos.y = localPos.y * CC_CONTENT_SCALE_FACTOR();

was placed correctly in the setImagePositionsFromPhysicsBodies method.

One last error still remains. It seems to have something to do with the ccTouches methods. When trying to move an object on a retina device, the mousejoint appears in a different place than it does on a sd device.

What I mean is that the touch seem to be in the wrong place on the retina device e.g. I try to lift my object in it's front wheel but I see that I lift it from the center of the image. When I move the object (once I've managed to grab it) up on the screen it looks like the distance from the touch point increases the further up I move it.

The body is placed correctly behind the sprite but it seems like the callback can't find the body on the touched location. It's a bit hard to explain :)

I shouldn't have to update anything in QueryCallback.h for it to work correctly on a retina device, correct?
iforce2d
Site Admin
Posts: 861
Joined: Sat Dec 22, 2012 7:20 pm

Re: Retina graphics error on iOS

Post by iforce2d »

These two functions in the BasicRUBELayer class encapsulate conversions between screen and world:
- screenToWorld
- worldToScreen

I think you'll need to do the same thing there.
banarne
Posts: 19
Joined: Fri Aug 23, 2013 1:30 pm

Re: Retina graphics error on iOS

Post by banarne »

I was hoping that this would fix it, but sadly no :(

the pan/zoom controls work perfectly it's "only" the grabbing of objects that seems to be affected on retina devices. Starting to get a bit desperate, any help is greatly appreciated.

This must have been done by someone here before, I can't be the first one with this issue? Anyone? Pretty please :)
iforce2d
Site Admin
Posts: 861
Joined: Sat Dec 22, 2012 7:20 pm

Re: Retina graphics error on iOS

Post by iforce2d »

Try making a scene where you can easily identify locations in the world, eg. a 1x1 static box or something. Then print out the values being used in the screenToWorld function when a touch begins (or step through using the debugger). It should not be too difficult to figure out what needs to be multiplied by 2 (or 0.5 :)
Drawing a dot on the screen to show you where the program thinks you touched would also help to see what's happening.
banarne
Posts: 19
Joined: Fri Aug 23, 2013 1:30 pm

Re: Retina graphics error on iOS

Post by banarne »

I get the same value at the same position in both retina and sd. If I touch the center of my box2d world I get 0,0 in both retina and sd.

If you check the image below you can probably understand where the problem lies

Image

as you can see the mouse pointer is below the object I intend to move (this is a completely new project). The further I move the object the further the distance from the mouse pointer. The collisions are accurate.

So to sum it all up:
collisions
√ retina
√ sd

sprites
√ retina
√ sd

mouse/touch input
X retina
√ sd

It would be great if you updated the loader for Cocos2d 2.1
iforce2d
Site Admin
Posts: 861
Joined: Sat Dec 22, 2012 7:20 pm

Re: Retina graphics error on iOS

Post by iforce2d »

Yes, it looks like I will have to do this sometime. I have to admit I have never used cocos2d 2 at all, so maybe I should not be making any assumptions about it like this. Given that it's a logical successor to cocos2d 1, I figured it would be similar enough that a separate sample loader would not be necessary. Anyhow, I'll try to get it done this week.
Post Reply