Sign in to follow this  
riens

Zooming and swiping with OpenGL ES

Recommended Posts

Hello!
I am making a 2D puzzle for iOS and currently I`m trying to implement zooming and scrolling with UIPinchGestureRecognizer.
Zooming is done this way: I have a target 2D vector which is a "zooming point". The code is:
[CODE]glTranslatef(target.x, target.y, 0);
glScalef(scale, scale, 0);
glTranslatef(-target.x, -target.y, 0);[/CODE]

Target is being selected with gesture recognizer this way:
[CODE]-(void)handlePinchGesture:(UIPinchGestureRecognizer*)recognizer
{
if (UIGestureRecognizerStateBegan == [recognizer state])
{
view->setTarget([recognizer locationInView:self]);
}
// Rest of the code omitted
}[/CODE]

Everything works just fine.
Initially the game was designed for iPAD, but I want it to work on iPhone and iPOD too. But iPhone and iPOD have different aspect ratio. To keep initial picture proportions I decided to make initial Y scale a bit bigger. Also this made possible to swipe the game field up and down with initial zoom factor. The code is:
[CODE]glTranslatef(target.x, target.y, 0);
glScalef(scale, scale * aspectRatio, 0);
glTranslatef(-target.x, -target.y, 0);[/CODE]

This works just fine IF the game field is "centered" at the screen(e.g. when there are equal space in bot swipe directions(up and down)). But if we swipe the field up or down and begin pinch gesture, the game field jumps to the centre again.
I understand that I need to translate the gesture position by some offset, but I cannot figure how exactly for 3 days.

Share this post


Link to post
Share on other sites
Hi,
how does your rendering framework looks like? Do you render on demand or on a permanent basis ?
Your code above just handles zooming. How do you handle scrolling?
It should something like:
[CODE]
glTranslatef(target.x, target.y, 0);
glScalef(scale, scale * aspectRatio, 0);
glTranslatef(-target.x, -target.y, 0);
glTranslatef(scroll.x, scroll.y * aspectRatio, 0);
[/CODE]
How is your viewport set up?

Are your coordinates in pixel or something uniformed?

Share this post


Link to post
Share on other sites
Hi.

I use pure OpenGL and handle scrolling this way:
[CODE]
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint pos = [touch locationInView:self];
CGPoint oldLocation = [touch previousLocationInView:self];
view->moveBy((CGPoint) {
(oldLocation.x - pos.x) / (view->getScale() - 1.0f),
(oldLocation.y - pos.y) / (view->getScale() * aspectRatio - 1.0f)
});
}
[/CODE]

Where View::moveBy() is:
[CODE]
void View::moveBy(const CGPoint& p)
{
if (_target.x + p.x >= 0 && _target.x + p.x <= _screen.x)
_target.x += p.x;
if (_target.y + p.y >= 0 && _target.y + p.y <= _screen.y)
_target.y += p.y;
}
[/CODE]

Viewport is set up this way:
[CODE]
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(0, screen.x, screen.y, 0, -1, 1);
[/CODE]

Coordinates are in pixel.

What do you mean by rendering on demand or permanent?

Share this post


Link to post
Share on other sites
Do you have a render loop that updates screen frequently ? Or do you render on events ?
I have in mind that you render your scene without translating it when handling pinch gesture.
[CODE]
view->getScale() - 1.0f
[/CODE]
Could it be that getScale() returns 1 and you get a division by zero in your touchesMoved routine ?
Did you console log all your scale and translation values to see if they behave in correct way?

Share this post


Link to post
Share on other sites
Render loop updates screen frequently.

[quote]I have in mind that you render your scene without translating it when handling pinch gesture.[/quote]
Here is the rendering code:
[CODE]
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();

glPushMatrix();
glLoadIdentity();

float scale = view->getScale();

CGPoint target = view->getTarget();

glTranslatef(target.x, target.y, 0);
glScalef(scale, scale * aspectRatio, 0);
glTranslatef(-target.x, -target.y, 0);
renderScene();
glPopMatrix();
renderUI();
[/CODE]
As you can see, i translate to the target position, scale and translate back. No explicit translation handled.

[quote]Could it be that getScale() returns 1 and you get a division by zero in your touchesMoved routine ?[/quote]
Whoops, it is possible. Thank you, i`ll fix it right now.

