Юрій Мірошник “Красиві і швидкі партікл ефекти в HTML5 (JavaScript)”

1. РЕДАКТОР
NEUTRINOPARTICLES
БЫСТРЫЕ И КРАСИВЫЕ ПАРТИКЛ ЭФФЕКТЫ В HTML5

2. ПРЕДНАЗНАЧЕНИЕ РЕДАКТОРА
• Для эффектов симулируемых в реальном времени
• Для разработчиков игр
• Для проектов на HTML5 + JavaScript + 2D Canvas

3. ПЛАН ПРЕЗЕНТАЦИИ
• Обзор основных возможностей
• Принципы работы редактора
• Экспорт в HTML5
• Просмотр галереи с краткими коментариями
• Структура проекта, планы на будущее

4. ОСНОВНЫЕ ВОЗМОЖНОСТИ

5. ПАРТИКЛЫ В ВИДЕ КВАДОВ
• Контролируем:
• 3D позицию;
• 2D размер;
• смещение;
• 3D/2D вращение;
• цвет;
• прозрачность.

6. ВРАЩЕНИЕ
Лицом к камере Свободное

7. МАТЕРИАЛЫ
• Нормальное смешивание
• Добавление
• Умножение

8. ГЕНЕРИРОВАНИЕ ПАРТИКЛОВ
Периодически От пройденного расстояния

9. ГЕНЕРИРОВАНИЕ ЗАЛПАМИ
Возможность обобщать любые параметры в залпе (напр. позицию)

10. БАЗОВАЯ ФИЗИКА
Силы, ветер, сопротивление среды

11. ИНСТРУМЕНТ CURVES
Гибкий контроль над параметрами с помощью графиков

12. ИНСТРУМЕНТ PATH2
Сегменты:
• линейные;
• кривые Безье;
• разорванные.
Ключи:
• с плавным переходом;
• с ломаным переходом.

13. ИНСТРУМЕНТ PATH2
Указание начальной позиции Область передвижения

14. ИНСТРУМЕНТ PATH2
Указание начальной скорости

15. ИНСТРУМЕНТ AREA2
Рисуем кистью область создания партиклов

16. ИНСТРУМЕНТ NOISE3
Эмулирование турбулентности в атмосфере

17. ПРИКРЕПЛЕННЫЕ ЭМИТТЕРЫ
Прикрепление к партиклам других эмиттеров

18. ПРИКРЕПЛЕННЫЕ ЭМИТТЕРЫ
Запуск прикрепленного эмиттера по завершении жизни партикла

19. СЕТКИ ТЕКСТУР
Полный контроль над текущим кадром для партикла

20. А ТАКЖЕ:
• Возможность добавления изображений в область предпросмотра
• Автоматическое обновление текстур
• Undo/Redo
• Автосохранение

21. ПРИНЦИПЫ РАБОТЫ

22. ОКНО РЕДАКТОРА

23. СТРУКТУРА ИЗ БЛОКОВ
Типы данных:
• Float (1)
• Vector2 (2)
• Vector3 (3)
• Rotation (R)

24. СВОЙСТВА ПАРТИКЛА

25. ЭКСПОРТ В HTML5

26. ТРЕБОВАНИЯ К ПРИЛОЖЕНИЮ
• Отрисовка на 2D Canvas
• Самостоятельная загрузка текстур

27. ЭМУЛЯЦИЯ 3D КАМЕРЫ
• Проекция позиции
• Пересчет размера

28. ПРОБЛЕМА РАСКРАШИВАНИЯ ПАРТИКЛА
1 2
3
Умножение текстуры на цвет:
1. Оригинальная текстура (copy)
2. Цветной прямоугольник
(multiply)
3. Оригинальная текстура
(destination-atop)

29. РАЗНОЕ О СКОРОСТИ И КРАСОТЕ
• Экспорт в исходный код малого размера.
• Возможность работы с атласами текстур.
• Отсутствие аппаратной отрисовки в браузерах.
• Хороший баланс с кадровыми анимациями.
• Большой разброс мощности целевых устройств.

30. РАЗНОЕ О СКОРОСТИ И КРАСОТЕ
Разумное использование анимированных текстур – плюс.
44 Кб

31. ПРОСМОТР HTML5 ГАЛЕРЕИ
HTTPS://NEUTRINOPARTICLES.COM/JS-GALLERY/

32. СТРУКТУРА ПРОЕКТА

33. РЕДАКТОР, ЭКСПОРТ-СЕРВЕР И САЙТ
1. Редактор NeutrinoParticles:
• Создание эффектов
• Коммуникация с экспорт-сервером для экспорта
2. Экспорт-сервер:
• Экспорт эффектов
3. neutrinoparticles.com:
• Загрузка редактора
• Создание/менеджмент учетной записи
• Пополнение баланса
• Комьюнити (форум, баг трекер, блог, галерея)

34. БЕТА И БУДУЩИЕ ТАРИФЫ
• Бета – это публичный тест и получение отзывов
• Бета – бесплатна
• После релиза – экспорт 100 эффектов за $1
• Возможности бесплатного пополнения баланса

35. ПЛАНЫ НА БУДУЩЕЕ
• Оптимизация, фиксы, улучшение удобства и понимания
• Экспорт в Java, С++, WebGL и С# (?)
• Переход в полноценное 3D