В Двадэшках используется визуальный язык программирования ЖивоСкрипт и библиотека моделирования физики matter.js и её визуализатор на Canvas — всё это даёт возможность создавать настоящие игры. Созданную игру можно опубликовать в виде сайта или запускать на телевизорах или компьютерах.

Язык ЖивоСкрипт это визуальная форма языка JavaScript. Код на языке ЖС транслируется в JavaScript. ЖС облегчает и автоматизирует работу программиста. ЖС похож на языки Скретч и Блокли, но даёт возможность создавать большие сложные программы. Это промежуточное звено между примитивным детским и сложным профессиональным программированием.

Приложение Двадэшки можно скачать и использовать офлайн. Есть возможность автозагрузки файла игры без показа интерфейса редактора, только кнопка запуска игры. Так можно публиковать игры.

В этой статье описание графического интерфейса, структуры двухмерного мира игры, и API приложения. Язык ЖивоСкрипт описан в отдельной статье и доступен в виде отдельного приложения.

Для самообучения вместе с этой статьёй используйте встроенные видеоуроки. Видеоуроки будут постепенно добавляться.

Интерфейс приложения работает при ширине экрана не менее 1500 пикселей. Минимальный размер экрана необходимый для нормальной работы — FullHD. Для работы с приложением необходимы мышь и клавиатура. Во время игры для ввода используются клавиатура. Позже будет добавлена поддержка геймпада и сенсорного ввода.

РАБОТА С ФАЙЛАМИ И ЗАПУСК ИГРЫ

Чтобы открыть готовую демонстрационную игру от автора — нажмите на кнопку "демки" на главной странице и выберите игру.

Чтобы открыть главную страницу — нажмите кнопку "Двадэшки" в верхнем меню.

В Двадэшки встроены уроки для самообучения. Чтобы открыть урок нажмите на кнопку "видеоуроки" на главной странице и выберите урок. Когда в редактор загружен урок то в верхнем меню появляется кнопка "видео", при нажатии на которую открывается видео урока.

Чтобы создать игру с нуля нажмите кнопку меню "создать игру", далее настройте игру и нажмите кнопку "начать создавать".

Выберите будет ли в мире гравитация или будет невесомость, будет ли мир ограниченным станами по краям экрана или будет бесконечным, и если он ограниченный будет ли он зацикленным. В зацикленном мире тела уходящие за пределы экрана появляются на экране с противоположной стороны. Эти настройки (кроме имени) невозможно изменить позже.

Чтобы сохранить игру на диск компьютера — нажмите "сохранить файл".

Чтобы открыть файл игры с диска — нажмите "открыть файл".

Открытая и модифицированная или созданная игра хранится в памяти браузера и автоматически открывается после перезагрузки страницы приложения.

Есть два режима работы приложения — редактирование и игра.

Чтобы запустить игру — нажмите клавишу "ENTER" или кнопку верхнего меню "играть".

Чтобы прекратить игру — нажмите клавишу "ESC" или невидимую кнопку в правом верхнем углу экрана.

В меню "название" вы можете изменить название игры и её описание.

Для создания игр в Двадэшках нужны готовые медиафайлы, созданные в других редакторах. Вы можете загрузить в игру медиафайлы — для этого нажмите на кнопки "картинки игры" и "звуки игры". Вы можете создавать отдельные наборы медиафайлов для удобства работы с ними. Все загруженные медиафайлы увеличивают общий размер файла игры.

2D-МИР

Мир игры в Двадэшках это стопка из десяти слоёв:

Основные три слоя для тел персонажей и декораций. Названия этих слоёв: "над", "тела" и "под".

Тела созданные на слое "тела" сталкиваются друг с другом, а тела на слоях "над" и "под" не сталкиваются.

Под слоями тел может быть вспомогательный слой который виден только во время редактирования — "сетка".

Под ними располагаются три слоя фоновых изображений. Три фоновых слоя называются: "ближний", "средний и "дальний", в каждый можно загрузить свою бесшовную картинку, и настроить прозрачность и режим наложения. И можно настроить замедление каждого слоя, для создания эффекта параллакса.

И под этими слоями одноцветный фоновый цвет.

Над этими слоями для красоты может быть слой "тень" с внутренней тенью по краям экрана. Тень можно включить или выключить.

