que - opengl es 3.1 android download

Dibujar texto en OpenGL ES

Question

Actualmente estoy desarrollando un pequeño juego OpenGL para la plataforma Android y me pregunto si hay una manera fácil de presentar texto sobre el fotograma renderizado (como un HUD con la puntuación del jugador, etc.). El texto necesitaría usar una fuente personalizada también.

He visto un ejemplo usando una vista como una superposición, pero no sé si quiero hacerlo, ya que podría querer transferir el juego a otras plataformas más adelante.

¿Algunas ideas?

Answer 1

De acuerdo con este enlace:

http://code.neenbedankt.com/how-to-render-an-android-view-to-a-bitmap

Puede renderizar cualquier Vista en un mapa de bits. Probablemente valga la pena asumir que puede diseñar una vista como lo requiera (incluido texto, imágenes, etc.) y luego renderizarla en un mapa de bits.

Usando el código de JVitela above , debería poder usar ese mapa de bits como una textura OpenGL.

Answer 2

Eche un vistazo a CBFG y al puerto Android del código de carga / renderizado. Debería poder colocar el código en su proyecto y usarlo de inmediato.

1. http://www.codehead.co.uk/cbfg

2. http://www.codehead.co.uk/cbfg/TexFont.java

Tengo problemas con esta implementación. Muestra solo un carácter, cuando intento cambiar el tamaño del mapa de bits de la fuente (necesito letras especiales) no funciona el sorteo completo :(

Answer 3

Eche un vistazo a CBFG y al puerto Android del código de carga / renderizado. Debería poder colocar el código en su proyecto y usarlo de inmediato.

CBFG - http://www.codehead.co.uk/cbfg

Cargador de Android - http://www.codehead.co.uk/cbfg/TexFont.java

Answer 4

El SDK de Android no incluye una forma fácil de dibujar texto en vistas OpenGL. Dejándote con las siguientes opciones.

1. Coloque un TextView sobre su SurfaceView. Esto es lento y malo, pero el enfoque más directo.
2. Render cadenas comunes a texturas, y simplemente dibujar esas texturas. Este es de lejos el más simple y rápido, pero el menos flexible.
3. Descargue su propio código de representación de texto basado en un sprite. Probablemente la segunda mejor opción si 2 no es una opción. Una buena manera de mojarse los pies, pero tenga en cuenta que si bien parece simple (y las funciones básicas son), se vuelve más difícil y desafiante a medida que agrega más características (alineación de texturas, line-breaks, fuentes de ancho variable, etc. ) - si tomas esta ruta, ¡hazlo tan simple como puedas!
4. Use una biblioteca disponible / de código abierto. Hay algunos alrededor si cazas en Google, el truco es integrarlos y ejecutarlos. Pero al menos, una vez que lo hagas, tendrás toda la flexibilidad y madurez que proporcionan.

Answer 5

En mi humilde opinión, hay tres razones para usar OpenGL ES en un juego:

1. Evite las diferencias entre las plataformas móviles mediante el uso de un estándar abierto;
2. Para tener más control del proceso de renderizado;
3. Para beneficiarse del procesamiento paralelo de GPU;

El texto de dibujo siempre es un problema en el diseño del juego, porque estás dibujando cosas, por lo que no puedes ver y sentir una actividad común, con widgets, etc.

Puede usar un marco para generar fuentes Bitmap a partir de fuentes TrueType y renderizarlas. Todos los marcos que he visto operan de la misma manera: generan las coordenadas de vértices y texturas para el texto en el tiempo de dibujo. Este no es el uso más eficiente de OpenGL.

La mejor forma es asignar búferes remotos (objetos de búfer de vértice - VBO) para los vértices y texturas en las primeras etapas del código, evitando las operaciones de transferencia de memoria diferida en el tiempo de dibujo.

Tenga en cuenta que a los jugadores del juego no les gusta leer el texto, por lo que no escribirá un texto largo generado dinámicamente. Para las etiquetas, puede usar texturas estáticas, dejando texto dinámico para el tiempo y la puntuación, y ambas son numéricas con algunos caracteres de longitud.

Entonces, mi solución es simple:

1. Crear textura para etiquetas y advertencias comunes;
2. Crear textura para los números 0-9, ":", "+" y "-". Una textura para cada personaje;
3. Genere VBO remotas para todas las posiciones en la pantalla. Puedo representar texto estático o dinámico en esas posiciones, pero los VBO son estáticos;
4. Genere solo una Textura VBO, ya que el texto siempre se representa de una manera;
5. En el tiempo de dibujo, represento el texto estático;
6. Para el texto dinámico, puedo echar un vistazo a la posición VBO, obtener la textura del personaje y dibujarla, un personaje a la vez.

Las operaciones de dibujo son rápidas, si usa búferes estáticos remotos.

Creo un archivo XML con posiciones de pantalla (basadas en el porcentaje diagonal de la pantalla) y texturas (estáticas y caracteres), y luego cargo este XML antes de la representación.

Para obtener una alta tasa de FPS, debe evitar generar VBO en el momento del sorteo.

Answer 6

He escrito un tutorial que amplía la respuesta publicada por . Básicamente, utiliza la misma idea, pero en lugar de convertir cada cadena en una textura, convierte todos los caracteres de un archivo de fuente en una textura y la utiliza para permitir la representación completa del texto dinámico sin nuevas ralentizaciones (una vez que se completa la inicialización) .

La principal ventaja de mi método, en comparación con los diversos generadores de atlas de fuentes, es que puede enviar pequeños archivos de fuentes (.ttf .otf) con su proyecto en lugar de enviar grandes mapas de bits para cada variación y tamaño de fuente. Puede generar fuentes de calidad perfecta en cualquier resolución usando solo un archivo de fuente :)

