Jump to content

  • Log In with Google      Sign In   
  • Create Account

Interested in a FREE copy of HTML5 game maker Construct 2?

We'll be giving away three Personal Edition licences in next Tuesday's GDNet Direct email newsletter!

Sign up from the right-hand sidebar on our homepage and read Tuesday's newsletter for details!


We're also offering banner ads on our site from just $5! 1. Details HERE. 2. GDNet+ Subscriptions HERE. 3. Ad upload HERE.


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.

  • You cannot reply to this topic
17 replies to this topic

#1 riens   Members   -  Reputation: 100

Like
0Likes
Like

Posted 23 April 2012 - 05:10 AM

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:
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.

Sponsor:

#2 JoJoSim1   Members   -  Reputation: 173

Like
0Likes
Like

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?

#3 riens   Members   -  Reputation: 100

Like
0Likes
Like

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);
glLoadIdentity();
glOrthof(0, screen.x, screen.y, 0, -1, 1);

Coordinates are in pixel.

What do you mean by rendering on demand or permanent?

#4 JoJoSim1   Members   -  Reputation: 173

Like
0Likes
Like

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?

#5 riens   Members   -  Reputation: 100

Like
0Likes
Like

Posted 25 April 2012 - 06:51 AM

Render loop updates screen frequently.

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

Here is the rendering 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();
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, i`ll 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 Posted Image

#6 JoJoSim1   Members   -  Reputation: 173

Like
0Likes
Like

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.

#7 riens   Members   -  Reputation: 100

Like
0Likes
Like

Posted 25 April 2012 - 09:21 AM

I`ve fixed division by zero, but the main problem persists :(

#8 JoJoSim1   Members   -  Reputation: 173

Like
0Likes
Like

Posted 26 April 2012 - 03:53 AM

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:
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
target describes your swipe pos
//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.

#9 riens   Members   -  Reputation: 100

Like
0Likes
Like

Posted 03 May 2012 - 07:30 AM

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

I don`t 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 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.

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 :(

#10 JoJoSim1   Members   -  Reputation: 173

Like
0Likes
Like

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


#11 riens   Members   -  Reputation: 100

Like
0Likes
Like

Posted 04 May 2012 - 06:50 AM

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

#12 JoJoSim1   Members   -  Reputation: 173

Like
0Likes
Like

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


#13 riens   Members   -  Reputation: 100

Like
0Likes
Like

Posted 08 May 2012 - 06:09 AM

I`ll check this now.

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

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


#14 riens   Members   -  Reputation: 100

Like
0Likes
Like

Posted 08 May 2012 - 08:54 AM

Nope, this does not work properly either :(

#15 JoJoSim1   Members   -  Reputation: 173

Like
0Likes
Like

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

#16 riens   Members   -  Reputation: 100

Like
0Likes
Like

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 :)

#17 JoJoSim1   Members   -  Reputation: 173

Like
0Likes
Like

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.

#18 Jekahy   Members   -  Reputation: 120

Like
0Likes
Like

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.



PARTNERS