И над всеми слоями располагается слой для HTML-элементов которые может создавать программа игры: стандартные сообщения и информация, пользовательские элементы, кнопки... С элементами на этом слое пользователь может взаимодействовать через мышь во время игры.

Для работы со слоями используйте разделы нижнего меню: "слои тел" и "слои фона".

В ограниченном мире по краям экрана на слое "тела" располагается неподвижная рамка, состоящая из четырёх линий по краям экрана. Имена этих четырёх тел: border_top, border_bottom, border_left, border_right.

КАМЕРА

Изначально камера показывает центр мира в центре экрана. На экране отображаются координаты камеры. Во время редактирования вы можете двигать камеру стрелками клавиатуры, и для большего или меньшего сдвига вы можете использовать клавиши "Shift" и "Alt". Положение камеры сохраняется и в этом положении будет камера в начале игры.

Кнопки нижнего меню: "камера ⏐" и "камера ⎯" сдвигают камеру на оси X и Y.

СОЗДАНИЕ ТЕЛ

Перед созданием тела выберите для него нужный слой в меню "слои тел", по умолчанию это слой "тела".

Слои можно отключать и включать нажимая на кнопку "✔︎".

При выделении дела через нажатие по нему мышкой в меню "слои тел" отображается его слой, а также на экране отображается его уникальный идентификатор, который всегда начинается с нижнего подчеркивания, и имя, а так же координаты этого тела.

Далее выберите какой тип тел вы будете создавать — примитивы, группы, связки или клоны. Всё состоит из примитивов. Примитивы это простые тела разных форм: круг, прямоугольник и многоугольник.

Из примитивов вы можете создать группы. Группа это неподвижное соединение тел.

Или из примитивов и групп вы можете создать связки тел. Связка это подвижное и гибкое соединение тел.

И примитив можно использовать как прототип для клонирования. Все клоны будут вести себя по программе прототипа. Из клонов нельзя создать связки и группы. При изменении прототипа нужно вручную включить обновление и пересохранение всех клонов через нажатие клавиши "R". При запуске игры все клоны автоматически обновляются.

СОЗДАНИЕ ПРИМИТИВОВ

При создании примитива на панели нижнего меню вы можете настроить все его свойства: цвет, картинка, размер, форма, трение... Это можно сделать до создания тела и после его создания. При нажатии на примитив мышкой — на этой панели отображаются его свойства. И свойства этого тела будут использоваться при создании нового примитива. Чтобы тело появилось в мире надо нажать в нужном месте мышкой.

СОЗДАНИЕ ГРУППЫ

Чтобы создать группу нажмите меню: "добавить тело" и "группа". Мышкой выберите два или более тел, и нажмите на кнопку меню "сгруппировать".

СОЗДАНИЕ СВЯЗКИ

Чтобы создать связку нажмите: "добавить тело" и "связка". Мышкой выберите два тела, и нажмите на кнопку меню "связать". После этого настройте жесткость и пружинность связки, положение точек крепления связки к телам и длину связки. И нажмите кнопку "готово". Если вы в дальнейшем захотите из программы менять свойства связки — запомните ее идентификатор (ID).

Группы и связки невозможно создать в зацикленном мире.

Связки не видны в режиме игры.

СОЗДАНИЕ КЛОНА

Мышкой выберите тело которое будет прототипом. Выбрать можно клон. Нажмите: "добавить тело" и "клон" и нажмите мышкой в нужном месте. Идентификатор клона уникальный и отображается на экране при выделении клона — в строке идентификатора после слова "клон_" и идентификатора прототипа: например: "клон_1_256" — означает идентификатор клона 256, и идентификатор прототипа 1.

ПРОГРАММА ТЕЛА

Любое тело может иметь программу. Клоны исполняют программу прототипа. Чтобы программировать выделенной тело — нажмите кнопку нижнего меню "программа" или клавишу "пробел" на клавиатуре.

В верхнем левом углу программы отображается идентификатор тела или прототипа, и его имя.

В программе тела можно использовать страницы. По умолчанию используется первая страница. Каждая страница это просто процедура которая может быть выполнена в любой момент. В начале игры исполняются все первые страницы программ тел.

Чтобы посмотреть код JavaScript в который транслируется код на ЖивоСкрипте — нажмите кнопку "код JavaScript".

