クロスプラットフォームはクールです

この投稿は、「 Smart Posts for Smart Posts 」というコンテストに参加しています。



今日、モバイルゲームが非常に人気があることは周知の事実です。 すべての開発者は、初心者であっても、これらのゲームの1つを作成する機会があります。 多くの場合、プラットフォームの選択で疑問が生じます。 もちろん、iOSとAndroid、WP7とMeeGo、デスクトップとブラウザで、ゲームをすぐにどこにでも置きたいです。 そして、これらすべてを無料のツールを使用して簡単に実装できます。







この記事では、コードプラットフォームの主要部分を独立させ、残りは特定のプラットフォームごとに便利な開発ツールを使用する方法を説明します。



上の図に示されているゲームの目的は、リンゴが飛んでいる間にキャッチすることです。 時間が経つにつれて、リンゴの数が増加し、それらを見逃すことはより困難になります。 リンゴは任意の角度で落下し、 Box2D物理エンジンのおかげで回転し、境界線から現実的に跳ね返ります。 ゲームはAndroid、Qt対応プラットフォーム（Symbian、Maemo、MeeGo、Windows、Linux、Mac OS X）およびGoogle Chromeブラウザーで実行されます。

便利なツールの選択

コードの主要部分は純粋なC ++で記述するので（記事の最後で読みます）、すべてのIDEがこれを行います。 Qt Creatorを選択しますが、たとえばMicrosoft Visual StudioやEclipseの使用を妨げるものはありません。





Androidプラットフォームでは、libgdxライブラリーに焦点を当てます。 その助けを借りて、テクスチャを簡単に描画し、サウンドを再生し、他の必要なことを行うことができます。





デスクトップでゲームを開発するためのツールとして、Qtを取り上げます。 私はこのライブラリに長い間精通しており、私を喜ばせることをやめません。 Qtを使用すると、モバイルオペレーティングシステムSymbian、Maemo、およびMeeGoのサポートという形で素晴らしいボーナスがもらえます。





また、特にこの記事では、HTML5、javascript、およびGoogle Native Clientを使用して、ゲームをGoogle Chromeで実行します。 HTML5 CanvasとAudioを使用しますが、これがどれほど簡単でシンプルなのかがわかります。





ロジックの実装は複雑ではないため、これについては説明しません（誰でもコードを見ることができます ）。 代わりに、すべてのオペレーティングシステムでゲームを動作させる方法に集中します。

究極のプラットフォームからの抽象化

前述したように、コードの大部分はすべてのプラットフォームに共通です。 それを「エンジン」と呼びましょう。 2つの問題を解決する必要があります。 1つ目は、各プラットフォームでエンジンメソッドを呼び出すことです。



このために、エンジンはプラットフォームに次のインターフェイスを提供します。

class Application { public: Application(); ~Application(); void render(); void touch(int x, int y); //... };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さまざまなプラットフォームでの描画および入力ハンドラーの呼び出しは、Applicationクラスからメソッドを呼び出します。たとえば、Qtを使用している場合、次のようになります。

