Appcelerator TitaniumのQuickTiGame2dでプレイします。 パート1

現在、プログラミングの非常に有望な方向は、クロスプラットフォーム開発です。 さまざまな手段（Appcelerator Titanium、PhoneGap、moSync）に慣れてきたにもかかわらず、私はAppcelerator Titaniumを優先しています。



Titaniumでは、JavaScriptでAndroidおよびiOSアプリケーションを作成できます。 現在、公式Webサイトでは、このプラットフォームの開発者数は300,000人に達しています。



興味深い点は、Titaniumではアプリケーションだけでなく、モバイルデバイス向けの本格的なゲームも作成できることです。



Titanium Mobileの2次元ゲームエンジンモジュール-AndroidおよびiOSの開発を現在サポートしているOpenGL ESベースのQuickTiGame2dに注目したいと思います。 この記事では、インストールプロセスと、このエンジンの主要なポイントを検討し、次は、小さなクロスプラットフォームゲームの作成について直接説明します。



まず最初に、最新のライブラリをここからダウンロードする必要があります。1つはAndroid用、もう1つはiOS用です。 この記事の執筆時点では、最新版はバージョン1.2（最近リリースされた1.3）でした。



これらのライブラリを接続するには、適切なディレクトリに配置します。 Mac OSでは、次のようになります。

/Users/username/Library/Application Support/Titanium/modules/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここには、android、iphoneという2つのフォルダーがあります。 すべてが非常に簡単です。対応するライブラリをそれぞれにコピーする必要があります。



次に、新しいプロジェクトを作成します。 tiapp.xmlを開き、適切なコードを追加します。

 <modules> <module platform="iphone" version="1.2">com.googlecode.quicktigame2d</module> <module platform="android" version="1.2">com.googlecode.quicktigame2d</module> </modules>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のように書かれた例に会いました。

 <module version="1.2">com.googlecode.quicktigame2d</module>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私の経験では、ライブラリを接続するこの方法は機能しませんでした。



これで準備完了です。 この作業に役立つ基本的な要素を見てみましょう。 最初のステップは、「ウィンドウ」を作成してQuickTiGame2dを接続し、ゲーム画面を作成することです。 すべて順：

 var window = Ti.UI.createWindow({ backgroundColor : 'black' }); var quicktigame2d = require('com.googlecode.quicktigame2d'); var game = quicktigame2d.createGameView();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトに必要なJsファイルは、次のように接続されます。

 Ti.include('loadingScene.js');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

重要な要素は、ゲーム中の画面の場所です。 この場所を説明するには、各プラットフォームを個別に参照する必要があります。

 if (Titanium.Platform.osname === 'android') { game.orientation = Ti.UI.LANDSCAPE_LEFT; window.orientationModes = [Titanium.UI.LANDSCAPE_LEFT]; }else { game.orientation = Ti.UI.LANDSCAPE_RIGHT; window.orientationModes = [Titanium.UI.LANDSCAPE_RIGHT]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

画面の色を変更できます：

 game.color(0, 0, 0);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベントハンドラーを追加します。次に例を示します。

 game.addEventListener('onload', function(e) { ... LoadingScene.init(); game.pushScene(LoadingScene.scene); game.start(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

シーンのイベントをさらに詳しく見てみましょう。 次のようなメインハンドラーを強調表示できます。

 this.scene.addEventListener('activated', activated); this.scene.addEventListener('deactivated', deactivated); this.scene.addEventListener('onloadsprite', onloadsprite);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

たとえば、アクティブにすると、次のようになります。

 var activated = (function(self) { return function(e) { ... }; })(this);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私の意見では、コードはそれ自体を説明しています。シーンがアクティブ化、非アクティブ化されたとき、およびスプライトをシーンにロードしたときに発生するイベントを規定します。



非常に便利な画面タップイベント：

 game.addEventListener('touchstart', touchstart); game.addEventListener('touchend', touchend);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

続けましょう。



すべての要素と同様にゲーム画面を追加し、ゲームウィンドウを開く必要があることを忘れないでください。

 window.add(game); window.open({fullscreen:true, navBarHidden:true});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ステージ上のグラフィック要素とテキスト要素の検討に移りましょう。



手始めに、テキスト要素を追加する簡単な例：

 var scoreTextSprite = quicktigame2d.createTextSprite({ text : score, fontSize : 64 }); scoreTextSprite.color(1, 0, 0); scoreTextSprite.x = game.screen.width*0.4; self.scene.add(scoreTextSprite);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、スプライトテキストが作成され、フォントサイズ、色、およびx軸に沿ったその位置が設定されます。



グラフィックスプライトの作成は次のとおりです。

 var sprite = quicktigame2d.createSprite({image:'images/sprite.png'});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スプライトを使用してさまざまな操作を行うことができます。



1.非表示および表示

 sprite.hide(); sprite.show();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2.回転

 sprite.rotate(180);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.移動

 sprite.move(300, 500);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4.スケールを変更します（2つの軸を同時に、それぞれ別々に）

 sprite.scale(5); sprite.scaleBy(2, 3);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スプライトを互いの上に配置するには、特別な値z = 0..99があります。

 sprite.z = 1; newSprite.z = 2;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まあ、それはスタートに十分だと思います。 この記事がクロスプラットフォームのゲーム開発への熱意を呼び起こし、これらの努力に役立つことを願っています。 この段階ではまだゲームはありませんが、次の記事ではその作成について説明します。