smilyticsTweetTweetみさなん、初めまして。作って覚えるシリーズとして連載を考えている「smilytics」です!この場をお借りして、iPhoneとAndroidの本格ゲーム系アプリの開発についてのお話と実際にアプリを作る楽しさを味わって頂こうと考えております。ご存知の通りスマートフォンアプリはブームです!最初スマートフォンを手に持った時には、まずアプリに飛びつくでしょう。いろいろなアプリがあり生活を便利にしてくれるツール系アプリから、楽しさに浸してくれる娯楽アプリ達を使ってきたのではないでしょうか。ただの小さな電子機器だと思いきや、色々なものに変身するスーパーマンみたいだと、感動を与えてくれたことでしょう。さあああ!利用して楽しんだ後は、作って楽しもう!そして新しい趣味を作ろう!小さな電子機器が、自分の考えた通りに動いてくれたときの感動がそこにはあります。この作って覚えるシリーズでは、勉強などのかたい事や最新技術を教えるのではありません。作る過程の楽しさを知って頂き、次第に作り方を身に付けて頂きたいと思っております。最初は、仕事として作るのではなく、趣味として作っていけたら楽しい人生になることでしょう。この記事をご覧頂けてるということは少なからず、ご興味がお有りなんでしょう!・・・でしょう?!(笑)さて前置きはこの辺にして置きまして・・・。先に謝らして頂きます。プログラミング(C言語)を触ったことのある方対象となります。毎号配布されるソースコードを組み合わせていけば、アプリは完成します。開発の手始め以下3つが必要条件となります。Xが搭載されるコンピュータまず作る内容を把握し、全体を想像するまずは本格的なアプリを作り始める前に、いろいろ決めておきます。今回作って覚えるシリーズでやりたいこと3つがあります。アプリを開発するのにできるだけ覚えることを少なくしたい。iPhoneとAndroid向け両方のアプリを同時に開発をしたい。最終的には本格的なゲームアプリを作りたい。やりたいことの問題の解決は・・・。1の問題iPhoneのゲームアプリを作るのには、Objective-C言語という言語を新しく覚えなければなりません。それに加えてCocoaのAPIの仕組みを勉強しなくてはなりません。AndroidとなるとJava言語を覚えなくてはなりません。APIや仕組みを勉強しなければなりません。開発環境は、簡単な仕組みを1つだけ覚えるだけで解決するものを採用したい。同一のアプリを何回も作るといった無駄な作業は無くし、一度プログラミングしたなら、iPhone、Android2つのアプリができるようにしたいと考えてます。できるだけ実行確認はWindowsで行い、すぐに確認・修正ができる開発環境を採用したい。3に関しては、開発環境の仕組みを覚えたいため、先に簡単なミニゲームを作るとしましょう。タイトルに本格ゲーム系アプリと書きました通り、慣れてきたら本格的な大きい物を作ろうと考えています。1.ゲーム企画を決める続いてゲーム企画!どういうミニゲームを作りましょうか。簡単なのはコレ!出てくる番号ボタンを1から順番に押していくだけのゲームアプリです。2.開発環境を決める1番と2番の問題を解決するため、Wizapplyというライブラリを使用したいと思います。無償のライブラリで誰でも簡単に扱うことができる優れものです!詳細URL:Wizapply.comミドルウェアのWizapplyを使う今回、開発を行う上で以上の条件を満たした開発環境をご紹介いたします。先ほど、若干調子に乗りましたが、自分らのライブラリなんです(笑)。無償で公開しておりますで、ご自由にお使い頂ければと思います!Wizapplyは、プログラマに下記のようなサービスを提供してくれます。開発を進めていきたいと思います。Windows用の開発環境をそろえる。2005、2008、2010のいずれか)を使用します。Windowsアプリケーションを開発しているなんて人は既に導入している方、多いと思います。業務で使うものとなると高価ですが、学習用にExpress版という無償のVisualC++がダウンロードできます。沢山の種類がありますが、VisualC++を使用します。新規でインストールした方は、VisualC++を一度立ち上げ、自動構成を準備しておいて下さい。(必須)3.描画に必要なDirectX,OpenGLやOpenALを準備するWizapplyは、描画や音の再生をダイレクト(直接)にコンピュータ制御するためDirectX、OpenGLなどと言った描画ライブラリからXAudio2やOpenALと言ったサウンドライブラリを使用しています。3Dなど標準API以上の複雑なゲーム処理が可能となっております。※OpenGLは、グラフィックチップメーカーのドライバをインストールしたときに自動でインストールされます。4.統合開発環境(IDE)が整ったら、Wizapplyをインストール!必ずVisualStudioなどの開発環境は全て閉じましょう!そして先ほど、ダウンロードし解凍した「wizapply_win」のフォルダを開きます。フォルダの中の「vc_install.bat」がインストーラになります。7などのセキュリティでエラーが出る場合は、下記のような方法で試します。(管理者の権限で実行する)※画像をクリックして拡大インストール画面(バッチファイルにて実行されます)※画像をクリックして拡大インストール完了と出ればOKです。Studioの新規プロジェクトからWizapplyのプロジェクトを指定して行います。Express版は対応しておりません。)※画像をクリックして拡大Express版で対応するには、こちらの空のプロジェクトをダウンロードして始めて下さい。空のWizapplyプロジェクト:ダウンロード先プログラミングの前に。開発環境が整ったところで、プログラミングに移りたいと思います。Wizapplyは、現在3つのライブラリによって実装されています。Sherryライブラリ、Patriciaライブラリ、Jenniferライブラリと北米の女の子の名前で表してます(笑)この子たちの役割を簡単に説明しましょう。ふ~ん的な感じで頭に入れておけば良いかもです。様々なプラットフォームに合わせたウィンドウ作成や描画の準備などを行います。OSのAPIを共通化します。オーディオ・音声を再生します。簡単にオーディオを扱うことができ、BGMのストリーミング再生なども行えます。ネットワーク系のプログラミングを簡潔にしてくれます。それでは、下記の設定済みプロジェクトファイルと最小ソースコードをダウンロードして開発の準備を行います。ダウンロード:tos_1_sample1.zip解凍し、フォルダ内のプロジェクトファイル(project.vcproj)を開くと「main.cpp」があると思います。//!描画処理(最大のパフォーマンスで呼び出されます[描画機能が使えます])shClear();shFontSize(16);shPrintf(30,30,"sample");}そう!コレが最小限のソースコードになります。WindowsもMacもLinuxもiPhoneもiPadもAndroidも全部!この書き方です!とりあえずプログラムを実行する。プログラムを実行してみましょう!ソースコードに何も手を加えないで下記のように「ビルド」を行い、「デバッグなしで実行」でできます。※画像をクリックして拡大さあ実行!※画像をクリックして拡大エラー無く実行できましたでしょうか。正常に起動した場合、下記のようなウィンドウが出ると思います。いう方、おめでとうございます。Wizapplyへようこそ!!少しプログラミングをする。一度、流れを理解するためにmain.cppに書かれてるソースコードを全て消してしまいましょう!消し終わったら、ウィンドウを作成したいので、Sherryライブラリ(通称シェリーさん)を使いたいと思います。定義するインクルードファイルは主に書き2つです。main()」で始まるとはいえないので、Wizapplyでは共通のエントリーポイントを定義してくれる「shEntryPoint.h」を使います。何言ってる分からないー(笑)。言う方は「おまじない」と思ってくださいな。shEntryPoint.hを使うと下記2つの関数が絶対に必要になりますのでプログラマが実装してやってください。Initialize(){//アプリを起動するとまずこの関数が1回だけ呼ばれます。Terminate(){//アプリを終了するとこの関数が最後に1回だけ呼ばれます。0;}これだけでは何も起こりません。続いてシェリーさんを使ってウィンドウを作成しましょう。「shInitCreateSherry」関数を使用します。Initialize()」の中に書きます。あ!実はシェリーさん一通り使ったらバイバイをしてやらなければ怒るんです。「shExitSherry」関数を使用しサヨナラを言います。Terminate()」の中に書きます。3GSの画面320×480サイズの描画可能なウィンドウが作成されます。!肝心の動作の処理を行う場所はどこだということになりますよね。「shSetDrawThread」と言う関数を使い描画ループを自動で作ってくれる関数を呼び出します。Initialize()」の中に書きます。//プロトタイプ宣言←関数があるよと言うのを教える。//これも追加!画面に書かれてる物を一度クリアする関数です。//モニタのリフレッシュレート(垂直同期)に合わせてこの関数が呼ばれます。}これで、描画用の自前関数「DrawFunc」を用意しました。この関数の中に描画処理のプログラミングしていきます。(リフレッシュレートってモニタによって変動するため通常固定される更新関数を用意しますが、わけが分からなくなるのでとりあえず先送りです。)続いて描画する前に描画内容の設定を行います。ここで使いたい関数は2つ。Initialize()」の中に。sample",320,480,0,OpenGL);//画面クリアをする時の設定をします。//!<通常作りたい画面サイズに合わせると良い。0;}以上でアプリを作るうえで必要になるテンプレートは完成です。Terminate()」の順番になります。デバッグ用のshPrintf関数を使って英数字を画面に出力すれば、先ほどの画面が完成すると思います。下記完成後のソースコードです。sample");}Wizapplyには沢山の関数が用意されています。今回、Wizapplyの開発環境構築と、Windowsでウィンドウを作成しましたが。次回いよいよAndroidとiPhoneに同時に描画させる方法をやりたいと思います。このソースコードから数分でアプリが出来上がります。「smilytics(スマイリティクス)」ツイッターアカウント:@smilyticsウェブサイト:http://smilytics.com/Wizapply本体及び記事に関してご意見・ご感想も受け付けております。authorsmilytics運営・代表者です。