加法混色のひとつ「RGBカラーモデル」を勉強するトレーニングゲームをiPhoneアプリとして作ってみます。表示された色と画面中央のパレットの色がおなじになるように、赤、緑、青の三つの原色の濃さを各５枚のパネルから選択していくようにしましょう。
動作イメージ
XcodeからiOS6 iPhone Simulatorで動かすとこんな感じになります。
ポイント
UIColorのcolorWithRed:green:blue:を使って色を混ぜています。変数にfloat型で赤、緑、青を持っておいて、赤緑青のパネルをタッチすると、濃さに対応した数値を代入しパレットの背景色に反映するようにしました。色の濃淡は 0.25の倍数で、0(黒), 0.25, 0.5, 0.75, 1.0(赤 or 緑 or 青)の５ランクに分けています。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController () {
UIView *palette;
UIView *redMarker, *greenMarker, * blueMarker;
UIView *question;
float red, green, blue;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor colorWithWhite:0.2 alpha:1];
[self createRGBPanels];
[self createColorPalette];
[self createQuestion];
}
– (void)createRGBPanels
{
for (int i=0; i<3; i++) {
float r = (i==0) ? 1 : 0;
float g = (i==1) ? 1 : 0;
float b = (i==2) ? 1 : 0;
for (int j=0; j<5; j++) {
UIColor *color = [UIColor colorWithRed:r * (j * 0.25) green:g * (j * 0.25) blue:b * (j * 0.25) alpha:1.0];
UILabel *panel = [[UILabel alloc] initWithFrame:CGRectMake(i * 100 + 10, 450 – j * 40, 100, 40)];
panel.backgroundColor = color;
panel.text = [NSString stringWithFormat:@”%d”, j];
panel.textAlignment = 1;
panel.textColor = [UIColor whiteColor];
panel.font = [UIFont boldSystemFontOfSize:40/1.618];
panel.layer.borderColor = [UIColor whiteColor].CGColor;
panel.layer.borderWidth = 1;
[self.view addSubview:panel];
panel.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)];
[panel addGestureRecognizer:tap];
panel.tag = i + 1;
}
}
// marker
redMarker = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
redMarker.layer.cornerRadius = 20.0;
redMarker.layer.borderWidth = 5;
redMarker.layer.borderColor = [UIColor whiteColor].CGColor;
redMarker.backgroundColor = [UIColor clearColor];
redMarker.center = CGPointMake(60, 470);
[self.view addSubview:redMarker];
greenMarker = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
greenMarker.layer.cornerRadius = 20.0;
greenMarker.layer.borderWidth = 5;
greenMarker.layer.borderColor = [UIColor whiteColor].CGColor;
greenMarker.backgroundColor = [UIColor clearColor];
greenMarker.center = CGPointMake(160, 470);
[self.view addSubview:greenMarker];
blueMarker = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
blueMarker.layer.cornerRadius = 20.0;
blueMarker.layer.borderWidth = 5;
blueMarker.layer.borderColor = [UIColor whiteColor].CGColor;
blueMarker.backgroundColor = [UIColor clearColor];
blueMarker.center = CGPointMake(260, 470);
[self.view addSubview:blueMarker];
}
– (void)createColorPalette
{
red = 0;
green = 0;
blue = 0;
float w = 300/1.618;
float h = w / 1.618;
palette = [[UIView alloc] initWithFrame:CGRectMake(0, 0, w, h)];
palette.center = CGPointMake(160, 200);
palette.layer.cornerRadius = 40;
palette.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
palette.layer.borderWidth = 10;
palette.layer.borderColor = [UIColor whiteColor].CGColor;
[self.view addSubview:palette];
}
– (void)createQuestion
{
if (!question) {
question = [[UIView alloc] initWithFrame:CGRectMake(10, 0, 300, palette.bounds.size.height)];
question.center = CGPointMake(160, question.bounds.size.height/2.0);
question.layer.borderColor = [UIColor whiteColor].CGColor;
question.layer.borderWidth = 10;
[self.view addSubview:question];
}
int randRed = arc4random() % 5;
int randGreen = arc4random() % 5;
int randBlue = arc4random() % 5;
question.backgroundColor = [UIColor colorWithRed:randRed * 0.25 green:randGreen * 0.25 blue:randBlue * 0.25 alpha:1.0];
question.transform = CGAffineTransformMakeTranslation(0, –150);
[UIView animateWithDuration:0.3 animations:^{
question.transform = CGAffineTransformIdentity;
}];
}
– (void)tap:(UITapGestureRecognizer*)gr
{
UILabel *l = (UILabel*)gr.view;
switch (l.tag) {
case 1: // red
red = 0.25 * [l.text floatValue];
redMarker.center = l.center;
break;
case 2: // green
green = 0.25 * [l.text floatValue];
greenMarker.center = l.center;
break;
case 3: // blue
blue = 0.25 * [l.text floatValue];
blueMarker.center = l.center;
break;
}
palette.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
// check
if ([question.backgroundColor isEqual:palette.backgroundColor]) {
[UIView animateWithDuration:1.0 animations:^{
question.transform = CGAffineTransformMakeTranslation(0, –150);
} completion:^(BOOL finished) {
[self createQuestion];
}];
}
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end