## Need help with 2D algorithm

Apprentice
Posts: 7
Joined: 2009.01
Post: #1
Hi

Im new to game development, and Im trying to make a small 2D game for the iPhone. The game is seen from above (directly, not isometric) and the hero is positioned in the middle of the screen all the time. I have a image as a background, which is a landscape, and this image/background rotates and moves so it looks as the hero is moving around in the landscape. I got the movement working with Phytagoras, but I have a huge problem with the rotation. The problem is that I can not rotate the background around a given point, as the position of the hero, I can only rotate it around the backgrounds own axis, and this is wrong if seen from the heros point of view.

I have tried to figure this out with a combination of Phytagoras and cosinus/sinus, but I cant figure it out. I need some algorithm that can take a angle and then rotate the background relative to the hero position. How do I solve this problem of mine?

Best regards and high hopes
Soeren
Member
Posts: 34
Joined: 2009.01
Post: #2
I believe the key to this is to translate the background so that the hero's position is moved to the origin (0,0), then do the rotation, then translate the rotated background so that the origin is moved back to the hero's position.
Sage
Posts: 1,199
Joined: 2004.10
Post: #3
Are you using OpenGL or Quartz?

Either way, the general approach is to transform the image such that the point you want to rotate about is at (0,0), and then perform your rotation, and then transform the image back. In GL this is a simple matter of pushing and popping transforms.
Apprentice
Posts: 7
Joined: 2009.01
Post: #4
What I am doing, is that I have two subviews added to my main view; a background ImageView containing the background image, and a hero ImageView containing the hero image. I then move and rotate the background ImageView to make it look like my hero is moving around in the world. In the following code, the method onTime is called in the game loop repeatedly, and hwew you can see what I am trying:

Code:
```- (void)onTimer {     double x = backgroundView.center.x + backgroundPos.x;     double y = backgroundView.center.y + backgroundPos.y;          double a = x;     double b = y;          if(a > 0) {         a = a - [heroSprite getPos].x + ([heroSprite getImageView].bounds.size.width / 2);     } else if(a < 0) {         a = a - [heroSprite getPos].x - ([heroSprite getImageView].bounds.size.width / 2);     }          if(b > 0) {         b = b - (480 / 2);     } else if(b < 0) {         b = b - (480 / 2);     }          double boundryRadian = 6000;     double c = sqrt(pow(a, 2) + pow(b, 2));          if(c >= boundryRadian) {         backgroundPos = CGPointMake(0.0, 0.0);     }     backgroundView.center = CGPointMake(x, y);          [self rotateBackground: 0.1]; } - (void)rotateBackground: (double) degrees {     angle = angle + degrees;     backgroundView.transform = CGAffineTransformMakeRotation(angle); }```

Is this a bad way? Should I look into OpenGL or?
Sage
Posts: 1,199
Joined: 2004.10
Post: #5
I can't comment on whether what you're doing is "bad" or not, since I'm not privy to your overal design; that being said, here's what I'd do in pseudocode:

Code:
```double x = [heroSprite getPos].x; double y = [heroSprite getPos].y; CGAffineTransform inverseTranslation = CGAfineTransformMakeTranslation( -x, -y ); CGAffineTransform translation = CGAfineTransformMakeTranslation( x, y ); CGAffineTransform rot = CGAffineTransformMakeRotation( angle ); CGAffineTransform final = CGAffineTransformCat( CGAffineTransformCat( inverseTranslation, rot ), translation ); backgroundView.transform = final;```

Now, the order might be wrong -- I'm at work! And I'm accostomed to OpenGL and my own homebrew matrix code. But that's the general idea...

If you're lucky, somebody with real experience in Quartz will be able to help out.
Apprentice
Posts: 7
Joined: 2009.01
Post: #6
Thank you for the code. I got it running, and I tried a hole lot of combinations of the:
Code:
`CGAffineTransform final = CGAffineTransformConcat( CGAffineTransformConcat( inverseTranslation, rot ), translation );`
But all though I do get some different results, none of them worked. One probem I have here is that I do not understand the code you gave me If you can explain the idea behind it, then maybe I can get it working.

Also you mention your own homebrew OpenGL matrix, maybe I should try to in this direction. Can you supply me with some help there? A link to a good tutorial, or maybe some sample code from you in that direction?

Anyways, I have zipped my whole project and put it here for download:

http://www.neigaard.com/SpaceCommander.zip

Then you can run it, and see my problem. In ImageBackgroundController.m line 55,56 you can comment/uncomment to stop movement and only see rotation.

Thank you again, I am totally stuck here.
Sage
Posts: 1,199
Joined: 2004.10
Post: #7
I will see if I can give it a looksy tonight. But I'm at work, and rather busy right now. I may have oversimplified what needs to be done, too.
Apprentice
Posts: 7
Joined: 2009.01
Post: #8
Thank you, just take your time, Im in no hurry!