• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.
Sign in to follow this  
Followers 0
riens

Zooming and swiping with OpenGL ES

17 posts in this topic

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

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?
0

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?
0

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?
0

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]
0

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

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

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

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]
0

Share this post


Link to post
Share on other sites
No, i want to translate the image to some point, zoom it and then translate back :)
0

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]
0

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
0

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
0

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

Share this post


Link to post
Share on other sites
I have skype at home so PN me your skype name.
Maybe we could chat later the day.
0

Share this post


Link to post
Share on other sites

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

0

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  
Followers 0