Урок 1. Основы html для разработки в сфере l2 кода.
Здесь представлен урок по детальному изучению HTML, который присутствует в датапаке сборок l2 java сервера. Урок предназначен для будуших разработчиков, в частности - датапакеров.
Что нам будет нужно для изучения данного урока?
- NotePad ++
или же любой текстовый редактор. NotePad - удобней, так как можно делать подсветку синтаксиса.
Для начала, что же такое HTML.
HTML (от англ. HyperText Markup Language) - язык гипертекстовой разметки текста.
Многие думают - что знание ХТМЛ (на уровне ява серверов l2) - это пустяк, и там нечего особого нету. Но - это не так. Я думаю, прочитав этот урок вы в этом убедитесь.
Для начала, чтобы вы могли ориентироваться в том что мы будем пытаться делать, укажем где же используется "HTML" в ява сервере.
1. Самое большее (примерно 97%) - это датапак, data/html .
2. В небольшом количестве в ядре (пока нам это не нужно) .
3. В небольших количествах в python scripts ( /scripts/python ).
Основное предназначение наших файлов html в датапаке ява сервера - это диалоги NPC.
Пример : подойдя к любому НПЦ в мире Lineage2, и клацнув на него 2 раза мышкой - мы видем выскочивший диалог(неважно какой) - именно это и есть html часть датапака и именно её мы будем с вами изучать.
Раздел 1. Где какие диалоги хранятся.
Этот раздел я опишу вам для того, чтобы вы немного поняли структуру расположения ХТМЛ файлов в вашем датапаке ява сервера.
Как мы уже выше с вами выяснили, все важные нам файлы (за исключением ядра и питон скриптов) находятся в /data/html (у l2jserver - gameserver/data/html).
Зайдя в эту папку, мы видим большое кол-во папок, находящихся в ней. Для того, чтобы вам немного помочь ориентироваться в этой папке, где хранятся наши диалоги, приведу несколько примеров с характеристикой что в них хранится.
Теперь, я думаю вы будите иметь представление где хранятся наши файлы.
Раздел 2. Как найти файл который мы будем редактировать.
В основном, наши попытки отредактировать тот или иной файл вызваны тем, что мы хотим что то поправить (чей то диалог, какого либо нпс в мире lineage2).
И вот мы сталкиваемся с проблемой - как же найти диалог того или иного NPC?
Раскажу вам 1 из самых простых методов как же это сделать.
Для начала, определим ID того NPC, чей диалог мы собираемся редактировать. Сделать это очень просто. Можно - щелкнуть на NPC в игре shift + click мышки - и получить табличку с его данными, где и будет указан его ID, можно - попробовать найти его ID в базе данных, по таблице npc.sql, можно найти любой пак "Id всего" и найти его ID там. Тут выбирайте что вам более по душе.
Итак, мы определили ID нашего NPC. Запомните, html файлы с диалогами того или иного npc чаше всего (в 99% случаев) совпадает с названием html файла.
Файл, будет иметь вид : id_npc.html.
Для яркого примера, я попытаюсь найти диалог NPC с id 31228. Как я поступаю? Я иду в папку /data/html и выполняю поиск по файлу "31228.htm"
Вот я и нашел тот файл, который мне хочется изменить. Это уже хорошо. Приступим дальше.
Раздел 3. Основные теги используемые в HTML файле диалога NPC.
Итак, сейчас мы уже приступим к пониманию основ, с которыми мы будем работать. Понять основную структуру - важно. Если этот раздел вами будет не усвоен - дальнейшее продвижение будет бессмысленным.
Как основу, обьясню вам каким же может быть тег html.
Контейнерным, это означает что полный тег будет состоять из открытого и закрытого тега. Имеет вид :
Первый - является открывающим тегом, и поясняет машине что дальше будет выполнятся какая либо операция с каким либо значением.
Второй - закрывающий тег, указывает машине на то, что операцию по выполнению действия с каким либо значением - нужно завершить. Яркий пример контейнерного тега :
<html>
</html>
Или же :
<a href="http://l2maxi.ru"> Наш любимый сайт </a>
Одиночным, такой тег как правило с тексте HTML документа стоит один, без закрывающего тега. Чаше всего они осушествляют какую либо разметку или синтаксис.
Пример одиночного тега :
<br>
[code]
Теперь, рассмотрим теги с которыми мы можем столкнутся при работе с HTML документами диалогов NPC нашего датапака. Теорию - отбросим(частично).
1. Основной тег, который есть в любом файле :
[code]
<html>
</html>
Этот контейнерный тег, "говорит" исполняющей его машине (компьютеру, коду, неважно чему) что начался HTML документ.
Этот тег является обязательным к любому HTML документу.
Тег ставится - в начале документа и в конце документа.
Пример использования тега :
2. Второй по важности тег :
Данный контейнерный тег характеризует начало "основного тела" того или иного диалога. Его наличие - обязательно. Внутри этого тега - идет основное содержимое html диалога, тоесть то, что будет отображено нам.
Пример использования тега :
<body> основное содержание документа </body>
3. Один из немаловажных тегов :
<title> заголовок хтмл диалога
Данный контейнерный тег отвечает за "заголовок" того или иного документа. Его наличие - не обязательно. Яркий пример - открыв диалог с НПС мы видем в шапке этого диалога его заголовок.
4. Один из широко широко используемых тегов для разметки :
<br>
Этот одиночный тег, используется для создания "абзаца". Его использование в тексте, приведет к тому, что следующий за ним текст будет отображен с новой строки.
На примере, это выглядит так :
Здраствуйте! Текст Текст Текст. <br> У меня можно многому научится.
В диалоге это отобразится вот так :
Здраствуйте! Текст Текст Текст.
У меня можно многому научится.
Как мы видем - текст после <br> пошол на новую строку, с абзаца.
5. Маловажный, но часто употребляемый тег :
<font color="LEVEL"> мой текст </font>
Этот контейнерный тег, отвечает за окраску текста того или иного диалога HTML. При его использовании текст "мой текст" окраситься в желтый цвет.
После преобразования, в игре оно будет выглядить вот так :
6. Еще один тег, используемый для разметки текста :
<b> наш текст </b>
Этот контейнерный тег, дает исполняемой его машине понять, что текст "наш текст" нужно выделить жирным шрифтом.
После преобразования, будет выглядеть так :
[b]наш текст[/b]
7. Немало важный тег :
<!-- нечитаемый текст -->
Данный хтмл тег - называется "коментарием". То, что находится внутри тега - не считывается исполняющей машиной. Зачастую, данный тег используется для описания "для себя" того или иного участка кода. Это удобно.
Наглядный пример :
Наш сайт - http://l2maxi.ru
<!-- выше - ссылка на наш сайт -->
Самый лучший сайт.
Преобразуется в диалоге в такой вид :
Наш сайт - http://l2maxi.ru
Самый лучший сайт.
Итак, с основными тегами мы завершили. Приведем простой пример использования в диалоге NPC их всех :
<html>
<title> Наш первый NPC диалог </title>
<body>
Приветствую вас! Это наш <font color="LEVEL">первый</font> npc. <br>
<b>Я</b>, лучший NPC в мире <b>Lineage2</b><br>
<!-- Это наш нпс, составленый нами -->
Удачи вам в этом <font color="LEVEL">жестоком</font> мире.
</body>
</html>
В диалоге, оно преобразуется в такой вид :
Заголовок : Наш первый NPC диалог.
Приветствую вас! Это наш первый npc.
Я, лучший NPC в мире Lineage2
Удачи вам в этом жестоком мире.
Вот мы уже научились использовать основные разметочные теги HTML. Это уже хорошо.
Раздел 4. Построение таблиц в диалогах NPC.
Нередко, мы встречаем "табличный" вид расположения в диалогах NPC либо текста, либо кнопок, либо ссылок. Сейчас, мы с вами рассмотрим основные табличные теги.
В HTML, начало и конец таблицы принято отмечать контейнерным тегом :
<table>
</table>
Как вам известно, любая таблица может содержать - столбцы и строки. Так же и в html - таблица, может содержать как строки, так и столбцы (ячейки).
Для обозначения начала и конца строки, в html принят тег :
<tr> наша строка </tr>
Для обозначения ячейки(образовывают столбцы) - принято использовать тег :
<td> содержимое ячейки </td>
А сейчас, включаем все ваше внимание. Важно уловить себе в уме, как же формируется таблица. Так как видя код - нужно "графически" для себя представлять, как же это будет выглядеть. Если этого вам не удастся - редактировать таблицы вы некогда не сможете (грамотно).
Итак, строки и ячейки - образуют общую сетку, или иными словами - саму таблицу.
Для примера, я возьму очень простую таблицу, нам важно понять как же они строятся.
<table>
<tr>
<td> Ячейка один </td>
<td> Ячейка два </td>
</tr>
<tr>
<td> Ячейка три </td>
<td> Ячейка четыре </td>
</tr>
</table>
Теперь, покажу вам это наглядно. Очень важно уметь представлять визуально тот или иной код.
---------------------------------------------
| Ячейка один | Ячейка два |
---------------------------------------------
| Ячейка три | Ячейка четыре |
---------------------------------------------
Очень важно чтобы вы поняли куда и что попало. Опишу вам словесно этот момент. То, что находится между первым тегом <tr> </tr> - формирует первую строку, в которой есть две ячейки. Они выстраиваются в этой строке одна за одной (аналогично если их больше). После же второго открытия тега <tr> </tr> - идет уже вторая строка, которая тоже содержит две ячейки. Они так же в ней выстраиваются одна за одной.
Если вы это осмыслили - значит вы сможете работать с таблицами.
Примеров в html документов - вы найдете уйму.
Раздел 5. Важнейший тег в диалогах - <a .... > text </a>.
Данному разделу нужно уделить особое внимание, так как он является одним из сложнейших, и его понимание - даст вам возможность работать и выгибать HTML файлы под себя, как нужно это ВАМ, а не наоборот.
Для прелюдии - мы возьмем обычный HTML тег :
<a href="http://l2maxi.ru">Наш сайт </a>
После преобразования этого тега, получим ссылку. Вот её вид :
Это были азы ХТМЛ. Данный тег служит для создания "гиперсылок". Думаю их роль вам известна.
Я их привел здесь не случайно. Данный пример поможет нам ниже понять нечто посложней.
Возьмем типичный тег, образования "гипрссылки" которая будет выполнятся в нашей игре, а мы её должны прописать в нашем хтмл файле. Вот он собственно :
<a action="byppas -h npc_%objectid%_тип значение"> текст ссылки </a>
Данный запрос будет принимать значение из бипасса (ядро, кеш) какое то значение, с каким то типом. Для того чтобы это понять, объясню вам каждую букву этого запроса(так как это очень важно). Итак,action=" .... " это действие, а точней - ссылка на тот или иной обьект которая будет выполняться при "клике мышкой" по ней.
Теперь, рассмотрим то что стоит в значении запроса "byppas -h npc_%objectid%_тип значение".
byppas -h здесь, дает понять машине, что запрос будет выполнен в кеш, или взят оттуда. byppas - это часть анализатора ядра, останавливаться здесь мы пока не будем.
npc_%objectId% - получает данные об этом npc, и дает понять ява машине от кого выполняется этот запрос, и может ли он быть выполненым.
значение здесь - это либо номер html документа(который выполнится при определенном типе), либо мультиселл файл, либо же sql запрос.
текст ссылки - это то, что будет отображено в диалоге нпс. Она будет подсвечена синим цветом(как ссылка любая) и при клике по ниму - выполнится значение "byppas -h npc_%obiectID%_тип значение".
А вот тип здесь может быть различным. Приведу вам основные типы и методики их обработки.
а) тип = Chat. Это означает, что наш запрос будет направлен на другой html файл. Основной характеристикой использования - является специфика "значения". Так же, значение при этом типе - несет свою специфику. В значении, указываю за частую число какое либо, которое будет "приставлено" к основному HTML файлу.
Возьмем наглядный пример. У нас есть файл html с названием "31228.htm". В этом документе, мы используем запрос
(ссылку) :
<a action="bypass -h npc_%objectId%_Chat 1">Текст</a>
Так вот, в игре оно отобразится как ссылка, при клике по которой пользователь должен попасть на другой html файл (выше разобрались уже).
На какой же файл он должен попасть? А всё очень просто. В запросе, мы видим значение, которое равно "1". Следуя выше указанному, при клике на этой ссылке - откроется новый файл, с именем 31228-1.htm.Как я и говорил - добавляется "-значение" к имени файла.
б) тип = byu, teleport и другие. При использовании данных типов - значения берутся из наших баз данных. Нам известно, что наши базы данных несут некоторую информацию, к которой может обращаться наш сервер. Глубоко я лезть здесь не хочу, поэтому расскажу поверхностно. Здесь, для понятия этого типа сервером, используется как ява-код сервера так и значения в базе данных(получение и обработка, получение - из базы, обработка - ява код).
Возьмем типичный пример :
<a action="bypass -h npc_%objectId%_goto 70">Телепорт в пвп зону</a>
Здесь, все аналогично выше изложенному пункту, action и byppas -h, так же и npc_%objectID%.
А вот тип goto - новое для нас.Откуда он получится? Ну здесь доволи непростой механизм для полного объяснения, скажу вам что при обработке ява-кодом типа _goto - получится вот такой механизм : ява машина, обработав нашу ссылку, после объяснения нашего значения в ядре сервера поймет, что она была послана в базу данных, на выборку значений для телепорта. Зачастую - это таблица teleport. В ней, имеются такие значения как "id", "locx", "locy", "locz", "price". Так вот, наше значение - это и есть тот "id" который ява машина выберет из баз данных. В нашем случае, значение = 70, ява машина выберет из баз данных строку, в которой ID будет равен "70". Вот такой не сложный механизм на примере телепорта.
Аналогично, работает и запрос "byu" и другие.
в) тип = multisell. При использовании данного типа в ссылке в хтмл диалоге - будет означать, что при её использовании мы откроем файл, из папки /multisell/ (это произойдет при обработке кода ява машиной). Да, именно этим типом многие реализуют "гм шопы" и прочую дрян.
Рассмотрим принцип работы с типом = multisell.
<a action="bypass -h npc_%objectId%_Multisell 1111">купить украшения</a>
Здесь - всё аналогично выше указаному(action, byppas -h, npc_%objectid% ). Так же я уже упомянул, что при использовании _multisell = тип будет обработано "значение" = 1111 из папки /data/multisell. В данном случае, значение "1111" при обработке ява-машиной будет приобразовано в получении файла "/data/multisell/1111.xml". Тоесть, значение = 1111, преобразовалось при обработке в ссылку на файл "1111.xml".
Вот мы и рассмотрели механику данного действия.
Заключение этого раздела : типов - много. Они могут быть разных параметров : некоторые обрабатываются только ява машиной, некоторые - ява машиной + запросы в базы данных, некоторые - ява машиной + запрос на гомолог-файл html
(одноименный-значение).
Раздел 6. Человечность кода и анализация работы.
Начнем с человечности кода. Это один из важных факторов. Человечный код - это написание кода "наглядным методом", "понятным для человека".
Но, увы, зачастую все пишут(точней копируют, так как нет мозга) при этом делая код - ужасным.
Вот няглядный пример такого извращения :
<html><title>мой нпс</title><body> это мой первый нпс. <br> здесь мы попробуем что либо реализовать. <br> <b> Удачи вам </b></body></html>
Вот вам удобно читать такой код? Я думаю - несовсем. При чтении кода - очень важно понимать его структуру, чего не получается сделать выше изложенным методом. Советую вам писать код так, чтобы при :
a) Каждой новой визуальной строке - был абзац в хтмл файле (оно не читается ява машиной).
Автор статьи : zenn
