メガネ、メガネ、、ゆびクルクルで、目をまわそう

画面上でゆびをくるくるなぞろう。
動きにあわせて、目がクルクルまわるよ。
という、シンプルなゲームサンプルをつくってみた。

ポイント
ゆびを動かす座標と、目玉の座標から
atan2を使って、指との角度を計算してます。
算出した角度と、眼鏡の大きさに合わせた半径で
目の位置を決めています。

環境
今回つくったiPhoneアプリサンプルは、

XcodeのiOS6 iPhone Simulatorで動かしています。

サンプルコード

#import “ViewController.h”

#import <QuartzCore/QuartzCore.h>

@interface ViewController () {

    NSMutableArray *eyeArray;

    UIView *look;

}

@end

@implementation ViewController

– (void)viewDidLoad

{

    [super viewDidLoad];

    

    self.view.backgroundColor = [UIColor colorWithHue:0.5 saturation:0.3 brightness:1 alpha:1];

    

    for (int i=0; i<9; i++) {

        if (i == 4) {

            continue;

        }

        float x = 120 * (i % 3) + 40;

        float y = 200 * (i / 3) + 40;

        [self createEye:CGPointMake(x, y)];

    }

    

    [self createLook];

}

– (void)createLook

{

    look = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];

    look.backgroundColor = [UIColor clearColor];

    look.center = self.view.center;

    [self.view addSubview:look];

    

    CAShapeLayer *sl = [[CAShapeLayer alloc] init];

    sl.fillColor = [UIColor yellowColor].CGColor;

    sl.opacity = 0.5;

    UIBezierPath *path = [[UIBezierPath alloc] init];

    [path moveToPoint:CGPointMake(25, 0)];

    [path addLineToPoint:CGPointMake(38, 50)];

    [path addLineToPoint:CGPointMake(0, 18)];

    [path addLineToPoint:CGPointMake(50, 18)];

    [path addLineToPoint:CGPointMake(12, 50)];

    [path closePath];

    sl.path = path.CGPath;

    [look.layer addSublayer:sl];

    

    UILabel *label = [[UILabel alloc] init];

    label.text = @”Look!”;

    label.font = [UIFont systemFontOfSize:14];

    label.backgroundColor = [UIColor clearColor];

    [label sizeToFit];

    label.center = CGPointMake(25, 40);

    [look addSubview:label];

}

– (void)createEye:(CGPoint)p

{

    NSArray *colors = [NSArray arrayWithObjects:[UIColor orangeColor], [UIColor blueColor], [UIColor greenColor], [UIColor redColor], [UIColor blackColor], nil];

    UIColor *randcolor = [colors objectAtIndex:arc4random() % 5];

    

    

    UIView *glasses = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 65, 30)];

    glasses.backgroundColor = [UIColor clearColor];

    glasses.center = p;

    

    UIView *bar = [[UIView alloc] initWithFrame:CGRectMake(28, 8, 8, 5)];

    bar.backgroundColor = randcolor;

    

    UIView *circleA = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];

    circleA.backgroundColor = [UIColor colorWithWhite:1 alpha:0.8];

    circleA.layer.borderColor = randcolor.CGColor;

    circleA.layer.borderWidth = 4;

    circleA.layer.cornerRadius = 15;

    

    UIView *circleB = [[UIView alloc] initWithFrame:CGRectMake(35, 0, 30, 30)];

    circleB.backgroundColor = [UIColor colorWithWhite:1 alpha:0.8];

    circleB.layer.borderColor = randcolor.CGColor;

    circleB.layer.borderWidth = 4;

    circleB.layer.cornerRadius = 15;

    

    UIView *eyeA = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 7, 7)];

    eyeA.layer.cornerRadius = 3.5;

    eyeA.center = CGPointMake(15, 15);

    eyeA.backgroundColor = [UIColor blackColor];

    

    UIView *eyeB = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 7, 7)];

    eyeB.layer.cornerRadius = 3.5;

    eyeB.center = CGPointMake(15, 15);

    eyeB.backgroundColor = [UIColor blackColor];

    

    [self.view addSubview:glasses];

    [glasses addSubview:bar];

    [glasses addSubview:circleA];

    [glasses addSubview:circleB];

    [circleA addSubview:eyeA];

    [circleB addSubview:eyeB];

    

    if (!eyeArray) {

        eyeArray = [[NSMutableArray alloc] init];

    }

    [eyeArray addObject:eyeA];

    [eyeArray addObject:eyeB];

}

– (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

{

    CGPoint p = [[touches anyObject] locationInView:self.view];

    

    for (UIView *eye in eyeArray) {

        CGPoint global = [eye.superview convertPoint:eye.center toView:self.view];

        float angle = atan2(global.y – p.y, global.x – p.x) + M_PI;

        

        float x = 8 * cos(angle);

        float y = 8 * sin(angle);

        eye.transform = CGAffineTransformMakeTranslation(x, y);

    }

    

    look.center = p;

}

– (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end