Интерфейс

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск

Содержание

Данная статья посвящена функциональным возможностям наших Редакторов: Редактору сцен, Редактору ресурсов и Редактору текстов.


Ico main.pngРедактор сцен

Редактор сцен — программа, предназначенная для создания, редактирования и экспорта игровых экранов, в котором происходит настройка свойств объектов и игровой логики.

Окно редактора сцен состоит из:

  • меню редактора;
  • рабочей области, в которой размещен обьект сцена, на котором размещают другие обьекты;
  • панель Лэйаут, в которой размещено иерархическое дерево проекта, которое состоит из экранов, на которых находятся игровые объекты;
  • панель Свойства, которая отображает свойства объекта, который выбран в дереве проекта;
  • панель для построения сплайна;
  • панель инструментов;
  • строка Координаты, отображающая координаты курсора в текущий момент времени

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

Головна2.PNG

Меню редактора

Project (Проект)

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

  • New project - создать новый проект;
  • Open - открыть уже созданный проект (проект обязательно должен находится в подкаталоге редактора);
  • Recent project... - показывает список последних открывавшихся проектов;
  • Close - закрытие проекта (редактор при этом не закрывается);
  • New project - создать новый проект;
  • Save - сохранение проекта;
  • Save as... - сохранение проекта под новым именем или в новом каталоге;
  • Export... - экспорт проекта;
  • Project options... - опции проекта;
  • Exit - закрытие редактора.

Edit (Редактирование)

меню редактирования проекта:

  • Copy - копирование объекта;
  • Paste into current object - вставка объекта в выбранный объект;
  • Paste after current object - вставка объекта после выбранного объекта;
  • Delete... - удаление объекта;
  • Delete temp data - удаление опций;
  • Find object... - поиск объекта по id или по имени;
  • Setup Editor... - настройки редактора.

View (Просмотр)

меню запуска Вьювера (Viewer)- проигрывателя созданного экрана проекта:

  • Start Viewer - запуск вьювера;
  • Start Viewer with changed time - запуск вьювера с заданным временем;
  • Setup Viewer... - настройки окна вьювера для выбранного проекта.

Layouts (Лейаут, Макеты)

меню работа с лейаутами проекта (выбор макета устройства для проекта, редактирование экранов):

  • Add new layout... - создание нового лейаута;
  • Delete layout... - удаление лейаута;
  • Layout settings... - настройки лейаута;
  • Add folder... - создание папки в текущем лейаута;
  • Add screen... - создание нового экрана.

Tools (Инструменты)

меню дополнительных редакторов и инструментов для проекта (вызов редактора ресурсов, текстового редактора, анализ проекта). Список этого меню вынесен на панель с кнопками быстрого запуска:

  • Resources Editor - редактор ресурсов;
  • Texts Editor - текстовый редактор;
  • Analyzer - анализатор ресурсов (показывает колличество объектов проекта, их размер занимаемой памяти, сведения о ресурсах каждого объекта (размер, ID номер, название (имя), местонахождение в базе ресурсов));
  • Object info... - общие свойства объекта (показывает размер памяти занимаемой текстурами);
  • Options info... - информация об опциях.

Help (Помощь)

меню вызова справки.

Кнопки панели Инструменты

Некоторые инструменты также вызываются горячими клавишами (комбинация клавиш приведена в скобках )

00 6.png (Ctrl+N) — создать новый проект;
00 7.png(Ctrl+O) — загрузить уже созданный проект;
00 8.png(Ctrl+S) — сохранить изменения в проекте;
00 9.png — запустить Viewer;
009.JPG — нормальный вид;
Ico text.png - вызов текстового редактора;
Ico base.png — вызов редактора ресурсов;
013.JPG — анализатор ресурсов (показывает колличество объектов проекта, их размер занимаемой памяти, сведения о ресурсах каждого объекта (размер, ID номер, название (имя), местонахождение в базе ресурсов));
014.JPG— поиск объекта по id или по имени.

Функции рабочей области

1) Масштабирование рабочей области
Ctrl + колесико мышки крутим вперед - увеличиваем обьекты , назад - уменьшаем обьекты.

2)Перемещение по рабочей области
После масштабирования возникает необходимость переместиться с левого уголка экрана в далекий правый, переместиться к выбраному обьекту, вверх или вниз.

