Урок 5: Экспорт из BlendElf В этом уроке мы научимся выводить на экран изображения и создавать разные элементы интерфейса, такие, как кнопки, например. Если вы еще не прошли первые уроки, то я настоятельно рекомендую вам это сделать. Шаг 1: Необходимые ресурсы Для выполнения этого урока нам понадобится набор изображений и шрифтов, которые вы можете скачать по этой ссылке (zip архив, скачивание с оф. сайта движка). Шаг 2: Извлечение ресурсов Все ресурсы из архива нужно извлечь в папку resources, находящуюся в папке с движком. Шаг 3: Lua-скриптинг Итак, давайте откроем наш любимый init.lua. Для этого урока нам не понадобится сцена, по этому мы ее загружать не станем. gui = elf.CreateGui() elf.SetGui(gui) while elf.Run() == true do end Сейчас мы создали GUI-интерфейс и поместили его в переменную gui функцией elf.CreateGui() и сделали его активным с помощью elf.SetGui(gui), параметром которой как раз и является наш только что созданный интерфейс. Шаг 4: Создаем картинку Для начала загрузим статичную картинку. Пусть это будет лого движка: gui = elf.CreateGui() elf.SetGui(gui) -- create the elf logo elflogotex = elf.CreateTextureFromFile("resources/elf.png") pic = elf.CreatePicture("ElfLogo") elf.SetPictureTexture(pic, elflogotex) elf.SetGuiObjectPosition(pic, elf.GetWindowWidth()-elf.GetGuiObjectSize(pic).x, 0) elf.AddGuiObject(gui, pic) while elf.Run() == true do end Не удивляйтесь строчке -- create the elf logo, в Lua комментарии отделяются от кода двумя минусами "--". Что же делает этот код? функция elf.CreateTextureFromFile("resources/elf.png") загружает картинку по указанному пути в переменную elflogotex, при том загружаем ее как текстуру. Теперь создадим функцией elf.CreatePicture саму картинку. Параметр этой функции - произвольное (выбирается вами) имя. Функции, начинающиеся с Set/GetGuiObject* могут быть вызваны для любого элемента GUI, будь то кнопка, картинка, лейбл и т.д. Теперь можно установить положение картинки на экране. Мы разместим ее в правом верхнем углу. В этом нам поможет elf.SetGuiObjectPosition, первый параметр которой - наш элемент GUI, второй - координата по x, где она должна будет появиться. На месте ее расположения мы остановимся и поговорим об этом чуть подробней. Здесь мы получаем размер экрана через elf.GetWindowWidth и отнимаем от него размер картинки по x-координате, чтобы она не отрисовывалась за пределами экрана. Третий параметр - y-координата. Тут мы просто ставим 0. Наконец, мы просто должны добавить элемент GUI в сам GUI-интерфейс функцией elf.AddGuiObject. Первый ее параметр - GUI-интерфейс, в который мы добавляем элемент, который является вторым параметром. Важно: не забывайте это делать, иначе элемент просто не отобразится на экране. Если все правильно, то после запуска вы увидите черный экран с логотипом движка в правом верхнем углу. Шаг 5: Создаем лейбл Лейбл (Label) - элемент, отображающий текст. Давайте создадим один, пусть он отображает FPS (Frames per second, кадры в секунду): gui = elf.CreateGui() elf.SetGui(gui) -- create the elf logo elflogotex = elf.CreateTextureFromFile("resources/elf.png") pic = elf.CreatePicture("ElfLogo") elf.SetPictureTexture(pic, elflogotex) elf.SetGuiObjectPosition(pic, elf.GetWindowWidth()-elf.GetGuiObjectSize(pic).x, 0) elf.AddGuiObject(gui, pic) -- add a label font = elf.CreateFontFromFile("resources/freesans.ttf", 12) lab = elf.CreateLabel("FPSLabel") elf.SetLabelFont(lab, font) elf.SetLabelText(lab, "FPS: 0") elf.SetGuiObjectPosition(lab, 10, 10) elf.AddGuiObject(gui, lab) while elf.Run() == true do elf.SetLabelText(lab, "FPS: " .. elf.GetFps()) end Здесь все по аналогии, но теперь мы еще берем шрифт. Грузится он функцией elf.CreateFontFromFile, где параметрами будут сам шрифт и его размер. Думаю, что действие функций elf.SetLabelFont и elf.SetLabelText очевидно. В главном цикле появилась так же функция elf.SetLabelText(lab, "FPS: " .. elf.GetFps()), обновляющая выводимое кол-во кадров в секунду. Шаг 6: Другие элементы интерфейса Теперь вы знаете основы работы с элементами GUI, но мы обсудили далеко не все из них. Давайте рассмотрим еще несколько: Кнопки: -- add exit button exbtexoff = elf.CreateTextureFromFile("resources/dsbexitoff.png") exbtexover = elf.CreateTextureFromFile("resources/dsbexitover.png") exbtexon = elf.CreateTextureFromFile("resources/dsbexiton.png") exb = elf.CreateButton("ExitButton") elf.SetButtonOffTexture(exb, exbtexoff) elf.SetButtonOverTexture(exb, exbtexover) elf.SetButtonOnTexture(exb, exbtexon) elf.SetGuiObjectPosition(exb, 10, 30) exscr = elf.CreateScript() elf.SetScriptText(exscr, "elf.Quit()") elf.SetGuiObjectScript(exb, exscr) elf.AddGuiObject(gui, exb) У кнопок 3 текстуры: обычное состояние, когда мышь наведена на кнопку и когда кнопка нажата. Функция elf.SetScriptText выполняет скрипт, который является вторым параметром. В данном случае кнопка будет выключать программу. Так же вы можете использовать elf.CreateScriptFromFile для выполнения скрипта из файла. Далее по плану чекбоксы, или в простонародье их еще именуют "галочками": -- create a check box cbtexoff = elf.CreateTextureFromFile("resources/dscboff.png") cbtexon = elf.CreateTextureFromFile("resources/dscbon.png") cb = elf.CreateCheckBox("MyCheckBox") elf.SetCheckBoxOffTexture(cb, cbtexoff) elf.SetCheckBoxOnTexture(cb, cbtexon) elf.SetGuiObjectPosition(cb, 52, 30) elf.AddGuiObject(gui, cb) У чекбокса две текстуры: когда он включен и когда выключен Последний по списку элемент - поле для ввода текста: -- add text field font = elf.CreateFontFromFile("resources/freesans.ttf", 12) txbxtex = elf.CreateTextureFromFile("resources/dstxbx.png") txf = elf.CreateTextField("MyTextField") elf.SetTextFieldFont(txf, font) elf.SetTextFieldTexture(txf, txbxtex) elf.SetTextFieldText(txf, "Some text...") elf.SetTextFieldOffset(txf, 4, 1) elf.SetGuiObjectPosition(txf, 82, 30) elf.AddGuiObject(gui, txf) Тут мы загрузили текст и фон, а затем установили их в наше поле. Здесь все очевидно, кроме elf.SetTextFieldOffset. Эта функция задает смещение текста, относительно нашего элемента. Шаг 7: События GUI-элементов Ранее мы прописали событие для кнопки, когда она была нажата, но вы можете прописать скрипт для любого элемента интерфейса. У каждого элемента есть свои случаи вызовов ваших скриптов. Кнопки выполняют скрипт при нажатии, текстовые поля при вводе, потере фокуса или активации. Для того, чтобы узнать, какое событие произошло можно воспользоваться функцией elf.GetGuiObjectEvent. Например, отловить активацию текстового поля можно так: if elf.GetGuiObjectEvent(me) == elf.GAIN_FOCUS then <какой-то ваш скрипт> Вот список событий для разных элементов: Buttons - elf.CLICKED Text Fields - elf.GAIN_FOCUS, elf.LOSE_FOCUS, elf.CHAR_INPUT Sliders - elf.VALUE_CHANGED Text Lists - elf.SELECTION_CHANGED Check boxes - elf.STATE_CHANGED Теперь в можете делать меню любой сложности. Надеюсь, вам понравился урок :)
Источник: КЛИК» |