作って覚えるiPhoneとAndroidの本格ゲーム系アプリ同時開発!(開発環境)第1号[連載]

                  smilytics_img_111013_00

みさなん、初めまして。作って覚えるシリーズとして連載を考えている「smilytics」です!この場をお借りして、iPhoneとAndroidの本格ゲーム系アプリの開発についてのお話と実際にアプリを作る楽しさを味わって頂こうと考えております。

ご存知の通りスマートフォンアプリはブームです!最初スマートフォンを手に持った時には、まずアプリに飛びつくでしょう。いろいろなアプリがあり生活を便利にしてくれるツール系アプリから、楽しさに浸してくれる娯楽アプリ達を使ってきたのではないでしょうか。ただの小さな電子機器だと思いきや、色々なものに変身するスーパーマンみたいだと、感動を与えてくれたことでしょう。

さあああ!利用して楽しんだ後は、作って楽しもう!そして新しい趣味を作ろう!小さな電子機器が、自分の考えた通りに動いてくれたときの感動がそこにはあります。

この作って覚えるシリーズでは、勉強などのかたい事や最新技術を教えるのではありません。ただ作る過程の楽しさを知って頂き、次第に作り方を身に付けて頂きたいと思っております。最初は、仕事として作るのではなく、趣味として作っていけたら楽しい人生になることでしょう。

この記事をご覧頂けてるということは少なからず、ご興味がお有りなんでしょう!

・・・でしょう?!(笑)
さて前置きはこの辺にして置きまして・・・。

先に謝らして頂きます。プログラミング(C言語)を触ったことのある方対象となります。
ただ、毎号配布されるソースコードを組み合わせていけば、アプリは完成します。
※ソースコード内の値を変えるだけで、いろいろ変化する仕組みも搭載

開発の手始め

以下3つが必要条件となります。

・ C言語が理解できる方(プログラミングの流れ、変数や関数程度の知識(ポインタなど不要))
・ 開発環境 → この後、説明
・ ※ iPhoneアプリを作る方は別途Mac OS Xが搭載されるコンピュータ

まず作る内容を把握し、全体を想像する

まずは本格的なアプリを作り始める前に、いろいろ決めておきます。今回作って覚えるシリーズでやりたいこと3つがあります。
1. アプリを開発するのにできるだけ覚えることを少なくしたい。
2. iPhoneとAndroid向け両方のアプリを同時に開発をしたい。
3. 最終的には本格的なゲームアプリを作りたい。

やりたいことの問題の解決は・・・。

①の問題
iPhoneのゲームアプリを作るのには、Objective-C言語という言語を新しく覚えなければなりません。それに加えてCocoaのAPIの仕組みを勉強しなくてはなりません。さらにAndroidとなるとJava言語を覚えなくてはなりません。不意打ちをかけるように多くの開発者を混乱に招いたAndroid APIや仕組みを勉強しなければなりません。
開発環境は、簡単な仕組みを1つだけ覚えるだけで解決するものを採用したい。

②の問題
同一のアプリを何回も作るといった無駄な作業は無くし、一度プログラミングしたなら、iPhone、Android2つのアプリができるようにしたいと考えてます。
できるだけ実行確認はWindowsで行い、すぐに確認・修正ができる開発環境を採用したい。

③に関しては、開発環境の仕組みを覚えたいため、先に簡単なミニゲームを作るとしましょう。タイトルに本格ゲーム系アプリと書きました通り、慣れてきたら本格的な大きい物を作ろうと考えています。

1.ゲーム企画を決める
続いてゲーム企画!どういうミニゲームを作りましょうか。簡単なのはコレ!


出てくる番号ボタンを1から順番に押していくだけのゲームアプリです。

2.開発環境を決める
1番と2番の問題を解決するため、Wizapplyというライブラリを使用したいと思います。無償のライブラリで誰でも簡単に扱うことができる優れものです!
詳細URL:Wizapply.com

ミドルウェアのWizapplyを使う

今回、開発を行う上で以上の条件を満たした開発環境をご紹介いたします。まあ、先ほど、若干調子に乗りましたが、自分らのライブラリなんです(笑)。無償で公開しておりますで、ご自由にお使い頂ければと思います!

