HTML5 Phaser ECMAScript 6, Утилиты и Программы

Часть 27: Конвертация SVG в PNG и Image Resize

Скелет игры готов: главное меню, экран с выбором уроков, непосредственно сцена с игрой (изучения слов) и отображение результата урока (level complete). Кстати, именно он мне подсказал, что в моей диаграмме рассчета баланса игры допущена одна ошибка. Изначально я планировал давать за урок от 4 до 8 монеток, но у этого плана есть недостатки:

1) Это визуально маленькое число и может морально обидеть игрока, он столько старался, а ему дали только четыре монетки.

2) Это ограничивает меня в расчете награды. Если же взять к примеру диапазон от 40 до 80 монеток, то все сразу становится проще. Можно взять за основу лучший результат 80 монеток, а потом за каждую ошибку уменьшать это число, пока не дойдет до минимального значения в 40 монеток. Также это даст возможность использовать нелинейное увеличение/уменьшение награды с ростом уровня пользователя, что бы замедлить его прогресс.

сцена урок завершен — level complete

Теперь осталось собрать все эти сцены в цепочку. Хотя это и кажется простым, но как сделать это красиво? Для сравнения, как рассчитать время потраченное на урок? Можно конечно сохранить время начала урока «new Date.time()«, но ведь игрок на мобильном в любой момент игры может временно переключится в другое приложение. А время пока игрока нет в игре, не должно считаться… я знаю что в Phaser есть встроенный механизм, который учитывает паузы! Но надо почитать документацию.

Теперь на счет главной темы поста, конвертации и изменения размера спраита. Я специально тянул время. Дело в том, что есть много разных способов и программ для создания атласа изображений. Я считаю, что изначально надо опробовать несколько и потом сделать выбор.

Начал я с утилиты grunt-svg2png для конвертации svg графики в png. В свое время я рассчитывал использовать svg в игре, что бы не терять качество при resize игры для мобильного или планшета. Но оказалось, векторные изображения не используются в играх, так как они требуют больших процессорных ресурсов. По этому мне нужен был быстрый способ конвертации svg вектора в png.

Утилита grunt-svg2png хоть и конвертирует вектор в png, но не умеет изменять размер svg файла перед его экспортом в png. Я попробовал использовать другую, созданную на основе svg2png и имеющую опцию resize, но на практике я все равно получал оригинальный размер изображения.

По этому я решил воспользоваться дополнительной утилитой grunt-image-resize, которая используя ImageMagic установленный на ПК делает это превосходно. Ниже привожу инструкцию установки утилит (рекомендую почитать пост о подготовке рабочего места, где я подробно описываю использование grunt)

npm install grunt-svg2png --save-dev
npm install grunt-image-resize --save-dev --no-optional

А вот в gruntfile.js добавляем эти строки:

svg2png: {
  all: {
    files: [
      {cwd: 'src/svg/cards/', src: ['*/*.svg'], dest: 'src/svg/cards_png/',},
    ]
  }
},
image_resize: {
  card_resize: {
    options: {
      width: 225,
      height: 225,
      overwrite: true
    },
    cwd: 'src/svg/cards_png/', src: '*/*.png', dest: 'src/svg/cards_png/',
  },
},

...

grunt.loadNpmTasks('grunt-svg2png');
grunt.loadNpmTasks('grunt-image-resize');

...

grunt.registerTask('svg', ['svg2png', 'image_resize']);

 

Обратите внимание, вам надо будет вручную скачать и установить ImageMagic на вашем ПК. Есть много инструкций как это сделать на сервере, но не на Windows OS. По этому сначала скачайте установочный файл ImageMagic. После установки, откройте НОВУЮ консоль cmd и наберите команду convert —help. Если вы не увидели длинный список, то grunt-image-resize работать не будет. Перепроверьте, что вы не забыли поставить галочку напротив Install Legacy Utilities при установке ImagMagic. После попробуйте добавить путь к директории в которой установлен ImageMagic (C:\Program Files\ImageMagick-7.0.6-Q8) в переменную PATH (rак задать системную переменную PATH).

включение Legacy Utilities при установке ImageMagic

Теперь оставалось создать атлас изображений из полученного результата. К сожалению, у меня не осталось времени искать grunt утилиту, которая на выходе давала бы атлас изображений и инструкции к нему именно в json формате. Все что мне попадалось, на выходе создавало атлас но для использования в html (инструкция к нему была в формате css). Конечно можно было переписать такую утилиту, но я понял, что теряю много времени.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *