Tile game diagonal movement

Question

I am making a tile game. Was following http://www.raywenderlich.com/1163/how-to-make-a-tile-based-game-with-cocos2d. Using the whole screen as the joystick for a character that stays in the middle. The movement is only in four directions though looking something like this:

Where the center is the character tile, do not move if touched there. Move right if touched right side etc...

I wanted to make it work with 8 directions. I tried a few things and then found this: http://snipplr.com/view/39707/full-directional-movement-of-player-in-cocos2d-tilemap/

Which expands the original code to handle 8 directions. I modified it and call it from ccTouchMoved and ccTouchEnded.

- (void)movePlayer:(CGPoint)to {
    CGSize winSize = [[CCDirector sharedDirector] winSize];
    CGPoint playerPos = _player.position;

    if (to.x < ((winSize.width/2)-((_tileMap.tileSize.width/2)*self.scale))) {
        playerPos.x -= _tileMap.tileSize.width;
    } else if (to.x > ((winSize.width/2)+((_tileMap.tileSize.width/2)*self.scale))) {
        playerPos.x += _tileMap.tileSize.width;
    }

    if (to.y < ((winSize.height/2)-((_tileMap.tileSize.height/2)*self.scale))) {
        playerPos.y += _tileMap.tileSize.height;
    } else  if (to.y > ((winSize.height/2)+((_tileMap.tileSize.height/2)*self.scale))) {
        playerPos.y -= _tileMap.tileSize.height;
    }

    if (CGPointEqualToPoint(self.player.position, playerPos) == NO) {
        if (playerPos.x <= (_tileMap.mapSize.width * _tileMap.tileSize.width) &&
            playerPos.y <= (_tileMap.mapSize.height * _tileMap.tileSize.height) &&
            playerPos.y >= 0 &&
            playerPos.x >= 0) {
            [self setPlayerPosition:playerPos];
            [self setViewpointCenter:self.player.position]; 
        }
    }
}

and it looks something like this:

This has a problem; as you zoom out, it becomes harder and harder to walk in a straight line by clicking inside the shrinking horizontal and vertical bars...

The second original author divided the screen into thirds to get his movement bars. I wanted to scale mine with the character tile so movement remains accurate near the character.

So I think I need to divide the area into 8 equal parts to make it work best? Something like this:

Can anyone explain how to check for touches within these boundries? Or if I am going about it in the right way?

Thanks!

Answer 1

A great tutorial on how to make a joystick object can be found here: 71-squared How to make a Joypad.

As for the movement in one of the 8 directions mentioned above, all you need to do (after reading and implementing the tutorial of course!) is to figure out the angle of those 8 lines you drew, and check if the newly calculated angles fall within any pair of them.

If you want some sample code on how to check the 8 directions, you can do it like this:

- (void)chooseDirectionForAngle:(float)aAngle; {

  if(aAngle >= 2 || aAngle <= -2){
    // choose right direction.
  }
  else if(aAngle > 1 && aAngle < 2){
    // choose up direction
  }
  else if(aAngle >= -1 && aAngle <= 1){
    // choose left direction
  }
  else if(aAngle > -2 && aAngle < -1){
    // choose down direction
  }
}

Obviously, these numbers are arbitrary in my example. You need only figure out the value of atan2(height, width) for those 8 lines you drew above, which can be done even through xcode by NSLog(@"The angle is: %f", atan2(height, width));. You'll also have to have 8 cases as opposed to four, and just follow the logic from above. Hope that helps!