libGDXチュートリアルの翻訳-パート2（画像の描画）

libGDXの2番目のチュートリアルの翻訳を紹介します。 オリジナルはこちらです。 最初の部分はこちらです。



このチュートリアルでは、OpenGLを使用して画像を描画する方法、およびlibGDXがSpriteBatchクラスを使用してこのプロセスを簡素化および最適化する方法について説明します。

画像の描画。

元の形式（PNGなど）から取得され、GPUに読み込まれた画像は、テクスチャと呼ばれます。 テクスチャは、いくつかの仕様に従って描画されます。これは、幾何学的形状の説明であり、この形状の頂点にテクスチャがどのように重ねられるかです。 たとえば、幾何学的形状は長方形にすることができ、長方形の各コーナーはテクスチャの対応するコーナーを参照します。





描画するには、テクスチャを最新の状態（スナップ）にし、ジオメトリを設定する必要があります。 テクスチャが表示される場所のサイズと場所は、OpenGLビューポートのジオメトリと設定によって決まります。 多くの2Dゲームは、画面解像度に合わせてビューポートをカスタマイズします。 これは、ジオメトリがピクセルで定義されることを意味し、適切なサイズのテクスチャを画面上の適切な場所に簡単に描画できます。



多くの場合、テクスチャペイントは長方形のジオメトリで行われます。 また、非常に多くの場合、1つのテクスチャまたはその異なる部分が何度も描画されます。 GPUでレンダリングするために1つの長方形を送信するのは非効率的です。 代わりに、単一のテクスチャの多くの長方形を記述して、GPUにまとめて送信できます。 これは、SpriteBatchクラスが行うことです。



SpriteBatchは、このテクスチャが表示される各長方形のテクスチャと座標を取得します。 GPUに送信せずにこの情報を蓄積します。 最後に読み込まれたテクスチャとは異なるテクスチャを受け取ると、最後に読み込まれたテクスチャをアクティブにし、蓄積された描画情報をGPUに送信し、次のテクスチャの描画データの蓄積を開始します。



描画するいくつかの長方形ごとにテクスチャを変更すると、SpriteBatchがかなりの数の長方形をグループ化できなくなります。 また、テクスチャバインディングは非常に高価な操作です。 これらの理由から、多くの場合、多くの小さな画像を1つの大きな画像に保存し、大きな画像の一部を描画することで、レンダリングのために蓄積される長方形の数を最大化し、テクスチャの変更を回避します。 詳細については、 TexturePackerを参照してください。

SpriteBatch（スプライトパッカー）

アプリケーションでSpriteBatchクラスを使用する方法は次のとおりです。

public class Game implements ApplicationListener { private SpriteBatch batch; public void create () { batch = new SpriteBatch(); } public void render () { Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); //     batch.begin(); //   ! batch.end(); } public void resize (int width, int height) { } public void pause () { } public void resume () { } public void dispose () { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レンダリングのためのすべてのSpriteBatch呼び出しは、begin（）メソッドとend（）メソッドで囲む必要があります。 （SpriteBatchクラスではなく）他の方法で描画するためのメソッドの呼び出しは、begin（）メソッドとend（）メソッドの間で行わないでください。

テクスチャー

Textureクラスは、ファイルから画像を受け取り、GPUにロードします。 （参照）プロジェクトのセットアップで説明されているように、イメージファイルは「assets」ディレクトリに配置する必要があります。 画像サイズは2のべき乗（16x16、64x256など）である必要があります。

 private Texture texture; ... texture = new Texture(Gdx.files.internal("image.png")); ... batch.begin(); batch.draw(texture, 10, 10); batch.end();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、テクスチャが作成され、レンダリングのためにSpriteBatchクラスに送信されます。 テクスチャは長方形で描画され、その左下隅はポイント（10、10）にあり、幅と高さはテクスチャのサイズに等しくなります。 SpriteBatchには、テクスチャを描画するための多くのメソッドがあります。

 draw(Texture texture, float x, float y)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テクスチャの寸法を使用して、x、yにテクスチャを描画します

