UI Picker
Сегодня мы создадим кнопочки при помощи которых мы сможем переключая менять текстуры на примере пресетов в количестве 5 штук. Я сохранил для вас проект, ссылка будет в самом внизу👇
Для того чтоб создать сами кнопочки, нам поносится подключить скрипты, для этого мы нажимаем на панели assets "+" и нажимаем создать новый скрипт.
Потом мы открываем созданный скрипт и видим
То что зачеркнуто красным - удаляем!!!!
Далее мы копируем и вставляем этот код java script (ниже) в этот текстовый документ , внимательно копируйте 👇👇
// Required Modules
const Materials = require('Materials');
const Scene = require('Scene');
const NativeUI = require('NativeUI');
const Textures = require('Textures');
// Find your objects
const rectangle0 = Scene.root.find('rectangle0');
const rectangle1 = Scene.root.find('rectangle1');
const rectangle2 = Scene.root.find('rectangle2');
const rectangle3 = Scene.root.find('rectangle3');
const rectangle4 = Scene.root.find('rectangle4');
// Set an index of 0
const index = 0;
// Create a configuration object
const configuration = {
// The index of the selected item in the picker
selectedIndex: index,
// The image textures to use as the items in the picker
// Make sure these textures are set to uncompressed or this *will not work*
items: [
{image_texture: Textures.get('blue')},
{image_texture: Textures.get('red')},
{image_texture: Textures.get('white')},
{image_texture: Textures.get('yellow')},
{image_texture: Textures.get('green')}
],
// OPTIONAL:
// In this example we are switching materials
// so I have included an object of materials
// that matches the order of the textures above
mats: [
{material: Materials.get("blue")},
{material: Materials.get("red")},
{material: Materials.get("white")},
{material: Materials.get("yellow")},
{material: Materials.get("green")}
]
};
// Create our picker
const picker = NativeUI.picker;
// Load the configuration
picker.configure(configuration);
// Set the visibility to true
picker.visible = true;
// When the user selects an item form the picker, pass the index
// so we can select the materials to switch out
picker.selectedIndex.monitor().subscribe(function(val) {
// Set the material to the first rectangle
rectangle0.material = configuration.mats[val.newValue].material;
// Set the material to the second rectangle
rectangle1.material = configuration.mats[val.newValue].material;
});
После этого просто закрываете скрипт, он должен сохранится автоматически, после закрытия у вас появится ошибка это значит, что в коде прописаны элементы которые мы не добавили в проект, а именно материалы и объекты.ТАк как сегодня мы делаем пресеты, вспоминаем с прошлого урока, что нам нужно будет добавить ректанглы чтоб на них наложить текстуру. Идем в Спарк и добавляем 5 ректанглов ( не забудьте добавить канвас ). И каждый ректангл растягиваем на весь экран при помощи кнопочки fill parent
Если у вас виндовс то растягивать ректанглы по всей можно нажав на эти два значения
Теперь для каждого ректангла создайте материал и подпишите вот такими названиями ( blue, red, white,yellow, green ). Должно получится вот так
Далее добавим текстуру наших кружочков. Это будет сам вид кружочков, которые вы сможете изменять в фотошопе, но соблюдая сам размер!
Эти кружочки буду у вас в папке texture, просто берем выделяй их и перетаскиваем на панель assets. Важно! После загрузки убираем компрессию на них!
Далее мы должны подключить эти кнопочки в capabilities. Для этого нажимаем на project - edit properties - capabilities - поставить галочку возле picker
Так же нужно отключить платформу facebook, потому что эти кнопки работают только с Инстаграм !
ГОТОВО! Теперь мы видим отображение этих кнопочек и даже можем на них нажать, но пока ничего не изменится, потому что нам нужно подключить текстуры пресетов к материалам. А и да не волнуйтесь, что кнопочки находятся в слева в углу а не по средине, при экспорте они отцентруются
Теперь подключаем текстуры наших пресетов. Как вы помните для этого в проект нужно загрузить патч FastColorLUT.arp, а так же добавить cameratexture ну и сами текстуры пресетов.
1) Добавление в проект FastColorLUT.arp ( cам патч будет в папке patch)
Ищем сам патч и добавляем в проект
2) Далее создаём текстуру камеры
3) Заливаем в проект наши текстуры пресетов
После этого главное не забудьте убрать компрессию каждой текстуры!!!!
Если у вас виндовс, то как убрать компрессию на писано здесь
https://teletype.in/@dmitrygaziev2/r1dTCx77S
Теперь нам нужно всё соединить. Для этого мы открываем patch editor и переносим туда FastColorLUT, cameratexture , все текстуры пресетов И ВНИМАНИЕ! Так же подключаем патчи текстур ! Пошагово 👇
1) Открываем patch editor
2) Переносим FastColorLUT, cameratexture , все текстуры пресетов на панель patch editor
3) Теперь создаём для каждого материала патч текстуры. Выбираете первый материал (Blue) и нажимать на texture, после нажатия он появится на панель patch editor
Теперь мы должны ещё 4 раза перенести FastColorLUT на панель patch editor, в итоге должно быть 5 FastColorLUT на панели patch editor. Это потому что у нас будет 5 пресетов!
Ну и наконец мы всё соединяем, смотрите на схему и просто повторите
Последний этап - это создать для каждого ректангла свой слой, чтоб один не перекрывал другой и при нажатии на кружочек- кнопку всё менялось. Начинаем с rectangle1 так как у rectangle0 уже есть слой с названием layer0
И так проделать с каждым ректанглом!
ВАЖНО!!!
НЕ МЕНЯЙТЕ ИМЕНА ТЕКСТУР КРУЖОЧКОВ!
��������сли вы захотите изменить дизайн кружочка, то сохраняйте же его с тем же названием как они и подписаны сейчас !!!
ССЫЛКА НА СКА��ИВАНИЕ ПРОЕКТА
https://drive.google.com/open?id=1wxkxGgl9QmzY6JL0c1FVMgQK0RfM8a_B