Редактор текстовых ресурсов — различия между версиями

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск
(Новая страница: «{| width="100%" | width="40%"|Урок 9 << ! width="20%"|Оглавление | width="40%" align="rig...»)
 
(Создаем текстовую базу)
 
(не показана 31 промежуточная версия 14 участников)
Строка 1: Строка 1:
 
{| width="100%"   
 
{| width="100%"   
  | width="40%"|[[Работа с эффектами|Урок 9]] <<  
+
  | width="40%"|[[Движение машин: жучки, ключи и многое другое|Урок 5]] <<  
 
  ! width="20%"|[[Learning|Оглавление]]  
 
  ! width="20%"|[[Learning|Оглавление]]  
  | width="40%" align="right"| >> [[Создание проектов. Экспорт и импорт|Урок 11]]
+
  | width="40%" align="right"| >> [[Создание игры «Hidden Object Game»|Урок 7]]
 
|}
 
|}
 
----
 
----
 +
{{TOC right}}
 +
----
 +
'''Цель:''' научится пользоваться редактором текстовых ресурсов на примере использования объекта типа "text"
 +
 +
'''Задачи:'''
 +
* Cоздать новый экран и сцену для этого урока.
 +
* Вывести на экран последовательно два текста с помощью двух текстовых объектов.
 +
* Вывести на экран эти же тексты, но с помощью только одного текстового объекта.
 +
 +
== Объект Text ==
 +
 +
=== Подготовка ===
 +
 +
Начнём урок, как обычно,  с открытия проекта lessons. В нём добавим новый экран lesson_6
 +
со сценой stg_main, так как это было описано в предыдущем [[Создание экранов, сцен. Работа с кнопками|уроке]]. Поместим из редактора ресурсов на сцену любой фон из папки этого или предыдущего  урока. Для примера далее используется "лунный пейзаж" (картинка '''bg''').
 +
 +
[[Файл:Lesson6_1.jpg|right]]
 +
Поверх фона поместите на сцену картинку ввиде стрелки вправо. Назовите ее '''button_next'''. Выберите для нее тип '''machine'''. Кликая на сцене правой кнопкой мыши, выберете пункт из выпадающего меню "Создать объект в текущем элементе". Новый объект переименуйте в Text и выберите для него тип '''[[Text|Text]]''' (также нужно выставить размеры данному объекту, чтобы текст был виден).
 +
 +
 +
=== Меняем текст машиной ===
 +
 +
Для того, чтобы было что менять, скопируем объект Text и вставим его в этой же сцене. Переименуем его в text2. Так как эти два объекта без графического ресурса, то на сцене мы можем их видеть как пустые рамки (зеленая рамка, если объет выделен, и красная - если не выделен).
 +
[[Файл:Lesson6_2.jpg]]
 +
 +
 +
[[Файл:Text_prop.png‎|right]]
 +
Посмотрим на свойства объекта Text. В поле "текст" впишем "Первая часть текста". В поле "шрифт" в строке "цвет 1" выберем белый цвет. В свойствах объекта text2 в поле текст впишем "Вторая часть текста". Цвет шрифта поставим такой же. Таким образом, мы получили две текстовых надписей на сцене, которые располагаются одна поверх другой. Если мы сейчас сохраним проект и запустим, то обе надписи будут видны одновременно, что затруднит их читаемость. Для того, чтобы мы могли без проблем их прочитать, сделаем переключение текстов по нажатию на кнопку. На самом деле, '''button_next''' только выглядит как кнопка - это машина состояний. Пропишем для нее логику таким образом, чтобы при нажатии на машину, она по-очереди делала видимым то один текст, то другой. Создайте для этой машины следующие состояния.
 +
 +
[[Файл:Lesson6_4.jpg]]
 +
 +
За видимость объектов отвечает параметр '''vis'''. Если vis=0, то объект не видно, если 1 - видно. По клику осуществляется переход между состояниями. Сохраните проект и запустите этот экран. Вы видите, что по клику на кнопку текст изменяется.
 +
[[Файл:Lesson6_5.jpg]]
 +
 +
Переключать текстовые объекты можно еще несколькими способами:
 +
 +
- менять параметр '''al''' (alpha); это позволит делать текст полупрозрачным (в отличии от '''vis''', параметр '''al''' может принимать промежуточные значения между 0 и 1);
 +
 +
- менять текстовому объекту состояние; как известно, у объекта [[Text#Состояния | text]] есть 3 состояния '''first''', '''next''', '''end''', чтобы текст стал видимым, достаточно передать ему состояние '''first''', чтобы текст исчез, достаточно передать ему состояние '''end'''.
 +
 +
== Создаем текстовую базу ==
 +
 +
В предыдущем примере мы научились вставлять текстовые объекты на сцену и менять их видимость. Все это мы сделали не имея текстовой базы. Текстовая база предназначена для хранения всей текстовой информации вашего проекта, с возможностью мультиязычной поддержки. Она значительно облегчает управление текстом в проекте.
 +
 +
Для вызова текстового редактора можно воспользоваться меню '''Tools -> [[Интерфейс TextEditor|Text Editor]]''', либо кнопкой быстрого запуска [[Файл:Text_base.png‎]]. После нажатия появляется предупреждение:
 +
 +
[[Файл:warning.png]]
 +
 +
Нажимаем на кнопку "Yes", выбираем папку, которая является базой ресурсов проекта и выбираем файл с расширением '''.sirx''' (также можно создать новую текстовую базу. Для этого заходите в пункт меню '''Project -> New''', либо кнопкой быстрого запуска [[Файл:new.png]]. Появляется пустая база ресурсов, по умолчанию названная '''Untitled'''. Ее можно переименовать как вам удобней.)
 +
 +
Появляется пустая база ресурсов, по умолчанию названная '''text.xml''. Ее можно переименовать как вам удобней. Аналогично как в редакторе ресурсов слева вы видите дерево текстовых объектов. Нажимаем правой кнопкой по названию базы text.xml и выбираем ''add folder'''. Таким образом мы создали новую папку. Назовем ее lesson_6. Нажимая по папке правой кнопкой выбираем '''Add record'''. Каждый раз при добавлении новой текстовой записи редактор просит нас написать ее имя. Это имя можно будет изменить в любой момент. Запишем имя first_part. Создавать папки и записи можно также с помощью кнопок быстрого доступа на панели. Выделим папку lesson_6 и нажмем на значок "Add record". Запишем имя новой текстовой записи second_part.
 +
 +
[[Файл:Именитый.png|600px]]
 +
 +
Пока эти текстовые записи пустые. Для того чтобы заполнить их, выделим первую запись. Справа мы видим столбцы '''word''', '''sentence1''', '''sentence2''' и '''voice'''. В данном уроке нам понадобится только первый столбец '''word'''. Об остальных подробнее узнаете в следующем уроке. В строках записывается текст на разных языках. Запишем текст на русском и его перевод на английский в соответствующие поля. Для first_part - Первая часть текста (The first part of the text), для second_part - Вторая часть текста (The second part of the text). Запись на разных языках позволяет, в зависимости от локализации мобильного устройства, выбирать язык текстовых объектов.
 +
 +
Для того что бы добавить какой-либо язык в базу данных необходимо выполнить следующие действия:
 +
1) Проходим путь Project/Properties/Select languages…
 +
 +
[[Файл:Добавление языка (1).png|600px]]
 +
 +
2) После этого необходимо выбрать языки которые вы хотите добавить
 +
 +
 +
[[Файл:Добавление_языка_(2).png|400px]]
 +
 +
 +
3) Можете похвалить себя
  
 +
Если вы добавили языки, но они не видны, проверьте, не создали ли вы случайно свою папку в папке Untranslatable.
 +
 +
Чтобы корректно пользоваться текстовой базой после каждого ее изменения, ее необходимо сохранять. Можно воспользоваться кнопками быстрого доступа и нажать на значок дискеты. [[Файл:disketa.png]]
 +
 +
Каждый объект текстовой базы имеет свой уникальный '''id'''. Мы можем вызывать текст из текстовой базы меняя текстовому объекту на сцене этот id с помощью кнопки или машины состояний.
 +
 +
Давайте сделаем это на примере нашего проекта.
 +
Так как теперь мы будем пользоваться только одним текстовым объектом на сцене, то второй text2 можно удалить. В объекте text удалим из пункта текст запись "Первая часть текста". Перепишем также немного состояния нашей машины. В поле '''val_txt''' мы записываем id текста путем перетаскивания его из текстовой базы (перед перетаскиванием id текста нужно сохранять и переоткрывать текстовую базу).
 +
 +
[[Файл:Lesson6_7.jpg]]
 +
 +
Теперь в состояниях машины мы присваиваем нашему объекту text только текстовые id из текстовой базы. Сохраняем проект и запускаем. Результат тот же, что и в первом случае. Заметим, что на сцене стало на один объект меньше, а состояния машины сократились на одну строчку. Может это не существенно в таком маленьком проекте, но в больших проектах количество объектов и величина исполняемого файла может стать решающей причиной к упрощению кода.
 +
 +
== Упражнения ==
 +
 +
* Добавьте в текстовую базу еще несколько записей.
 +
* Расширьте состояния машины, чтобы последовательно вывести на экран все текстовые записи.
 +
* Поменяйте язык приложения, используя объект '''[[Options|Options]]'''.
 +
До сих пор мы изучали объекты и их свойства для каждого определенного экрана. Рассмотрим возможность изменять параметры всего приложения.
 +
Будем изменять язык приложения. Для этого необходимо ознакомится с объектом Options.
 +
 +
'''Options''' — объект, который используется для хранения и управления глобальными параметрами приложения. Также Options позволяет хранить и использовать параметры записанные в него другими объектами.
 +
 +
В проекте lessons создаем новый экран, для которого в свойствах устанавливаем глобальный
 +
 +
[[Файл:Глобальный.PNG]]
 +
 +
В экране '''opt''' создадим сцену '''opt'''. Создадим на сцене opt новый объект, переименуем его в '''Options'''. Поменяем ему тип на option (Option → option).
 +
 +
[[Файл:Опции.PNG]]
 +
 +
Создадим в проекте новый экран '''lessons_6_1''' со сценой '''6_1'''. В сцену из проекта '''lessons_6''' копируем объекты '''bg_1''', '''button_next''', Text не изменяя их параметры. Перенесем на сцену из редактора ресурсов, из папки lessons_2, объекты: '''arrow_lf_norm''' и '''arrow_rt_norm'''. Переименуем,  arrow_lf_norm в '''en''',  arrow_rt_norm в '''ru''', и сделаем их машинами. Добавляем ниже на сцену новый объект, изменяем ему тип на '''[[Groupset|Groupset]]''' и имя на '''groupset'''. Щелкаем в свойствах по имени правой кнопкой мыши, добавляем в свойства объект, из списка объектов выбираем Text.
 +
 +
[[Файл:Группа.PNG]]
 +
 +
'''Описание объекта Groupset'''
 +
 +
'''Groupset (группа)'''  позволяет передавать состояния и параметры множеству объектов, которые являются участниками группы. Участником группы является любой объект, указанный в в объекте Groupset.
 +
 +
Groupset удобно использовать, когда необходимо обращаться к множеству объектов.
 +
Если объекту Groupset передается состояние (например st_1), то все объекты принадлежащие объекту Groupset должны иметь состояние st_1, иначе возникнет ошибка.
 +
 +
Объекты принадлежащие одной группе могут быть разного типа и разноименными.
 +
 +
Команды применимые к группе:
 +
 +
• ''set'' — группе можно установить состояние st и параметр (значение) par(val);
 +
 +
• ''drop'' —  на группу (объекты принадлежащие группе) можно отпустить объект.
 +
 +
 +
Для каждой из добавленных машин запишем состояния.
 +
 +
Машина en:
 +
 +
[[Файл:En.PNG]]
 +
 +
Машина ru
 +
 +
[[Файл:Ru.PNG]]
 +
 +
Как видно, в состоянии on, каждой машины, задается lang (язык) в глобальном объекте Options. В состояние r  Groupset передается состояние init (инициализация объекта).
 +
 +
Сохраняем и запускаем вьювер.
 +
 +
[[Файл:Вьювер.PNG]]
 +
 +
На экране  расположено три кнопки и текст. При нажатие кнопки вперед язык текста меняется — на русский, при нажатие назад — на английский, желтая кнопка вперед меняет сам текст.
 
----
 
----
 
{| width="100%"   
 
{| width="100%"   
  | width="40%"|[[Работа с эффектами|Урок 9]] <<  
+
  | width="40%"|[[Движение машин: жучки, ключи и многое другое|Урок 5]] <<  
 
  ! width="20%"|[[Learning|Оглавление]]  
 
  ! width="20%"|[[Learning|Оглавление]]  
  | width="40%" align="right"| >> [[Создание проектов. Экспорт и импорт|Урок 11]]
+
  | width="40%" align="right"| >> [[Создание игры «Hidden Object Game»|Урок 7]]
 
|}
 
|}
 +
 +
[[Category:Learning]]

Текущая версия на 09:55, 9 августа 2021

Урок 5 << Оглавление >> Урок 7


Цель: научится пользоваться редактором текстовых ресурсов на примере использования объекта типа "text"

Задачи:

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

Объект Text

Подготовка

Начнём урок, как обычно, с открытия проекта lessons. В нём добавим новый экран lesson_6 со сценой stg_main, так как это было описано в предыдущем уроке. Поместим из редактора ресурсов на сцену любой фон из папки этого или предыдущего урока. Для примера далее используется "лунный пейзаж" (картинка bg).

Lesson6 1.jpg

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


Меняем текст машиной

Для того, чтобы было что менять, скопируем объект Text и вставим его в этой же сцене. Переименуем его в text2. Так как эти два объекта без графического ресурса, то на сцене мы можем их видеть как пустые рамки (зеленая рамка, если объет выделен, и красная - если не выделен). Lesson6 2.jpg


Text prop.png

Посмотрим на свойства объекта Text. В поле "текст" впишем "Первая часть текста". В поле "шрифт" в строке "цвет 1" выберем белый цвет. В свойствах объекта text2 в поле текст впишем "Вторая часть текста". Цвет шрифта поставим такой же. Таким образом, мы получили две текстовых надписей на сцене, которые располагаются одна поверх другой. Если мы сейчас сохраним проект и запустим, то обе надписи будут видны одновременно, что затруднит их читаемость. Для того, чтобы мы могли без проблем их прочитать, сделаем переключение текстов по нажатию на кнопку. На самом деле, button_next только выглядит как кнопка - это машина состояний. Пропишем для нее логику таким образом, чтобы при нажатии на машину, она по-очереди делала видимым то один текст, то другой. Создайте для этой машины следующие состояния.

Lesson6 4.jpg

За видимость объектов отвечает параметр vis. Если vis=0, то объект не видно, если 1 - видно. По клику осуществляется переход между состояниями. Сохраните проект и запустите этот экран. Вы видите, что по клику на кнопку текст изменяется. Lesson6 5.jpg

Переключать текстовые объекты можно еще несколькими способами:

- менять параметр al (alpha); это позволит делать текст полупрозрачным (в отличии от vis, параметр al может принимать промежуточные значения между 0 и 1);

- менять текстовому объекту состояние; как известно, у объекта text есть 3 состояния first, next, end, чтобы текст стал видимым, достаточно передать ему состояние first, чтобы текст исчез, достаточно передать ему состояние end.

Создаем текстовую базу

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

Для вызова текстового редактора можно воспользоваться меню Tools -> Text Editor, либо кнопкой быстрого запуска Text base.png. После нажатия появляется предупреждение:

Warning.png

Нажимаем на кнопку "Yes", выбираем папку, которая является базой ресурсов проекта и выбираем файл с расширением .sirx (также можно создать новую текстовую базу. Для этого заходите в пункт меню Project -> New, либо кнопкой быстрого запуска New.png. Появляется пустая база ресурсов, по умолчанию названная Untitled. Ее можно переименовать как вам удобней.)

Появляется пустая база ресурсов, по умолчанию названная text.xml. Ее можно переименовать как вам удобней. Аналогично как в редакторе ресурсов слева вы видите дерево текстовых объектов. Нажимаем правой кнопкой по названию базы text.xml и выбираем add folder. Таким образом мы создали новую папку. Назовем ее lesson_6. Нажимая по папке правой кнопкой выбираем Add record. Каждый раз при добавлении новой текстовой записи редактор просит нас написать ее имя. Это имя можно будет изменить в любой момент. Запишем имя first_part. Создавать папки и записи можно также с помощью кнопок быстрого доступа на панели. Выделим папку lesson_6 и нажмем на значок "Add record". Запишем имя новой текстовой записи second_part.

Именитый.png

Пока эти текстовые записи пустые. Для того чтобы заполнить их, выделим первую запись. Справа мы видим столбцы word, sentence1, sentence2 и voice. В данном уроке нам понадобится только первый столбец word. Об остальных подробнее узнаете в следующем уроке. В строках записывается текст на разных языках. Запишем текст на русском и его перевод на английский в соответствующие поля. Для first_part - Первая часть текста (The first part of the text), для second_part - Вторая часть текста (The second part of the text). Запись на разных языках позволяет, в зависимости от локализации мобильного устройства, выбирать язык текстовых объектов.

Для того что бы добавить какой-либо язык в базу данных необходимо выполнить следующие действия: 1) Проходим путь Project/Properties/Select languages…