 draw(Texture texture, float x, float y, int srcX, int srcY, int srcWidth, int srcHeight)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テクスチャの一部を描画します。

 draw(Texture texture, float x, float y, float width, float height, int srcX, int srcY, int srcWidth, int srcHeight, boolean flipX, boolean flipY)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

幅*高さまで引き伸ばされ、場合によってはミラーリングされたテクスチャの一部を描画します。

 draw(Texture texture, float x, float y, float originX, float originY, float width, float height, float scaleX, float scaleY, float rotation, int srcX, int srcY, int srcWidth, int srcHeight, boolean flipX, boolean flipY)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この巨大な方法は、圧縮（ストレッチ）の可能性、点の周りの回転、および反射の可能性を持つテクスチャの一部を描画します。

 draw(Texture texture, float x, float y, float width, float height, float u, float v, float u2, float v2)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

幅*高さに引き伸ばされたテクスチャの一部を描画します。 これは、より高度な方法です。 座標はピクセルではなく実数で示されます。

 draw(Texture texture, float[] spriteVertices, int offset, int length)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

spriteVerticlesで指定された形状に引っ張ることにより、テクスチャの一部を描画します

TextureRegion（テクスチャ領域またはテクスチャの一部）

TextureRegionクラスは、テクスチャ内の長方形を記述し、テクスチャの一部のみを描画するために使用されます。

 private TextureRegion region; ... texture = new Texture(Gdx.files.internal("image.png")); region = new TextureRegion(texture, 20, 20, 50, 50); ... batch.begin(); batch.draw(region, 10, 10); batch.end();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、20、20、50、50は、テクスチャの一部を表し、ポイント（10、10）で描画されます。 テクスチャと追加のパラメーターをSpriteBatchクラスに渡すことで同じアクションを実行できますが、TextureRegionクラスを使用すると、追加のパラメーターを覚えるよりも個別のオブジェクトを定義して操作する方が簡単になるため、より便利になります。



SpriteBatchには、TextureRegionを描画するための多くのメソッドがあります。

 draw(TextureRegion region, float x, float y)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-領域の幅と高さを使用して領域を描画します。

 draw(TextureRegion region, float x, float y, float width, float height)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-幅と高さに圧縮された（伸びた）領域を描画します。

 draw(TextureRegion region, float x, float y, float originX, float originY, float width, float height, float scaleX, float scaleY, float rotation)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-幅と高さに引き伸ばされた（圧縮された）領域を描画します。原点originX、originYを基準にスケーリングおよび回転できます。

スプライト（スプライト）

Spriteクラスは、テクスチャの領域、この領域が描画される位置、および領域の色（色付けの色-色の陰影付け）を記述します。

 private Sprite sprite; ... texture = new Texture(Gdx.files.internal("image.png")); sprite = new Sprite(texture, 20, 20, 50, 50); sprite.setPosition(10, 10); sprite.setRotation(45); ... batch.begin(); sprite.draw(batch); batch.end();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、20、20、50、50は、テクスチャの領域を表し、45度回転し、ポイント（10、10）で描画されます。 テクスチャまたはその一部をSpriteBatchに転送し、他のパラメーターを渡すことで同じことができますが、すべてのパラメーターを1か所に保存するため、Spriteクラスはこれをより便利にします。 また、Spriteクラスはジオメトリを内部に格納し、必要な場合にのみ再カウントするため、フレーム間で変化しないスケーリング、回転、またはその他のプロパティの操作のパフォーマンスがわずかに向上します。



Spriteクラスは、モデルに関する情報（場所、回転に関する情報など）とビューに関する情報（テクスチャは同じクラスによって描画された）を混合することに注意してください。 これにより、モデルをビューから厳密に分離するアーキテクチャでSpriteを使用することは不適切になります。 この場合、TextureクラスまたはTextureRegionクラスを使用するとより意味があります。

着色（シェーディング）色）

テクスチャを描画するとき、特定の色で塗りつぶすことができます。

