目标:自动滚动的背景
零基础学习opengl es
第一步:
借了一本《Android 4 游戏实战编程》
按着书上的例子一步一步来,但是这本书上有些地方不太清楚,还有一本书叫做《Android 4游戏编程入门经典》,如果基础差个人推荐还是看入门经典这本,虽然我也没看过,我看实战看得很艰难。
后来发现完全不懂,代码一运行总是出错,于是上网找了个几个简单的opengl es的教程,
第二步:
1.http://googlers.iteye.com/blog/953316 copy下代码,然后把改改的地方改了,成功运行,运行效果是是你按屏幕上一个点,就设置整个屏幕的颜色,根据按的点的位置的不同而设置的颜色不同。这个小程序瞬间让我爱上了Android。
2.http://www.waitingfy.com/?p=66 将这个网页中的代码,修改了挺多,然后成功运行。运行效果是显示一张图片在屏幕中央,不过发现图片没有占据全屏,只有处在中央的位置,于是我想将图片全屏,于是开始了艰难的找关键点的路程,无数次运行之后,发现
gl.glOrthof(-160, 160, -240, 240, 1, -1);
修改数值能够改变图片的位置,两眼放光,动力无限。上网查了下glOrtho的用法,后来终于被我找到只要数值和下面定义的vertices能吻合就能够全屏,一个小问题解决了,但是绕了好多好多弯路。
第三步:
修改从《Android 4 游戏实战编程》一个字一恶搞字敲出来的代码,修改成自己的代码,在网上查一个一个函数的用法和用途,还发现了一些copy出错了地方,后来被我找到了一个关键的东西
private float vertices[]={
0.0f,0.0f,0.0f,
0.0f,1.0f,0.0f,
1.0f,1.0f,0.0f,
1.0f,0.0f,0.0f,
};
private float texture[]={
0.0f,1.0f,
0.0f,0.0f,
1.0f,0.0f,
1.0f,1.0f,
};
private byte indices[]={
0,1,2,
0,2,3,
};
关于这三个数组我想了很久,他们到底是干什么用的,看教程也看得糊里糊涂的,后来还是第二步中的第二个教程画得图漂亮
http://www.waitingfy.com/?p=66
vertices数组就是顶点坐标,代表着一张图片的四个角,opengl es是用来渲染3D图片的,但是我们依旧可以用里面二维的部分。
四个点分别是 (0,0,0),(0,1,0),(1,1,0),(1,0,0)分别代表着图片的左下角,左上角,右上角,右下角
private float vertices[]={
0.0f,0.0f,0.0f,
0.0f,1.0f,0.0f,
1.0f,1.0f,0.0f,
1.0f,0.0f,0.0f,
};
texture数组就是纹理坐标,我还不怎么理解纹理坐标,只知道在屏幕上有个纹理坐标系,二维纹理坐标左上角为坐标原点,即(0,0),右方向是s轴,即x正轴,下方向是t轴,即y正轴,与vertices数组四个点相对应,所以vertices数组该为
private float texture[]={
0.0f,1.0f,
0.0f,0.0f,
1.0f,0.0f,
1.0f,1.0f,
};
indices数组是和下面以一条语句相关的
private byte indices[]={
0,1,2,
0,2,3,
};
gl.glDrawElements(GL10.GL_TRIANGLES, indices.length, GL10.GL_UNSIGNED_BYTE, indexBuff);
意思是在屏幕上draw的时候按照怎样的方式
这条代码是三角形方式,draw两次,第一次是indices数组的前三个顶点0,1,2,分别是左下角,左上角,右上角。第二次是0,2,3,分别是左下角,右上角,右下角。两次把整张图片完整的显示在屏幕上。大家可以修改indices数组将第二个0改成1,就会发现一些不一样的地方,或者修改vertices和texture数组,也能出现一些新奇的东西
第四步:
按着书上添加函数scrolBackground1
private void scrolBackground1(GL10 gl){
Log.d("SFGameRenderer","scrollBackground");
if(bgScroll1 == Float.MAX_VALUE){
bgScroll1=0f;
}
gl.glClear(GL10.GL_COLOR_BUFFER_BIT|GL10.GL_DEPTH_BUFFER_BIT);
gl.glMatrixMode(GL10.GL_MODELVIEW);
gl.glLoadIdentity();
// gl.glPushMatrix();
gl.glScalef(1f, 1f, 1f);
gl.glTranslatef(0f, 0f, 0f);
gl.glMatrixMode(GL10.GL_TEXTURE);
gl.glLoadIdentity();
gl.glTranslatef(0.0f, bgScroll1, 0.0f);
// gl.glPopMatrix();
background.draw(gl);
bgScroll1 += SFEngine.SCROLL_BACKGROUND_1;
gl.glLoadIdentity();
}
成功运行,有滚动效果(见上图,上述图片已加入滚动效果)
修改scrolBackground1里面的代码
gl.glTranslatef(0.0f, bgScroll1, 0.0f);
是对Y轴的变换,可以改成X轴,曲率空间变换等等,让图片画一个圆什么的都能实现