El tutorial incluye un código completo que se puede usar en cualquier proyecto :)

Answer 7

He estado buscando esto por unas horas, este fue el primer artículo que encontré y aunque tiene la mejor respuesta, creo que las respuestas más populares están fuera de lugar. Ciertamente por lo que necesitaba. las respuestas de weichsel y shakazed estaban justo en el botón, pero un poco oscurecidas en los artículos. Para ponerlo en el proyecto. Aquí: simplemente crea un nuevo proyecto de Android basado en muestras existentes. Elija ApiDemos:

Mira debajo de la carpeta fuente

ApiDemos/src/com/example/android/apis/graphics/spritetext

Y encontrarás todo lo que necesitas.

Answer 8

Miré el ejemplo de texto de sprite y parece terriblemente complicado para una tarea así, consideré el renderizado de una textura también, pero estoy preocupado por el golpe de rendimiento que podría causar. Tal vez tenga que ir con una vista y preocuparme por portarla cuando sea el momento de cruzar ese puente :)

Answer 9

Mire el ejemplo de "Texto de Sprite" en las muestras de GLSurfaceView .

Answer 10

Para texto estático :

• Genera una imagen con todas las palabras usadas en tu PC (por ejemplo, con GIMP).
• Cargue esto como una textura y úselo como material para un avión.

Para texto largo que necesita actualizarse de vez en cuando:

• Deje que Android dibuje en un lienzo de mapa de bits (solución de JVitela).
• Cargue esto como material para un avión.
• Use diferentes coordenadas de textura para cada palabra.

Para un número (formato 00.0):

• Genera una imagen con todos los números y un punto.
• Cargue esto como material para un avión.
• Use debajo del sombreador.

• En su evento onDraw solo actualice la variable de valor enviada al sombreador.

  precision highp float;
  precision highp sampler2D;
  
  uniform float uTime;
  uniform float uValue;
  uniform vec3 iResolution;
  
  varying vec4 v_Color;
  varying vec2 vTextureCoord;
  uniform sampler2D s_texture;
  
  void main() {
  
  vec4 fragColor = vec4(1.0, 0.5, 0.2, 0.5);
  vec2 uv = vTextureCoord;
  
  float devisor = 10.75;
  float digit;
  float i;
  float uCol;
  float uRow;
  
  if (uv.y < 0.45) {
      if (uv.x > 0.75) {
          digit = floor(uValue*10.0);
          digit = digit - floor(digit/10.0)*10.0;
          i = 48.0 - 32.0 + digit;
          uRow = floor(i / 10.0);
          uCol = i - 10.0 * uRow;
          fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-1.5) / devisor, uRow / devisor) );
      } else if (uv.x > 0.5) {
          uCol = 4.0;
          uRow = 1.0;
          fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-1.0) / devisor, uRow / devisor) );
      } else if (uv.x > 0.25) {
          digit = floor(uValue);
          digit = digit - floor(digit/10.0)*10.0;
          i = 48.0 - 32.0 + digit;
          uRow = floor(i / 10.0);
          uCol = i - 10.0 * uRow;
          fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-0.5) / devisor, uRow / devisor) );
      } else if (uValue >= 10.0) {
          digit = floor(uValue/10.0);
          digit = digit - floor(digit/10.0)*10.0;
          i = 48.0 - 32.0 + digit;
          uRow = floor(i / 10.0);
          uCol = i - 10.0 * uRow;
          fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-0.0) / devisor, uRow / devisor) );
      } else {
          fragColor = vec4(0.0, 0.0, 0.0, 0.0);
      }
  } else {
      fragColor = vec4(0.0, 0.0, 0.0, 0.0);
  }
  gl_FragColor = fragColor;
  
  }

El código anterior funciona para un atlas de textura donde los números comienzan desde 0 en la 7ma columna de la 2da fila del atlas de la fuente (textura).

Consulte https://www.shadertoy.com/view/Xl23Dw para la demostración (aunque con una textura incorrecta)

Answer 11

Renderizar texto a una textura es más simple que lo que hace la demostración de Sprite Text, la idea básica es usar la clase Canvas para renderizar en un mapa de bits y luego pasar el mapa de bits a una textura OpenGL:

// Create an empty, mutable bitmap
Bitmap bitmap = Bitmap.createBitmap(256, 256, Bitmap.Config.ARGB_4444);
// get a canvas to paint over the bitmap
Canvas canvas = new Canvas(bitmap);
bitmap.eraseColor(0);

// get a background image from resources
// note the image format must match the bitmap format
Drawable background = context.getResources().getDrawable(R.drawable.background);
background.setBounds(0, 0, 256, 256);
background.draw(canvas); // draw the background to our bitmap

// Draw the text
Paint textPaint = new Paint();
textPaint.setTextSize(32);
textPaint.setAntiAlias(true);
textPaint.setARGB(0xff, 0x00, 0x00, 0x00);
// draw the text centered
canvas.drawText("Hello World", 16,112, textPaint);

//Generate one texture pointer...
gl.glGenTextures(1, textures, 0);
//...and bind it to our array
gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

//Create Nearest Filtered Texture
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);

//Different possible texture parameters, e.g. GL10.GL_CLAMP_TO_EDGE
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_REPEAT);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_REPEAT);

//Use the Android GLUtils to specify a two-dimensional texture image from our bitmap
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);

//Clean up
bitmap.recycle();

Answer 12

Si insiste en usar GL, podría renderizar el texto en texturas. Suponiendo que la mayor parte del HUD es relativamente estático, no debería tener que cargar las texturas en la memoria de textura con demasiada frecuencia.