 private Texture texture; private TextureRegion region; private Sprite sprite; ... texture = new Texture(Gdx.files.internal("image.png")); region = new TextureRegion(texture, 20, 20, 50, 50); sprite = new Sprite(texture, 20, 20, 50, 50); sprite.setPosition(100, 10); sprite.setColor(0, 0, 1, 1); ... batch.begin(); batch.setColor(1, 0, 0, 1); batch.draw(texture, 10, 10); batch.setColor(0, 1, 0, 1); batch.draw(region, 50, 10); sprite.draw(batch); batch.end();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードは、テクスチャ、その領域、および色付きのスプライトを描画する方法を示しています。 色はRGBAモデルで記述され、各コンポーネントの範囲は0〜1です。ブレンドが無効になっている場合、アルファチャネルは無視されます。

ブレンド

ミキシングはデフォルトで有効になっています。 これは、テクスチャが描画されるときに、このテクスチャの透明部分を、この場所の画面に既に描画されているピクセルから結合できることを意味します。



ミキシングをオフにすると、画面にあったすべてのものが、この場所に描画されたテクスチャによって消去されます。 これはより効率的であるため、必要ない場合はいつでもミキシングをオフにできます。 たとえば、フルスクリーンで大きな背景画像を描画する場合、主にブレンドを無効にすることでパフォーマンスを改善できます。

 Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); //     batch.begin(); batch.disableBlending(); backgroundSprite.draw(batch); batch.enableBlending(); //     batch.end();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご注意 画面がフレームごとにクリアされることを確認してください。 そうでない場合は、アルファチャネルからのテクスチャが何度も自身の上に描画され、まったく間違った効果が得られます。 また、一部のビデオアクセラレータアーキテクチャは、全画面で画像を描画するのではなく、フレームごとに画面をクリアする方がうまく機能します。

ビューポート

SpriteBatchには、独自の投影および変換マトリックスがあります。 SpriteBatchが作成されると、現在のアプリケーションの寸法を使用して、U軸を上に向けた座標系を使用して直交投影を調整します（つまり、0、0は画面の左下隅-約Translator）。 begin（）メソッドが呼び出されると、SpriteBatchはビューポートを設定します。



ご注意 表示領域に関する詳細なドキュメントが表示され次第、ここに投稿されます。

パフォーマンスの改善。

SpriteBatchには、GPUに送信する前に蓄積されるスプライトの最大数を受け入れるコンストラクターがあります。 この数が小さすぎると、アクセラレーターへの余分な呼び出しが多くなります。 数値が大きい場合、SpriteBatchは大量のメモリを使用します。



SpriteBatchには、maxSpritesInBatchというパブリックフィールドがあります。 SpriteBatchライフサイクル中に一度にビデオアクセラレータにレンダリングするために送信できるスプライトの最大数を示します。 この数を非常に大きく設定して確認できます。 これは、SpriteBatchに適切なサイズを見つけるのに役立ちます。 SpriteBatchのサイズ（コンストラクターに渡す数）は、maxSpritesInBatchの数をわずかに超える必要があります。 maxSpritesInBatchは常にゼロに設定できます。つまり、このカウンターをリセットします。



SpriteBatchには、パブリックrenderCallsフィールドがあります。 次のレンダリングサイクルの後、開始（）および終了（）の呼び出し間でSpriteBatchが異なるジオメトリ情報を送信した回数を保存します。 これは、異なるテクスチャがスナップされた場合、またはSpriteBatchがいっぱい（キャッシュが小さすぎる）の場合に発生します。 SpriteBatchのサイズが正しく選択され、renderCallsが大きすぎる（約15〜20）場合、これは使用しているテクスチャが多すぎることを示しています。 テクスチャの一部を1つの大きなテクスチャに配置してください。



SpriteBatchには、バッファーの数とサイズを受け入れる追加のコンストラクターがあります。 これは、通常のVA（頂点配列）の代わりにVBO（頂点バッファオブジェクト）で作業するように指示する高度な機能です。 SpriteBatchはバッファのリストを保存し、レンダリングするたびに次のバッファを使用します。 maxSpritesInBatchが小さく、renderCallsが大きい場合、この機能によりパフォーマンスがわずかに向上します。