東京リトルロケット(Tokyo Little Rocket)は
４コマ漫画をプログラムで動かそうという企画です。
第２回目のテーマは、「つみき」
元絵はこちら
二人で作ってます。
４コマ：ナカイ 作
プログラム：水島 作
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController () {
UIImage *papa1, *papa2, *papa3;
UIImage *boku1, *boku2, *boku3;
UIImage *papaboku1;
UIImage *mama1, *mama2;
UIImage *desk1, *desk2;
UIImage *comment11, *comment12;
UIImage *comment21, *comment22;
UIImage *comment41;
UIImage *brick1, *brick2, *brick3, *brick4;
UIImageView *boku;
UIImageView *papa;
UIImageView *mama;
UIImageView *desk;
UIImageView *comment1;
UIImageView *comment2;
UIImageView *papaboku;
UIImageView *brick;
UILabel *startView;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
[self loadResource];
[self crateOpening];
}
– (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[self showProgram];
}
– (void)loadResource
{
boku1 = [UIImage imageNamed:@”boku1″];
boku2 = [UIImage imageNamed:@”boku2″];
boku3 = [UIImage imageNamed:@”boku3″];
papaboku1 = [UIImage imageNamed:@”papaboku1″];
papa1 = [UIImage imageNamed:@”papa1″];
papa2 = [UIImage imageNamed:@”papa2″];
papa3 = [UIImage imageNamed:@”papa3″];
mama1 = [UIImage imageNamed:@”mama1″];
mama2 = [UIImage imageNamed:@”mama2″];
desk1 = [UIImage imageNamed:@”desk1″];
desk2 = [UIImage imageNamed:@”desk2″];
comment11 = [UIImage imageNamed:@”comment1-1″];
comment12 = [UIImage imageNamed:@”comment1-2″];
comment21 = [UIImage imageNamed:@”comment2-1″];
comment22 = [UIImage imageNamed:@”comment2-2″];
comment41 = [UIImage imageNamed:@”comment4-1″];
brick1 = [UIImage imageNamed:@”brick1″];
brick2 = [UIImage imageNamed:@”brick2″];
brick3 = [UIImage imageNamed:@”brick3″];
brick4 = [UIImage imageNamed:@”brick4″];
}
– (void)showProgram
{
// 幕を上げる
[UIView animateWithDuration:1.0 animations:^{
startView.center = CGPointMake(250, –300);
} completion:^(BOOL finished) {
[startView removeFromSuperview];
}];
// シーン 1
float delay = 0.5;
[self showScene:^{
[self scene1];
} afterDelay:delay];
// シーン 2
delay += 3;
[self showScene:^{
[self scene2];
} afterDelay:delay];
// シーン 3
delay += 5;
[self showScene:^{
[self scene3];
} afterDelay:delay];
// シーン 4
delay += 5;
[self showScene:^{
[self scene4];
} afterDelay:delay];
// end
delay += 5;
[self showScene:^{
UILabel *finish = [self createWord:@” End \n\n Tokyo Little Rocket\n 02″ size:30];
finish.numberOfLines = 0;
finish.textColor = [UIColor whiteColor];
finish.frame = CGRectMake(0, –340, 500, 320);
finish.backgroundColor = [UIColor blackColor];
[self.view addSubview:finish];
[UIView animateWithDuration:1 animations:^{
finish.center = CGPointMake(250, 160);
}];
} afterDelay:delay];
}
– (void)scene1
{
float delay = 0;
// 僕と積み木
boku = [[UIImageView alloc] initWithImage:boku1];
boku.contentMode = UIViewContentModeScaleAspectFit;
boku.center = CGPointMake(200, 170);
boku.transform = CGAffineTransformMakeScale(0.8, 0.8);
[self.view addSubview:boku];
desk = [[UIImageView alloc] initWithImage:desk1];
desk.contentMode = UIViewContentModeScaleAspectFit;
desk.center = CGPointMake(200, 250);
desk.transform = CGAffineTransformMakeScale(0.8, 0.8);
[self.view addSubview:desk];
brick = [[UIImageView alloc] initWithImage:brick1];
brick.contentMode = UIViewContentModeScaleAspectFit;
brick.center = CGPointMake(200, 200);
brick.transform = CGAffineTransformMakeScale(0.6, 0.6);
[self.view addSubview:brick];
//パパ登場
delay += 0.5;
[self showScene:^{
papa = [[UIImageView alloc] initWithImage:papa1];
papa.contentMode = UIViewContentModeScaleAspectFit;
papa.center = CGPointMake(700, 170);
papa.transform = CGAffineTransformMakeScale(0.8, 0.8);
[self.view addSubview:papa];
[UIView animateWithDuration:1.0 animations:^{
papa.center = CGPointMake(400, 170);
}];
} afterDelay:delay];
// パパしゃべる
delay += 1.0;
[self showScene:^{
comment1 = [[UIImageView alloc] initWithImage:comment11];
comment1.contentMode = UIViewContentModeScaleAspectFit;
comment1.center = CGPointMake(300, 100);
comment1.transform = CGAffineTransformMakeScale(0.8, 0.8);
comment1.alpha = 0;
[self.view addSubview:comment1];
[UIView animateWithDuration:0.5 animations:^{
comment1.alpha = 1.0;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1.5 animations:^{
comment1.alpha = 0;
}];
}];
} afterDelay:delay];
// 僕答える
delay += 1.0;
[self showScene:^{
comment2 = [[UIImageView alloc] initWithImage:comment12];
comment2.contentMode = UIViewContentModeScaleAspectFit;
comment2.center = CGPointMake(50, 100);
comment2.transform = CGAffineTransformMakeScale(0.8, 0.8);
comment2.alpha = 0;
[self.view addSubview:comment2];
[UIView animateWithDuration:0.5 animations:^{
comment2.alpha = 1.0;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1.5 animations:^{
comment2.alpha = 0;
}];
}];
} afterDelay:delay];
}
– (void)scene2
{
// パパ動く フリップで絵を切り替え
// 積み木を持つ
[UIView animateWithDuration:0.5 animations:^{
papa.layer.transform = CATransform3DMakeRotation(M_PI * 0.5, 0, 1, 0);
} completion:^(BOOL finished) {
papa.image = papa2;
[papa sizeToFit];
papa.center = CGPointMake(340, 170);
papa.transform = CGAffineTransformMakeScale(0.8, 0.8);
[UIView animateWithDuration:0.5 animations:^{
papa.layer.transform = CATransform3DRotate(papa.layer.transform, M_PI * 2.0, 0, 1, 0);
}];
}];
// パパ「パパにもやらせて」
float delay = 1.5;
[self showScene:^{
[UIView animateWithDuration:0.5 animations:^{
comment1.alpha = 0;
} completion:^(BOOL finished) {
comment1.image = comment21;
comment1.center = CGPointMake(420, 100);
[UIView animateWithDuration:0.5 animations:^{
comment1.alpha = 1.0;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1.5 animations:^{
comment1.alpha = 0;
}];
}];
}];
} afterDelay:delay];
// 積み木ちょっと大きく
delay += 0.5;
[self showScene:^{
[UIView animateWithDuration:0.5 animations:^{
brick.alpha = 0;
} completion:^(BOOL finished) {
brick.image = brick2;
brick.transform = CGAffineTransformMakeScale(0.8, 0.8);
[UIView animateWithDuration:0.5 animations:^{
brick.alpha = 1.0;
}];
}];
} afterDelay:delay];
// 子供喜ぶ
delay += 1.5;
[self showScene:^{
[UIView animateWithDuration:0.2 animations:^{
boku.alpha = 0;
} completion:^(BOOL finished) {
boku.image = boku2;
boku.transform = CGAffineTransformMakeScale(1.1, 1.1);
boku.center = CGPointMake(170, 170);
[UIView animateWithDuration:0.2 animations:^{
boku.alpha = 1;
}];
}];
// 子供：「すごいすごい」
[UIView animateWithDuration:0.5 animations:^{
// Noting
} completion:^(BOOL finished) {
comment2.image = comment22;
comment2.center = CGPointMake(50, 150);
[UIView animateWithDuration:0.5 animations:^{
comment2.alpha = 1.0;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1.5 animations:^{
comment2.alpha = 0;
}];
}];
}];
} afterDelay:delay];
}
– (void)scene3
{
// パパとボクで肩車 下に消えて、上に上がってくる
papaboku = [[UIImageView alloc] initWithImage:papaboku1];
papaboku.center = CGPointMake(400, 700);
papaboku.transform = CGAffineTransformMakeScale(0.8, 0.8);
[self.view addSubview:papaboku];
[UIView animateWithDuration:0.5 animations:^{
papa.center = CGPointMake(papa.center.x, 600);
boku.center = CGPointMake(boku.center.x, 600);
brick.center = CGPointMake(brick.center.x, 600);
} completion:^(BOOL finished) {
papa.alpha = 0;
boku.alpha = 0;
brick.image = brick3;
[brick sizeToFit];
[UIView animateWithDuration:2.0 animations:^{
papaboku.center = CGPointMake(330, 150);
brick.center = CGPointMake(brick.center.x, 250);
}];
}];
float delay = 2.5;
[self showScene:^{
[UIView animateWithDuration:0.5 animations:^{
brick.center = CGPointMake(brick.center.x, 150);
}];
} afterDelay:delay];
// ママ横から出てくる
delay += 1.0;
[self showScene:^{
mama = [[UIImageView alloc] initWithImage:mama1];
mama.center = CGPointMake(-150, 180);
mama.transform = CGAffineTransformMakeScale(0.8, 0.8);
[self.view addSubview:mama];
[UIView animateWithDuration:1.0 animations:^{
mama.center = CGPointMake(50, 120);
}];
} afterDelay:delay];
}
– (void)scene4
{
// ママ「このチラシ探してたのよ」
comment2.image = comment41;
comment2.center = CGPointMake(50, 150);
[self.view insertSubview:comment2 aboveSubview:mama];
[UIView animateWithDuration:0.5 animations:^{
comment2.alpha = 1.0;
mama.center = CGPointMake(100, 120);
}];
//チラシを持ち上げる
float delay = 1.0;
[self showScene:^{
[UIView animateWithDuration:0.2 animations:^{
mama.alpha = 0;
} completion:^(BOOL finished) {
mama.image = mama2;
[mama sizeToFit];
[UIView animateWithDuration:0.1 animations:^{
mama.alpha = 1.0;
}];
}];
} afterDelay:delay];
// 色々クラッシュ
delay += 0.1;
[self showScene:^{
boku.image = boku3;
papa.image = papa3;
boku.center = CGPointMake(400, 100);
papa.center = CGPointMake(400, 200);
[UIView animateWithDuration:0.1 animations:^{
papaboku.alpha = 0;
brick.alpha = 0;
} completion:^(BOOL finished) {
brick.image = brick4;
[brick sizeToFit];
[UIView animateWithDuration:0.1 animations:^{
boku.alpha = 1.0;
papa.alpha = 1.0;
brick.alpha = 1.0;
}];
}];
} afterDelay:delay];
delay += 0.2;
[self showScene:^{
[UIView animateWithDuration:0.5 animations:^{
brick.center = CGPointMake(brick.center.x, brick.center.y – 100);
boku.center = CGPointMake(320, 60);
} completion:^(BOOL finished) {
[UIView animateWithDuration:2.0 animations:^{
brick.center = CGPointMake(brick.center.x, brick.center.y + 300);
boku.center = CGPointMake(270, 140);
boku.transform = CGAffineTransformRotate(boku.transform, M_PI);
papa.center = CGPointMake(papa.center.x + 100, papa.center.y + 100);
}];
}];
} afterDelay:delay];
}
#pragma – mark TLR Create Helper
– (void)showScene:(void (^)(void))block afterDelay:(NSTimeInterval)delay
{
[self performSelector:@selector(executeBlock:) withObject:block afterDelay:delay];
}
– (void)executeBlock:(void (^)(void))block
{
block();
}
– (UILabel*)createWord:(NSString*)word size:(int)size
{
UILabel *label = [[UILabel alloc] init];
label.font = [UIFont fontWithName:@”Chalkduster” size:30];
label.text = word;
label.backgroundColor = [UIColor clearColor];
[label sizeToFit];
return label;
}
– (void)crateOpening
{
startView = [self createWord:@” Start \n\n Tokyo Little Rocket\n 02″ size:30];
startView.numberOfLines = 0;
startView.textColor = [UIColor whiteColor];
startView.frame = CGRectMake(0, 0, 500, 320);
startView.backgroundColor = [UIColor blackColor];
[self.view addSubview:startView];
}
#pragma – mark etc
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end