東京リトルロケット(Tokyo Little Rocket)は
４コマ漫画をプログラムで動かそうという企画です。
第一回目は、
「ママの絵を描いている子供」
をテーマにしてみました。
元絵はこちら。
４コマ：ナカイ 作
プログラム：水島 作
ポイント
シーンごとに何秒から始めるかをこんな感じのメソッドで
// タイマー
– (void)showScene:(void (^)(void))block afterDelay:(NSTimeInterval)delay
{
[self performSelector:@selector(executeBlock:) withObject:block afterDelay:delay];
}
– (void)executeBlock:(void (^)(void))block {
block();
}
サンプルコード
#import “ViewController.h”
@interface ViewController () {
UIImage *papa1, *papa2;
UIImage *boku1, *boku2;
UIImage *bokupapa1, *bokupapa2;
UIImage *mama1;
UIImage *endImage;
UIImageView *boku;
UIImageView *papa;
UIImageView *mama;
UILabel *start;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
[self loadResource];
// スタート画面
start = [self createWord:@” Start \n\n\n\n Tokyo Little Rocket\n 01″ size:30];
start.numberOfLines = 0;
start.textColor = [UIColor whiteColor];
start.frame = CGRectMake(0, 0, 320, 500);
start.backgroundColor = [UIColor blackColor];
[self.view addSubview:start];
}
– (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[self showProgram];
}
– (void)loadResource
{
boku1 = [UIImage imageNamed:@”boku1″];
boku2 = [UIImage imageNamed:@”boku2″];
bokupapa1 = [UIImage imageNamed:@”bokupapa1″];
bokupapa2 = [UIImage imageNamed:@”bokupapa2″];
papa1 = [UIImage imageNamed:@”papa1″];
papa2 = [UIImage imageNamed:@”papa2″];
mama1 = [UIImage imageNamed:@”mam1″];
endImage = [UIImage imageNamed:@”end”];
}
– (void)showProgram
{
[UIView animateWithDuration:1.0 animations:^{
start.center = CGPointMake(160, –500);
} completion:^(BOOL finished) {
[start removeFromSuperview];
}];
// シーン 1
[self showScene:^{
[self scene1];
} afterDelay:1.0];
// シーン 2
[self showScene:^{
[self scene2];
} afterDelay:2.0];
// シーン３
[self showScene:^{
[self scene3];
} afterDelay:5.0];
// シーン４
[self showScene:^{
[self scene4];
} afterDelay:9.0];
// シーンラスト
[self showScene:^{
[self sceneLast];
} afterDelay:14.0];
// end
[self showScene:^{
UILabel *finish = [self createWord:@” End \n\n\n\n Tokyo Little Rocket\n 01″ size:30];
finish.numberOfLines = 0;
finish.textColor = [UIColor whiteColor];
finish.frame = CGRectMake(0, –500, 320, 500);
finish.backgroundColor = [UIColor blackColor];
[self.view addSubview:finish];
[UIView animateWithDuration:1 animations:^{
finish.center = self.view.center;
}];
} afterDelay:18.0];
}
#pragma mark – Scene
– (void)scene1
{
// 僕がお絵描き
boku = [[UIImageView alloc] initWithImage:boku1];
boku.contentMode = UIViewContentModeScaleAspectFit;
boku.center = CGPointMake(100, 300);
[self.view addSubview:boku];
// カキカキというもじを出す
for (int i=0; i<3; i++) {
UILabel *kakikaki = [self createWord:@”かきかき…” size:20];
kakikaki.textColor = [UIColor colorWithRed:0 green:0.8 blue:0 alpha:1.0];
kakikaki.center = boku.center;
[UIView animateWithDuration:2.0 delay:0.5 * i options:UIViewAnimationCurveLinear animations:^{
[self.view addSubview:kakikaki];
kakikaki.center = CGPointMake(160, –100);
} completion:^(BOOL finished) {
[kakikaki removeFromSuperview];
}];
}
}
– (void)scene2
{
// パパ登場
papa = [[UIImageView alloc] initWithImage:papa1];
papa.contentMode = UIViewContentModeScaleAspectFit;
papa.transform = CGAffineTransformMakeScale(0.7, 0.7);
papa.center = CGPointMake(250, 200);
papa.alpha = 0.0;
[self.view addSubview:papa];
[UIView animateWithDuration:0.5 animations:^{
papa.alpha = 1.0;
}];
// 子供に話しかけ
[self showScene:^{
UILabel *what = [self createWord:@”お、なにかいてるんだ？“ size:20];
what.textColor = [UIColor colorWithRed:0 green:0 blue:0.8 alpha:1.0];
what.center = CGPointMake(120, 150);
[UIView animateWithDuration:2.0 animations:^{
[self.view addSubview:what];
what.alpha = 0.1;
} completion:^(BOOL finished) {
[what removeFromSuperview];
}];
} afterDelay:0.5];
// 子供が返事
[self showScene:^{
UILabel *sayMam = [self createWord:@”ママ!” size:30];
sayMam.textColor = [UIColor colorWithRed:0 green:0.8 blue:0 alpha:1.0];
sayMam.center = CGPointMake(60, 180);
[UIView animateWithDuration:2.0 animations:^{
[self.view addSubview:sayMam];
sayMam.alpha = 0.1;
} completion:^(BOOL finished) {
[sayMam removeFromSuperview];
}];
} afterDelay:2.0];
}
– (void)scene3
{
// パパ移動、机の隣
[UIView animateWithDuration:0.5 animations:^{
papa.alpha = 0;
} completion:^(BOOL finished) {
papa.image = papa2;
[papa sizeToFit];
papa.transform = CGAffineTransformIdentity;
papa.center = CGPointMake(220, 300);
[UIView animateWithDuration:0.5 animations:^{
papa.alpha = 1.0;
}];
}];
// パパ子供の絵に書き込み
// カキカキというもじを出す
[self showScene:^{
UILabel *kakikaki = [self createWord:@”すらすら…” size:15];
kakikaki.textColor = [UIColor colorWithRed:0 green:0 blue:0.8 alpha:1.0];
kakikaki.center = boku.center;
[UIView animateWithDuration:2.0 animations:^{
[self.view addSubview:kakikaki];
kakikaki.center = CGPointMake(360, –100);
} completion:^(BOOL finished) {
[kakikaki removeFromSuperview];
}];
} afterDelay:1];
[self showScene:^{
UILabel *papasay = [self createWord:@”ママはもっとこうだよ!!” size:20];
papasay.textColor = [UIColor colorWithRed:0 green:0 blue:0.8 alpha:1.0];
papasay.center = CGPointMake(200, 110);
papasay.transform = CGAffineTransformMakeRotation(M_PI * 0.2);
[UIView animateWithDuration:2.0 animations:^{
[self.view addSubview:papasay];
papasay.alpha = 0.1;
} completion:^(BOOL finished) {
[papasay removeFromSuperview];
}];
} afterDelay:2];
// 僕、びっくり
[self showScene:^{
[UIView animateWithDuration:0.5 animations:^{
boku.alpha = 0;
} completion:^(BOOL finished) {
boku.image = boku2;
boku.center = CGPointMake(boku.center.x, boku.center.y – 20);
boku.transform = CGAffineTransformMakeScale(0.9, 0.9);
[boku sizeToFit];
[UIView animateWithDuration:0.5 animations:^{
boku.alpha = 1.0;
}];
}];
} afterDelay:3];
}
– (void)scene4
{
// 画面にママ用の余白ができるように
// 僕とパパを移動
[UIView animateWithDuration:0.5 animations:^{
papa.alpha = 0;
boku.alpha = 0;
} completion:^(BOOL finished) {
boku.image = bokupapa1;
[boku sizeToFit];
boku.transform = CGAffineTransformMakeScale(0.7, 0.7);
boku.center = CGPointMake(220, 300);
[UIView animateWithDuration:0.5 animations:^{
boku.alpha = 1.0;
}];
}];
// ママ登場
mama = [[UIImageView alloc] initWithImage:mama1];
mama.alpha = 0;
mama.transform = CGAffineTransformMakeScale(0.7, 0.7);
[self.view addSubview:mama];
[self showScene:^{
[UIView animateWithDuration:0.5 animations:^{
mama.alpha = 1.0;
}];
} afterDelay:1];
// 机をのぞく
[self showScene:^{
[UIView animateWithDuration:0.5 animations:^{
mama.alpha = 0;
} completion:^(BOOL finished) {
mama.center = CGPointMake(mama.center.x, mama.center.y + 100);
mama.transform = CGAffineTransformMakeScale(0.9, 0.9);
[UIView animateWithDuration:0.5 animations:^{
mama.alpha = 1;
}];
}];
[self showScene:^{
UILabel *mamsay = [self createWord:@”?” size:60];
mamsay.textColor = [UIColor colorWithRed:0.7 green:0 blue:0 alpha:1.0];
mamsay.center = CGPointMake(80, 100);
mamsay.transform = CGAffineTransformMakeRotation(M_PI * 0.2);
[UIView animateWithDuration:2.0 animations:^{
[self.view addSubview:mamsay];
mamsay.alpha = 0.1;
} completion:^(BOOL finished) {
[mamsay removeFromSuperview];
}];
} afterDelay:1];
} afterDelay:1.5];
// びくっ とする
[self showScene:^{
[UIView animateWithDuration:0.5 animations:^{
boku.alpha = 0;
} completion:^(BOOL finished) {
boku.image = bokupapa2;
[boku sizeToFit];
[UIView animateWithDuration:0.1 animations:^{
boku.alpha = 1.0;
boku.transform = CGAffineTransformTranslate(boku.transform, 0, 20);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.1 animations:^{
boku.transform = CGAffineTransformTranslate(boku.transform, 0, –20);
}];
}];
}];
} afterDelay:3];
[self showScene:^{
UILabel *what = [self createWord:@”!$*#@$？“ size:35];
what.textColor = [UIColor colorWithRed:0 green:0 blue:0.8 alpha:1.0];
what.center = CGPointMake(220, 250);
[UIView animateWithDuration:2.0 animations:^{
[self.view addSubview:what];
what.center = CGPointMake(160, –200);
what.transform = CGAffineTransformMakeScale(2.0, 2.0);
what.alpha = 0.1;
} completion:^(BOOL finished) {
[what removeFromSuperview];
}];
} afterDelay:3.5];
}
– (void)sceneLast
{
// ママ絵をとって、パパ逃げる
[UIView animateWithDuration:1.0 animations:^{
mama.alpha = 0;
boku.alpha = 0;
} completion:^(BOOL finished) {
boku.image = endImage;
[boku sizeToFit];
boku.center = CGPointMake(160, 300);
[UIView animateWithDuration:1.0 animations:^{
boku.alpha = 1.0;
}];
}];
[self showScene:^{
UILabel *mamsay = [self createWord:@”上手じゃない。\n怪獣かしら“ size:30];
mamsay.numberOfLines = 0;
[mamsay sizeToFit];
mamsay.textColor = [UIColor colorWithRed:0.7 green:0 blue:0 alpha:1.0];
mamsay.center = CGPointMake(180, 100);
mamsay.transform = CGAffineTransformMakeRotation(M_PI * –0.1);
[UIView animateWithDuration:3.0 animations:^{
[self.view addSubview:mamsay];
mamsay.alpha = 0.4;
} completion:^(BOOL finished) {
[mamsay removeFromSuperview];
}];
} afterDelay:1.0];
}
#pragma mark – Common
// タイマー
– (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 boldSystemFontOfSize:size];
label.text = word;
label.backgroundColor = [UIColor clearColor];
[label sizeToFit];
return label;
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end