View more

View more

View more

### Image of the Day Submit

IOTD | Top Screenshots

### The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.

# Zooming and swiping with OpenGL ES

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

17 replies to this topic

### #1riens  Members

Posted 23 April 2012 - 05:10 AM

Hello!
I am making a 2D puzzle for iOS and currently Im 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:
glTranslatef(target.x, target.y, 0);
glScalef(scale, scale, 0);
glTranslatef(-target.x, -target.y, 0);

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

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:
glTranslatef(target.x, target.y, 0);
glScalef(scale, scale * aspectRatio, 0);
glTranslatef(-target.x, -target.y, 0);

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.

### #2JoJoSim1  Members

Posted 24 April 2012 - 02:45 AM

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:
glTranslatef(target.x, target.y, 0);
glScalef(scale, scale * aspectRatio, 0);
glTranslatef(-target.x, -target.y, 0);
glTranslatef(scroll.x, scroll.y * aspectRatio, 0);

How is your viewport set up?

Are your coordinates in pixel or something uniformed?

### #3riens  Members

Posted 24 April 2012 - 08:05 AM

Hi.

I use pure OpenGL and handle scrolling this way:
- (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)
});
}


Where View::moveBy() is:
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;
}


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


Coordinates are in pixel.

What do you mean by rendering on demand or permanent?

### #4JoJoSim1  Members

Posted 25 April 2012 - 03:02 AM

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.
view->getScale() - 1.0f

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?

### #5riens  Members

Posted 25 April 2012 - 06:51 AM

I have in mind that you render your scene without translating it when handling pinch gesture.

Here is the rendering code:
glMatrixMode(GL_MODELVIEW);

glPushMatrix();

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();

As you can see, i translate to the target position, scale and translate back. No explicit translation handled.

Could it be that getScale() returns 1 and you get a division by zero in your touchesMoved routine ?

Whoops, it is possible. Thank you, ill fix it right now.

Did you console log all your scale and translation values to see if they behave in correct way?

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

### #6JoJoSim1  Members

Posted 25 April 2012 - 08:26 AM

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.

### #7riens  Members

Posted 25 April 2012 - 09:21 AM

Ive fixed division by zero, but the main problem persists

### #8JoJoSim1  Members

Posted 26 April 2012 - 03:53 AM

I'm wondering how your swiping works even with scale equals 1.
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:
glTranslatef(target.x*scale, target.y*scale*aspectRatio);


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
//handle swipe
glTranslate(-target.x,-target.y);
//handle scale
glTranslatef(scaleOrigin.x,scaleOrigin.y*aspectRatio);
glScalef(scale,scale*aspectRatio);
glTranslatef(-scaleOrigin.x, -scaleOrigin.y);

This code has one fallback. swipe, scale swipe, scale would not work since you have to accumulate this actions.

### #9riens  Members

Posted 03 May 2012 - 07:30 AM

I'm wondering how your swiping works even with scale equals 1.

I dont need to swipe when scale equals 1 Only when we are zoomed.

in case that scale is 1 and aspectRatio is 1. These lines will not translate at all.

Yes, this is a feature. When aspectRatio == 1 we are on iPAD and dont need to swipe the initial picture. On iPhone aspectRatio is 1.25 and the picture is partially invisible so we can swipe it.

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.

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

### #10JoJoSim1  Members

Posted 04 May 2012 - 02:49 AM

Ok.
So you want to scale your image around origin via _scalevalue and then translate the image to moveToPoint. Is that correct ?
glTranslatef(-moveToPoint.x*_scalevalue, -moveToPoint.y*_scalevalue,0);
glScalef(_scalevalue,_scalevalue,1);


### #11riens  Members

Posted 04 May 2012 - 06:50 AM

No, i want to translate the image to some point, zoom it and then translate back

### #12JoJoSim1  Members

Posted 04 May 2012 - 09:44 AM

like this ?
glTranslatef(target.x*scale, target.y*scale * aspectRatio, 0);
glScalef(scale, scale * aspectRatio, 0);
glTranslatef(-target.x, -target.y, 0);


### #13riens  Members

Posted 08 May 2012 - 06:09 AM

Ill check this now.

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

Edited by riens, 08 May 2012 - 06:20 AM.

### #14riens  Members

Posted 08 May 2012 - 08:54 AM

Nope, this does not work properly either

### #15JoJoSim1  Members

Posted 08 May 2012 - 09:13 AM

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

### #16riens  Members

Posted 10 May 2012 - 01:40 AM

You move scale - it works
you move a second time and the image jumps correct ?

I don`t move scale - it works
I move scale - it jumps back before zoom

could you write down a sequence of actions you want to do ?

swipe, pinch zoom
this corresponds to: moveby(1, 0), scaleby(delta, delta)

btw if you have icq message me and i'll add you

I can create a new ICQ account if you have no jabber or skype

### #17JoJoSim1  Members

Posted 10 May 2012 - 02:57 AM

I have skype at home so PN me your skype name.
Maybe we could chat later the day.

### #18Jekahy  Members

Posted 29 August 2013 - 04:33 PM

Hi! I'm having almost the same issue with zooming and scrolling! Can you post your solution?

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.