先上视频链接:https://www.bilibili.com/video/BV1VZ4y1c7n9

音游flowerdance.jpg

1 前言

因为了解一点音乐,很早就想通过html+javascript在网页上实现音游,但是难度确实太大了,一直没有动手。直到最近看到同学玩Cytus II,找回了以前的想法。试玩了Cytus IIArcaeaBanG Dream,感觉自己过于手残,想起以前还会打节奏大师的《克罗地亚狂想曲》呢,现在真是菜b一个。另外,同时也了解了目前市面上的音游玩法和自制方法:【音游科普 by菡萏芳菲】【BanG Dream自制教程】,相对来说BanG Dream自制是比较简单,工具比较成熟的。也觉得没有必要再去自己实现一个音游了,于是就开始了BanG Dream的自制。

选择Flower Dance这首曲子,是因为最近一直在练这个(虽然不够熟练),钢琴谱我也比较熟悉,就想试试把它做成音游看看。

2 制作过程

找了一圈,最后找到了制作工具:Bangbangboom editor,这个链接搭在gitee上,适合国内访问,也方便测试。下面是我的一些制作过程,如果不好理解,可以见上面的自制教程链接。

2.1 导入歌曲

首先导入歌曲和背景
fd_1.png

导入成功后,下面的进度条就可以播放歌曲了,右下角可以调速。

2.2 节奏和留白

一般来说,大部分歌曲的节奏(bpm,beat per minute,拍每分钟)都是固定的,可以通过时轴页面来手动测量节奏,也可以通过软件来测试(我用的是fl studio)。对于Flower Dance,根据钢琴谱可以知道前8小节是80bpm,之后为100bpm,最后4小节速度渐慢。

因此在时轴界面,添加两个时间点,3s、80bpm,26.625s、100bpm。(图中一个例子:)
fd_2.png

修改歌曲前面的留白,可以让整个乐曲节奏更加匹配,我也不知道具体意义,跟着教程来的。
https://player.banground.fun/ 页面计算留白,比如我的第一段是3s、80bpm,填入计算出来是0,即不需要操作
fd_3.png

2.3 制图

弄好了节奏之后,就可以开始写谱了,打开左边的跟随播放,可以通过空格键播放/暂停,跟着写谱,网格细分用来调整网格密度。

fd_4.png

这部分的写法仁者见仁,智者见智,我第一次不太会写,写得比较简单。写得差不多了可以用右上角的播放键模拟音游播放谱。

2.4 导入和导出

写好了谱之后,使用下载编辑器格式/导入编辑器格式来保存原始谱。导出Bestdori格式,可以用来发布到Bestdori!网站上。

2.5 发布到Bestdori!

Bestdori!(https://bestdori.com)是一个BanG Dream相关的资源站,可以发布自己制作的谱面,在【发表谱面】界面填入相关信息,在谱面项点击【</>】输入编辑器导出的Bestdori格式,就可以导入谱面了,然后发布即可。
fd_5.png

我的谱面最终版本:https://bestdori.com/community/charts/38115/ctem049-Flower-Dance,谱面id为38115

3 游玩谱面

制作完了之后,当然想自己尝试一下啦。可以通过Bang PlayerBanGround Player在线玩,需要注意把手机上自动旋转打开,全屏玩。

谱面的id在发表的谱面地址中(例如:bestdori.com/community/charts/38115/ctem049-Flower-Dance)/charts/后即为id,38115。

另外,也可以通过Sonolus获得更好的游玩体验,Sonolus官方网站为:https://sonolus.com,有iOS和Android端,需要添加bestdori服务器,地址为https://servers.sonolus.com/bestdori。添加服务器后进入服务器,搜索谱面名称或者id即可游玩。
fd_6.jpg

4 结语

这次实现自己想法还是很快的,花了两三天时间就了解了如何制谱/发布/游玩,还请某音游大佬同学协助我修改了一下谱面,更具可玩性。最后使用的是Bang Player录制的Auto Play视频,发布在b站上,为我的作品页面再添一笔~