[quote]Did you console log all your scale and translation values to see if they behave in correct way?[/quote]
Yes, they behave correct. In fact, my puzzle is already released on iPAD, but I cannot pass QA to release it on iPhone because they demand swiping up and down with initial scale [img]http://public.gamedev.net//public/style_emoticons/default/sad.png[/img]

Share this post


Link to post
Share on other sites
Does that fix your problem ? I think the first scaling which lead to div by zero destroyed your target vector. Maybe iPhone and iPad handled div by zero or plus operator with NaN differently.

Share this post


Link to post
Share on other sites
I'm wondering how your swiping works even with scale equals 1.
Your code above says:
translate with -target
scale by scale,scale*aspectRatio
translate with target
in case that scale is 1 and aspectRatio is 1. These lines will not translate at all.
If these lines are just for scaling around target your first line should look like this:
[CODE]
glTranslatef(target.x*scale, target.y*scale*aspectRatio);
[/CODE]

Maybe you could try to explain how you want to handle swipe and pinch.
I would do it like this:
scaleOrigin, scale describe scale configuration
target describes your swipe pos
[CODE]
//handle swipe
glTranslate(-target.x,-target.y);
//handle scale
glTranslatef(scaleOrigin.x,scaleOrigin.y*aspectRatio);
glScalef(scale,scale*aspectRatio);
glTranslatef(-scaleOrigin.x, -scaleOrigin.y);
[/CODE]
This code has one fallback. swipe, scale swipe, scale would not work since you have to accumulate this actions.

Share this post


Link to post
Share on other sites
[quote]I'm wondering how your swiping works even with scale equals 1.[/quote]
I don`t need to swipe when scale equals 1 :) Only when we are zoomed.

[quote]
in case that scale is 1 and aspectRatio is 1. These lines will not translate at all.
[/quote]
Yes, this is a feature. When aspectRatio == 1 we are on iPAD and don`t need to swipe the initial picture. On iPhone aspectRatio is 1.25 and the picture is partially invisible so we can swipe it.

[quote]Maybe you could try to explain how you want to handle swipe and pinch.
(code)
This code has one fallback. swipe, scale swipe, scale would not work since you have to accumulate this actions.[/quote]
I want to handle both swipe and scale in one place.
I also have moveTo(point) method, zoomIn() and zoomOut() and all of them are avaible for scripters. I used the approach you suggested, but it was a big pain to handle all scale-swipe-change scale target events :(

Share this post


Link to post
Share on other sites
Ok.
So you want to scale your image around origin via _scalevalue and then translate the image to moveToPoint. Is that correct ?
[CODE]
glTranslatef(-moveToPoint.x*_scalevalue, -moveToPoint.y*_scalevalue,0);
glScalef(_scalevalue,_scalevalue,1);
[/CODE]

Share this post


Link to post
Share on other sites
like this ?
[CODE]
glTranslatef(target.x*scale, target.y*scale * aspectRatio, 0);
glScalef(scale, scale * aspectRatio, 0);
glTranslatef(-target.x, -target.y, 0);
[/CODE]

Share this post


Link to post
Share on other sites
I`ll check this now.

P.S. Sorry for late response, I was on vacation Edited by riens

Share this post


Link to post
Share on other sites
ah ok i guess it's like this.
You move scale - it works
you move a second time and the image jumps correct ?
could you write down a sequence of actions you want to do ?

for example moveto (1,0) scaleto (1.5,1.5) moveto(-1,0) scaleto(1,1)
btw if you have icq message me and i'll add you

Share this post


Link to post
Share on other sites
[quote]You move scale - it works
you move a second time and the image jumps correct ?[/quote]
I don`t move scale - it works :)
I move scale - it jumps back before zoom

[quote]could you write down a sequence of actions you want to do ?[/quote]
swipe, pinch zoom :)
this corresponds to: moveby(1, 0), scaleby(delta, delta)

[quote]btw if you have icq message me and i'll add you[/quote]
I can create a new ICQ account if you have no jabber or skype :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this