Создаем Аддон для Wildstar #2 (гайд)

Второй урок по созданию аддона для Wildstar. Продолжаем работу над  Dotter.

Первый урок: http://www.wildstaronline.ru/gayd-po-sozdaniyu-addonov-wildstar-1/

1. Откройте Аддон Dotter  и выберите вкладку Forms в левой панели, или дважды кликните на Dotter.xml на вкладке Files.
2. Выберите DotterForm в дереве файлов.
3. Давайте поэксперементируем с Anchors/Offsets для  сначала. Нажмите на кнопку ОК мышью, чтобы выбрать ее. (Вам, возможно, потребуется щелкнуть за пределами родительского окна первого, чтобы потом выбрать нужную кнопку.)

DD0Kzl

 

4. С помощью мыши перетащите кнопку «ОК» в левую часть окна

mah2Jl

 

Обратите внимание, что смещая кнопку данные в Position меняются.

 

5. Теперь выберите DotterForm снова, щелкнув по нему мышью или выбрав его в дереве. Как только вы его выбрали, измените его размер, нажав на правом нижнем углу маркер изменения размера и сделайте  окно немного больше.

oXChtl

 

Обратите внимание, что кнопка OK отошла от левого края его родителя. Это происходит потому, что в настоящее время она прикреплена к правому краю окна. Измените размер DotterForm снова так, чтобы кнопка ОК еще раз была вблизи левого края формы.

6. Выберите кнопку «ОК» снова. В окне Properties  — Window измените  Anchor Point значение Left (должно было стоять 1) на 0.

qNEmRl

 

Обратите внимание, что кнопка не изменила своего расположения, но смещение было изменено на положительное число (29 в нашем примере). Это смещение соответствует числу пикселей от левого края (из-за 0) родительского окна. Теперь левый край кнопки ОК прикреплен к левому краю своего родителя (+ 29 пикселей). Но правая сторона все еще прикреплена к правой стороне своего родителя (-445 пикселей). При изменении размера родительского окна, кнопка ОК будет сокращаться и увеличиваться. Попробуйте. После того как вы закончите с формой, измените правую опорную точку кнопки ОК на 0. Теперь изменение размера родительского окна не будет влиять на размер кнопки «ОК», как и ожидалось.

7. Мы не будем использовать кнопку ОК или Canсel в нашем окончательном Аддоне поэтому выберите каждую  из них и нажмите на кнопку Delete на панели инструментов.

Ko0b8l

 

8. Нынешний DotterForm больше, чем нам нужно. Используйте маркеры изменения размера или смещения, чтобы изменить размер DotterForm так, чтобы  он составлял около 400×480 пикселей.

vE07wl

 

9. Давайте изменим  название нашей формы. Выберите  форму, в окне Window Properties нам нужна первая вкладка — Window.  Давайте изменим Name на «Title» и что важно — Text: Dotter

GvoPNl

 

10. Сохраним форму.

11. Посмотрим, как наш новый Аддон выглядит в игре. Если игра все еще запущена, перейдите на экран Addons в разделе Options  и нажмите кнопку перезагрузки пользовательского интерфейса.
12. В окне чата введите  «/ Dotter»

8qrEal

 

13. Хорошо, давайте добавим новое окно для нашего DotterForm. Убедитесь, что DotterForm выбрано, и нажмите кнопку «Add Window Control» на панели инструментов.

o3lxMl

 

Сразу новое окно будет добавлено ​​с именем по умолчанию Window1.

wrzO7l

 

Используя мышь, переместите новое окно, так что его положение было  16,410 и его размер составлял около 80×30 пикселей. Измените его название на «ColorLabel», его текст на «My color:» и используйте шрифт «CRB_Dialog_Heading_Small»  в панели «Font». Кроме того, измените точки крепления верхнего и нижнего якоря на 1, т.е. если мы изменим размер окна, эти метки будут привязаны к нижней части его родителя.

wmOAf

 

14. Еще раз, выберите DotterForm.

15. Теперь еще раз нажмите «Add Button Control» на панели инструментов.

gF4hG

 

