|
|
|||||||||||||||||||||||||||||
|
3D Flash (практика), Создаем контрольную панель гравицапыИсточник: arttower
Тема этого урока - конвертация из 3D Max (или любого другого 3D-редактора, допускающего экспорт в формат 3ds) в Flash методом векторного пререндеринга и возможные варианты использования полученного материала. Оговорю специально, что это не урок о том, как делать сайты или презентации, и вопросы художественные в данном случае не рассматриваются. Цель урока - дать представление о технических возможностях подобного подхода. Я не буду оговаривать каждый раз, когда нужно сохранить файл. Скажу один раз, что это нужно делать каждые 5-10 минут просто на всякий случай, и к тому же - в новый файл (3D Max это делает автоматически при нажатии на "+" в диалоге Save As, в остальных программах сохранение предыдущих версий придется делать вручную). Итак: мы делаем оригинальный интерфейс пользователя, корнями уходящий в увлечение автора урока игрой "ИЛ-2 Штурмовик". Предположим, что мы уже создали в 3D MAX нужную нам модель "кокпита" нашей гравицаппы. Примерно такая:
Уменьшено: 98% от [ 800 на 608 ] - нажмите для просмотра полного изображения На моделировании такого объекта останавливаться не будем, а перейдем непосредственно к теме урока - конвертации 1. Подготовка модели и анимации в 3D MAX. а) Первым делом разгруппируем все сгруппированные объекты. Удобнее всего это делать не ungroup, а explode - с помощью этой функции объекты разгруппировываются по всем уровням вложенности групп. Делать это нужно потому, что группы не отобразятся правильно в Swift3D - будут перепутаны pivot point-ы (точки привязки), и сгруппированные объекты переместятся в сцене на совершенно неожиданные места - а выставлять их на места в Swift 3D - задача не из приятных.
б) Все элементы нашей модели оптимизируем - в разумных пределах, но помня, что 100 000 полигонов - это для Swift3D ноша тяжелая, к тому же увеличивающая размер конечной swf-ки (за счет не особенно нужного нам точного просчета теней векторным рендером), а, с другой стороны - слишком сильная оптимизация даст "вылезшие полигоны" на конечном рендере.
в) После этого все элементы модели, кроме стандартных примитивов (бокс, сфера, цилиндр), превращаем в Editable Mesh. Оставшиеся в стеке модификаторы - риск получить "кривую" 3ds-ку, которую Swift попросту не поймет и в лучшем случае не так отобразит, в худшем - зависнет.
г) Поскольку анимация камеры у нас очень простая, не предполагающая сложного движения по контроллерам, мы можем выставить и анимировать камеру прямо в 3D MAX. Для наших целей нужно поставить Target камеру точно по центру на некотором расстоянии от нашей "панели управления" - примерно как на первом скриншоте. После этого выставляем количество фреймов (50), FPS (25/с) - хотя это скорее для предварительного просмотра в 3D MAX, FPS мы будем выставлять позднее.
Просматриваем, поправляем камеру, еще раз проверяем, все ли объекты разгруппированы и "с-мешены", и - экспортируем в формат 3ds. Т.е. выбираем File -> Export, формат "3ds", задаем имя файла, сохранить. Все, на этом работа в 3D MAX завершена. 2. Импорт модели и редактирование сцены в Swift3D. а) Запускаем Swift3D , помолясь богам 3D-моделлеров, выбираем пункт "File->New from 3DS".
Уменьшено: 98% от [ 800 на 625 ] - нажмите для просмотра полного изображения б) У нас имеется два окна для 3d-видов, панель инструментов сверху, два больших внизу - одно для вращения объектов, другое для вращения источников света, - правее - библиотека материалов, слева вверху - основное "меню сцены", оно же окно свойств, откуда можно управлять параметрами сцены вроде environment и ambient light, и параметрами объектов в зависимости от того, какой объект выбран - от координат и углов поворота до параметров сглаживания (и то, и другое нам пригодится). Здесь же (пункт Layout) выставляются основные параметры - конечный размер (у нас 800x600), способы отображения 3d-видов (на удивление не влияющие на скорость прорисовки), отображение "сеток" и др. в) Но пора и к делу.
Уменьшено: 76% от [ 1024 на 344 ] - нажмите для просмотра полного изображения г) Отжимаем кнопку "Animate" и раскрашиваем "панель". В процессе раскраски познакомимся с библиотекой материалов, которая, конечно, существует скорее для ознакомления с возможностями и старта для редактирования/создания новых материалов, чем для использования.
Но для этого нужно сначала, разумеется, выбрать объект. Если он недоступен "мышью в окне" - можно открыть флоатер "Hierarchi" ("Иерархия"), в котором будут представлены объекты геометрии сцены, и где можно их выбрать. Я выбрал темно-серый материал из вкладки "Metals", доредактировав - затемнив, - для основной "конструкции", темный серый металл из "Reflections" для угловых шариков и довольно долго подбирал золотистый и темно-серый материалы для кнопок и панели. Для кнопок "вправо-влево" я сначала выбрал "хромистый" reflection, но в процессе настройки оказалось, что лучше смотрится темный неблестящий металл. Текстурированные материалы нам пока не понадобятся. Они дают "тяжелую" флэшку и требуют изрядного труда по настройке параметров рендеринга, чтобы быть хорошо выведенными. Наша же декоративная панелька пока не требует такой роскоши. А вот прозрачные материалы пригодятся - тем более что они и в итоговой флэшке будут прозрачными, т.е. сквозь них будут "видны" не только части, отрендеренные в Swift, но и фон той флэшки, в которую мы все это импортируем. Так что выбираем голубоватое "стекло" из категории материалов "Transparent", донастраиваем его и присваиваем "экранчикам".
д) Изменяем Environment - окружение и занимаемся расстановкой и настройкой источников света.
Уменьшено: 98% от [ 800 на 305 ] - нажмите для просмотра полного изображения Плохие новости: в иерархии объектов сцены лайты не отображаются. Хорошие новости: зато они есть на "Light Ball"-е - том самом сером шаре внизу. Периодически в процессе настройки света приходится делать пробный рендеринг, а заодно и посмотреть, что из всей нашей работы выходит.
Уменьшено: 61% от [ 1280 на 998 ] - нажмите для просмотра полного изображения Я выбрал серовато-зеленый свет для подсветки "экранчика" вверху и основного "света" и синий для подсветки нижнего "экранчика". В процессе настройки оказалось, что нужен еще серый для "заполнения" - вместо "выключенного" амбиента.
Уменьшено: 98% от [ 800 на 297 ] - нажмите для просмотра полного изображения
Уменьшено: 98% от [ 800 на 301 ] - нажмите для просмотра полного изображения е) Еще один тестовый рендер выявляет маленькую, но неприятную проблему:
Уменьшено: 68% от [ 1158 на 830 ] - нажмите для просмотра полного изображения маленькие черные артефакты на трех видимых "шариках" не очень заметны сами по себе, но при анимировании они явно будут еще и "мерцать".
После экспериментов я поставил еще один Omni Light - темно-фиолетовый, "контровым" светом, и на "кнопочках" на панели засветились красноватые отблески.
Уменьшено: 98% от [ 800 на 310 ] - нажмите для просмотра полного изображения ж) На этом самый больошй этап - редактирование в Swift - закончен. Еще раз проверяем настройки рендеринга, делаем несколько пробных рендерингов, - первого кадра, последнего, откуда-нибудь из середины - а вдруг там рендерер выкинет неожиданный фокус и свет "прыгнет" слишком резко или тень появится "из ниоткуда"?...
Уменьшено: 61% от [ 1280 на 1000 ] - нажмите для просмотра полного изображения ...нет, вроде не появился. Export All Frames. ...и Ваш покорный слуга тоже отправляется на перекур, после чего мы непременно продолжим. ==================== 3. Импорт в Flash и работа с swft-объектом в Flash. а) Предварительные хлопоты.
Уменьшено: 76% от [ 1024 на 798 ] - нажмите для просмотра полного изображения б) Забираемся в swft
в) Останавливаем "cab": в первом фрейме swft-шки (т.е. - не возвращаясь в основную сцену) пишем stop(); Больше он сам по себе кивать не будет - что мы незамедлительно проверим по F12. function onMouseMove() { } Я не буду сейчас останавливаться на ActionScript программировании, только скажу, что этот кусочек кода делает следующее: определяет, когда пользователь двинул мышь выше 300px по вертикали, а когда - ниже. В первом случае включается функция, которая c каждым кадром мувика ctrl заставляет переходить мувик cab на один фрейм назад, пока не будет достигнут первый фрейм мувика cab, во втором случае - в обратном направлении. Дальше мы добавим кнопки.
Уменьшено: 93% от [ 843 на 716 ] - нажмите для просмотра полного изображения А в первом фрейме нашей панельки можно "посадить" что-нибудь другое. В данном случае я в мувике cab завел новый слой и в первом его фрейме нарисовал "логотип мегакорпорации "Гравицаппа", потом скопировал этот "логотип" во второй фрейм, посмотрел, на каком фрейме верхний "экранчик" исчезает и до этого фрейма сделал банальный MotionTween - на 5 кадрах вряд ли кто-то заметит неуловимое несходство перспективных искажений логотипа и "верхнего экранчика". В первом же фрейме превратил этот логотип в муви-клип (по клавише F8) и сделал Motion Tween на несколько кадров - чтобы он и появлялся не скучно. Немного фоновых звезд (новый слой, импорт картинки, картинку - на сцену в новый слой, превратить в MovieClip - F8 - и задать имя экземпляра - "stars1", в свойствах слоя я немного поиграл с режимами blending-а - благо Flash 8 на дворе... ) и маленький кусочек Flash-кода (в первом и навсегда единственном фрейме основной сцены, слой "as" -> F9), перед stop(); - останавливаем мы мувик в последнююю очередь: _root.stars1.onEnterFrame = function() { ...что означает "на каждом фрейме поворачивать на 1 градус,если градусов набралось 360 - обнулить (от греха переполнения). Автором урока является Des. Ссылки по теме
|
|