iPhoneアプリをまねして作ってみよう！「じゃんけんゲーム#5」

今回は、見た目をよくしまぁ〜す。

使用するアイコンはこれ



このアイコンファイルを、Xcodeのここ「Supporting Files」にドラッグ＆ドロップ
まずは、「gu.png」をドロップ！



おっ！
ウィンドウが出た!
迷わず「Finish」をクリック
「gu.png」が追加された。


同じ要領で、「tyo.png」「pa.png」「again.png」を追加

次は、追加したグラフィックをButtonに適用。
「ぐー」Buttonをクリックして、右側のViewの「Attributes...」を選んで
Background「gu.png」を選択
Type「Custom」を選択


同じViewの「Size...」を選んで
アイコンのサイズと同じ「Width:90」「Height:90」に変更。


こんな感じ

こぶしがいい感じ♪
文字がじゃまですけど・・・。

同じ要領で、「ちょき」「ぱー」を
「もういっかい」は、サイズだけ「Width:160」「Height:80」

よし！シミュレータ　Run！

文字とアイコンが間違っていいない事を確認

しかし・・。
相手が文字だと・・・。
よし、ここにもグラフィックを追加だ！
「Objects」から「Image View」を選んで、相手の上あたりにドロップ
サイズを「Width:90 / Height:90」に変更

そして、連携！

Nameは「View_aite」でConnectをクリック
連携完了。

さて、ここに「ぐー」「ちょき」「ぱー」のアイコンを表示させるには
と
・
・
結構、めんどくさい。

まずは、変数を宣言
ViewController.hのここに
gu_img、tyo_img、pa_imgを宣言


次は、宣言した変数にアイコンのファイル名を入力。
ViewController.hの- (void)viewDidLoadの所に

これで、アイコンを自由に使えるぞ！
と、言っても地道な作業が・・・。

まずは、「ぐー」の所をプログラム追加していきます。
lbl_aiteが
「ぐー」の時は　gu_img
「ちょき」の時は　tyo_img
「ぱー」の時は　pa_img


よし！シミュレータ　Run！

あら！
相手が表示したままだ。

修正、修正
「もういっかい」Buttonを押した時に「相手」を消して


「ぐー」Buttonを押した時に「相手」を再表示と


「ちょき」「ぱー」も同じ要領で追加。
コピペで対応！

シミュレータ　Run！


う〜ん、勝ち負けもグラフィック表示にしたくなった。
同じように ImageViewを追加して
Nameは「view_kekka」


使用するアイコンはこれ
サイズは、100×100




「相手」と同じ要領で
変数宣言！
ViewController.h


ViewController.m


これで宣言が終わり！

まずは「ぐー」
「相手」の時と同じ要領で



うぅ〜ん！
こうなったら！
バックグラウンドも変更
「Image View」をドロップ
全体いっぱいに広げて
このままでは、表示がこのImageViewだけになってしまうので
ここの部分で移動して、表示順番を一番したにするんだけど、上に移動・・・。
なんか、ややこしいぃ〜。

このViewは連携なし
Imageに、これを「bg01.png」適用して

「じゃんけん・・・」のLabel文字を白色に変更して
「bg01.png」に合うように位置関係もを修正して
グラフィックと文字「ぐー」「ちょき」「ぱー」「もういっかい」を削除（空白）
これで、よし！

シミュレータ　Run！


おぉ〜、いい感じだ！
しかし、プログラミングよりアイコンのデータ作りに時間がかかったなぁ〜

これで、じゃんけんゲーム作りおわりで〜す。


-* じゃんけんゲーム　まとめ *-
1.iPhoneアプリをまねして作ってみよう！「じゃんけんゲーム#1」
2.iPhoneアプリをまねして作ってみよう！「じゃんけんゲーム#2」
3.iPhoneアプリをまねして作ってみよう！「じゃんけんゲーム#3」
4.iPhoneアプリをまねして作ってみよう！「じゃんけんゲーム#4」
5.iPhoneアプリをまねして作ってみよう！「じゃんけんゲーム#5」