Новая кнопка будет добавлена в форму, которая называется Button1. Используйте мышь, чтобы переместить ее вниз так, чтобы она находилась рядом с заголовком «My Color:». Измените  ее верхние и нижние якоря  на 1, так чтобы она прикрепилась к нижней части своего родителя, и переименуйте кнопку на  «Color1». Размер кнопки должен быть 32×32.

UkQ0X

 

16. Теперь выберите вкладку «Button » в диалоговом окне  Window Properties.

UMK14

 

Нажмите на кнопку рядом с основным полем.Вам будут показаны список доступных шаблонов. В окне редактирования фильтра введите слово «Default», после чего будут показаны только около 7 шаблонов кнопки. Выберите первую

«DefaultBlankButton»

zwqrv

 

Теперь нажмите на кнопку  «Select» и вернитесь в диалоговое окно Window. Вы увидите, что внешний вид нашей кнопки изменился.

lsgkF

 

17. Измените тип кнопки с «Pushbutton» на «Checkbox» и в поле ввода «Radio Group» напишите «Color».

otwCz

 

18. Теперь в диалоговом окне  Window Properties  щелкните на вкладке StylesEx. На этой вкладке стили, характерные для различных типов окон, в данном случае, кнопки. Проверьте  галочку напротив RadioDisallowNonSelection.

56bQJ

 

19. Теперь нажмите на вкладку Events  в диалоговом окне  Window Properties . Нажмите на существующие событие ButtonSignal и удалите его. Затем нажмите кнопку  Add button, в   строке Event выпадающие меню. нам нужно  событие ButtonCheck и в строке Function введите OnColorChange.

IQ3tI

 

20. Нажмите кнопку Сохранить. Вы будете немедленно переключены на файл  Dotter.lua и курсор будет на новой пустой функции, называемой Dotter: OnColorChange. Не волнуйтесь об этом на данный момент. Просто вернитесь к Dotter.xml в Хьюстоне.

21. Выберите кнопку  Color1. В диалоговом окне Window Properties, переключитесь обратно в окно Window. В поле BGColor введите «red».

GmDAs

 

Вся кнопка будет закрашена красным цветом.

22. Убедившись, что кнопка Color1 все еще выбрана, выберите Edit, Copy из меню или нажмите Ctrl-C на клавиатуре, чтобы скопировать кнопку в буфер обмена.

23. Теперь убедитесь, что выбран DotterForm  нажмите Ctrl-V или выберите Edit, Paste в меню. Новая кнопка будет добавлена ​​с точно такими же свойствами, что и кнопка Color1, за исключением того, что она будет называться Color2. Она будет в том же положении, так что используйте мышь или клавиши со стрелками, чтобы переместить ее справа Color1, на расстояние  около 5 пикселей. Кроме того, в BGColor введите «green».

ZUcF7

 

24. Повторите эту вставку еще три раза, так чтобы у вас получилось пять кнопок и они выстроились рядом друг с другом. Убедитесь, что вы всегда выбираете DotterForm, прежде чем вставить, так чтобы  он остановится родителем для вновь добавленной  кнопки. Изменяйте BGColor на  3 разных значения:  «blue», «yellow», «cyan».

WhLzd

 

25. Теперь мы собираемся добавить еще одну кнопку, для DotterForm. Переместите эту кнопку до нижнего правого угла формы и сделайте ее около 90 пикселей в ширину. Кроме того, после перемещения этой новой кнопки на нужное место, убедитесь, что она привязана к нижнему правому краю своего родителя. Измените имя новой кнопки на  AddDot и измените поле Text на «Add dot!». На вкладке button  нажмите на кнопку возле Вase. Введите в поле  фильтра «green». Выберите шаблон  кнопки с названием  btn_square_LARGE_Green и нажмите на кнопку Select.

GnqmS

 

26. Перейдите на вкладку Events  в диалоговом окне Window Properties,  выберите событие ButtonSignal, и нажмите кнопку Edit. Измените  имя функции на OnAddDot. Появится диалог с запросом, хотите ли вы переименовать функцию. Нажмите «No», тогда будет создана новая функция Dotter: OnAddDot. Не волнуйтесь об этом на данный момент.

27. Мы закончили изменения в DotterForm. Мы хорошо провели время, так что теперь убедитесь, что вы сохранили все ваши работы!

Продолжение — скоро….

  Обсуждение на форуме