Kodu – проект, позволяющий делать свои простенькие игры без знания программирования, а визуально перетаскивая объекты на сцену, стал доступен для PC в виде Technical Preview – версии. До этого Kodu был доступен только в версии для Xbox 360.

Скачать можно здесь.

Данный текст является вольным переводом на русский язык статьи “Minimizing your designer footprint”.

Введение

С появлением более мощных веб-платформ, стало возможным создание больших возможностей и замысловатого дизайна. Но при создании таких приложений стоит принимать во внимание и мощность компьютера пользователя, который увидит ваш дизайн, а также скорость интернет соединения.

Эта проблема для веб-дизайна не нова. Всегда требуется создавать такой дизайн, который не потребует от пользователя скачивания большого количества информации для просмотра страницы – поэтому дизайнеры часто применяют gif-изображения или повторяющийся фон со спрайтами, которые хранят всю графику в одном месте.

Эти принципы также верны и для Silverlight-приложений, но с появлением многих элементов, которые раньше было трудно или совсем невозможно достичь, дизайнеры должны заботиться о таких вещах еще сильнее. Как и на всех сайтах, уменьшение времени загрузки страниц крайне важно для удержания внимания пользователя. Также нужно держать в голове и то, что ваше приложение не должно сильно нагружать компьютер, на котором оно будет выполняться.

Выбор правильного подхода

Есть достаточное количество способов минимизировать “дизайнерский след” внутри Silverlight-приложения. Предлагаемый список, конечно же, не является полным, поэтому большая просьба – оставляйте свои комментарии с советами по тому, как сделать красивый и легкий дизайн.

Xaml против Растра

Для реализации своих задумок дизайнеры располагают большим количеством отличных инструментов и способов для работы с ними визуально. Главное выбор, который приходится сделать – использовать ли объекты векторной графики, созданные с помощью XAML или же применить в своих работах растровые изображения, такие как JPG и PNG. В большинстве случаев, вы будете использовать оба типа – как векторную графику, так и растровую для достижения лучшего вида, но все же есть несколько советов для выбора оптимального варианта.

Вектор (XAML)

Векторные изображения применяются для форм и обектов, созданных с помощью путей из серий точек и вычислений. Лучшее свойство векторных форм – масштабироваться до любых размеров без потери качества. Это очень подходит для создания стилей и изображений, не требующих фотореалистичности. После создания формы, дизайнер может использовать инструмент “direct selection” для манипулирования и настройки отдельных точек для уточнения формы.

Минус векторов заключается в том, что они отрисовываются в момент запуска. Более сложные векторные изображения требуют использования большего количества путей и точек. Все это может сильно сказаться на количестве ресурсов процессора и памяти для запуска приложения на машине пользователя.

PNG

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

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

Стоит также не забывать, что, используя растровые изображения, Вы теряете возможность масштабировать изображение без потери качества. Растр означает то, что изображение привязано к пикселям – никаких вычислений для создания изображения в момент запуска не производится, что не позволяет перерисовывать изображение в другой размер. Эта проблема решается созданием нескольких изображений разного разрешения, но это приводит к увеличению размера графических файлов.

Если качество изображения установлено на 100%, то тогда PNG-файлы отлично подходят для использования в качестве изображений и линий с текстом, создаваемых компьютером (это не значит, что не стоит использовать линии и текст, создаваемые с помощью Silverlight). Также, PNG является хорошим выбором и тогда, когда нужно добавить тени прямо в изображение, используя альфа-канал и не использовать графические эффекты, о которых я расскажу немного позже.

JPG

Формат JPG обычно применяется при использовании фотографий или рендеров с фотореалистичностью. Способность создавать насыщенные изображения, такие как фотографии, с минимальным размером – довольно весомый аргумент. Однако, JPG довольно тяжело использовать для текста и линий, к тому же отсутствие альфа-канала может может привести к дополнительным трудностям с качеством изображений и добавлением их в проект.

GIF

Не доступен в Silverlight “из коробки”.

Графические эффекты

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

Они выглядят очень отлично, но нагрузка, которая выпадает на процессор и оперативную память может привести ваши великие замыслы к краху. Каждый раз, когда объект с графическим эффектом перерисовывается (перемещается или использует анимацию), эффект должен вычисляться заново.

Графические эффекты должны использоваться как можно меньше, а лучше – вообще избежать их использования, если это возможно. Если же эти эффекты очень важны для реализации вашей задумки, постарайтесь свести количество анимации к минимуму. Лучше всегда “вшивать” эффекты в PNG-изображения. Стоит отметить, что только тени и размытость доступны “из коробки”.

Повторное использование стилей

В больших приложениях повторное использование стилей помогает дизайнерам избежать раздувания XAML-кода, а также оставить размер файла и время его загрузки на низком уровне, к тому же значительно облегчить последующее обслуживание приложения. Ресурсные словари – отличный способ для удержания информации о стилях и кистях в одном месте, что позволяет Вам применять эти стили ко множеству контролов вашего приложения, оставляя при этом XAML чистым и легкочитаемым.

Заключение

Это только несколько способов для Вас, как дизайнера, помогающих оградить ваши работы от негативных последствий, при их создании. Буду рад услышать ваши подсказки и советы по поводу того, как создавать проекты, работающие гладко и, в то же время, предлагающие широкие возможности.

Спасибо за прочтение.

С наступающим Новым Годом, коллеги! Надеюсь, что 2010 год принесет всем вам успеха, удачи и много-много счастья! С праздником!!!

А в качестве своего поздравления предлагаю вам посмотреть на небольшую открытку, которую сделал сам в Microsoft Expression :)

Открытка

Она же, но без музыки

Та же открытка, но картинкой

Еще раз с наступающим! ;)