Суббота, 23 Ноября 2024, 12:44

Приветствую Вас Гость

Меню сайта
Категории каталога
Создание игр [358]
Статьи об общих понятиях связанных с созданием игр.
Программирование [83]
Гайды по программированию на разных ЯП.
Движки и Гейммейкеры [147]
Статьи о программах для создания игр, уроки и описания.
Софт [43]
Различные программы, в том числе в помощь игроделам.
2D-графика [14]
Уроки по рисованию, растр, пиксель-арт, создание спрайтов и пр.
3D-графика [17]
Уроки по моделированию, ландшафт, модели, текстурирование и пр.
Моддинг игр [5]
Модификация компьютерных игр, создание дополнений, перевод, хакинг.
Игры [167]
Статьи об играх, в том числе и сделанных на гейммейкерах.
Разное [132]
Статьи, которые не вошли в определённые разделы.
Наш опрос
Сколько часов подряд вы обычно играете?
Всего ответов: 1446
Главная » Статьи » Движки и Гейммейкеры

BlendElf - Урок 6: GUI
Урок 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

Теперь в можете делать меню любой сложности. Надеюсь, вам понравился урок :)


Источник: КЛИК»
Категория: Движки и Гейммейкеры | Добавил: KpoJIuk (11 Апреля 2011)
Просмотров: 10639 | Комментарии: 7 | Рейтинг: 5.0/4 |
Теги: Physics, gui, программирование, ЯП, BlendELF, LUA, C++, 3D
Дополнительные опции:
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:

Игровые объявления и предложения:
Если вас заинтересовал материал «BlendElf - Урок 6: GUI», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела. Предлагаются такие схожие материалы: Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.

Всего комментариев: 7
+0-
5 Flow   (16 Апреля 2011 22:29) [Материал]
FlowНормальная документация, зная английский, всё понятно...особенности скриптового языка, можно узнать из примеров (коих 3 штуки + редактор)...

+0-
6 noTformaT   (16 Апреля 2011 22:32) [Материал]
noTformaTДай тогда нормальное описание метода
Code
elf.SetActorAnisotropicFriction( object actor, float x, float y, float z )

Что он делает, какие параметры принимает.

+0-
7 Flow   (18 Апреля 2011 23:56) [Материал]
FlowСначала почитай, что такое Анизатропия:
http://ru.wikipedia.org/wiki/Анизотропия
И что такое трение...
Сопоставь эти 2 понятия в своей голове и поймёшь, что это...
Что-то вроде "Шаршавости трения"...
elf.SetActorAnisotropicFriction(Обьект, переменная, назначаемая на вектор x,y,z )
PS. это относится к продвинтой физике.

+2-
1 noTformaT   (11 Апреля 2011 17:10) [Материал]
noTformaTПосмотрел офф сайт, документация очень скудная, всего 11 страниц, в которых можно найти хоть какое-то описание функций. А описания самого Луа АПИ вообще нет sad

+2-
2 KpoJIuk   (11 Апреля 2011 17:17) [Материал]
а тут все идет из рассчета, что пользователь не типичный гейм-мейкерщик, а средний такой программист, пишущий на C++ или Lua. Централнойз (разраб) давно уже хочет обновить документацию.

+2-
3 noTformaT   (11 Апреля 2011 17:23) [Материал]
noTformaTне знаю на кого они расчитывают, но читать документацию по АПИ без описания методов и их параметров, как то стремно smile
http://blendelf.com/api_doc.html
Но надеюсь в будущем все координально изменится smile

+2-
4 KpoJIuk   (11 Апреля 2011 17:46) [Материал]
да, тут таки оплошность. приходится догадываться по названию, что делает та или иная функция biggrin

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
10 случ. движков
  • IKEMEN
  • Murl
  • Aleph One
  • Easy Game Creator
  • Wolfenstein 3D Classic iOS
  • Diligent
  • ADRIFT
  • PopCap Games Framework
  • AppGameKit Studio
  • FIFE
  • Друзья сайта
    Игровой форум GFAQ.ru Перевод консольных игр
    Все права сохранены. GcUp.ru © 2008-2024 Рейтинг