2012/10/07

ゲームをアプリ化する(iOS編 その1)インストールとアプリ化


*本記事は、古い情報の可能性があります。
最新版のphonegap3.3に対応した解説記事があります。
>>【2004年度版】phonegapでアプリ化する (ios編)


この章では、ビジュアルノベルスタジオで作成したゲームを、iphoneアプリ用のゲームにする方法を解説していきます。

Android向けは こちらへ

まず、iphoneアプリ化するのに、必要なものとして

Mac パソコン
うん。Windowsじゃあ、iphoneアプリが作れないんだ…。MacBook等手に入れよう。もしくは借りよう!

これさえあれば、後は以下の手順で作っていくだけです。
それでは、制作をはじめていきましょう。


Xcodeをインストール

まずは、マックに最新版のXcodeをインストールする必要があります。
Xcodeとは、マックでソフトウェア開発をするためのソフトウェアです。
まず、AppStoreを開いて、「xcode」と検索してください




Xcodeという開発ツールが表示されましたね。
あとは、手順に沿ってインストールを完了してください



phoneGapのインストール


つぎに、phoneGapというツールをインストールします。
以下のサイトからphoneGapの本体をダウンロードしてください。


画面右上のダウンロードをクリック

2012年10月現在の最新版は2.1.0です。
2.1.0をベースに解説していきます。

【重要】
必ず最新版のXcode・Cordovaを適用しましょう。





ダウンロードしたファイルを解凍してください。

解凍したフォルダの中にある、lib/ios フォルダを開いてください。

その中にあるbinフォルダがあるのが確認できましたね。

そのbinフォルダをDockにある、Terminal.appのアイコンへドラッグ&ドロップします。




何か、文字が表示される画面が開いたと思います。




そうしたら、このウィンドウにで、以下の用に入力してエンターを押してください。
これは、MyProjectという名前で、新しくプロジェクトを作成しているという意味です。
好きな名前に変更しても大丈夫です。

./create MyProject com.tyrano.myproject MyProject




静かに終了していれば成功です。

先ほどドラッグ&ドロップしたbinフォルダの中を見てください。

MyProject というフォルダができていますね。

このMyProjectというフォルダの中は以下のようになっています。




つぎにこの中の www フォルダの中に、作成した、ゲームフォルダをまるごと上書きコピーします。





それでは、このフォルダのMyProject.xcodeproj というファイルをダブルクリックしてXcodeを起動してください。



Xcodeが起動したら、左側のMyProjectという箇所を選択肢、プロジェクトの基本設定を確認します。

まず、画面左上の部分が MyProject > iphone5.1 Simulator となっている事を確認してください。
(ここをipadなどに変更することで各々の端末で動作をシュミレーションテストできます)


次に、画面真ん中の Supported Deivice Orientations の部分横向きのアイコン2つを選択状態にします。

これは、アプリの向きを決めるもので、どの持ち方でゲームをプレイできるかによって選択します。





つぎに、追加した、www/index.html を開いて編集できるようにしてください。

最初の、タイトル部分の直下に以下の赤字を追加してください


<title>Loading TyranoScript</title>
<script type="text/javascript" src="cordova-2.1.0.js"></script>



設定が完了したら、画面左端のRun ボタンをクリックしてください。



シュミレーターが起動して、ゲームが遊べましたね。

さらに、フルスクリーンにしたい場合(電池残量や時計を表示したくない場合)
Resources / MyProject.info.plist を開いて

Status bar is initially hidden という項目を追加、値をYES にしてください。



これで、全画面表示のゲームになります。


その他、アプリのアイコンや起動画面なども自由に設定できます。

お疲れ様でした。

【追記 2012/12/12】
最新版のCordova2.2.0 + Xcode4.4.1 の際、シュミレーター上で音が鳴らないという現象の報告を頂いております。実機では問題なく再生されます。

おそらく、PhoneGapのバグのような気もするので、現象が発生する方はご連絡いただけると嬉しいです。