カラフルなセロファンを重ねると、
色が混ざって新しい色になりますよね。
おもしろそうなので、色をまぜるゲームをつみました。
ゆびで、折り紙みたいな四角を動かして、
おもしろい色と形をつくってみましょう。
環境
この記事は、iPhoneゲームのサンプルです。
XcodeのiOS6 iPhone Simulatorで動かしています。
ポイント
UIViewを動かして、重なったら色が混ざるようにしています。
色を混ぜるために、kCGBlendModeDifferenceをdrawRectの中で
指定しています。そのままUIViewを表示しても混ざらないので、
入れ物としてViewを一つ用意して、そのなかに入ったViewを
drawRect内で描画するようにしました。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface Cellophane : UIView
@property (nonatomic, strong) NSMutableArray *multipleViews;
@end
@implementation Cellophane
@synthesize multipleViews;
-(void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetBlendMode(context, kCGBlendModeDifference);
for (UIView *v in multipleViews) {
[v.backgroundColor setFill];
CGContextAddRect(context, v.frame);
CGContextFillPath(context);
}
}
@end
@interface ViewController ()
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self createBackScene];
[self createQuestion1];
[self createQuestion2];
[self createQuestion3];
}
– (void)createQuestion1
{
// Q1.
Cellophane *q1 = [[Cellophane alloc] initWithFrame:CGRectMake(40, 120, 100, 130)];
q1.backgroundColor = [UIColor clearColor];
q1.layer.borderColor = [UIColor lightGrayColor].CGColor;
q1.layer.borderWidth = 10;
q1.layer.cornerRadius = 20.0;
[self.view addSubview:q1];
UIView *v1 = [[UIView alloc] initWithFrame:CGRectMake(40, 90, 20, 20)];
v1.backgroundColor = [UIColor greenColor];
UIView *v2 = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 20, 20)];
v2.backgroundColor = [UIColor redColor];
q1.multipleViews = [[NSMutableArray alloc] init];
[q1.multipleViews addObject:v1];
[q1.multipleViews addObject:v2];
}
– (void)createQuestion2
{
// Q2.
Cellophane *q = [[Cellophane alloc] initWithFrame:CGRectMake(120, 260, 100, 130)];
q.backgroundColor = [UIColor clearColor];
q.layer.borderColor = [UIColor lightGrayColor].CGColor;
q.layer.borderWidth = 10;
q.layer.cornerRadius = 20.0;
[self.view addSubview:q];
UIView *v1 = [[UIView alloc] initWithFrame:CGRectMake(40, 100, 20, 20)];
v1.backgroundColor = [UIColor greenColor];
UIView *v2 = [[UIView alloc] initWithFrame:CGRectMake(40, 100, 20, 20)];
v2.backgroundColor = [UIColor redColor];
q.multipleViews = [[NSMutableArray alloc] init];
[q.multipleViews addObject:v1];
[q.multipleViews addObject:v2];
}
– (void)createQuestion3
{
// Q3.
Cellophane *q = [[Cellophane alloc] initWithFrame:CGRectMake(200, 120, 100, 130)];
q.layer.borderColor = [UIColor lightGrayColor].CGColor;
q.layer.borderWidth = 10;
q.layer.cornerRadius = 20.0;
q.backgroundColor = [UIColor clearColor];
[self.view addSubview:q];
UIView *v1 = [[UIView alloc] initWithFrame:CGRectMake(30, 100, 20, 20)];
v1.backgroundColor = [UIColor colorWithHue:0.3 saturation:1.0 brightness:1.0 alpha:1.0];
UIView *v2 = [[UIView alloc] initWithFrame:CGRectMake(40, 100, 20, 20)];
v2.backgroundColor = [UIColor colorWithHue:0.6 saturation:1.0 brightness:1.0 alpha:1.0];
UIView *v3 = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 20, 20)];
v3.backgroundColor = [UIColor colorWithHue:1.0 saturation:1.0 brightness:1.0 alpha:1.0];
q.multipleViews = [[NSMutableArray alloc] init];
[q.multipleViews addObject:v1];
[q.multipleViews addObject:v2];
[q.multipleViews addObject:v3];
}
– (void)createBackScene
{
for (int i=0; i<10; i++) {
UIView *top = [[UIView alloc] initWithFrame:CGRectMake(i * 32, –20, 32, 100)];
UIColor *color = [UIColor colorWithHue:0.1 * i saturation:1.0 brightness:1.0 alpha:1.0];
top.backgroundColor = color;
[self.view addSubview:top];
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[top addGestureRecognizer:pan];
UIView *bottom = [[UIView alloc] initWithFrame:CGRectMake(i * 32, 400, 32, 100)];
bottom.backgroundColor = color;
[self.view addSubview:bottom];
[bottom addGestureRecognizer:pan];
}
}
– (void)pan:(UIPanGestureRecognizer*)gr
{
static UIView *selected;
CGPoint p = [gr locationInView:self.view];
if (!selected) {
if (gr.state == UIGestureRecognizerStateBegan) {
selected = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
selected.center = p;
selected.backgroundColor = gr.view.backgroundColor;
[self.view addSubview:selected];
}
} else {
selected.center = p;
if (gr.state == UIGestureRecognizerStateEnded || gr.state == UIGestureRecognizerStateCancelled) {
[selected removeFromSuperview];
UIView *v = [self.view hitTest:p withEvent:nil];
if ([v isKindOfClass:[Cellophane class]]) {
selected.frame = [self.view convertRect:selected.frame toView:v];
[((Cellophane*)v).multipleViews addObject:selected];
selected = nil;
[v setNeedsDisplay];
}
}
}
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end