さて、だいぶ波にのってきたかな。
そうでもない。
だって画像二つつくって行き来できるようにしただけ。
でも今日はもうちょっとだけこの辺りにお付き合いください。
では今日は、ちょっと見た目をカッコよくしたいと思います。
一応ゲームですしねヽ(ﾟ◇ﾟ )ﾉ
以下がやっていくことです。
・タイトル画面のボタンの見た目をかっこよく
・ヘルプ画面のボタンの見た目をかっこよく
・タイトル画面のボタンを押した時の見た目をかっこよく
・やる気が持続すれば、サウンドをつけてみる
では始めていきたいとおもいます。
今のタイトル画面がこれでしたね。
「How To Play」ボタンを自分で作った画像のボタンと入れ替えたいと思います。
はい、これが用意したボタンの画像、適当に作りました。
名前は「btn_help.png」で、大きさは 適当 です。
別に大きさはなんでもいいんですよー。
前みたいに画像をプロジェクトに取り込んでください。
これは何回もやってますね。
はい、追加ができたら保存を忘れずにやって、GamePPoiViewController.xibをInterfaceBuilderで開きます。
そうしたら、真ん中の「How To Play」ボタンを選択し、
↓のボタンの設定画面をいじくります。（こんな画面がなければ、メニューのToolsからからInspectorです。）
TypeをCustomにして、Imageを今追加した「btn_help.png」を選択します。
Titleの中身も消しておきましょう。
はいそうすると、
o(^-^)o大きさは適当に調節しましょう。小さすぎると押せなくなります(-。－；)
次は、ヘルプ画面の方のボタンをいじくりましょう。
こっちは少し別のアクションもつけてみましょう。
それは、ボタンを押している時の画像を切り替えてみるというものです。
結構簡単なので。
まず、画像を二つ用意します。
もちろん、普通の時用と押された時用の二つです。
↓普通の時用「btn_back.png」
↓押された時用「btn_back_pressed.png」
これも同じ様にプロジェクトに追加した保存します。
ではではこれも同じようにInterfaceBuilderで設定をしてみます。
ヘルプ画面は「HelpViewController.xib」でした。
では設定します。
方法は先ほどの「HowToPlay」で設定したのと、画像の選択以外は同じです。
次にボタンが押されている時は別の画像を表示する方法がこれです。
↓みたいに、Highlighted State Configuration を選択して、そのImageから、
押された時用の画像を設定すれば終わりです。
ではでは、保存して実行してみましょう！
↓起動したところ
↓How To Play を押して画面が切り替わったところ
↓Backを押してもとのタイトル画面へ戻ろうとしているところ
どうですかねーー？
今回もプログラムなしで、いろいろな設定で見た目が変更できることがわかりましたー(^-^)/
今日は力尽きたので、また今度です！
ランキングに参加しています。下のクリックお願いしますー(*ﾟｰﾟ*)
そうでもない。
だって画像二つつくって行き来できるようにしただけ。
でも今日はもうちょっとだけこの辺りにお付き合いください。
では今日は、ちょっと見た目をカッコよくしたいと思います。
一応ゲームですしねヽ(ﾟ◇ﾟ )ﾉ
以下がやっていくことです。
・タイトル画面のボタンの見た目をかっこよく
・ヘルプ画面のボタンの見た目をかっこよく
・タイトル画面のボタンを押した時の見た目をかっこよく
・やる気が持続すれば、サウンドをつけてみる
では始めていきたいとおもいます。
今のタイトル画面がこれでしたね。
「How To Play」ボタンを自分で作った画像のボタンと入れ替えたいと思います。
はい、これが用意したボタンの画像、適当に作りました。
名前は「btn_help.png」で、大きさは 適当 です。
別に大きさはなんでもいいんですよー。
前みたいに画像をプロジェクトに取り込んでください。
これは何回もやってますね。
はい、追加ができたら保存を忘れずにやって、GamePPoiViewController.xibをInterfaceBuilderで開きます。
そうしたら、真ん中の「How To Play」ボタンを選択し、
↓のボタンの設定画面をいじくります。（こんな画面がなければ、メニューのToolsからからInspectorです。）
TypeをCustomにして、Imageを今追加した「btn_help.png」を選択します。
Titleの中身も消しておきましょう。
はいそうすると、
o(^-^)o大きさは適当に調節しましょう。小さすぎると押せなくなります(-。－；)
次は、ヘルプ画面の方のボタンをいじくりましょう。
こっちは少し別のアクションもつけてみましょう。
それは、ボタンを押している時の画像を切り替えてみるというものです。
結構簡単なので。
まず、画像を二つ用意します。
もちろん、普通の時用と押された時用の二つです。
↓普通の時用「btn_back.png」
↓押された時用「btn_back_pressed.png」
これも同じ様にプロジェクトに追加した保存します。
ではではこれも同じようにInterfaceBuilderで設定をしてみます。
ヘルプ画面は「HelpViewController.xib」でした。
では設定します。
方法は先ほどの「HowToPlay」で設定したのと、画像の選択以外は同じです。
次にボタンが押されている時は別の画像を表示する方法がこれです。
↓みたいに、Highlighted State Configuration を選択して、そのImageから、
押された時用の画像を設定すれば終わりです。
ではでは、保存して実行してみましょう！
↓起動したところ
↓How To Play を押して画面が切り替わったところ
↓Backを押してもとのタイトル画面へ戻ろうとしているところ
どうですかねーー？
今回もプログラムなしで、いろいろな設定で見た目が変更できることがわかりましたー(^-^)/
今日は力尽きたので、また今度です！
ランキングに参加しています。下のクリックお願いしますー(*ﾟｰﾟ*)