Назад Вперед

Часть 4. Немного графики. Как ее создать и загрузить в проект.

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

Для графики, как описывал в разделе Инструментарий, я использую графический редактор GIMP2. Открываю его и нажимай меню ФайлСоздать проект...

Новое изображение в графическом редакторе

В новом открытом окне нужно указать основные настройки изображения. Начну я с платформ, поэтому прописываю ширину 20px и высоту 50px. Так же смотрю, чтобы в пункте Заполнение было указано Цвет фона и нажимаю ОК.

Основные настройки нового изображения

Изображение появляется в окне редактирования. Платформы я делал двухцветные. Для первой платформы — основной фон синий и внутри прямоугольник красного цвета. Для второй платформы все наоборот, заливка красного цвета, прямоугольник — синий.

Создание первой платформы

Для такой поставленной задачи мне понадобиться всего 2 инструмента. Плоская заливка и Прямоугольное выделение.

Создание первой платформы

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

После того, как платформа готова, ее нужно экспортировать с нужным разрешением. Нажимаю снова Файл — Экспортировать как…

Экспорт изображения

После этого выбираю путь куда буду сохранять файл изображения. Я сразу сохраняю в папке проекта assets/image. Указываю имя файла player_one, и смотрю, чтобы разрешение было .png. Нажимаю Экспортировать.

Указание пути экспорта

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

Завершение экспорта изображения

Вторую платформу создаю по аналогии, но уже только с другими цветами. И также ее экспортирую в новый файл player_two в папку image в своем проекте. Вторая платформа готова.

Создание второй платформы

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

Перехожу к созданию шара. Для этого нажимаю снова Создать проект… На этот раз указываю квадратные размеры (100х100px) и самое главное, в настройках указать в пункте ЗаполнениеПрозрачность.

Создание нового изображения

Мне понадобиться инструмент — Эллиптическое выделение. С его помощью я выделю всею область изображение в виде круга. И снова использую сплошную заливку синего цвета.

Создание шара

Добавлю еще небольшой эффект объемности с помощью кисти Аэрограф. Получился симпатичный шар.

Создание шара

Изображение можно Экспортировать в нужное место по принципу как и с платформами. После чего сохраняю сам проект для возможности дальнейшего его редактирования.

Осталось только сделать центральную белую линию. Создаю новый проект. Ширина 10px, высота - 400px (по размеру игрового экрана). Заполненность сразу поставлю Белого цвета. И можно сразу его Экспортировать. Больше никаких изменений делать не нужно.

Создание центральной линии

Все изображения готовы и находятся в папке проекта. Можно приступить к загрузке изображений. Для этого открываю папку в редакторе кода и перехожу в файл preloader.js. Именно загрузка всех изображений будет происходить в этой сцене, а уже размещение в game.js.

Работа с первой сценой

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

Файл preloader.js:


    ...
    this.load.image('player_one', './assets/image/player_one.png');
    this.load.image('player_two', './assets/image/player_two.png');
    this.load.image('center_line', './assets/image/center_line.png');
    this.load.image('ball', './assets/image/ball.png');
    ...
 

Загрузка изображений

Чтобы проверить, все ли работает и выполняется ли переход с предзагрузочной сцены на стартовую, запускаю локальный сервер. Ошибок консоль не выдает, значит изображения успешно загружаются и переход все еще работает.

Проверка в браузере

Размещением изображений займусь уже в следующем материале.

Спасибо за внимание!

Назад Вперед