すこし本格的なゲームアプリ開発（１１）・・ゲーム画面の作成１

さて、では元気に画面を作っていきましょうo(^-^)o

前回用意した二つの画像を使います。

作りたいけど持ってないよ。という方は前回のブログから持っていってください。
そのためにオリジナルの大きさでアップしてましたので(o^-')b

その際「いただきました！」と一言コメントいただければ幸いです！


まず、ゲーム画面を表示するビューを追加しましょう。
いつもやってたこれです。





では、この次の画面のファイル名のところに、「PlayViewController.m」と入力し、ファイルを追加します。



次に、ゲーム画面は横向きなのでこれも今までと同じで「PlayViewController.m」の内容を以下の様にします。
前と同じなので「HelpViewController.m」からコピってきてやりました。

わからん！という方はこの回がそうですのでご参考に。。

では、このPlayViewControllerに前回作成した画像を設定してみましょう。

まず、プロジェクトにこの回でやったみたいに画像を取り込みましょう。
画像の名前は、「stage_front.png」と「stage_back.png」です。

「stage_front.png」のほうが、透明の窓があって、スコアと時間が表示される画像で、
「stage_back.png」がマスが並んだ画像です。

追加するとこんな感じになります。

あ、ちなみにxibファイルは見やすくするためにドラッグしてこの「resource」フォルダに移動しました。
この時は表示されてないですけどPlayViewController.xibもこの後移動しました。
お好みでどうそ。

それでは、PlayViewController.xibをダブルクリックしてInterfaceBuilderを開きます。

まず最初にやること、
　Viewの右上のマークを押して回転させて横にする。
　ステータスバーを消す。
　サイズを４８０×３２０にする。
ですね。これも全部この回でやりました(＾ε＾)

次にImageViewを２回Viewにドラッグして貼付けてます。するとこんな感じです。

２個貼り付きましたね。
Imageの選択リストから、用意した二つの画像をそれぞれに設定しましょう。


こんな感じになるので、ちっちゃい方の画像を画面いっぱいにサイズを合わしてあげます。

それと、「stage_front.png」を選択している状態で設定ウインドウの項目の「Opaque」チェックボックスを外しておいてください。
画像の四角く囲っているところです。
ちなみにチェックボックスつけたまま画像を作ってしまったので、チェックがついてます(ﾉ_･｡)

もしここで、マスの画像しか見えないという場合は、透明窓のある画像より手前にマスの画像のがあるからなので、下みたいにファイルの順番をドラックで移動します。
上が「back」で、下が「front」の画像です。


どうでしょう？こんな感じになるかと思いますo(^-^)o



できたら、将来動かすであろう得点と時間のラベルを追加します(＾ε＾)


フォントと文字の大きさを適当に変えます(＾ε＾)


なんとなくプレイ画面ができましたね。

今日はここまでです！

次回は、追加した画面やラベルを操作できる様にアウトレットを追加して接続していきたいと思います。

ランキングに参加しています。下のクリックお願いしますー(*ﾟｰﾟ*)

すこし本格的なゲームアプリ開発（１０）・・ゲーム画面の準備

はいこんにちは。

前回の冒頭で↓をやりますといいましたが、１番目と２番目だけをやりました。

　・タイトル画面のボタンの見た目をかっこよく
　・ヘルプ画面のボタンの見た目をかっこよく
　・タイトル画面のボタンを押した時の見た目をかっこよく
　・やる気が持続すれば、サウンドをつけてみる

３、４番目は別に絶対やらないどイケナイっていうわけではないので、
また後々、ということにしておきますヽ(;´ω｀)ノ
ゲームは見た目の大事なんですけどもね。。

どんなゲームを作っていくかというと、この回。で紹介しましたね。

ズーキーパーみたいなのです。

これがズーキーパーの画像


イメージ的にはこんなかんじです。

まず、画面用の画像を用意しなければなりません。

このような二つの画像を用意しました。






何かというと、これを重ね合わせてゲーム画面にします。

両方とも480×320です。オリジナルの大きさでアップしました。

上の画像の白い四角い部分は透明（透過率100％)です。PNG画像は透明も設定できるんです。

重ね合わせるイメージはこんな感じ↓




あと、ここにパズルに使うパネルを配置してゲームをプレイします。

得点や、時間も表示したいので、その部分もあらかじめ画像の一部としています。
あとに上からラベルを配置してらいいですもんね。

そこで、大事なのはこの画像のマスの大きさや場所などです。

これは細かく決めておく必要があります。

なんでかっと言うと、後からパネルを置いておくとき、
プログラミングで場所をドット単位指定して作っていきます。
その時この画像のマスの大きさや場所がズレてると、全部ずれてきてしまいます(ﾉ_･｡)



こんな感じになります。
わかりづらいですね。
簡単に文で言うと、
　・線は１px
　・マスは４２pxの正方形
　・左上の線までの余白の幅は、３７px
　・左上の線までの余白の高さは、３１px
　・これを縦横６マスきれいに敷き詰める
　・つまり一番左上のマスの中心は横５９px、縦５３px

こんな画像を使います。

ではでは次回から、XcodeとInterfaceBuilderを使って楽しくやっていきます(・ω・)/

すこし本格的なゲームアプリ開発（９）・・見た目をよくしよう

さて、だいぶ波にのってきたかな。

そうでもない。

だって画像二つつくって行き来できるようにしただけ。

でも今日はもうちょっとだけこの辺りにお付き合いください。

では今日は、ちょっと見た目をカッコよくしたいと思います。

一応ゲームですしねヽ(ﾟ◇ﾟ )ﾉ

以下がやっていくことです。

　・タイトル画面のボタンの見た目をかっこよく
　・ヘルプ画面のボタンの見た目をかっこよく
　・タイトル画面のボタンを押した時の見た目をかっこよく
　・やる気が持続すれば、サウンドをつけてみる

では始めていきたいとおもいます。
今のタイトル画面がこれでしたね。

「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を押してもとのタイトル画面へ戻ろうとしているところ


どうですかねーー？


今回もプログラムなしで、いろいろな設定で見た目が変更できることがわかりましたー(^-^)/

今日は力尽きたので、また今度です！



ランキングに参加しています。下のクリックお願いしますー(*ﾟｰﾟ*)