Добавление языка (1).png

2) После этого необходимо выбрать языки которые вы хотите добавить


Добавление языка (2).png


3) Можете похвалить себя

Если вы добавили языки, но они не видны, проверьте, не создали ли вы случайно свою папку в папке Untranslatable.

Чтобы корректно пользоваться текстовой базой после каждого ее изменения, ее необходимо сохранять. Можно воспользоваться кнопками быстрого доступа и нажать на значок дискеты. Disketa.png

Каждый объект текстовой базы имеет свой уникальный id. Мы можем вызывать текст из текстовой базы меняя текстовому объекту на сцене этот id с помощью кнопки или машины состояний.

Давайте сделаем это на примере нашего проекта. Так как теперь мы будем пользоваться только одним текстовым объектом на сцене, то второй text2 можно удалить. В объекте text удалим из пункта текст запись "Первая часть текста". Перепишем также немного состояния нашей машины. В поле val_txt мы записываем id текста путем перетаскивания его из текстовой базы (перед перетаскиванием id текста нужно сохранять и переоткрывать текстовую базу).

Lesson6 7.jpg

Теперь в состояниях машины мы присваиваем нашему объекту text только текстовые id из текстовой базы. Сохраняем проект и запускаем. Результат тот же, что и в первом случае. Заметим, что на сцене стало на один объект меньше, а состояния машины сократились на одну строчку. Может это не существенно в таком маленьком проекте, но в больших проектах количество объектов и величина исполняемого файла может стать решающей причиной к упрощению кода.

