Рисование кругового таймера (AndEngine)

Я использую AndEngine, и в рамках этой структуры я хотел бы сделать график с круговым таймером. В частности, я хотел бы отобразить период ожидания повторного использования способности. Идея состоит в том, чтобы динамически заполнять дугу по ходу таймера. Что-то вроде этого:

Graphics.fillArc()

Объект java.awt.Graphics имеет метод fillArc(), который мне кажется идеальным. На самом деле приведенный выше рисунок был нарисован с использованием fillArc(50,5,100,100,75,-40). Здорово! Теперь вот проблема:

AndEngine не использует объекты Graphics(), он использует свою собственную реализацию Shape (для OpenGL) и не имеет определенной формы «Круг», тем более формы круга с методом fillArc().

Возможные решения и связанные с ними проблемы

Поискав решение, я столкнулся с "Рисование круга с помощью Andengine". Эти вопросы и ответы не очень полезны для меня, поскольку единственный ответ «Действительно, вы не можете напрямую нарисовать круг» предлагает две альтернативы: (1) «Визуализация четырехугольника с текстурой круга» - это не сработает для меня, поскольку Мне нужно динамически изменить круг, чтобы создать заполнение дуги; и (2) «Визуализация круга, который на самом деле является кругом соединенных треугольников». Возможно, сработает второй вариант, но там нет руководства, как это сделать.

Я также столкнулся с «Создание круга в android andengine с помощью box2d?" . Я подозреваю, что у кого-то может возникнуть соблазн сказать, что вы можете просто создать такой круг:

Круг телаBody = PhysicsFactory.createCircleBody(pWorld, pSprite, BodyType.StaticBody, FixtureDef);

Это действительно не помогает мне. Я не собираюсь создавать двухмерное физическое тело круга. Я хочу показать один.

Наконец, я нашел это обсуждение, что многообещающе. В частности, есть предложение:

Используйте Canvas, чтобы нарисовать [это] в растровое изображение, и загрузите это растровое изображение как TextureSource.

Звучит разумно, хотя я до сих пор не понимаю, как это сделать.


Обновление: Мое мошенничество «Решение»

Вместо того, чтобы останавливаться на этом, я решил смошенничать (по крайней мере, на данный момент). Я сделал спрайт-лист, который выглядит так:

Изображение мошеннического таймера

Вместо того, чтобы таймер отображал идеальный fillArc(), я просто извлекаю соответствующий индекс спрайта из таблицы спрайтов на основе округления сделанной пропорции (от 0 до 1) до соответствующего индекса на таблице спрайтов. Так:

public void setTimer(float amount) {
    this.setCurrentTileIndex(Math.round(amount * 20));
}

Для моих целей это на самом деле работает просто отлично — я использую таймеры примерно на 2 секунды, поэтому вы действительно не видите недостатка деталей. Но, может быть, я соберусь заменить это «правильным» решением, если кто-то опубликует его. Кроме того, возможно, этот спрайт будет полезен для тех, кто делает то же самое. Вот версия с использованием прозрачности вместо зеленого фона. (Так что он белый на белом фоне stackoverflow, но он есть):

Белый на белом таймере


person Cameron Fredman    schedule 15.02.2013    source источник
comment
:-) кто сказал, что это не правильное решение? это работает, это было легко сделать, задача выполнена. +1   -  person jmroyalty    schedule 16.02.2013


Ответы (1)


Существует третье решение, для которого требуется одна текстура и пользовательский объект. Таким образом, это компромисс между вашими решениями, где одному требуется много треугольников, а другому — память текстуры.

  1. Вам нужно только одно изображение, то есть полный круг в вашей «последовательности читов» выше.
  2. Создайте пользовательский объект, состоящий из 8 треугольников (один «полностью нарисованный» треугольник будет представлять 45° каждый).
  3. The progress determines:
    • How many of the triangles to draw. I.e.:
      • 100% ==> 360° ==> 8 full triangles
      • 50% ==> 180° ==> 4 полных треугольника
      • 37,5% ==> 135° ==> 3 полных треугольника
      • 25% ==> 90° ==> 2 полных треугольника
      • 20% ==> 72° ==> 1 полный треугольник и один треугольник с одной вершиной, перемещенной так, что он представляет оставшиеся 27° (== 72° - 45°).

Если вы спросите меня, это самое крутое решение, так как его можно применить к любой текстуре. знак равно

person Nicolas Gramlich    schedule 17.02.2013
comment
Существует даже четвертое решение: вы можете обновить одну существующую текстуру с помощью растрового изображения, которое нарисовано с помощью встроенной в платформу android.graphics (очень похоже на то, что вы можете сделать с помощью java.awt.graphics). Пример обновления текстур можно найти здесь: github.com/nicolasgramlich/AndEngineExamples/blob/GLES2/src/org/ . - person Nicolas Gramlich; 17.02.2013