如何无痛地将艺术与Java,JavaScript和图形结合起来,或者如何创建交互式剧院产品背后的故事

去年2018年,在爱沙尼亚推出了名为《世纪故事》的戏剧制作系列。 全年,有22家当地剧院向观众展示了他们对爱沙尼亚近百年历史的诠释。 在抽奖中,俄罗斯剧院被分配了爱沙尼亚未来的主题。


我们每个人对未来的前景都有自己的想法-我们担心的是什么,我们梦想的是什么。 但是,我们不想创造一种只会告诉观众剧院里狭窄人群如何看待未来的戏剧。 因此,我们向未来将要居住的人们(即3至19岁的爱沙尼亚的儿童和青少年)提出了这个问题。 我们收到了来自俄罗斯各个角落的城市和村庄的俄语和爱沙尼亚语答复。 他们有数百个,我们非常感谢他们。

图片

我们收到的每个回复都是唯一的,但是在浏览所收集的材料时,我们注意到了一些明显的趋势和模式。 孩子们的回答形成了无数吸引人和恐怖的未来世界。 但是,有一些东西可以将这些世界结合在一起。



这个故事将我们带到了2118年。爱沙尼亚处于一个保护圆顶之下。 我们学到了很多东西,包括如何延长人类寿命。 主要人物是一对叫琳达和蒂莫的老年夫妇。 一百年前,作为孩子,他们对现在生活的未来充满幻想。 实际上,他们是创造这个剧本的孩子。 在剧中,根据观众的投票方式,这些角色会在2118年掉入不同版本的爱沙尼亚。

图片

当然,表演不是在帷幕拉开时才开始,而是早得多。 处理完所有响应后,我们根据孩子们确定了未来的主要可能途径-从信息技术到生态状态。 由于未来不是预先确定的,而是取决于我们所有人的选择,因此未来的可能之路被分为短篇小说,这些短篇小说与主要人物及其家庭的总体故事联系在一起。

图片

舞台设计类似于一种可以在儿童手中完成任何形状并执行任何功能的构造玩具。 它的形状也像图形-一种特殊的抽象数学对象,使我们能够描述和建模现实世界的许多现象,例如道路网络,企业的组织模型,互联网或人们做出的各种选择-可以变成不同的情节线。

图片

当在图形上表示时,可能的绘图展开会形成一个复杂的多分支结构。

乌托邦常常导致反乌托邦,通往地狱的道路铺就了良好的意图。 场景被戏剧逻辑束缚在一起。 考虑到孩子们的幻想启发了未来的所有可能选择,我们的故事情节很多。 表演期间不要重复任何一个,这一点非常重要。 例如,如果观众投票反对乌托邦,将导致反乌托邦,或者如果观众拒绝乌托邦,则他们需要做出其他选择。 我们曾经遇到过这样的情况,即票数几乎均分,最终决定取决于2-3票。



除了艰巨的任务外,还面临其他多项技术挑战:先进的控制器系统可在舞台上驱动数百个LED,爱沙尼亚最佳剧院设计师Rosita Raud之一为未来的每个版本巧妙地制作了服装(这是一个挑战主要针对那些在投票结束后必须快速换衣服的演员),当然,还有驱动故事情节并基于图形模型的投票系统。 这是我想详细介绍的内容。

所有音乐均由MODULSHTEIN现场演奏

图片

为了更容易理解,让我们输入一个表演


我们处在多元文化的故事情节中。 所有语言和性别混合在一起。 一切都被接受。 表演部分以新闻公告开头,该新闻公告以5种语言向观众解释了以下场景的背景。


具有讽刺意味的是,耶琳娜·索洛米娜(Jelena Solomina)确实是国家电视台的主持人和知名公众人物。

在多元文化的未来,一切都充满乐趣。 小塞梅诺娃 与她的父母组织了一次会议,向她介绍了穿着阿拉伯和芭蕾舞服装混合的男朋友。 介绍后,每个人都去参加一个聚会

图片

图片

场景结束时,投票开始。 主要问题是爱沙尼亚是否会走这条路。 如果是的话...

乌托邦将变成反乌托邦。 限制所有自由,并引入新的限制。 突然,特种部队关闭了党,将人们分为几类。 一些人受到欢迎,并向右转到光明的未来,而另一些人则必须脱掉衣服,然后向左移至执行机。

图片

技术方案


这是我们为系统设置的要求:

  • 系统应收集选票,实时显示结果,然后做出决定。
  • 系统应根据投票结果选择故事情节,打开新的投票,并在故事情节之间切换。
  • 系统应使用自然语言与听众进行交流。
  • 该系统应由幕后助理主任管理,并提供有关进行中状态和选票的完整统计信息。