Упражнения

  • Добавьте в текстовую базу еще несколько записей.
  • Расширьте состояния машины, чтобы последовательно вывести на экран все текстовые записи.
  • Поменяйте язык приложения, используя объект Options.

До сих пор мы изучали объекты и их свойства для каждого определенного экрана. Рассмотрим возможность изменять параметры всего приложения. Будем изменять язык приложения. Для этого необходимо ознакомится с объектом Options.

Options — объект, который используется для хранения и управления глобальными параметрами приложения. Также Options позволяет хранить и использовать параметры записанные в него другими объектами.

В проекте lessons создаем новый экран, для которого в свойствах устанавливаем глобальный

Глобальный.PNG

В экране opt создадим сцену opt. Создадим на сцене opt новый объект, переименуем его в Options. Поменяем ему тип на option (Option → option).

Опции.PNG

Создадим в проекте новый экран lessons_6_1 со сценой 6_1. В сцену из проекта lessons_6 копируем объекты bg_1, button_next, Text не изменяя их параметры. Перенесем на сцену из редактора ресурсов, из папки lessons_2, объекты: arrow_lf_norm и arrow_rt_norm. Переименуем, arrow_lf_norm в en, arrow_rt_norm в ru, и сделаем их машинами. Добавляем ниже на сцену новый объект, изменяем ему тип на Groupset и имя на groupset. Щелкаем в свойствах по имени правой кнопкой мыши, добавляем в свойства объект, из списка объектов выбираем Text.

Группа.PNG

Описание объекта Groupset

Groupset (группа) позволяет передавать состояния и параметры множеству объектов, которые являются участниками группы. Участником группы является любой объект, указанный в в объекте Groupset.

Groupset удобно использовать, когда необходимо обращаться к множеству объектов. Если объекту Groupset передается состояние (например st_1), то все объекты принадлежащие объекту Groupset должны иметь состояние st_1, иначе возникнет ошибка.

Объекты принадлежащие одной группе могут быть разного типа и разноименными.

Команды применимые к группе:

set — группе можно установить состояние st и параметр (значение) par(val);

drop — на группу (объекты принадлежащие группе) можно отпустить объект.


Для каждой из добавленных машин запишем состояния.

Машина en:

En.PNG

Машина ru

Ru.PNG

Как видно, в состоянии on, каждой машины, задается lang (язык) в глобальном объекте Options. В состояние r Groupset передается состояние init (инициализация объекта).

Сохраняем и запускаем вьювер.

Вьювер.PNG

На экране расположено три кнопки и текст. При нажатие кнопки вперед язык текста меняется — на русский, при нажатие назад — на английский, желтая кнопка вперед меняет сам текст.


Урок 5 << Оглавление >> Урок 7