Чтобы закрыть программу надо нажать кнопку закрытия в правом верхнем углу или нажать клавишу "ESC".

API

Из программы доступно множество адресов среды исполнения и тел. Адреса представлены в отдельном окне и разделены на следующие разделы:

ЭТО ТЕЛО

В этом разделе все адреса программируемого тела. Первое свойство это адрес-ссылка на объект тела. Каждому программируемому телу соответствует объект в среде исполнения игры.

Основные изменяемые свойства тела — картинка, прозрачность, поворот и положение тела.

При выборе адреса показывается пример его использования в виде текста и описание.

Цикл объекта — это подпрограмма повторяющаяся с определенной частотой. Адрес "повторяющаяся подпрограмма" надо связать с подпрограммой которая будет повторяться. Повторяющуюся подпрограмму можно в любой момент отменить через вызов метода "отменить повторение подпрограммы".

Камера может следить или перестать следить за программируемым телом горизонтально или вертикально. Положение программируемого тела на экране можно настроить через сдвиг, по умолчанию тело будет в центре экрана.

Тело может автоматически восстанавливать свой угол поворота если его толкнёт и повернёт другое тело.

Через адреса импульсов поворота и движения можно получить значения угловой и линейной скорости тела или изменить их. Эти значения используют методы которые толкают или вращают тело относительно экрана или относительно себя.

Движения и повороты тела могут многократно повторяться с определенной частотой. Так же тело может двигаться к другому телу, к координате, по телам и по координатам.

Тело может взять другое тело — при этом образуется связка между телами, жёсткость и пружинность которой можно настроить. Тело может бросить все взятые тела или определенное тело. Тело может оторваться от другого тела взявшего его.

Выстрел создаётся через бросание телом клона, примитива или источника частиц.

Тело может отправить сообщение другому телу.

Есть адреса для обработчиков событий тела: схождения или расхождения с другим телом, когда тело "видит" перед собой тело, когда пришло сообщение от другого тела, когда тело взято или брошено

В игре может быть запущен ритм (звуковой файл) под который тела могут "танцевать" — изменять под музыку масштаб, положение и прозрачность своей картинки. Можно отменить танец, и настроить его амплитуду и направление.

ТЕЛА И СВЯЗКИ

В этом разделе адреса используемые для любого тела. Первый метод возвращает ссылку на объект тела по идентификатору. Чуть ниже есть подобный метод для получения ссылки на связку.

У объекта тела есть неизменяемое свойство "идентификатор объекта" и изменяемое свойство "имя объекта".

Тело можно клонировать, удалить, и добавить к нему свойства.

Можно получить приложенную к телу силу или угловую скорость или задать их. Получить или изменить плотность тела, угол поворота тела, положения тела, центр тела, трение, упругость, цвет, видимость и прозрачность тела.

Свойство "датчик" при положительном значении отключает возможность моделирования физического столкновения, и тогда тело может как датчик лишь регистрировать схождение и расхождение с другими телами. Тела на слоях "над« и "под» не участвуют в столкновениях и являются датчиками.

У связки можно изменить свойства пружинности, жёсткости и длины.

КЛАВИАТУРА

В этом разделе адреса для обработчиков нажатия и отжатия кнопок клавиатуры.

МИР

Можно узнать момент времени когда игра началась и сколько времени она длится.

Можно включить измерение производительности.

Есть метод для изменения вязкости среды (сопротивление воздуха)

Можно изменить скорость течения времени, изменить гравитацию.

ЭКРАН

Можно получить ширину и высоту экрана, получить координаты границ экрана в мире игры.

Границы экрана это рамка состоящая из четырёх линий по краям экрана, они перемещаются по миру вслед за камерой. Они используются для регистрации схождения (контакта) тел с ними. Их можно удалить. Имена этих четырёх элементов: sensor_top, sensor_bottom, sensor_left, sensor_right.

Можно проверить удалённость тела от границ экрана. Это используется для оптимизации производительности, чтобы не включать программы тела если оно не в поле зрения, далеко вне экрана.

И можно сдвинуть мир относительно экрана, то есть сдвинуть камеру.

ФОН

Можно настроить фоновый цвет и три слоя с фоновыми картинками.

ЧАСТИЦЫ

