Простой виртуальный стол - Туториал

Контекстное меню здесь вызывается по левой клавише мыши, а не по правой. Это сделано для совместимости с мобильными устройствами.
Итак, переходим по ссылке paradoxdream.com/vt. Ссылка автоматически меняется, генерится уникальная ссылка для нового виртуального стола(карты – для краткости, хотя это и не обязательно должна быть карта). Следует отметить, что тут нет никакого понятия о правах, т.е. каждый кто имеет ссылку на карту может ее полностью редактировать. Это наверное главный недостаток, из-за которого я буду потом писать свою версию. Второй недостаток — отсутствие какой ни будь палитры или библиотеки изображений.
Кликаем правой клавишей и перед нами появляется меню:
Add Piece… – добавить элемент, это наш основной пункт, которым мы будем пользоваться. Позволяет создать единственный и основной элемент из которого собственно и состоит карта. Но в начале я пробегусь по остальным пунктам.
Open Board – позволяет загрузить файл ранее сохраненной карты
Save Board – собственно, позволяет сохранить карту на диск.
Clear Board – полностью отчистить карту от всех элементов.
Redirect Url – сомнительная фича. Позволяет сделать так, что при попытки открыть карту, нас будет перебрасывать на другую, заданную ссылку.
Help – бесполезный пункт :D

Теперь все же перейдем к Add Piece. Кликнув на нее мы увидим небольшую форму:
Face url – ссылка на изображение. Не важно, это бэк, токен, игральная карта или еще какое-то изображение. Все это Piece, и именно тут задается его внешний вид.
Width – ширина изображения. Если оставить пустым – размер будет равен размеру изображения. Если задать размер, то изображение пропорционально изменится под заданную ширину. Бывает полезно особенно для «токенов», что бы подогнать их под нужный маштаб.
«Use piece as a player's hand shield» — а вот не знаю, надо разбираться. Если надо, конечно :)
CSS Class – позволяет задать дополнительные настройки CSS. Пока не нужная функция, но возможно позже я сделаю ее более полезной :)
Callback – тоже не нужная вам функция. Как я понимаю, это позволяет создать некоторую дополнительную логику элементу. Но это опять же требует вмешательства разработчика, так что просто пропустите это.
Custom HTML: — дополнительный текст к картинке. В данный момент можно использовать для подписи под изображением. Может быть полезно, для имени, или даже что бы показывать хиты моба. Можно использовать html-тэги, например использовать тэг B — что бы сделать надпись жирной.
Задав ссылку на изображение и если требуется – размер, мы нажимаем Ок, и на карте появится новый элемент!
Впрочем мы пропустили еще один любопытный пункт. Кнопка Add a face. Если на нее нажать, то в форме появится еще одно поле Face url. Зачем это нужно? Например можно взять 6 изображений шестигранной кости, и сделать у элемента 6 face url, с этими изображениями. Или даже забить туда целую колоду карт. Или использовать набор из стандартных токенов. Как с этим работать, я расскажу чуть позже.
Давайте для начала просто вставим ссылку на какую нибудь карту(поиск по картинкам от google нам поможет сделать быстро нашу первую карту), и нажмем ОК. Возможно с паузой в 1-2 секунды, перед нами появится наша картинка. Скорее всего она будет иметь не правильную позизицю, а потому зажимаем мышку над изображением, мы просто перетащим его туда, куда нам надо.
А теперь, кликнем по нему левой клавишей мыши. И перед нами появится выпадающее меню. Пройдемся теперь по нему. Кстати, оно будет немного отличаться, в зависимости от того, делали ли мы несколько Add a Face или нет. Для начала предположим, что не делали:
Rotate – позволяет перейти в режим вращения. Вращать, кстати, можно и просто зажав правую кнопку мыши. Иногда полезно повращать, хотя и редко нужная функция.
Move – соответственно режим перемещения. Опять же дублирует перемещение мышкой с зажатой левой кнопкой мыши. Но мало ли? Может вам и так будет удобно.
View Detail – наверное полезная функция, но явно не работает :) А потому пропустим пока. Будет время, гляну, может смогу подправить. А если нет, то просто уберу пункт.
Edit – позволяет вызвать ту же форму, что была и при создании элемента. Позволяет редактировать элемент, менять картинку, изменить размер, добавить грань и т.д.
Lock – очень важная функция. Позволяет заблокировать изображение, что бы оно не таскалось, не выбиралось по клику. Нужно как раз таки для создание подложки. Если вы уже вставили изображение карты и настроили его позицию – самое время выбрать этот пункт. Впрочем для заблокированного изображение, если по нему кликнуть, то в выпадающем меню будет так же пункт Unlock. На случай, если нам снова надо отредактировать нашу подложку или что вы там заблокировали.
Clone – ну собственно клонирует наш элемент. Очень полезно, если у нас много повторяющихся элементов, особенно сложных, например дайсиков с гранями :)
Delete — позволяет удалить элемент
И опять таки Use this shield for you hand — я не знаю что делает. Позже попробую выяснить.

Если изображения накладываются друг на друга, то в меню будет так же пункт Send to Back – поместить позади всех. А в остальном, порядок редактируется непосредственно тасканием. Каждый раз, когда мы тащим изображение – оно переходит на передний план. Send to Back очень полезен, если мы к примеру редактируем подложку, а сверху у нас уже что-то было. После ее перемещения она перекроет все другие элементы. Но нам достаочно потом просто нажать для нее Send to Back, а потом Lock и наслаждаться дальше.

Ну и последнее, о чем я еще не рассказал, это о пунктах, которые появляются если у нашего элемента есть грани:
Flip – включить следующую грань. Сколько бы ни было у нас граней у нашего объекта, отображается всегда одна. Flip позволяет их последовательно переключать.
Random Flip – почти тоже самое, что Flip, но включает рандомную грань. Если мы сделали кубик, то этот пункт как раз таки позволяет нам его «кинуть»
Flip to first side – включить самую первую грань. Полезно для колоды карт, обчно первая грань – это рубашка :)

1 комментарий

avatar
Спасибо, очень помогло! :)
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.