はじめてのiOSアプリ開発

タイトル画面を作ってみよう

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Storyboardを使って、ゲームのタイトル画面を追加します。
講師:
08:23

字幕

このレッスンではゲームのタイトル画面を 追加していきます ここまでのレッスンの中で ゲームの大体の実装は完了しましたので さらにここにタイトル画面を 追加していきます タイトル画面を作成するのは 「main.storyboard」という ファイルの中になりますので ここで作業を行っていきます 現在このmain.storyboardの中に このように黒いビューが表示されていますが この黒いビューの中で先ほどまで書いていた ゲームシーンが動作しています そしてこのゲームビューコントローラは このままおいておいて 右の方にまずユーティリティ領域を 表示させたいので Xcode の右上にある ユーティリティ領域の表示ボタンを 一度押して ユーティリティ領域を出します そしてゲームの中に 新しい画面を追加するために ここにビューコントローラを 作成する部品がありますので このビューコントローラの部品を 左側にドラッグ&ドロップし このように新しく一つ追加します 追加したらこの画面がまず 白い画面になっていますので 分かりやすいように全体の背景を 青くしておきたいと思います このゲームの画面の真ん中辺りを 一度クリックして Attribute Inspector を表示させると バックグラウンドカラーが白になっている ということが分かりますので この白い所をちょっと色々な色を使って 例えば青のこういう色だとか こういう色だとか こういう色だとか こんな感じにしてみたいと思います 今回「バルーンキャッチ」という 風船のゲームですので ちょっと明るめの青にしてみたいと思います では さらにここにラベルを使って タイトルを表示しましょう ということで部品の中から ラベルをドラッグ&ドロップで追加して このラベルのカラーを白にしておきます はい 白にしました そしてフォントもカスタムに変えて フォントのファミリーで 「マーカーフェルト」というのが手書きのような ゲームっぽい感じになるかと思いますので 「マーカーフェルト」の「ワイド」を使って ちょっと大きめの 60 ポイントぐらいの サイズにしておきます そしてここにゲームのタイトルとして 「Balloon Catch」とゲームのタイトルを入力します ちょっと大き過ぎでしょうか? 60 ではなくて 50 くらいにしておきましょうか そして真ん中寄せにしておきたいと思います これで「Balloon Catch」の タイトル画面ができました では最後ここにゲーム画面を 表示するためのボタンを追加します ラベルの横にボタンがありますので ボタンをドラッグ&ドロップで ここに追加して ちょっと青い文字になっているので 見えにくいので まずテキストカラーを Attribute Inspector の テキストカラーの所から 白を選ぶように変更します そしてフォントを もう少し太いフォントにするということで 今回「システムボールド」を選択して サイズを上げておきましょう ここのフォントは何でも構いませんので 好きにいじってみてください そしてボタンのタイトルを「ゲーム開始」と書きます そしてこれでサイズを調整しながら まずこの「Balloon Catch」が 真ん中にレイアウトされるように 調整したいと思います レイアウトの調整は このレイアウトの調整ボタン ピンボタンから width と height と固定する というのをまず追加します そして一番下の「Add Constraints」の ボタンを押して このレイアウトを確定させて そしてその横にある Align ボタンから 「Horizontal Center in Container」という 下の横方向の中央に寄せる というレイアウトと そして「Vertical Center in Container」という 縦方向の中央揃えと このふたつをチェックしておいて そしてこの「Add Constraints」の ボタンを押して このレイアウトを確定させます そして最後 このゲーム開始ボタンを まずピンボタンを押して 上にある「Balloon Catch」のラベルから 18 ピクセル離れているということと そしてボタンの width と height を 固定することをチェックし まずこの3つのレイアウトを追加 そして最後 横方向真ん中に 表示されるために Align のボタンから 「Horizontal Center in Container」をチェックし 横方向中央に配置されるようにします これでレイアウトが完成しましたので 最後に「ゲーム開始」ボタンが押された時に このゲームのメインのプレイ画面が 表示されるようにします 「ゲーム開始」ボタンを右クリック あるいはコントロールキーを押しながら 左クリックして ボタンを離さずにそのまま このゲーム画面の上に持っていきます そして離した時に出てくるメニューの中から 上から3つめの「Present Modally」を選択します そうするとこのように このゲーム画面とゲーム画面の間をつなぐ 「Segue」と呼ばれる矢印が表示されます この真ん中に表示される Segue を選択すると この Attribute Inspector の中から 「Transition」というのを使って このゲーム開始ボタンが押された後に どういうアニメーションを付けて 次の画面に行くかということを指定できます ここでは「Flip Horizontal」というのを 選択して 横方向にくるっと回転するように しておきたいと思います それでは これでゲーム開始のボタンが 押されたときの動作が実装できましたので 最後この「Balloon Catch」の タイトル画面の上の方にある タイトルバーを一度クリックして このゲームのタイトル画面が 一番最初に表示されるように しておきたいと思います 一番最初に表示されるようにするためには この Attribute Inspector の中から ビューコントローラの 「is Initial View Controller」を チェックすることによって これでこのタイトル画面が一番最初に 表示されるようになります 一番最初に表示されるということは ここにこの矢印が 表示されていることからもわかります ではこれで実装は完了しましたので アプリケーションを実行してみたいと思います では 実行ボタンを押します そうすると このようにアプリケーションの タイトル画面がまず表示されるようになりました では ここでゲーム開始ボタンを押しましょう ゲーム開始ボタンを押します そうするとゲーム画面が表示されて 風船が出てきますので がんばって風船を割る そうすると こうして1、2、3、4、5、6 と カウントが進んでいき 最後ゲームの結果が 画面に残るというかたちになりました このレッスンではストーリーボードを使って ゲームのタイトル画面を 追加する方法を説明しました

はじめてのiOSアプリ開発

このコースではXcodeを使ったiOS用アプリの開発に必要な基礎知識を学びます。Xcodeの基本的な使い方から本格的なゲーム制作のためのSprite Kitを用いた制作方法まで、カウントダウンタイマーやスピード暗算ゲームなど3つの簡単なiOS用アプリを作りながら説明します。このコースを見れば、本当に必要なアプリ開発の知識を着実に身に付けられるでしょう!

5時間55分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。