基于 Web 最新技术制作的音乐游戏《Piano Flow》

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3301 天前的主题，其中的信息可能已经有所发展或是发生改变。

可玩性探究与理论

一切才刚刚开始，节奏模式与自动演奏模式却已经升起
倘若你是一个资深古典音乐爱好者，且有一套性能很棒的设备，节奏模式可能会毁了你
没有可玩性，怎能算作游戏？所以未来会添加太鼓达人模式与乐谱模式，欢迎 PRPRPR

注意啦，那些你在各种 Conf 接触不到的新技术，这里统统都有

对不起，我说谎了， Vue 2 + RxJS + Pixi 4 并不能算最新的技术。如果我周末把时间全部用在研究最新框架上，现在就是用 Yarn 来进行依赖管理，就能使用 WebVR 带上 HTC Vive 零距离感受德彪西了 : (
为了不被前端淘汰，发完此贴就回老家闭门学习新框架，学习配柠檬茶让我无法自拔

围城传送门

GayHub: https://github.com/SuneBear/Piano-Flow
游戏地址: https://sunebear.github.io/Piano-Flow

模式

可玩性

太鼓

框架

70 条回复 • 2021-05-27 22:17:13 +08:00

qqqppp9998

2016-10-17 15:03:11 +08:00

有意思，感觉楼主好厉害~

banricho

2016-10-17 15:03:23 +08:00

楼主叫来顶帖
楼主有女朋友
楼主经常晒妹
楼主没有节操

SuneBear

2016-10-17 15:08:49 +08:00

@banricho [搞事👋] [搞事👋] [搞事👋]

whahuzhihao

2016-10-17 15:17:23 +08:00

楼主好厉害！
刚玩完了德彪西的月光，又想起恶灵附体的小房间啦！

SuneBear

2016-10-17 15:20:00 +08:00

@whahuzhihao 德彪西的曲子应该是和皎白月光联系在一起，居然让你想起恶灵附体，心疼 1s

whahuzhihao

2016-10-17 15:25:17 +08:00

@SuneBear 恶灵附体游戏里的插曲就是这首 Clair-de-Lune 啦

whahuzhihao

2016-10-17 15:39:06 +08:00

另外在微信浏览器里打开，声音全是沙沙声。手机 safari 是好的。

est

2016-10-17 15:41:15 +08:00

空气中和地面充满了 LZ 的 JJ 碎片——碉堡啦。

XhstormR

2016-10-17 15:48:35 +08:00

开久了之后， CPU 占用 90%，音乐都卡的发出噪点了。

qyc0129

2016-10-17 15:56:18 +08:00 via iPhone

so cool 有前景

SuneBear

2016-10-17 15:59:07 +08:00

@whahuzhihao 因为游戏是 Runtime 合成， MIDI -> Pitch -> WebAudio ，如果性能不好就会撕撕杀杀，所以这个游戏还能检测性能～ Safari 会给动画什么的单独开线程，这样就可以缓解卡顿的问题

a87150

2016-10-17 16:05:37 +08:00

感觉没什么意思，按什么键都一样，也没有快捷键什么的。

SuneBear

2016-10-17 16:07:05 +08:00

@XhstormR 一时半会想不到优化方案，为了模拟钢琴的延音，播放完的 Pitch Node 会停驻一段时间，相当于很多个通道一起制造音源，最后合成在一起。还有就是古典曲子手速之快， 60/1000 毫秒都跟不上～

SuneBear

2016-10-17 16:09:55 +08:00

@a87150 需要什么快捷键呢？现在用 Esc 可以暂停，游戏支持多键同时触发，如果在未来的积分模式中就是很有难度的，除了锻炼节奏，还能帮助记忆一个 Bunch 的音符数

chunqiuyiyu

2016-10-17 16:13:16 +08:00

感觉不错，点个赞

SuneBear

2016-10-17 16:14:20 +08:00

@XhstormR 更正一下，是 1000/60 毫秒， 16 毫秒 /帧

a87150

2016-10-17 16:23:32 +08:00

@SuneBear 突然觉得自己有点傻，这种游戏的乐趣应该是得分达成目标之类的。弄复杂了不如直接玩乐器。

qinxi

2016-10-17 16:44:19 +08:00

厉害了,我的哥

irgil

2016-10-17 16:53:29 +08:00

感觉好好

ETiV

2016-10-17 16:57:20 +08:00

Web 跑 MIDI 几年前想过，但效率真的是……

下落式 MG 大概 2 年前做过一个，改天找个机会放出来给各位老爷玩玩……

murmur

2016-10-17 17:00:33 +08:00

web 做音游想想睡吧 osu 那帮家伙都要输入延迟在 0.x 毫秒才能玩音频延迟盯着 ASIO 二三十 ms 都有人受不了
webaudio 那个性能？呵呵哒，别人都在用 144hz 的显示器了，你刷新率能有多少

nazhenhuiyi294

2016-10-17 17:33:37 +08:00

性能确实不行啊...我试了下,自动模式下有噪音,卡顿..这是 pc 上面..手机端更是要炸吧

shawnhill

2016-10-17 17:35:00 +08:00

体验非常棒

PolarisChen

2016-10-17 17:47:51 +08:00

虽然偶有沙沙声和卡顿，但体验和界面设计动画都非常赞~ 加入太鼓达人模式与乐谱模式后感觉可玩性会大大提高，支持加油~

muziki

2016-10-17 17:52:18 +08:00

好厉害

benpichu

2016-10-17 18:17:51 +08:00 via Android

[还没有打开……话说有 midi 键盘输入么（]

noe132

2016-10-17 19:38:53 +08:00

一开始还挺不错的。。。
后来放个月光第三章，先是噪音，噪音慢慢变多，然后直接卡的没声音了。。

yangff

2016-10-17 20:02:13 +08:00

那么怎么玩呢？

SuneBear

2016-10-17 20:40:48 +08:00 via iPhone

@PolarisChen Thx ，我接下来打算先折中音效与粒子特效，优化一下性能

SuneBear

2016-10-17 20:43:53 +08:00 via iPhone

@benpichu MIDI 输入很好实现，切换一下音源即可，适合演奏模式

SuneBear

2016-10-17 20:51:00 +08:00 via iPhone

@murmur 其实这个游戏和 OSU 差挺大的，主要还是获取一种沉浸式的体验与提供一些实用功能

kazarin

2016-10-17 21:13:15 +08:00

很有意思， Safari 上一切良好，感谢楼主

SuneBear

2016-10-17 21:33:11 +08:00 via iPhone

@kazarin Great ，求贴一下配置，我在 15 年中配 Pro 上测试不会卡，不过在快节奏曲子中有杂音，现在找到的原因是和低通滤波器有关～

winduser

2016-10-18 00:44:27 +08:00

有意思，感觉楼主好厉害~

winduser

2016-10-18 00:44:52 +08:00

有意思，感觉楼主好厉害！！

winduser

2016-10-18 00:48:46 +08:00

@qqqppp9998 为了特地给 Sune 回复，你这 ID 看上去就像是刚注册的小号。

yelite

2016-10-18 01:18:01 +08:00

Prelude-in-C-via-WTC-Bk-1-No-1.mid 错了，变成 Pathetique 了

a570295535

2016-10-18 01:34:48 +08:00

有一种学会了钢琴的感觉，虽然不会玩。。。

dreampuf

2016-10-18 02:21:30 +08:00

可以，很强

WildCat

2016-10-18 02:27:39 +08:00 via iPhone

就差广电审核了

ericls

2016-10-18 02:45:09 +08:00

厉害！！！！！！

lslqtz

2016-10-18 04:23:46 +08:00

@murmur osu 我 4ms 没问题啊。。
flash 可以拿来做我觉得没问题啊

lslqtz

2016-10-18 04:24:09 +08:00

@murmur 这个你得看看 4399 那些垃圾枪游。。

lslqtz

2016-10-18 04:24:26 +08:00

@SuneBear 楼主好厉害。。

starvedcat

2016-10-18 06:14:24 +08:00

感谢楼主，这里面德彪西的曲子我都很熟悉很喜欢，玩起来很有意思~

murmur

2016-10-18 07:59:12 +08:00

@lslqtz flash 以前不是金山的勾勾么早死了不知道多少年了

xiaket

2016-10-18 08:08:21 +08:00

https://sunebear.github.io/Piano-Flow/#/pieces/Prelude-in-C-via-WTC-Bk-1-No-1

这曲子和标题不对应

murmur

2016-10-18 08:32:53 +08:00

@PolarisChen 太鼓早就有模拟器了， win/android/ios 都支持而且性能非常好
不过国内玩太鼓的不多啊？

murmur

2016-10-18 08:35:51 +08:00

@benpichu midi 键盘有个叫 syn 什么的东西可以玩比正经弹钢琴都累如果你认为玩音乐游戏可以学会键盘抓紧洗洗睡吧
再老的，你可以找 yamaha 的 keyboard mania ，网上有下载，估计 xp 可以，我 win10 检测不到 midi 键盘

另外，楼上那些喜欢钢琴下落式的，去玩 deemo 好么？不喜欢情怀的， deemo 也有模拟器啊，不是我泼冷水，音乐游戏对延迟和输入体验要求非常高，不仅要求延迟低，而且还要稳定， android 都达不到这个要求只能做宽判定或者像大厂云下发延迟校正数据， flash 也只能做个模拟器，市面上那么多音乐游戏谁家是 html5 啊。。。

hronro

2016-10-18 08:39:50 +08:00 via Android

厉害厉害

benpichu

2016-10-18 08:53:07 +08:00 via Android

@murmur [我并没有想通过这种方式学键盘乐啊（]

SuneBear

2016-10-18 09:18:17 +08:00 via iPhone

@xiaket 啊哦， Prelude 后成为 Pathetique ，很像一次失败的相亲～

hustlzp

2016-10-18 09:38:18 +08:00

赞！

caiya21

2016-10-18 09:50:37 +08:00

给楼主点赞了

lslqtz

2016-10-18 10:13:40 +08:00

@murmur 金山有勾勾？根本没找到

murmur

2016-10-18 10:15:03 +08:00

@lslqtz 现在只剩下老的新闻了，一出来就被 osu 玩家骂惨了，山寨 osu 不说源生兼容 osu 谱面也罢了，你还搞个充值叫 J 币，我充你个 JB 充啊

SuneBear

2016-10-18 10:15:55 +08:00

@hustlzp 感谢支持，我记得用过你写的 jquery-s2t ，给你点个赞

SuneBear

2016-10-18 10:21:26 +08:00

@murmur 活捉一只音游老司机，我前同事做过一个 [Web Taiko]( https://github.com/waksana/taiko) 的音游，只要不过分追求音效与特效， HTML5 性能可以跟上的

lk920724

2016-10-18 10:21:57 +08:00

mark 回家看~

murmur

2016-10-18 10:23:55 +08:00

@SuneBear key 音很重要，尤其是太鼓一定要听鼓声的，不追求音效不可能

chuhemiao

2016-10-18 10:25:09 +08:00

鼠标加空格同时试试:D

dawncc

2016-10-18 10:27:44 +08:00

体验很好假装自己会弹琴...

cxshun

2016-10-18 10:29:06 +08:00

楼主厉害，必须 star 一个。

ClassicOldSong

2016-10-18 16:59:19 +08:00 via Android

等会过来看
Web 做音乐游戏的话延迟是个大问题，老早以前就有想法了但是纠结延迟所以一直没动

lslqtz

2016-10-18 20:15:12 +08:00 via iPhone

@murmur 我都没找到新闻...

pheyer

2016-10-19 14:44:15 +08:00

手机上的 Magic Piano 不就是这么玩的吗，效果更佳

SuneBear

2016-10-20 09:39:34 +08:00 via iPhone

@pheyer 握手， Smule 的 Magic Piano 是我最喜欢的音游之一，以后还得学习一个，向西方看齐（匿

lurrpis

2016-10-20 14:28:35 +08:00

熊老湿～

SuneBear

2016-10-24 11:34:43 +08:00

@lurrpis 退隐多年，居然还是被认出来。绿色出行，拒绝开车

charlie21

2021-05-27 22:17:13 +08:00

ydys