2013-03-17 93 views
2

我想讓我的2D背景圖像移動。在未來,它將被實現爲自動移動(看起來像相機跟隨某個對象)。一個典型的例子 - 憤怒的小鳥遊戲。相機在攻擊期間跟隨鳥類。背景圖像移動OpenGL ES2

目前,我只是改變setLookAtM()中的值。下面是代碼:

public void onSurfaceCreated(GL10 unused, EGLConfig config) { 
    GLES20.glClearColor(0.5f, 0.5f, 0.5f, 1.0f); 

    GLES20.glDisable(GLES20.GL_DEPTH_TEST); 
    GLES20.glEnable(GLES20.GL_BLEND); 
    GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA,GLES20.GL_ONE_MINUS_SRC_ALPHA); 

    // background 
    bg = new BackGround(mActivityContext); 

} 

public void onDrawFrame(GL10 unused) { 
    // Redraw background color 
    GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT); 

    Matrix.setLookAtM(mVMatrix, 0, -1f, 0f, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f); 
    Matrix.setIdentityM(mTrMatrix, 0); 

    bg.draw(mMVPMatrix); 
} 

public void onSurfaceChanged(GL10 unused, int width, int height) { 
    GLES20.glViewport(0, 0, width , height); 

    float ratio = (float) width/height; 
    Matrix.orthoM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7); 
} 


class BackGround { 

    private FloatBuffer vertexBuffer; 
    private ShortBuffer drawListBuffer; 

    static final int COORDS_PER_VERTEX = 3; 
    static float squareCoords[] = { -15.5f, 15.5f, 0.0f, // top left 
    -15.5f, -15.5f, 0.0f, // bottom left 
    15.5f, -15.5f, 0.0f, // bottom right 
    15.5f, 15.5f, 0.0f }; // top right 

    int mProgram; 
    int mPositionHandle; 

    private short drawOrder[] = { 0, 1, 2, 0, 2, 3 }; // order to draw vertices 
    private final String vertexShaderCode = "attribute vec2 a_TexCoordinate;" + 
    "varying vec2 v_TexCoordinate;" + 
    "uniform mat4 uMVPMatrix;" + 
    "attribute vec4 vPosition;" + 
    "void main() {" + 
    " gl_Position = uMVPMatrix * vPosition;" + 
    "v_TexCoordinate = a_TexCoordinate;" + 
    "}"; 

    private final String fragmentShaderCode = 
    "precision mediump float;" + 
    "uniform vec4 vColor;" + 
    "uniform sampler2D u_Texture;" + 
    "varying vec2 v_TexCoordinate;" + 
    "void main() {" + 
    "gl_FragColor = (texture2D(u_Texture, v_TexCoordinate));" + 
    "}"; 