 void QtPlatrom::paintEvent(QPaintEvent *) { QPainter painter(this); m_painter = &painter; m_app->render(); } void QtPlatrom::mousePressEvent(QMouseEvent *e) { QWidget::mousePressEvent(e); m_app->touch(e->x(), height() - e->y()); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

C ++からJavaにアクセスする必要があるため、Androidではもう少し複雑になります。

 private native void renderNative(); private native void touchNative(int x, int y); static { System.loadLibrary("fruitclick"); } public void render() { renderNative(); } public boolean touchDown(int x, int y, int pointer, int button) { touchNative(x, Gdx.graphics.getHeight() - y); return false; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、対応するメソッドがC ++で呼び出されます。

 void Java_com_fruitclick_Application_renderNative(JNIEnv* env, jobject thiz) { g_app->render(); } void Java_com_fruitclick_Application_touchNative(JNIEnv* env, jobject thiz, jint x, jint y) { g_app->touch(x, y); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScriptからブラウザでNative Clientを使用する場合、C ++に直接アクセスすることはできません。代わりに、モジュールにメッセージを送信する必要があります。たとえば、次の行です。

 function onTouch(e) { var coords = getCursorPosition(e); var x = coords[0]; var y = canvas.height - coords[1]; var message = "touch " + x.toString() + " " + y.toString(); FruitclickModule.postMessage(message); } function simulate() { FruitclickModule.postMessage('render'); setTimeout("simulate()", 16); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

C ++では、メッセージが解析され、コンテンツに応じていずれかのメソッドが呼び出されます。

 void NaclPlatform::HandleMessage(const pp::Var& var) { if (!var.is_string()) return; std::stringstream stream(var.AsString()); std::string type; stream >> type; if (type == "render") { m_app.render(); } else if (type == "touch") { int x; int y; stream >> x >> y; m_app.touch(x, y); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果として、エンジンは呼び出しがどのプラットフォームからのものであるかは関係なく、これから抽象化されます。 しかし、彼はポイント（x、y）で画面に触れたか、物理学を処理して画面に画像を表示する時が来たことを知っています。

逆の相互作用

2番目のタスクは、エンジンとプラットフォームの逆の相互作用です。



これは、エンジンが画面に画像とテキストを表示し、サウンドを再生し、振動させるタイミングを指示するために必要です。 これを行うには、すべてのプラットフォームで共通のインターフェースを実装する必要があります。 このPlatformインターフェイスを呼び出します。

 class Platform { public: enum Texture { APPLE = 0, BACKGROUND }; static void draw(Texture id, float x, float y, float angle = 0); static void drawText(const char* text, float x, float y); enum Sound { CRUNCH = 0, CRASH }; static void playSound(Sound id); static void vibrate(); //... };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

エンジンレベルでは、特定のプラットフォームに接続しません。写真や音声ファイルをアップロードせず、代わりに数値識別子を使用します。 画面に画像を表示したり、音声を再生したい場合、次のようにします。

 Platform::draw(Platform::BACKGROUND, screenWidth/2, screenHeight/2); Platform::playSound(Platform::CRASH);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、エンジンは、各プラットフォームでのさまざまな操作の実装の詳細から抽象化されます。 わかりやすくするためにクラス図を示します。



これはすべて難しいですか？ 確認しないでください。 もちろん、時間を費やす必要がありますが、ほとんどの場合、アプリケーションロジックのプログラミングに費やされる時間と比較して無視できます。 必要な操作ごとに、Android、Qt、およびネイティブクライアントプラットフォームのコードを提供します。

画像の描画、Android（libgdx）：

 public void draw(int id, float x, float y, float angle) { TextureRegion region = null; switch (id) { case BACKGROUND: region = background; break; case APPLE: region = apple; break; default: break; } float w = region.getRegionWidth(); float h = region.getRegionHeight(); batch.draw(region, x - w/2, y - h/2, w/2, h/2, w, h, 1, 1, angle); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

描画画像、Qt：

 void QtPlatrom::drawImpl(Texture id, float x, float y, float angle) { QPixmap* pixmap = NULL; switch(id) { case FruitClick::Platform::APPLE: pixmap = &m_apple; break; case FruitClick::Platform::BACKGROUND: pixmap = &m_background; break; default: break; } y = height() - y; m_painter->translate(x, y); m_painter->rotate(-angle); int w = pixmap->width(); int h = pixmap->height(); m_painter->drawPixmap(-w/2, -h/2, w, h, *pixmap); m_painter->rotate(angle); m_painter->translate(-x, -y); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

画像の描画、javascript（HTML5 Canvas）：

 function draw(id, x, y, angle) { y = canvas.height - y; var image = null; switch(id) { case 0: image = apple; break; case 1: image = background; break; } context.translate(x, y); context.rotate(-angle); context.drawImage(image, -image.width/2, -image.height/2); context.rotate(angle); context.translate(-x, -y); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テキストの描画、Android（libgdx）：

 public void drawText(String text, float x, float y) { font.draw(batch, text, x, y); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テキストの描画、Qt：

 void QtPlatrom::drawTextImpl(const char *text, float x, float y) { y = height() - y; m_painter->drawText(x, y, text); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テキストの描画、javascript（HTML5 Canvas）：

 function drawText(text, x, y) { y = canvas.height - y; context.fillText(text, x, y); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サウンドプレイ、Android（libgdx）：

 public void playSound(int id) { switch (id) { case CRUNCH: crunch.play(); break; case CRASH: crash.play(); break; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サウンド再生、Qt：

 void QtPlatrom::playSoundImpl(Sound id) { switch (id) { case FruitClick::Platform::CRUNCH: m_crunch.play(); break; case FruitClick::Platform::CRASH: m_crash.play(); break; default: break; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サウンド、javascript（HTML5オーディオ）を再生します。

 function playSound(id) { var sound = null; switch(id) { case 0: sound = crunch; break; case 1: sound = crash; break; } sound.currentTime = 0; sound.play(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

振動、Android（libgdx）：

 void vibrate() { Gdx.input.vibrate(100); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Android向けに実装するときは、C ++からJavaコードを呼び出すことを少し工夫する必要があります。必要なJavaメソッドのIDを取得したら：

 void setupEnv(JNIEnv* env, jobject thiz) { g_env = env; g_activity = thiz; g_activityClass = env->GetObjectClass(thiz); drawID = env->GetMethodID(g_activityClass, "draw", "(IFFF)V"); drawTextID = env->GetMethodID(g_activityClass, "drawText", "(Ljava/lang/String;FF)V"); playSoundID = env->GetMethodID(g_activityClass, "playSound", "(I)V"); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、それらを呼び出します：

 void AndroidPlatform::drawImpl(FruitClick::Platform::Texture id, float x, float y, float angle) { g_env->CallVoidMethod(g_activity, drawID, id, x, y, angle); } void AndroidPlatform::drawTextImpl(const char* text, float x, float y) { jstring javaString = g_env->NewStringUTF(text); g_env->CallVoidMethod(g_activity, drawTextID, javaString, x, y); } void AndroidPlatform::playSoundImpl(FruitClick::Platform::Sound id) { g_env->CallVoidMethod(g_activity, playSoundID, id); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Native Clientには重要な状況があります-C ++コードからjavascriptにメッセージを送信する必要があります：

 const char* sep = "|"; void NaclPlatform::drawImpl(FruitClick::Platform::Texture id, float x, float y, float angle) { std::stringstream stream; stream << "draw" << sep << id << sep << x << sep << y << sep << angle; PostMessage(pp::Var(stream.str())); } void NaclPlatform::drawTextImpl(const char* text, float x, float y) { std::stringstream stream; stream << "drawText" << sep << text << sep << x << sep << y; PostMessage(pp::Var(stream.str())); } void NaclPlatform::playSoundImpl(FruitClick::Platform::Sound id) { std::stringstream stream; stream << "playSound" << sep << id; PostMessage(pp::Var(stream.str())); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、javascriptでは、これらのメッセージが解析されます。

 function handleMessage(message_event) { params = message_event.data.split("|"); if (params[0] == "draw") { draw(parseInt(params[1]), parseInt(params[2]), parseInt(params[3]), parseFloat(params[4])); } else if (params[0] == "drawText") { drawText(params[1], parseInt(params[2]), parseInt(params[3])); } else if (params[0] == "playSound") { playSound(parseInt(params[1])); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果

この単純なゲームは、Catch the Bullseyeと呼ばれます。 起動して数分間保持しようとすると、最初は成功しませんでした。

- ネイティブクライアントバージョン （最新バージョンのGoogle Chromeブラウザーを使用していること、およびネイティブクライアントがabout：pluginsおよびabout：フラグに含まれていることを確認してください）。 nexe実行可能ファイルのサイズは、32ビットシステムの場合は4.2 MB、64ビットシステムの場合は4.9 MBです;ゆっくり接続している間は少し待つ必要があります。

-Windowsバージョン -Google Chromeが気に入らない人向け。



ビデオ：



このゲームはAndroidエミュレーターと私のLG Optimusで問題なく動作します。 Qt Simulatorでも同じ状況です（トピックの冒頭のNokia N9のスクリーンショット）。

コード

ここでコードを取得できますが、特にJavaとC ++、javascriptとC ++の組み合わせを担当しているセクション（これについて質問がある場合は、お気軽にお問い合わせください）

なんでこんなこと？

あなたの多くは、なぜ自転車を書くのでしょうか？ たとえば、 MarmaladeまたはUnityがある場合。 はい、しかし、彼らはお金がかかります、そして、なぜ単純な2Dおもちゃのためにそのようなヘビーウェイトですか？ また、QtはAndroidとiOSで起動しますが、実際にはAndroidでは音声とOpenGLがなくても起動できず、iOS全般ではYouTubeの動画のみです。 私はQtが本当に好きで、近い将来、iOSおよびAndroid向けのアプリケーションがMeeGo向けのアプリケーションと同じくらい簡単に作成できることを願っていますが、現時点では、これらのプラットフォーム用に他のツールを使用する方が良いでしょう。

メリット

この記事で説明したアプローチを使用すると、プラットフォームに縛られることなく、必要なツールを使用でき、将来的には簡単に変更できます。 デスクトップ-QtまたはGTK、Android-libgdxまたはAndEngine、iOS-cocos2dでは、選択はあなた次第です。 プラットフォームが提供するAPIを使用して、エンジンを完全に放棄できます。 ほとんどの場合、優れた強力なC ++を使用して、お気に入りのIDEでコードを記述およびデバッグできます。

短所

もちろん、欠点もあります。たとえば、既製のUIコンポーネントを使用できない-C ++でそれらを実装する必要があります。 または、アプリケーションのUI部分を各プラットフォームに転送します。 また、各プラットフォームを詳しく知る必要がありますが、実践が示すように、この知り合いから完全に逃れることはできません。

続行するには？

C ++でのモバイルプラットフォーム用のゲームはまだ悪い考えだと思いますか？ 怒っている鳥を見てください。 ハーブサッターの素晴らしいパフォーマンスをお楽しみください。 C ++サポートはほぼどこにでもあり、新しい標準C ++ 11がすべてのNDKに実装された後、さらに改善されるという事実を考えてください。