Как создать визуальную программу

Luna может использоваться во многих областях, где обработка данных является главным приоритетом: data science, машинное обучение, IoT, биоинформатика, компьютерная графика или архитектура. Создатели open source языка рассуждают о принципах создания предметно-ориентированных языков и рассказывают о своем решении, позволяющем создавать программы при помощи визуальных диаграмм.

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

Программы позволяют нам сделать невозможное. Компьютеры могут собирать и обрабатывать огромный объем информации за доли секунды. Более того, людям нужно визуализировать информацию, чтобы понять её. Нам проще использовать точки на карте, графики или визуализацию генома в CAD вместо длинного списка чисел и координат.

Создание визуальной новеллы на RenPy

Разнообразие специфических требований к предметной области в значительной степени способствовало росту предметно-ориентированных языков (DSL — Domain Specific Languages). Если вы разработчик, вы, вероятно, знаете DSL в их наиболее популярной форме — текстовых языков программирования. Однако понятие DSL намного шире.

Предметно-ориентированный язык представляет собой специально разработанный текстовый или визуальный интерфейс для управления данными в определенной области. Богатые графические пользовательские интерфейсы, предназначенные для работы с данными, специфичными для какой-либо области, такие как UML-диаграммы, интерактивные графики или обработка музыки, также должны рассматриваться как DSL. Хорошим примером является наиболее распространенный DSL, используемый графическими дизайнерами — это цифровые холсты с соответствующим набором инструментов, кистей, фигур, фильтров и так далее.

Что такое Luna?

Luna — это визуальный и текстовый, полностью функциональный WYSIWYG-язык для обработки данных (WYSIWYG — «что видишь, то и получишь»). Его цель — изменить способ того, как люди собирают, понимают данные и управляют ими.

Luna может использоваться во многих областях, где обработка данных является главным приоритетом: data science, машинное обучение, IoT, биоинформатика, компьютерная графика или архитектура. Каждая область требует качественных инструментов, и Luna предоставляет как единую основу для создания таких инструментов, так и растущую библиотеку уже существующих. По своей сути, Luna предоставляет мощную среду для моделирования потока данных и фреймворк для визуализации данных и управления ими.

Принципы создания языка

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

Что нужно для создания визуальной новеллы? — Уроки RenPy #1 | Космо

Здесь появляется важный вопрос: что такое хороший язык? Существуют ли правила, которым должен следовать каждый предметно-ориентированный язык? Мы считаем, что существует два основных принципа:

1. Люди должны видеть моментальную связь с тем, что они создают. Этот принцип был впервые предложен Бреттом Виктором во время его выступления Inventing on Principle. Любое отклонение от этого правила отделяет пользователей от проблем, которые они пытаются решить, что увеличивает количество ошибок.
2. Люди не могут быть ограничены инструментом, который они используют. Люди обычно отказываются от инструментов, которые ограничивают их способность самовыражения. Это одна из причин, по которой многие WYSIWYG-решения, например, инструменты для создания сайтов или визуальные языки программирования, не становятся популярными. Каждый предметно-ориентированный язык, который является сложнее текстового WYSIWYG-редактора, может легко нарушить этот принцип, предоставив пользователям слишком ограниченный набор компонентов. Даже если эти компоненты можно расширить при помощи кода, необходимость обращаться к другому языку программирования портит дизайн языка и делает его сложным для аудитории с меньшим техническим опытом.

Нарушение принципов

Нарушение любого из этих принципов приводит к менее оптимальному решению. Рассмотрим графический дизайн. Использовать Photoshop лучше, чем писать код на HTML, CSS (Sass) и JavaScript? Вероятно. Но эти решения нарушают первый и второй принципы. Photoshop предоставляет цифровой холст с ограниченным набором предопределенных инструментов.

HTML, CSS и JavaScript предоставляют текстовый интерфейс, который отделяет пользователя от его творения. Возьмем два случая:

1. Дизайн сайта. В меню этого сайта всего пять объектов. Если вам нужно добавить новый объект или изменить цветовую палитру сайта, вам нужно лишь поменять одну строчку в HTML и переменную цвета в CSS. Независимо от сложности сайта, каждый элемент обновится автоматически. Та же операция в Photoshop потребует больше времени: создать новый объект меню, использовать выравнивание для расстановки элементов, вручную изменить цвета и добавить несколько трансформаций, если сайт достаточно сложен.
2. Художественный рисунок. Используя HTML, SVG и CSS в текстовом редакторе, будет невозможно выразить художественное видение.

Возможно ли объединить оба подхода? В этом направлении уже есть успехи. Например, Sketch, который стал важной программой для дизайн на Mac OS. Почему многие люди предпочитают Sketch, а не Photoshop? Sketch меньше ограничивает способность пользователей к самовыражению Он позволяет вам создавать элементы дизайна и обновлять их параметры, как Sass, но в интерактивной среде.

Создание логотипа в Luna:

Проклятие DSL

Если мы знаем основные принципы для предметно-ориентированного языка, почему существует так мало подобных инструментов? Хотя DSL позволяют лучше понимать данные, они способствуют появлению неверных моделей создания программ. Существование множества небольших предметно-ориентированных языков в долгосрочной перспективе ведет к фрагментированному миру программного обеспечения.

В реальном мире между разными областями постоянно существует взаимодействие. Но в мире ПО такого сотрудничества нет. Разработчики должны писать один и тот же код снова и снова, что приводит к большим затратам на разработку и стагнации инноваций.

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