    public BackGround(final Context context) { 
     // initialize vertex byte buffer for shape coordinates 
     ByteBuffer bb = ByteBuffer.allocateDirect(squareCoords.length * 4); 
     bb.order(ByteOrder.nativeOrder()); 
     vertexBuffer = bb.asFloatBuffer(); 
     vertexBuffer.put(squareCoords); 
     vertexBuffer.position(0); 

     mActivityContext = context; 

     // initialize byte buffer for the draw list 
     ByteBuffer dlb = ByteBuffer.allocateDirect(drawOrder.length * 2); 
     dlb.order(ByteOrder.nativeOrder()); 
     drawListBuffer = dlb.asShortBuffer(); 
     drawListBuffer.put(drawOrder); 
     drawListBuffer.position(0); 

     int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode); 
     int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode); 

     final float[] cubeTextureCoordinateData = { 
      -15.5f, 15.5f, 
      -15.5f, -15.5f, 
      15.5f, -15.5f, 
      15.5f, 15.5f 
     }; 

     mCubeTextureCoordinates = 
     ByteBuffer.allocateDirect(cubeTextureCoordinateData.length * 
     4).order(ByteOrder.nativeOrder()).asFloatBuffer(); 
     mCubeTextureCoordinates.put(cubeTextureCoordinateData).position(0); 

     mProgram = GLES20.glCreateProgram();    
     GLES20.glAttachShader(mProgram, vertexShader); 
     GLES20.glAttachShader(mProgram, fragmentShader); 
     GLES20.glBindAttribLocation(mProgram, 0, "a_TexCoordinate"); 
     GLES20.glLinkProgram(mProgram); 

     // load background bitmap 256x256px    
     mTextureDataHandle = loadTexture(mActivityContext, R.drawable.mud); 
    } 

    public void draw(float[] mvpMatrix) { 

     GLES20.glUseProgram(mProgram); 
     mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition"); 

     GLES20.glEnableVertexAttribArray(mPositionHandle); 
     GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX, 
     GLES20.GL_FLOAT, false, vertexStride, vertexBuffer); 

     mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor"); 
     GLES20.glUniform4fv(mColorHandle, 1, color, 0); 

     mTextureUniformHandle = GLES20.glGetAttribLocation(mProgram, "u_Texture"); 
     mTextureCoordinateHandle = GLES20.glGetAttribLocation(mProgram, "a_TexCoordinate"); 

     GLES20.glActiveTexture(GLES20.GL_TEXTURE0); 
     GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureDataHandle); 
     GLES20.glUniform1i(mTextureUniformHandle, 0); 

     mCubeTextureCoordinates.position(0); 
     GLES20.glVertexAttribPointer(mTextureCoordinateHandle, mTextureCoordinateDataSize, 
     GLES20.GL_FLOAT, false, 0, mCubeTextureCoordinates); 
     GLES20.glEnableVertexAttribArray(mTextureCoordinateHandle); 

     mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix"); 
     GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mvpMatrix, 0); 
     GLES20.glDrawElements(GLES20.GL_TRIANGLES, drawOrder.length, 
     GLES20.GL_UNSIGNED_SHORT, drawListBuffer); 
     GLES20.glDisableVertexAttribArray(mPositionHandle); 
    } 
} 

的問題是,我不知道如何來傳播我的背景(256×256),在大面積(不受屏幕尺寸的限制)。目前,紋理僅在屏幕邊緣重複。當我嘗試將其移動(使用SetLookAtm()),它的動作好,但留下空白條:

初始背景圖像(BMP-逆轉):

ab 
cd 

背景圖像在屏幕上:

-------- 
| abab| 
| cdcd| 
| abab| 
| cdcd| 
| abab| 
| cdcd| 
-------- 

方向(左,右擊 - 移動(>右)後

-------- 
|ababab| 
|cdcdcd| 
|ababab| 
|cdcdcd| 
|ababab| 
|cdcdcd| 
-------- 

背景圖像噸,上,下)無關緊要。它只有在其上側條紋出現

回答

0

要麼效果:

A)定義的矩形背景,使得其延伸超出屏幕的兩端(和「滾動」的背景由動畫其位置)

-------- 
|ababab|ababab 
|cdcdcd|cdcdcd 
|ababab|ababab 
|cdcdcd|cdcdcd 
|ababab|ababab 
|cdcdcd|cdcdcd 
-------- 

或:

B)定義的bG矩形作爲之前填滿屏幕,但動畫的紋理座標,使其滾動。例如:如果您的texcoords形成一個矩形(0.00,0.00)->(1.00,1.00),則通過更改texcoords向左滾動bg爲(0.05,0.00)->(1.05,1.00)。確保你已經設置glTexParameteri如下:

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); 
+0

我真的想這樣做你在「A)」描述但我不能。正如你在我的代碼中看到的,我嘗試定義比屏幕大15倍的背景矩形。但它恰好適合屏幕尺寸。你能提供一些關於如何定義這種大背景矩形的代碼嗎? – 2013-03-18 18:35:52

+0

你的矩形不適合屏幕大小。你的紋理座標應該從(0,0)到(1,1)從(-15,-15)到(15,15),因此紋理在屏幕上重複30次,使其看起來像「完全適合「。您應該瞭解如何正確使用texcoords並首先修復cubeTextureCoordinateData。 – 2013-03-18 20:18:21

+0

當我更改紋理座標時,最終的背景圖像只是放大或縮小(例如,如您所說,重複30次)。但它總是在屏幕邊緣裁剪。當我移動它(setLookAt)時,它會移動留下空的條紋。 – 2013-03-19 18:44:21