实际上,这是另一个被称为EMA(爱沙尼亚语中的“母亲”)的演员,这是一种在未来已成为现实的人工智能。 EMA通过情节带领听众,在未来的不同版本中展现自己。 它还启动投票,对结果进行计数和呈现,并根据投票的结果沿剧情线移动比赛。 所有EMA都是在首映前1.5个月从头开始编写的。 由于剧情的形成是根据剧作家和导演的决定而定的,因此剧情线,各种自定义项和图形过渡都在不断发展,因此不可能从较早开始进行开发。

礼堂可容纳600人,因此人们必须能够使用手机进行投票,而我们需要能够在不到一分钟的时间内接收和处理所有这些投票。 开发移动应用程序的选择被立即放弃,因为下载和安装应用程序会花费更多的精力-如果您不是Facebook或Google,就不会有人下载您的应用程序。 此外,要支持不同类型和型号的手机,还需要进行单独的开发,这是不现实的,因为我们只有1.5个月的时间和一个开发人员。 此外,移动客户端将不得不使用两种语言-爱沙尼亚语和俄语。 因此,我们需要一个针对手机优化的Web应用程序。

图片

需要另一个Web应用程序作为控制系统的管理后端:启动/停止,激活投票轮,监视正在进行的投票状态等等。

图片

第三,也是最重要的是,我们需要协调EMA与受众的互动。

在这里,有必要介绍“超级”的概念-这对我来说是新的。 “超级”是下降并隐藏舞台的前帘。 它具有反射性,可让您显示各种预测,例如新闻稿(我们将在后面介绍)或EMA屏幕,其中显示有关投票结果和观众选择的信息。

图片

因此,我们有一个复杂的图表,一个投票系统和三个前端系统,需要与查看者和管理员进行交互(Svetlana Shushina,令人难以置信的助理导演)。

图表


让我们从图开始。 数据结构(在这种情况下,是爱沙尼亚未来的不同版本以及取决于投票结果的场景之间可能的过渡)必须存储在某个地方。 由于多种原因,标准关系数据库不太适合存储图形数据。 对我们来说,基本要求是灵活的数据存储,状态转换存储,取决于当前状态的音频文件链接等等。

显而易见的选择是Neo4j,这是世界领先的图形数据库管理软件。 全球十大技术公司中有七家使用它。 它提供了成熟的技术,速度,便利性以及出色的社区,对于这种解决方案,所有这些都别无选择。

我们将脚本编写者构建的场景建模为Neo4j中的图形。 这是Neo4j内部情节曲折的示例。

作为用于图形表示的本机系统,Neo4j提供的优点是灵活性和不存在固定结构。 这使得更改和连接故事情节以及添加音频的新版本变得容易。

图片

后端


在选择服务器端技术时,我们在Python和Java之间犹豫了一下。 最终,我们选择Java的原因是Java的速度和可靠性,同时又有明确的要求,还因为Spring Boot支持开箱即用的Neo4j。

图片

服务器端是在Spring Boot中实现的。 服务器收集投票,​​投票结束后从“超级”切换到以下状态,接受管理员的命令,提供统计信息,等等。 它还处理用户注册,并将投票数据(投票的开始或结束以及可用选项)分发给前端客户端。

图片

然后,我们完成了任务中最引人注目的部分。 总体思路是,“超级”上显示的组件EMA必须能够与听众交谈。 它必须准备听众进行投票,宣布投票选项,开始和结束投票,宣布结果,并根据听众的选择,为下一次投票提出选项或为下一个场景做一个介绍。 这意味着音频必须是动态的并且要随时准备。 考虑到选项的数量巨大,每个音频文件的持续时间各不相同,并且同步很重要(例如,只有在宣布“ Voting is open!”之后才开始投票),这根本不是一件容易的事。

因此,系统最终有了两个控制中心。

第一个是服务器 -它存储地块的当前状态,提供统计信息,处理用户注册,收集投票并确保每个人只能投票一次。

第二个是“ super” ,它开始和结束投票,显示投票的进度和结果,依此类推。

前端


“超级”在Vue.js中实现。 最初,计划是使用Google Speech API动态构建音频,但我们不能保证不会出现网络延迟。 因此,选择了另一个选项,我们使用Google Speech分别录制了音频文件。

总共我们有55个音频剪辑。 关于应该在什么状态下播放哪些音频文件的数据以及状态一起存储在图形上。 自从我们处理JavaScript以来,我们像串葡萄一样将音频文件和命令调用串在一起。 因此,我们并不依赖于音频文件的长度各不相同,并且最终得到了一个相当通用的解决方案这一事实。

