こんにちわ。
外は桜が満開ですが、今日も元気にやっていきましょうp(^-^)q
前回はタイトル画面からプレイ画面へ画面遷移したところで終わりましたね。
ではプレイ画面に表示するパネルを用意しましょう。
以下のファイルを用意しました。
原寸大で掲載してます。大きさは４２×４２ピクセルです。
左から「panel-0.png」～「panel-4.png」の５種類です。
これはいつも見たいにプロジェクトに追加しましょ。
このパネルを操作してゲームを進めていく予定。
ここでこのパネルですが、移動したり消えたりと、様々なアニメーションをつけて
動かしたいと企んでおります(￣▽+￣*)
こういうアニメーションを高速に処理してくれる便利な共通部品？が用意されています。
このアニメーションを使うためには、
iOSで利用できるフレームワーク（共通部品）「QuartzCore」をインポートする必要があります。
インポートは以下の方法でできます(・ω・)/
まず、左のFrameworkのフォルダで右クリック → 追加 → 既存のフレームワーク
を選択します。
そしたら、こんなんがでてくるので、QuartzCore,Frameworkを選択します。
はいこれで追加できました。
で、次は実際にさっき追加したパネルを画面に表示させたいと思います。
いきなりここで新しいコトバですが、レイヤについて簡単な説明...
レイヤとはQuartzCoreでアニメーションを行う基本的な考えらしくて、
レイヤを使ってUIImageを表示すると、簡単かつ高速に変形・移動ができるようになるらしいのです。
そーなんだ。
では画面にパネルを置きますよ！(-^□^-)
プレイ画面で使用する変数などなどを宣言するため、
PlayViewController.hを編集します。
typedef enum{
PlayStateChoose, //パネルの選択という状態
PlayStateChange //パネルの交換という状態
} PlayState;
@interface PlayViewController : UIViewController {
IBOutlet UIImageView *backView;
IBOutlet UIImageView *frontView;
IBOutlet UILabel *scoreLabel;
IBOutlet UILabel *timeLabel;
PlayState state;
BOOL isFinished;
}
@end
実装するとこんな感じ↓
それでは、メソッドの内容を書くPlayViewController.mを編集しましょう。
先ほど追加したQuartzCoreは、単にプロジェクトに追加しても、コードで宣言をしないといけません。
PlayViewController.m の冒頭部分です。
赤いとこを追加しました。
#import "PlayViewController.h"
#import "QuartzCore/QuartzCore.h"
で、次に以下のコードを最後の@endの前に追加しました。
説明などは後にしてとりあえず、viewWillAppearメソッドを追加しましょう(≧▽≦)
- (void)viewWillAppear:(BOOL)animated{
srand((unsigned)time(NULL));
state = PlayStateChoose;
isFinished = NO;
for(int y=0;y<6;y++){
for(int x=0;x<6;x++){
CALayer *layer = [CALayer layer];
layer.bounds = CGRectMake(0,0,42,42);
layer.position = CGPointMake(59+(42+1)*x,53+(42+1)*y);
int dice = rand() % 5;
NSString *layerName = [NSString stringWithFormat:@"panel-%d",dice];
NSString *imageName = [layerName stringByAppendingPathExtension:@"png"];
layer.contents = (id)[UIImage imageNamed:imageName].CGImage;
layer.name = layerName;
[backView.layer addSublayer:layer];
}
}
}
実装するとこんな感じ↓
はい、分けもわからず実装しましたが、とりあえず保存して実行してみてください！
タイトル画面から、プレイ画面へ移動すると下のような画面が表示されますv(^-^)v
パネルはランダムで敷き詰めているので、全く同じじゃないとおもうけど、
なんかそれっぽい！ちょっと感動！
説明は次回にしたいと思います(*^o^*)
ランキングに参加しています。下のクリックお願いしますー(*ﾟｰﾟ*)
外は桜が満開ですが、今日も元気にやっていきましょうp(^-^)q
前回はタイトル画面からプレイ画面へ画面遷移したところで終わりましたね。
ではプレイ画面に表示するパネルを用意しましょう。
以下のファイルを用意しました。
原寸大で掲載してます。大きさは４２×４２ピクセルです。
左から「panel-0.png」～「panel-4.png」の５種類です。
これはいつも見たいにプロジェクトに追加しましょ。
このパネルを操作してゲームを進めていく予定。
ここでこのパネルですが、移動したり消えたりと、様々なアニメーションをつけて
動かしたいと企んでおります(￣▽+￣*)
こういうアニメーションを高速に処理してくれる便利な共通部品？が用意されています。
このアニメーションを使うためには、
iOSで利用できるフレームワーク（共通部品）「QuartzCore」をインポートする必要があります。
インポートは以下の方法でできます(・ω・)/
まず、左のFrameworkのフォルダで右クリック → 追加 → 既存のフレームワーク
を選択します。
そしたら、こんなんがでてくるので、QuartzCore,Frameworkを選択します。
はいこれで追加できました。
で、次は実際にさっき追加したパネルを画面に表示させたいと思います。
いきなりここで新しいコトバですが、レイヤについて簡単な説明...
レイヤとはQuartzCoreでアニメーションを行う基本的な考えらしくて、
レイヤを使ってUIImageを表示すると、簡単かつ高速に変形・移動ができるようになるらしいのです。
そーなんだ。
では画面にパネルを置きますよ！(-^□^-)
プレイ画面で使用する変数などなどを宣言するため、
PlayViewController.hを編集します。
typedef enum{
PlayStateChoose, //パネルの選択という状態
PlayStateChange //パネルの交換という状態
} PlayState;
@interface PlayViewController : UIViewController {
IBOutlet UIImageView *backView;
IBOutlet UIImageView *frontView;
IBOutlet UILabel *scoreLabel;
IBOutlet UILabel *timeLabel;
PlayState state;
BOOL isFinished;
}
@end
実装するとこんな感じ↓
それでは、メソッドの内容を書くPlayViewController.mを編集しましょう。
先ほど追加したQuartzCoreは、単にプロジェクトに追加しても、コードで宣言をしないといけません。
PlayViewController.m の冒頭部分です。
赤いとこを追加しました。
#import "PlayViewController.h"
#import "QuartzCore/QuartzCore.h"
で、次に以下のコードを最後の@endの前に追加しました。
説明などは後にしてとりあえず、viewWillAppearメソッドを追加しましょう(≧▽≦)
- (void)viewWillAppear:(BOOL)animated{
srand((unsigned)time(NULL));
state = PlayStateChoose;
isFinished = NO;
for(int y=0;y<6;y++){
for(int x=0;x<6;x++){
CALayer *layer = [CALayer layer];
layer.bounds = CGRectMake(0,0,42,42);
layer.position = CGPointMake(59+(42+1)*x,53+(42+1)*y);
int dice = rand() % 5;
NSString *layerName = [NSString stringWithFormat:@"panel-%d",dice];
NSString *imageName = [layerName stringByAppendingPathExtension:@"png"];
layer.contents = (id)[UIImage imageNamed:imageName].CGImage;
layer.name = layerName;
[backView.layer addSublayer:layer];
}
}
}
実装するとこんな感じ↓
はい、分けもわからず実装しましたが、とりあえず保存して実行してみてください！
タイトル画面から、プレイ画面へ移動すると下のような画面が表示されますv(^-^)v
パネルはランダムで敷き詰めているので、全く同じじゃないとおもうけど、
なんかそれっぽい！ちょっと感動！
説明は次回にしたいと思います(*^o^*)
ランキングに参加しています。下のクリックお願いしますー(*ﾟｰﾟ*)
