Отдел новостей 10 февраля 2015, 13:38

Генерация спрайтов для различных разрешений экрана

Автор: Михаил Шишло

Столкнулся со одной нетривиальной задачей на одном из проектов. Задача состояла в следующем. В веб приложении использовалось большее количество спрайтов для 2D анимации, которые отрисовывались на canvas, причем спрайты необходимо было отдавать для 10 различных разрешений экрана. Понятно, что руками создать такое количество спрайтов не реально, поэтому на помощь пришла замечательная программа Texture Packer и немного кода на C#, которые позволили автоматизировать этот процесс. Texture Packer – это приложение для создание спрайтов. Приложения доступно для Win/Mac/Linux. Т.к наше приложение на .NET, использовалась Windows версия, причем вызывать приходилось из командной строки.

Для каждого спрайта был создан bat файл, в котором была следующая строка вызова Texture Packer: "C:\Program Files (x86)\CodeAndWeb\TexturePacker\bin\TexturePacker.exe" --data ..\Assets\sprites\logo_0_%1.json --format json-array --sheet ..\Assets\sprites\logo_0_%1.png --scale %2 --algorithm Basic --basic-sort-by Name --border-padding 0 --shape-padding 0 --max-size 2048 --size-constraints AnySize ..\Assets\sprites\logo_0\

Опишу параметры:

%1 – параметр для задания разрешения для спрайта, устанавливается “960x540”

%2 – масштаб для спрайта. Т.к исходные картинки были для разрешения 1920x1080, то к примеру, чтобы сгенерировать подходящий спрайт для разрешения 960x540, нужно масштаб установить в 0.5

--data ..\Assets\sprites\logo_0_%1.json – имя файла для сгенерированных параметров спрайта, данный файл нам также понадобится для создания анимированных спрайтов

--format json-array – формат для параметров спрайтов

--sheet ..\Assets\sprites\logo_0_%1.png - непосредственно выходной файл со спрайтом --scale %2 – масштаб при генерации спрайта

--algorithm Basic --basic-sort-by Name --border-padding 0 --shape-padding 0 --max-size 2048 --size-constraints AnySize – эти параметры отвечают каким образом генерировать спрайт, т.е выбран Базовый алгоритм расположения картинок в спрайте без границ и отступов, максимальный размер не должен превышать 2048x2048. Подробнее об этих и других параметрах можно прочитать в документации к Texture Packer.

..\Assets\sprites\logo_0\ - последний параметр – папка, где располагаются картинки для генерации спрайта.

Пример спрайта для разрешения 1920x1080:

И для разрешения 1280x720:

Теперь остается вызвать этот bat файл из кода. Для этого была написана следующая функция:

private string ResizeSprite(string assetName, int screenWidth, int screenHeight, double scale)
{
var assetFolder = Server.MapPath("~/Assets/sprites");
var fullPath = Path.Combine(assetFolder, string.Format("{0}_{1}x{2}.{3}", assetName, screenWidth, screenHeight, "png"));
if (!System.IO.File.Exists(fullPath))
{
int exitCode;
ProcessStartInfo processInfo;
Process process;

var processDir = Server.MapPath("~/TexturePacker");
processInfo = new ProcessStartInfo("cmd.exe", "/c " + string.Format("{0}\\{1} {2} {3}", processDir, assetName + ".bat", screenWidth + "x" + screenHeight, scale.ToString("0.0000", CultureInfo.InvariantCulture)));
processInfo.WorkingDirectory = processDir;
processInfo.CreateNoWindow = true;
processInfo.UseShellExecute = false;
// *** Redirect the output ***
processInfo.RedirectStandardError = true;
processInfo.RedirectStandardOutput = true;

process = Process.Start(processInfo);
process.WaitForExit();

// *** Read the streams ***
string output = process.StandardOutput.ReadToEnd();
string error = process.StandardError.ReadToEnd();

exitCode = process.ExitCode;

process.Close();
return output;
}
return null;
}

Все в принципе понятно по коду. Проверяем, сгенерирован ли файл со спрайтом в нужном разрешении, если это не так, то вызываем bat файл из командной строки и передаем постфикс с разрешением для имени файла и масштабом спрайта. На выходе у нас будет создан файл со спрайтом и текстовый файл с описанием спрайта. Спасибо за внимание.