最初,移动客户端网站是用VueJS编写的,但是在测试中我们意识到存在不兼容的问题,影响了某些手机型号。 我们尝试使用Babel转译器解决该问题,但是随着添加了多个设置,页面的容量也随之增加,即使该Web应用程序开始在某些手机上运行,​​在其他手机上却损坏了。 最终,移动客户端使用Vanilla JS重写。 结果,我们最终得到了一个分布式系统。

系统的最终卷(JAR文件)为146 MB。 电信公司Telia为我们提供了虚拟服务器,其象征性的价格为每月1欧元,对此我们深表感谢,并提供优质的服务。

首次现场测试是在Playtech办公室进行的,真是有趣。



首映前工作节奏加快。 爱沙尼亚总统将参加首映礼的事实使人们的期望更高。 在首映前半小时发现了最后一个错误,没有时间测试此修复程序,因此在首次表演期间,在开发人员的本地计算机上并行进行了系统行为的测试,以防将来可能出现的所有绘图线场景,以便在出现任何问题时可以提前准备行动计划。


图片

我想强调一个有趣的事实。 我们在前幕的投票屏幕上实时显示了投票的人员的姓名。 为此,我们使用了Vue的动画模板,并且在首次演出时,观众中的某人在注册时输入了“杀手符号”作为他的名字,这破坏了Vue模板的动画和显示。 随后,我们放弃了此解决方案(在动画过渡中显示名称),并改用了旧的jQuery。 VueJS仅用于“超级”模板,音频管理和切换状态。


该表演在媒体上受到了很多积极的评价。 其中一些:

爱沙尼亚语:

https://kultuur.postimees.ee/6402024/millised-me-eestlased-oleme

https://www.ohtuleht.ee/893816/mari-lill-uks-asi-on-raakida-vene-keelt-tanaval-hoopis-teine-asi-teha-seda-teatrilaval-

俄语:

https://rus.postimees.ee/6147704/nashe-zavtra-v-zerkalah-utopii-i-antiutopii

https://rus.postimees.ee/6141942/budet-ne-budet-net-nichego-opasnee-budushchego

https://rus.err.ee/859086/russkij-teatr-pokazhet-spektakl-budet-ne-budet-na-festivale-draama-v-tartu

https://m.ee.sputniknews.ru/culture/20180826/12340797/otkrytije-sezon-russkij-teatr-teatraljnoje-sobytije-god.html?mobile_return=no

在塔尔图的戏剧节上,起立鼓掌持续了近5分钟。

由于参与该项目的人们疯狂的精力和奉献精神,这是一次令人难以置信的冒险。 我向所有参与创作此剧的人们致以崇高的敬意。

导演-Artjom Gareev
作曲,制片人– Aleksandr Zedeljov
视觉-Aljona Movko
服装—罗西塔·罗德(Rosita Raud)
灯-安东·安德瑞克(Anton Andrejuk)
编舞-Olga Privis
编剧:Karin Lamson,Mari-Liis Lill,Jelena Chicherina,Laura Kalle
视频-Nikolay Alhazov
编程和IT解决方案-Anna Agafonova的Aleksandr Tavgen
LED灯-Aleksander Sprohgis
动画-马丁·雅库什(Martin Yakush)
音乐-Modulshtein
Marten Altrov-单簧管,低音单簧管
Aleksej Semenihhin –样本,音效
Aleksandr Zedeljov-吉他,合成器,ableton
人声— Anna Dydyna
导演助理Svetlana Shushina
演员:
Natalja Dymchenko,Aleksandr Zhilenko,Daniil Zandberg,Dmitrij Kordas,Ekaterina Kordas,Aleksandr Kuchmezov,Viktor Marvin,Natalja Murina,Jelena Tarassenko,Eduard Tee
Sergej Furmanjuk,Leonid Shevcov,Jelena Jakovleva
俄罗斯剧院工作室:丹尼斯·沃尔科夫(Deniss Volkov),波琳娜·格林佐娃(Polina Grinjova),妮娜·萨格沃兹基德娜(Nina Zagvozdkina),阿纳斯塔西娅·科莱达(Anastassija Koleda),娜塔莎·克里斯滕森(Natasha Kristensen),阿纳斯塔西娅·玛萨洛娃(Anadassija Masalova),桑德拉·米诺桑(Sandra Minosjan),索非亚·米哈约娃(Sofia Mihaljova),卡特琳·玛吉(KatrinMägi),米哈伊尔·帕舒克(Mihhail Pashuk),卡特琳·塞尔朱吉纳(Katrin Seljugina),克里斯蒂娜·索罗格格(Kristina Sorokgt),索非亚

科技作家-西格丽德·马森(Sigrid Maasen)

Source: https://habr.com/ru/post/zh-CN436206/


All Articles