プロフィール

カイロプラクター てん

Author:カイロプラクター てん


【趣味】
・自転車に乗って
 ヘロヘロになる事。
・カイロプラクティックで
 人を元気にする事。

カレンダー
12 | 2013/01 | 02
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
作ったiOS App

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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

使用するアイコンはこれ
gu.pngtyo.pngpa.png
again.png

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

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

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

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

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

こんな感じ
1301055.png
こぶしがいい感じ♪
文字がじゃまですけど・・・。

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

よし!シミュレータ Run!
1301056.png
文字とアイコンが間違っていいない事を確認

しかし・・。
相手が文字だと・・・。
よし、ここにもグラフィックを追加だ!
「Objects」から「Image View」を選んで、相手の上あたりにドロップ
サイズを「Width:90 / Height:90」に変更
1301057.png
そして、連携!
1301058.png
Nameは「View_aite」でConnectをクリック
連携完了。

さて、ここに「ぐー」「ちょき」「ぱー」のアイコンを表示させるには



結構、めんどくさい。

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

次は、宣言した変数にアイコンのファイル名を入力。
ViewController.hの- (void)viewDidLoadの所に
1301060.png
これで、アイコンを自由に使えるぞ!
と、言っても地道な作業が・・・。

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

よし!シミュレータ Run!
1301062.png
あら!
相手が表示したままだ。

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

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

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

シミュレータ Run!
1301065.png

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

使用するアイコンはこれ
サイズは、100×100
kati.png
aiko.png
make.png

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

ViewController.m
1301068.png

これで宣言が終わり!

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

うぅ〜ん!
こうなったら!
バックグラウンドも変更
「Image View」をドロップ
全体いっぱいに広げて
このままでは、表示がこのImageViewだけになってしまうので
ここの部分で移動して、表示順番を一番したにするんだけど、上に移動・・・。
なんか、ややこしいぃ〜。
1301071.png
このViewは連携なし
Imageに、これを「bg01.png」適用して
bg01.png
「じゃんけん・・・」のLabel文字を白色に変更して
「bg01.png」に合うように位置関係もを修正して
グラフィックと文字「ぐー」「ちょき」「ぱー」「もういっかい」を削除(空白)
これで、よし!

シミュレータ Run!
1301072.png

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

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


-* じゃんけんゲーム まとめ *-
1.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#1」
2.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#2」
3.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#3」
4.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#4」
5.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#5」
スポンサーサイト
THEME:プログラミング | GENRE:コンピュータ |
 
検索フォーム
QRコード
QRコード
ブロとも申請フォーム
FC2カウンター
ビリリティピルズ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。