Wizapplyは、プログラマに下記のようなサービスを提供してくれます。

では、早速、開発を進めていきたいと思います。

Windows用の開発環境をそろえる。

1.下記のURLよりWizapplyのWindows版ダウンロードする
解凍する場所は、普段あまり触らないところが望ましい(C:\wizapplyなど)
SourceForge ダウンロードページ

Wizapply.com Windows開発用のダウンロードページ【説明】

2.Wizapplyを導入する統合開発環境(IDE)を準備する
※もう既に入ってますという方はスキップして下さい!

基本的には、VisualC++(通常VisualStudio 2005、2008、2010のいずれか)を使用します。Windowsアプリケーションを開発しているなんて人は既に導入している方、多いと思います。業務で使うものとなると高価ですが、学習用にExpress版という無償のVisualC++がダウンロードできます。何も持ってないという方は、マイクロソフトのホームページからダウンロードしインストールしよう!
VisualStduio Expressダウンロード
※ 沢山の種類がありますが、VisualC++を使用します。

VisualStduio Expressダウンロード【説明】

新規でインストールした方は、VisualC++を一度立ち上げ、自動構成を準備しておいて下さい。(必須)

3.描画に必要なDirectX,OpenGLやOpenALを準備する
Wizapplyは、描画や音の再生をダイレクト(直接)にコンピュータ制御するためDirectX、OpenGLなどと言った描画ライブラリからXAudio2やOpenALと言ったサウンドライブラリを使用しています。3Dなど標準API以上の複雑なゲーム処理が可能となっております。

DirectX(最新版を導入する)
ダウンロード先: http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=6812
※既にインストールしている方は不要
OpenAL for Windows(OpenALを使用して音を再生する場合のみ必要)
ダウンロード先: http://connect.creativelabs.com/openal/Downloads/Forms/AllItems.aspx

OpenAL for Windows(OpenALを使用して音を再生する場合のみ必要)【説明】


※OpenGLは、グラフィックチップメーカーのドライバをインストールしたときに自動でインストールされます。

4.統合開発環境(IDE)が整ったら、Wizapplyをインストール!
必ずVisualStudioなどの開発環境は全て閉じましょう!そして先ほど、ダウンロードし解凍した「wizapply_win」のフォルダを開きます。フォルダの中の「vc_install.bat」がインストーラになります。クリックして実行します!

※画像をクリックして拡大