Язык Luna

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

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

Именно это делает Luna. Он создан на основе трех концепций:

1. Среда для визуализации данных и управления ими. Luna позволяет вам визуализировать данные и управлять ими при помощи интерактивных WYSIWYG-компонентов, которые можно расширить. Более того, Luna предоставляет способ простого создания новых компонентов, модифицирования существующих и распространения этих компонентов в сообществе.
2. Диаграмма потока данных. Вы можете увидеть, как компоненты высшего уровня связаны в потоке данных. Вы можете разъединить их или добавить новые компоненты, чтобы изменить работу диаграммы. Luna предоставляет компоненты для всех уровней абстракции, от рисования статистических функций до битовых операций.
3. Вложенные диаграммы потоков данных и репрезентация кода. Каждый компонент в Luna состоит из других компонентов. Вы всегда можете спуститься на уровень ниже и настроить компоненты, как вам нужно. Вы можете объединить несколько компонентов в один и поделиться им с другими людьми. Более того, вы всегда можете переключиться с диаграммы на код, и наоборот. Диаграмма при этом обладает такой же силой, что и код.

Источник: apptractor.ru

Узнаем как создать визуальную новеллу самостоятельно: полезные советы и рекомендации

Сейчас довольно популярным стал такой игровой жанр, как визуальная новелла. Разрабатывают новеллы не только профессионалы своего дела, но и любители. Как самому сделать визуальную новеллу? Какие особенности у этого жанра? Какие программы можно использовать для создания визуальных новелл?

Что такое визуальная новелла

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

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

Игровой процесс

Игроку в визуальной новелле предстоит делать выбор, который и будет влиять на дальнейшее развитие событий в игре. Обычно это какое-либо действие, либо выбранный из перечня фраз ответ. Зачастую визуальные новеллы имеют несколько концовок, и именно выбор игрока приведет к одной из них.

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

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

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

Визуальные новеллы на русском языке

Это жанр интерактивного искусства, быстро набирающий популярность в России. Происходит это за счет переведенных на русский язык иностранных визуальных новелл (в большинстве случаев японских). Но есть и попытки создать «свой продукт». Можно выделить следующие довольно известные игры:

• «Красный космос».
• «Книга мертвых: Потерянные души».
• «Евгений Онегин».

Также стоит отметить большое количество любительских проектов. Потому многие поклонники жанра задаются вопросом: как создать визуальную новеллу самому? Существует ли такая возможность вообще? С ростом популярности жанра увеличивается количество визуальных новелл, созданных в России. Проводятся конкурсы среди создателей новелл, под проекты создаются целые команды.

В целом жанр имеет большие перспективы в России, а игры имеют большой спрос среди обывателей.

Как создать визуальную новеллу

Стоит помнить, что тремя главными составляющими визуальных новелл являются: графика, текст и звук.

В визуальной новелле должно быть много текста, причем он должен вызывать желание прочитать его, а не пропустить и идти дальше. Увлекательный сюжет – главное преимущество данного жанра перед другими. Потому важно изначально хорошо продумать и спланировать канву сюжета. Также стоит хорошо продумать варианты выбора игрока: они должны влиять на ход истории и ее концовку.

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

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

Сценарий

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

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

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

Графика

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

В графике новеллы есть три составляющие:

Вы можете создать фоны сами или поискать их на разных сайтах с картинками. Не стоит только забывать о лицензии на использование и авторском праве. Лучше хорошо изучить правила площадки, которой вы собираетесь воспользоваться.

То же касается и спрайтов. Можно поискать их на просторах Интернета, нанять художника или нарисовать их самому.

Программное обеспечение

Благодаря популярности игр появилось множество программ для создания визуальных новелл. Большинство из них на японском языке, но есть и русифицированные.

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

1. Ren’Py.
2. PONScripter / ONSlaugh.
3. Blade Engine.
4. KiriKiri Adventure Game System.
5. Novelty.

Не знаете, как создать визуальную новеллу, не являясь программистом? Одной из самых популярных и удобных программ в этой сфере является Ren’Py. Это довольно простой в использовании движок, который к тому же является бесплатным. Ren’Py — отлаженная программа, которая работает как часы.

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

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

Источник: autogear.ru

Создание визуального редактора JavaScript

От автора: недавно я провел некоторое время, разрабатывая собственный визуальный редактор JavaScript под названием Demoit. Что-то вроде CodeSandbox, JSBin или Codepen. Я уже писал о том, почему я это сделал, но теперь решил поделиться некоторыми деталями реализации. Все происходит во время работы в браузере, поэтому это довольно интересный проект.

Цель

Интерактивная JavaScript-площадка — это место, где мы можем писать код JavaScript и видеть его результат. Это означает изменения в дереве DOM или логов в консоли. Чтобы реализовать это, я создал довольно стандартный интерфейс.

У нас есть две панели с левой стороны — одна для созданной разметки и одна для логов консоли. С правой стороны находится редактор. Каждый раз, когда мы вносим изменения в код и сохраняем его, мы хотим видеть обновление левых панелей. Инструмент должен также поддерживать несколько файлов, поэтому у нас есть панель навигации с вкладками для каждого файла.

Редактор

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

На самом деле код, который я написал для этой части, составляет всего 25 строк.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Источник: webformyself.com