Нарисуйте текст в OpenGL ES

Question

В настоящее время я разрабатываю небольшую игру OpenGL для платформы Android, и мне интересно, есть ли простой способ визуализации текста поверх отрисованного фрейма (например, HUD с оценкой игрока и т. Д.). В тексте также потребуется использовать собственный шрифт.

Я видел пример использования View в качестве наложения, но я не знаю, хочу ли я это сделать, поскольку позже я мог бы перенести игру на другие платформы.

Есть идеи?

Answer 1

Я искал это несколько часов, это была первая статья, на которую я натолкнулся, и, хотя она имеет лучший ответ, самые популярные ответы, которые я считаю, не соответствуют действительности. Конечно за то, что мне было нужно. Ответы Вейкселя и Шаказеда были прямо на кнопке, но немного затенены в статьях. Чтобы поставить вас прямо в проект. Вот: Просто создайте новый проект Android на основе существующего образца. Выберите ApiDemos:

Загляните в исходную папку

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

И вы найдете все, что вам нужно.

Answer 2

Для статический текст :

• Создание изображения со всеми словами, используемыми на вашем компьютере (например, с GIMP).
• Загрузите это как текстуру и используйте в качестве материала для плоскости.

Для длинного текста , который необходимо обновлять время от времени:

• Пусть андроид рисует на растровом холсте (решение JVitela).
• Загрузите это как материал для самолета.
• Использовать разные текстурные координаты для каждого слова.

Для число (в формате 00.0):

• Создание изображения со всеми числами и точкой.
• Загрузите это как материал для самолета.
• Используйте шейдер ниже.

• В вашем событии onDraw обновите только переменную значения, отправленную в шейдер.

  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;
  
  }
  

Приведенный выше код работает для атласа текстуры, где числа начинаются с 0 в 7-м столбце 2-й строки атласа шрифта (текстура).

См. https://www.shadertoy.com/view/Xl23Dw для демонстрации (хотя с неправильной текстурой)