インストールできない場合!:Windows VistaやWindows 7などのセキュリティでエラーが出る場合は、下記のような方法で試します。(管理者の権限で実行する

※画像をクリックして拡大

インストール画面(バッチファイルにて実行されます)

※画像をクリックして拡大


インストール完了と出ればOKです。

余談ではありますが、通常Wizapplyで開発を始める前にVisual Studioの新規プロジェクトからWizapplyのプロジェクトを指定して行います。(VisualC++ Express版は対応しておりません。)

※画像をクリックして拡大


Express版で対応するには、こちらの空のプロジェクトをダウンロードして始めて下さい。空のWizapplyプロジェクト:ダウンロード先

プログラミングの前に。

開発環境が整ったところで、プログラミングに移りたいと思います。まず、Wizapplyは、現在3つのライブラリによって実装されています。Sherryライブラリ、Patriciaライブラリ、Jenniferライブラリと北米の女の子の名前で表してます(笑)この子たちの役割を簡単に説明しましょう。とりあえずふ~ん的な感じで頭に入れておけば良いかもです。

Sherryライブラリ(関数接頭「sh」): 様々なプラットフォームに合わせたウィンドウ作成や描画の準備などを行います。OSのAPIを共通化します。
Patriciaライブラリ(関数接頭「pa」): オーディオ・音声を再生します。簡単にオーディオを扱うことができ、BGMのストリーミング再生なども行えます。
Jenniferライブラリ関数接頭「(jf」): ネットワーク系のプログラミングを簡潔にしてくれます。

それでは、下記の設定済みプロジェクトファイルと最小ソースコードをダウンロードして開発の準備を行います。
ダウンロード:tos_1_sample1.zip

解凍し、フォルダ内のプロジェクトファイル(project.vcproj)を開くと「main.cpp」があると思います。これを開きましょう。

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
/* main.cpp */
#include <use_sherry.h>
#include <shEntryPoint.h>

static void DrawFunc(void);

int Initialize()
{   //!初期化処理(起動後、一番最初に呼び出されます)
    shInitCreateSherry("smatcha sample",320,480,0,Direct3D9);
    shSetClear(0.1f,0.1f,0.1f,1, SH_CLS_DEFAULTSCREEN);
    shSetSpriteScSize(320, 480);

    shSetDrawThread(DrawFunc);
    return 0;
}

int Terminate()
{   //!終了処理(終了時に呼び出されます)
    shExitSherry();
   return 0;
}

void DrawFunc(void)
{   //!描画処理(最大のパフォーマンスで呼び出されます[描画機能が使えます])
    shClear();

   shFontSize(16);
   shPrintf(30,30,"sample");
}

そう!コレが最小限のソースコードになります。WindowsもMacもLinuxもiPhoneもiPadもAndroidも全部!この書き方です!

とりあえずプログラムを実行する。

とりあえず、プログラムを実行してみましょう!ソースコードに何も手を加えないで下記のように「ビルド」を行い、「デバッグなしで実行」でできます。

※画像をクリックして拡大


さあ実行!

※画像をクリックして拡大


エラー無く実行できましたでしょうか。正常に起動した場合、下記のようなウィンドウが出ると思います。

※画像をクリックして拡大


出たよ。という方、おめでとうございます。Wizapplyへようこそ!!

少しプログラミングをする。流れを知る。

一度、流れを理解するためにmain.cppに書かれてるソースコードを全て消してしまいましょう!消し終わったら、ウィンドウを作成したいので、Sherryライブラリ(通称シェリーさん)を使いたいと思います。定義するインクルードファイルは主に書き2つです。

1
2
#include <use_sherry.h>
#include <shEntryPoint.h>  //!<共通のエントリーポイントを定義

全てのOSが「int main()」で始まるとはいえないので、Wizapplyでは共通のエントリーポイントを定義してくれる「shEntryPoint.h」を使います。何言ってる分からないー(笑)。と言う方は「おまじない」と思ってくださいな。shEntryPoint.hを使うと下記2つの関数が絶対に必要になりますのでプログラマが実装してやってください。

1
2
3
4
5
6
7
8
9
10
11
int Initialize()
{
    //アプリを起動するとまずこの関数が1回だけ呼ばれます。
    return 0;
}

int Terminate()
{  
    //アプリを終了するとこの関数が最後に1回だけ呼ばれます。
    return 0;
}

これだけでは何も起こりません。続いてシェリーさんを使ってウィンドウを作成しましょう。「shInitCreateSherry」関数を使用します。最初に呼び出さないと意味がいないため、「int Initialize()」の中に書きます。

あ!実はシェリーさん一通り使ったらバイバイをしてやらなければ怒るんです。「shExitSherry」関数を使用しサヨナラを言います。これは最後に使うので「int Terminate()」の中に書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
int Initialize()
{
    //ウィンドウを作成し初期化する関数
    //   (タイトル名、幅サイズ、縦サイズ、起動設定フラグ、描画API)
    shInitCreateSherry("smatcha sample",320,480,0,OpenGL);
    return 0;
}

int Terminate()
{  
    shExitSherry();   //終了する
    return 0;
}

以上で、旧機種のiPhone 3GSの画面320×480サイズの描画可能なウィンドウが作成されます。

がっ!肝心の動作の処理を行う場所はどこだということになりますよね。
「shSetDrawThread」と言う関数を使い描画ループを自動で作ってくれる関数を呼び出します。これも「int Initialize()」の中に書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
void DrawFunc();    //プロトタイプ宣言←関数があるよと言うのを教える。
int Initialize()
{
    //ウィンドウを作成し初期化する関数
    //   (タイトル名、幅サイズ、縦サイズ、起動設定フラグ、描画API)
    shInitCreateSherry("smatcha sample",320,480,0,OpenGL);

    //自前で定義したDrawFunc関数を描画用ループ関数として使用する
    shSetDrawThread(DrawFunc);    //追加
    return 0;
}

//DrawFunc関数を自前で作る
void DrawFunc(void)
{
    shClear();   //これも追加!画面に書かれてる物を一度クリアする関数です。

    //モニタのリフレッシュレート(垂直同期)に合わせてこの関数が呼ばれます。
}

これで、描画用の自前関数「DrawFunc」を用意しました。この関数の中に描画処理のプログラミングしていきます。(リフレッシュレートってモニタによって変動するため通常固定される更新関数を用意しますが、わけが分からなくなるのでとりあえず先送りです。)続いて描画する前に描画内容の設定を行います。

ここで使いたい関数は2つ。これも「int Initialize()」の中に。

1
2
3
4
5
6
7
8
9
10
11
12
13
int Initialize()
{
    shInitCreateSherry("smatcha sample",320,480,0,OpenGL);

    //画面クリアをする時の設定をします。
    //    (色R[0.0~1.0]、色G[0.0~1.0]、色B[0.0~1.0]、色A[0.0~1.0]、クリアするビット[デフォルト])
    // 色を変えて試してみよう!真っ赤にする→(1.0f,0.0f,0.0f,1, SH_CLS_DEFAULTSCREEN)
    shSetClear(0.1f,0.1f,0.1f,1, SH_CLS_DEFAULTSCREEN);
    shSetSpriteScSize(320, 480);   //!<通常作りたい画面サイズに合わせると良い。おまじないおまじない(笑)

    shSetDrawThread(DrawFunc);
    return 0;
}

以上でアプリを作るうえで必要になるテンプレートは完成です。プログラムが呼ばれる順番はprintfで確認してみると分かりやすいと思いますが、「int Initialize()」→「DrawFunc()(ループ)」→「int Terminate()」の順番になります

デバッグ用のshPrintf関数を使って英数字を画面に出力すれば、先ほどの画面が完成すると思います。下記完成後のソースコードです。

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
/* main.cpp */
#include <use_sherry.h>
#include <shEntryPoint.h>

static void DrawFunc(void);

int Initialize()
{   //!初期化処理(起動後、一番最初に呼び出されます)
    shInitCreateSherry("smatcha sample",320,480,0,Direct3D9);
    shSetClear(0.1f,0.1f,0.1f,1, SH_CLS_DEFAULTSCREEN);
    shSetSpriteScSize(320, 480);

    shSetDrawThread(DrawFunc);
    return 0;
}

int Terminate()
{   //!終了処理(終了時に呼び出されます)
    shExitSherry();
   return 0;
}

void DrawFunc(void)
{   //!描画処理(最大のパフォーマンスで呼び出されます[描画機能が使えます])
    shClear();

   shFontSize(16);
   // printf関数と同じで(現在、英数字のみ対応)
   //  (X座標、Y座標、描画文字[%s%dなども対応])
   shPrintf(30,30,"smatcha sample");
}

Wizapplyには沢山の関数が用意されています。関数群の組み合わせて、これからゲームアプリを作っていきましょう!
関数リファレンス:http://wizapply.com/doc/index.php?func_refarence

Wizapply公式ドキュメント:http://wizapply.com/doc/

AndroidとiPhoneでの表示については次回やっていきます!!

第1号ソースコード提供と次回予告

ソースコード及びプロジェクト

今回作成した最小限のソースコードとプロジェクトファイル一式
ダウンロード:tos_1_sample1.zip

次回予告

今回、Wizapplyの開発環境構築と、Windowsでウィンドウを作成しましたが。
次回いよいよAndroidとiPhoneに同時に描画させる方法をやりたいと思います。このソースコードから数分でアプリが出来上がります。

筆者紹介

Wizapplyコミュニティのメイン企画・開発者及び連載記事ライター
「smilytics(スマイリティクス)」
ツイッターアカウント:@smilytics
ウェブサイト:http://smilytics.com/

Wizapply本体及び記事に関してご意見・ご感想も受け付けております。どしどしフィードバック下さい!

About the author

運営・代表者です。 よろしくです。