0.前言

最近在做游戏，所以博客就改成双周更了。诚恳的地说，我不是一个火影迷，初中的时候看了几集，高中的时候看了几集，然后就拉倒了。我觉得嘴遁鸣人的螺旋丸挺不错的，今天准备做一个9.9元包邮版螺旋丸。看效果图

1.分析

1.1这个球是个立体的

立体的话这里采用opengl es进行实现

1.2球分三层

最里面是白色，碗面浅蓝，再者更蓝，最后是白色线段框架

1.3球要旋转

螺旋丸螺旋丸，自然得转圈了

2.代码

2.1绘制球体

HelicalCircle是主体，包括program和shader的创建，球坐标的创建，最后的绘制

2.1.1准备球体坐标

 private fun preparePosList() {var x0 = 0fvar y0 = 0fvar z0 = radiusvar x1 = 0fvar y1 = 0fvar z1 = radiusval h = 360 / precisionval v = 360 / precisionfor (i in 0 until h) {val arc0 = Math.PI / 180 * i * precisionval arc1 = Math.PI / 180 * (i + 1) * precisiony0 = (radius * Math.cos(arc0)).toFloat()y1 = (radius * Math.cos(arc1)).toFloat()for (j in 0 until v) {val arc = Math.PI / 180 * j * precisionx0 = (radius * Math.sin(arc0) * sin(arc)).toFloat()z0 = (radius * Math.sin(arc0) * cos(arc)).toFloat()x1 = (radius * Math.sin(arc1) * sin(arc)).toFloat()z1 = (radius * Math.sin(arc1) * cos(arc)).toFloat()posList.add(x0)posList.add(y0)posList.add(z0)posList.add(x1)posList.add(y1)posList.add(z1)}}pos= posList.toFloatArray()}
复制代码

这段代码生成了一个float数组，就是每个球体上点的坐标。这里采用的是球坐标，原理很简单，你可以把球体横向按照precision为梯度进行横切，然后每个切面也按照precision进行竖切，每个点的坐标计算出来后添加进一个List然后转换为float数组。

2.1.2准备program和shader

private val vertexSlgl="#version 300 es\n" +"\n" +"layout(location=0) in vec3 pos;\n" +"uniform mat4 model;\n" +"uniform mat4 view;\n" +"uniform mat4 projection;\n" +"void main()\n" +"{\n" +"   gl_Position=projection*view*model*vec4(pos,1.0);\n" +"}"private val fragmentSlgl="#version 300 es\n" +"precision mediump float;\n" +"uniform vec4 aColor;\n" +"out vec4 fragColor;\n" +"void main()\n" +"{\n" +"   fragColor=aColor;\n" +"}"private fun prepareProgram(){programId = createProgram(vertexSlgl, fragmentSlgl)val vaoArray = IntArray(1)GLES30.glGenVertexArrays(1, vaoArray, 0)VAO = vaoArray[0]GLES30.glBindVertexArray(VAO)val vboArray = IntArray(1)GLES30.glGenBuffers(1, vboArray, 0)VBO = vboArray[0]GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, VBO)val posBuffer = ByteBuffer.allocateDirect(4 * pos.size).order(ByteOrder.nativeOrder()).asFloatBuffer()posBuffer.put(pos)posBuffer.position(0)GLES30.glBufferData(GLES30.GL_ARRAY_BUFFER, 4 * pos.size, posBuffer, GLES30.GL_STATIC_DRAW)GLES30.glVertexAttribPointer(0, 3, GLES30.GL_FLOAT, false, 3 * 4, 0)GLES30.glEnableVertexAttribArray(0)}private fun createProgram(vertexSource: String, fragmentSource: String): Int {val vertexShader = createShader(GLES30.GL_VERTEX_SHADER, vertexSource)val fragmentShader = createShader(GLES30.GL_FRAGMENT_SHADER, fragmentSource)return createProgram(vertexShader, fragmentShader)}private fun createShader(type: Int, source: String): Int {val shaderId = GLES30.glCreateShader(type)if (shaderId <= 0) {Log.d(TAG, "create shader failed")}GLES30.glShaderSource(shaderId, source)GLES30.glCompileShader(shaderId)val status = IntArray(1)GLES30.glGetShaderiv(shaderId, GLES30.GL_COMPILE_STATUS, status, 0)if (status[0] <= 0) {Log.d(TAG, "compile shader failed")val infoLog = GLES30.glGetShaderInfoLog(shaderId)Log.d(TAG, infoLog)GLES30.glDeleteShader(shaderId)}return shaderId}private fun createProgram(vertexShader: Int, fragmentShader: Int): Int {val programId = GLES30.glCreateProgram()if (programId <= 0) {Log.d(TAG, "create program failed")}GLES30.glAttachShader(programId, vertexShader)GLES30.glAttachShader(programId, fragmentShader)GLES30.glLinkProgram(programId)val status = IntArray(1)GLES30.glGetProgramiv(programId, GLES30.GL_LINK_STATUS, status, 0)if (status[0] <= 0) {Log.d(TAG, "link program failed")val infoLog = GLES30.glGetProgramInfoLog(programId)Log.d(TAG, infoLog)}return programId}复制代码

这段代码就是创建shader和program，很简单，没什么可说的。

2.1.2绘制

    fun draw(aspect:Float,r:Float=0.0f,g:Float=0.0f,b:Float=1.0f,a:Float=0.5f,scale:Float=1.0f){degree+=10GLES30.glUseProgram(programId)val colorLocation=GLES30.glGetUniformLocation(programId,"aColor")GLES30.glUniform4f(colorLocation,r,g,b,a)val modelMatrixLocation=GLES30.glGetUniformLocation(programId,"model")Matrix.setIdentityM(modelMatrix,0)Matrix.scaleM(modelMatrix,0,scale,scale,scale)Matrix.rotateM(modelMatrix,0, Math.toRadians(degree).toFloat(),0f,1f,0f)GLES30.glUniformMatrix4fv(modelMatrixLocation,1,false,modelMatrix,0)val viewMatrixLocation=GLES30.glGetUniformLocation(programId,"view")Matrix.setLookAtM(viewMatrix,0,0f,0f,10f,0f,0f,0f,0f,1f,0f)GLES30.glUniformMatrix4fv(viewMatrixLocation,1,false,viewMatrix,0)val projectionMatrixLocation=GLES30.glGetUniformLocation(programId,"projection")Matrix.perspectiveM(projectionMatrix,0,45.0f, aspect,0.1f,100f)GLES30.glUniformMatrix4fv(projectionMatrixLocation,1,false,projectionMatrix,0)GLES30.glDrawArrays(model,0,pos.size / 3)}}
复制代码

绘制球体，设置球体颜色和缩放程度

2.HelicalCircleRender

override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {helicalCircle.prepare()}override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {GLES30.glViewport(0, 0, width, height)screenWidth = width.toFloat()screenHeight = height.toFloat()}override fun onDrawFrame(gl: GL10?) {GLES30.glEnable(GLES30.GL_BLEND)GLES30.glClearColor(0f,0f,0f,1.0f)GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT or GLES30.GL_DEPTH_BUFFER_BIT)val aspect=screenWidth / screenHeightGLES30.glDisable(GLES30.GL_DEPTH_TEST)helicalCircle.model=GLES30.GL_TRIANGLE_STRIPhelicalCircle.draw(aspect,r=0.67f,g=0.85f,b=0.98f,a=0.5f,scale = 0.99f*scale)helicalCircle.draw(aspect,r=0.85f,g=0.96f,b=0.99f,a=0.5f,scale= 0.5f*scale)helicalCircle.draw(aspect,r=0.97f,g=1.0f,b=0.99f,a=0.5f,scale= 0.3f*scale)GLES30.glEnable(GLES30.GL_DEPTH_TEST)helicalCircle.model=GLES30.GL_LINE_STRIPhelicalCircle.draw(aspect,r=1.0f,g=1.0f,b=1.0f,a=0.2f,scale = 0.998f*scale)}
复制代码

onSurfaceCreated里进行球坐标的计算和program以及shader的准备，在onDrawFrame里绘制三个球

2.3旋转

 override fun onTouchEvent(event: MotionEvent?): Boolean {when(event?.action){MotionEvent.ACTION_DOWN->{touchX=event.x}MotionEvent.ACTION_MOVE->{val scaleOffset=(event.x-touchX)/widthrender.scale+=scaleOffsettouchX=event.x}}return true}
复制代码

复写HelicalCircleView的onTouchEvent方法，通过修改HelicalCircleRender的scale来对球体进行缩放。

3源码

github

关注我的公众号