У любого тела есть метод "взорваться" для создания взрыва. Тело может остаться или исчезнуть. Взрыв может быть на одном из трех слоёв для тел.

У любого тела есть метод "создать поток частиц" для создания потока частиц на любом из трёх слоёв. Созданный поток можно запустить и остановить.

Эти два метода используют настройки источника частиц, которые нужно настраивать индивидуально для каждого взрыва или потока. Настройки можно сбросить до изначальных.

ЗВУКИ

Перед использованием звуки необходимо загрузить в игру через верхнее меню "звуки игры". Есть возможность обрабатывать событие завершения звука.

РИТМ

Ритм это тот же звук но используемый для танца, у него меньше методов для настройки звука. Чтобы использовать один из 12-ти танцев — надо их предварительно добавить.

АДРЕСА

Адреса этот 10 изменяемых свойств которые могут быть связаны с любым значением. Для этих адресов есть адреса для связывания с обработчиками события изменения значений адресов.

HOWLER

Это библиотека для работы со звуком.

LOCALFORAGE

Это библиотека для хранения данных в памяти браузера.

RAF

Это небольшая библиотека от автора в которой собраны некоторые полезные методы.

Так же в верхнем меню доступны системные адреса используемые в обычном веб-программировании.

АВТОЗАГРУЗКА

Для автозагрузки игры без показа интерфейса редактора надо:

1. добавить в начале json-файла игры строку: window.игра=

2. переименовать json-файл игры на: game.js

3. разместить файл в корне скачанного приложения

ВАШ САЙТ С ВАШИМИ УРОКАМИ

Вы можете скачать приложение Двадэшки и разместить его на своём сервере. Тогда у вас появится возможность загружать свои уроки в раздел "видеоуроки".

Нажмите кнопку "видеоуроки" на главной странице — откроется пустое окно. Нажмите невидимую кнопку в правом нижнем углу. При первом обращении система предложит ввести логин и пароль админа. Придумайте любой логин и пароль и запомните его.

Загрузите файл игры и файл видео, и придумайте имя урока. Нажмите кнопку "сохранить".

Так школа или учитель могут создать свою программу обучения.

Этот визуальный язык программирования создан специально для детей 12+. Также им могут пользоваться взрослые программисты-любители которым нужен простой инструмент. Таким простым настоящее программирование ещё не было.

Визуальный язык программирования ЖивоСкрипт (далее ЖС) — это графический интерфейс для языков JavaScript и PHP. ЖС транслируется в эти языки для дальнейшего использования на клиенте или сервере. Свободное приложение ЖС работает в браузере, онлайн и офлайн, на русском и английском языках.

Цель создания этого визуального языка — сделать настоящее программирование предельно простым, понятным и удобным для детей и любителей. ЖС упрощает и облегчает обучение и работу программиста. ЖС скрывает всю сложность и оставляет только суть — дерево программы в чистом виде, без скобок, запятых и прочей суеты. Программисту остаётся думать только о структуре программы, рутина автоматизирована и скрыта. Для кодинга на ЖС юный русский программист может даже не владеть английским языком.

ЖС был испытан на детях. Дети 12+ лет легко осваивают этот язык приблизительно за три месяца, занимаясь два раза в неделю и создавая на нем сайты или 2D-игры.

Этот визуальный язык похож на Блокли и Скретч, но он удобнее и на нём можно создавать сложные большие программы. В ЖС есть все достоинства этих языков, но нет их недостатков. Это недостающее промежуточное звено между примитивным детским и сложным профессиональным программированием. ЖС вполне может стать основным языком для обучения программированию в школах и кружках, потому что в нём сочетаются минимальная сложность с максимальными возможностями применения.

Название ЖивоСкрипт (JivoScript) происходит от предыдущего названия языка JavaScript — LiveScript. На стороне сервера JavaScript по задумке авторов должен был называться LiveWire. В ЖивоСкрипте реализована изначальная идея разработчиков — на нём можно писать код для клиента и сервера.

Ещё есть два свободных редактора с ЖивоСкриптом — Двадэшки для 2D-игр с библиотекой matter.js и ВебКодер для создания сайтов. В ВебКодере также визуализированы языки HTML и CSS.

В этой статье подробное описание языка и пример простого клиент-серверного приложения.