Кликаем правой кнопкой мыши по горизонтальному scroll и выпадает меню:

  • scroll here — функция перемещает экран к обьекту, который выделен в Лэйауте;
  • scroll left / right - функция перемещает экран на маленькое расстояние вправо / влево;
  • left / right edge — функция перемещает экран в левый / правый угол экрана;
  • page left / right - функция показывает левую/правую часть экрана

Кликаем правой кнопкой мыши по вертикальному scroll и выпадает меню:

  • scroll here — функция перемещает экран к обьекту, который выделен в Лэйауте;
  • scroll up / down - функция перемещает экран на маленькое расстояние вверх / вниз;
  • top/bottom - функция перемещает экран вверх / вниз;
  • page up / down - функция перемещает экран верхнюю / нижнюю часть экрана.

Меню прокрутки скрывается по нажатию клавиши Alt

Функции панели Лэйаут

Лэйаут 1.JPG

При клике правой кнопкой мыши по выбраному лэйауту (см. рисунок справа)

  • Создать папку в текущем обьекте;
  • Создать экран в текущем обьекте - создание обьекта в текущем лэйауте;
  • Импорт/экспорт экранов — импорт/экспорт одного или нескольких экранов;
  • Развернуть / Свернуть обьекты с подобъектами — сворачивает / разворачивает дерево обьектов всех экранов

При клике правой кнопкой мыши по выбраному экрану, сцене или обьекту возможно:

  • Создать сцену в текущем обьекте - создание экран в текущем экране;
  • Создать экран в текущем обьекте - создание экран в текущем лэйауте;
  • Создать обьект сцены в текущем обьекте - создание обьекта в текущем обьекте;
  • Удалить обьект - удаление обьекта из проекта;
  • Копировать обьект — копирование обьекта;
  • Вставить в текущий обьект — вставка обьекта в текущий обьект верхнего уровня ;
  • Вставить как ссылку в текущий обьект — вставка обьекта в текущий обьект для создания расшариной сцены;
  • Вставить как ссылку после текущего обьекта — вставка обьекта после текущего обьекта для создания расшариной сцены;
  • Вставить после текущего обьекта - вставка обьекта после текущего обьекта;
  • Импорт/экспорт экранов — импорт/экспорт одного или нескольких экранов;
  • Развернуть / Свернуть обьекты с подобъектами — сворачивает /разворачивает дерево обьектов экрана или сцены;

Важное замечание по функции Расположить сцену в соответствии с изображением

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

Данная функция вызвается кликом правой кнопкой мыша по обьекту

Панель свойства 1.JPG

Функции панели Свойства

  • При клике на тип или имя некоторых обьектов вызываются дополнительные окна.Например, при клике на тип Machine открывается окно, где прописываются функции обьекта типа Machine.
  • При наведении на поле тип выпдает подсказка с уникальным номером обьекта.
  • При клике правой мышкой по названию свойства обьекта выпадает меню с дополнительными свойствами обьекта
  • Некоторые свойства обьектов объединены в группы (см. рисунок справа)

Создание проекта

1. Для создания нового игрового проекта необходимо запустить редактор сцен SceneEditor.
2. В верхнем меню Проект выбрать Новый (т.е. создать новый проект).
3. В появившемся окне указываем имя проекта и имя базы ресурсов.Выбираем папку для сохранения проекта
4. В этом окне выбираем устройство для которого создаётся проект, а затем выбираем тип магазина и вариант версии игры
020.JPG 021.JPG

5. В редакторе сцен в меню Проект → Сохранить → проект с именем Learning.
Эту методику действий можно брать за шаблон для создания других проектов.
Результат: Создана база ресурсов и проект для выполнения Уроков.

Важное замечание по созданию проекта

2 лэйаута.JPG


Предположим нам необходимо создать игру для магазина А и магазина Б. Игра будет отличаться только 10 функциями. Мы можем создать игру для магазина А., а потом скопировать папку с проектом, проект переименовать, внести изменения и получить игру для магазина Б. Результат: 2 игры и 2 папки с ресурсами. Такой подход не приветствуется.
Для уменьшения времени на создание проекта, подключение ресурсов, внесения одинаковых обьектов и удобства отслеживания багов и прочего в Редакторе Сцен существует возможность создания двух лэйаутов в одном проекте. При создании проекта мы выбираем оба магазина, после чего в панели Лэйаут появится два лэйаута для магазина А и магазина Б(см. рисунок справа. При этом текстовая база проекта и база ресурсов у них будут идентичны. При создании новых объектов в одном лэйауте они же будут создаваться и в другом, при этом можно изменять свойства обьекта каждого лэйаута независимо от второго.

Экспорт проекта

Этапы экспорта проекта

  • Выполняется сжатие графики при необходимости
  • Очистка базы ресурсов от неиспользуемой графики
  • Запаковка графики в текстуры и контейнер

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

Процедура экспорта проекта вызывается через меню редактора Проект - Экспортировать проекта

Exp12.png

Параметры экспорта проекта:
Настройки параметров графики

  • Ось Х, ось У — параметры сжатия графики по оси Х,У. Значения параметра от 0 до 1. При
  • При выполнении сжатия рекомендуется обращать внимания на размер лэйаута
  • Сжатие графики возможно и непропорциональное . Используется редко

Параметры запаковки графики

  • Packege Type - упаковка ресурсов в фаил с типом DAT. Обеспечиваем защиту ресурсов проекта от несанкционированного доступа. Увеличиваем производительность при операциях чтения файлов ресурсов с твердотельного носителя.
  • Texture Type - упаковка графических файлов в текстуры. Необходимо для уменьшения используемого объема оперативной памяти.

Тип экспорта

  • One project file - формируется один XML файл описывающий проект.
  • Split project on screens, load partly' - проект будет разбит на отдельные файлы описывающие экраны, загружаться файлы будут в порядке использования (вызова) в проекте. В результате получаем увеличение начальной загрузки проекта и использование меньшего объема оперативной памяти.

Export to folder - Путь для экспорта.Если указан путь экспорта проекта, то не учитывается выбранная ниже платформа. Если не указан - проект экспортируеются под выбраную платформу Структура папки: TreeFolder.png
Select platform - необходимо выбрать платформу для которой будем собирать проект. При экспорте на все платформы необходимо установить Marmalade SDK см. инструкцию при этом не нужно указывать путь для экспорта (оставить поле пустым). В результате запустится скрипт сборки исполняемого пакета, это будет видно по черным экранам с ходом выполнения процесса сборки.Процесс экспорта будет отображаться в окне.

Ico base.pngРедактор ресурсов

Общее описание

Ico base.pngРедактор ресурсов - приложение, которое управляет базой графических, анимационных, видео и звуковых ресурсов проекта.

New resource editor look.jpg

Ресурсы проекта могут быть внесены и модифицированы только через Редактор ресурсов.
Как и в редакторе сцен, вверху окна редактора ресурсов расположено меню и кнопки быстрого доступа: создать базу ресурсов, открыть уже существующую, добавить картинку (png, jpeg), анимацию, мелодию (mp3, ogg), видео (mp4).
Ниже, в левой панели находятся папки, внутри которых можно найти различные графические ресурсы:

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

Меню Редактора ресурсов

Некоторые инструменты также вызываются горячими клавишами (комбинация клавиш приведена в скобках )

Меню File

  • New Project (Ctrl+N) – создать новый проект с новой базай ресурсов. Возможно в качестве базы ресурсов выбрать уже существующий каталог ресурсов.
  • Open Project (Ctrl+N) - открыть базу ресурсов ранее созданного проекта
  • Создать проект по папке — создать базу ресурсов по каталогу с ресурсами

Меню View

  • Always on top - всегда отображать Редактор Ресурсов поверх всех окон
  • Image Viewer - отобразить панель Image Viewer для просмотра ресурсов

Меню Project

  • Add Root Base - создать еще одну базу ресурсов в текущем проекте
  • Add images — добавить изображения в проект
  • Add Animations — добавить анимацию в проект
  • Add Sounds - добавить звук в проект
  • AddVideos - добавить видео в проект
  • Delete Resource — удалить ресурс
  • Options — вызов окна настройки отображения изображений в редакторе
  • Обрезать images в старом проекте — вызов функции удаления бордера изображения (у всех ресурсов) на указанную величину в параметре Transparent Border Size вкладки Cropping Settings из Options меню Project

Кнопки Add images, Add Animations, Add Sounds , AddVideos, Delete Resource вызвается по клику правой кнопки мыши в дереве базы ресурсов

Область визуализации ресурсов Image Viewer

В данной области визуализируется ресурс. Все виды ресурсов визуализируется как изображение. По клику правой кнопкой мыши внутри области визуализации выпадает меню:
Center image by Предположим мы изменили точку пивота ресурса.

  • Если выберем Image Center to Center, то в центре Image Viewer отобразится ресурс.
  • Если выберем Image Pivot to Center, то в центре Image Viewer отобразится точка пивота. (См. рисунок справа)

Directory View Mode — . Если мы выберем режим Full Source Image , то мы будем видеть изображение и бордер, а если Cropped Images — то только изображение без бордера
RR Pivot 1 .JPG RR Pivot 2.JPG

Shape

Для работы с обьектами физического мира иногда требуется создать дополнительный конутр вокруг обьекта. Физ_объектами могут быть не только прямоугольники. Шейп (Shape) можно задавать полигоном и кругом в Shape editor. Количество вершин в полигоне должно быть от 3 до 8. Создавать новую шейп-фигуру можно несколькими полигонами. Для удаления нарисованного шейпа нажимаем Delete
Физика5.PNG

Создание базы графических ресурсов

1. Запустить редактор ресурсов ResourcesEditor.exe. В меню File выбрать New Project.
2. В окне базы создания ресурсов в строке "Папка проекта" указать путь на ранее созданную пустую папку Resources, затем в строке "Имя базы ресурсов" вписать имя корневой базы Learning_Base.
00 26.PNG
3. В корневой базе создать папку Create New Folder (например, папка Lesson_01).
4.Загрузить исходники графики из папки Sources → Lesson_01.
00 27.png 00 28.png 00 29.PNG
В папке ресурсов Resources автоматически создается папка с корневой базой (в нашем случае Learning_Base), в которой автоматически появляются папка с графическими ресурсами Lesson_01 (для урока 1) и файл Learning_Base.sirx
00 30.png
Внимание! Прямое изменение структуры файлов в папке Resources запрещено. Допускается работа только через редактор ресурсов.

Автоматическое создание базы

В случае, если имеется уже готовый набор графических ресурсов (а именно, структурированная папка), то можно использовать ее. Для этого нужно при создании новой базы в строке "Папка с графическими ресурсами" указать путь, где находится готовая база ресурсов.

00 30a.PNG 00 30b.PNG

Действия с ресурсами в Resources Editor

Общие свойства и действия с ресурсами

После любых действий в редакторе ресурсов необходимо обновить базу ресурсов в Редакторе сцен!

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

Графические ресурсы

В редактор ресурсов подгружаются графические форматы:

  • JPEG - изображение, не имеющее прозрачности. Может использоваться для "облегчения веса", в качестве фонового изображения или для паззла;
  • PNG - может поддерживать прозрачность, произвольные границы изображения. Сохраняет высокое качество изображения.
Cоздание бордера изображения
00 37.PNG

Для уменьшения вероятности появления графических артефатов вокруг изображений рекомендуется создавать прозрачную область вокруг изображения. Размеры бордера задаются в пикселях.
Для создания прозрачной области кликаем по изображению и меняем параметр BorderSize на панели настройки ресурса(см. рисунок справа)
Для создания бордеров у всех ресурсов выбираем меню Projects – Options и на вкладке Cropping Settings параметру Transparent Border Size присваиваем нужное значение.
00_46.PNG 00 47.PNG

Точка пивота

Иногда возникает необходимость сместить точку вращения обьекта вокруг своей оси (точку пивота).
Для этого в редакторе ресурсов выбирем редактируемый обьект и в панели настроек ресурса изменим значения параметров Pivot.
Если мы хотим произвольно задать координаты точки пивота, то ставим галочку Edit Pivot и после этого «таскаем» редактируемый ресурс по области визуализации ресурсов. Точка пивота находится в центре экрана (красный крестик)

Заменить изображение, существующие в базе ресурсов

Предположим, нам необходимо подменить изображение загруженное в базу ресурсов, но при этом не удаляя его из базы.
Для это кликаем правой кнопкой мыши по изображению и выбираем в меню "заменить изображение"

Настройки текстур

параметр texture mode Texture mode resource editor.jpg определяет принадлежность картинки к текстуре.

  • Если стоит -1, то картинка которая используется только на одном экране вместе с такими же картинками(которые используются только на том же экране что и выбранная) на этом экране будут упакованы в текстуру, если все картинки не поместятся в текстуру размером 1024х1024, то те картинки, которые не поместились попадут в 2-й файл текстуры.
  • Если картинка используется на нескольких экранах, то в текстуру она не попадёт.
  • Если стоит 1, 2, 3 и т.д до 100, то данная картинка объединится в текстуру вместе с картинками у которых стоит такое же значение в texture mode. Если все не поместятся в одну текстуру размером 1024х1024, то не поместившиеся изображения попадут в 2-ю текстуру и т.д..

Анимация

Анимация создается путем вызова кнопки add_animations и выбором нескольких графических файлов из любой папки
00 40.PNG00 41.PNG
После загрузки анимации можно изменить ее параметры. Например, изменить скорость анимации (смены кадров) и зациклить, поставив галочку напротив Looped.
В левой части нижнего окна анимации находится список загруженных изображений, в правой - последовательность изображений (кадров), которые можно менять местами, добавлять/удалять, загружать в прямом/обратном порядке. Таким образом, можно "уменьшить вес" анимации за счет использования меньшего количества исходных изображений.
00 43.PNG00 44.PNG 00 45.PNG

Звуковые файлы

Звуковые файлы нам нужны для озвучки персонажей и не только. Используются файлы в форматах:

  • mp3 - используется как ресурс для длинного звука mus. Звуки такого формата могут воспроизводиться только последовательно.
  • ogg - используется как ресурс для короткого звука snd (snd-звуки могут воспроизводиться параллельно) и для подключения голоса voice (если voice подключен к тексту, то воспроизводится последовательно). Имеет меньший объем, чем формат mp3.

Воспроизведение звуковых файлов устанавливают через различные обьекты. Например, через состояния обьекта Machine 00 48.PNG

Ico text.pngРедактор текстов

Ico text.png Text Editor - хранилище всех текстовых ресурсов (надписей) на различных языках. Аналогично графике и звукам при помощи мышки они перетаскиваются в соответствующие свойства объектов, находящихся в Scene Editor.
Окно редактора имеет следующий вид:

Головна4.PNG

Общие свойства и действия с текстом

После любых действий в текстовом редакторе необходимо обновить текстовую базу в Редакторе сцен!

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

Кнопки быстрого запуска

Вверху окна приложения расположены кнопки общего меню:

  • 00 6.png — команда создать Новый файл;
  • 00 7.png — команда открыть уже созданный проект;
  • 00 8.png — сохранить изменения в файле;
  • 00 18.png — создать новую папку в корневой базе;
  • 00 53.PNG — добавить новую текстовую запись;
  • 00 19.png — удалить текстовую запись.


Меню редактора

1. Если нажать в меню кнопку File, выпадет список команд, с помощью которых можно создать новый или загрузить уже созданный файл, сохранить файл с указанием места сохранения и т.д.
2.Для импорта фраз на другом языке необходимо воспользоваться Функцией Ипортировать меню File и выбрать .xml-файл с текстом и выбрать язык
3. Если нажать в меню кнопку Resource, выпадет список команд:

  • Open Resource - позволяет создать базу по ранее подготовленной графической базе ресурсов с точным совпадением структуры и названием папок и файлов. Используется для Hidden Objects;
  • Choose Resource File - позволяет подгрузить базу графических ресурсов для перетаскивания изображений из ResourcesEditor на иконку;
  • Choose Categories Config - помогает классифицировать текстовые файлы по категориям.

00 51.PNG 00 52.PNG


Создание и заполнение текстовой базы проекта

Текстовая база не создается автоматически при создании проекта.
Для создания и заполнения текстовой базы:
1. Заходите в пункт меню file -> New. Появляется пустая база ресурсов, по умолчанию названная Untitled.
2. Слева в дереве текстовых объектов кликаем правой кнопкой мыши и выбираем Add record. Каждый раз при добавлении новой текстовой записи редактор просит нас написать ее имя. Это имя можно будет изменить в любой момент. Запишем имя arrow_If_down.
3. Выделить запись и в окне приложения TextEditor справа в столбце Word запишем слово, в столбце Sentence1,Sentence2 - указать подсказку для текстовой записи, в столбце voice - подключить звуковой файл для текстовой записи из ResourcesEditor.
00 54.PNG

Необходимо обязательно сохранять любые изменения с текстом в редакторе TextEditor.
Для вызова текстового редактора можно воспользоваться меню Tools -> Text Editor, либо кнопкой быстрого запуска 011.JPG.