基于 Web 最新技术制作的音乐游戏《Piano Flow》 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
SuneBear
V2EX    分享创造

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

  •  7
     
  •   SuneBear 2016-10-17 15:00:52 +08:00 6569 次点击
    这是一个创建于 3293 天前的主题,其中的信息可能已经有所发展或是发生改变。

    可玩性探究与理论

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

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

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

    围城传送门

    70 条回复    2021-05-27 22:17:13 +08:00
    qqqppp9998
        1
    qqqppp9998  
       2016-10-17 15:03:11 +08:00   1
    有意思,感觉楼主好厉害~
    banricho
        2
    banricho  
       2016-10-17 15:03:23 +08:00   4
    楼主叫来顶帖
    楼主有女朋友
    楼主经常晒妹
    楼主没有节操
    SuneBear
        3
    SuneBear  
    OP
       2016-10-17 15:08:49 +08:00
    @banricho [搞事] [搞事] [搞事]
    whahuzhihao
        4
    whahuzhihao  
       2016-10-17 15:17:23 +08:00
    楼主好厉害!
    刚玩完了德彪西的月光,又想起恶灵附体的小房间啦!
    SuneBear
        5
    SuneBear  
    OP
       2016-10-17 15:20:00 +08:00
    @whahuzhihao 德彪西的曲子应该是和皎白月光联系在一起,居然让你想起恶灵附体,心疼 1s
    whahuzhihao
        6
    whahuzhiha  
       2016-10-17 15:25:17 +08:00
    @SuneBear 恶灵附体游戏里的插曲就是这首 Clair-de-Lune 啦
    whahuzhihao
        7
    whahuzhihao  
       2016-10-17 15:39:06 +08:00
    另外在微信浏览器里打开,声音全是沙沙声。手机 safari 是好的。
    est
        8
    est  
       2016-10-17 15:41:15 +08:00
    空气中和地面充满了 LZ 的 JJ 碎片碉堡啦。
    XhstormR
        9
    XhstormR  
       2016-10-17 15:48:35 +08:00
    开久了之后, CPU 占用 90%,音乐都卡的发出噪点了。
    qyc0129
        10
    qyc0129  
       2016-10-17 15:56:18 +08:00 via iPhone
    so cool 有前景
    SuneBear
        11
    SuneBear  
    OP
       2016-10-17 15:59:07 +08:00
    @whahuzhihao 因为游戏是 Runtime 合成, MIDI -> Pitch -> WebAudio ,如果性能不好就会撕撕杀杀,所以这个游戏还能检测性能~ Safari 会给动画什么的单独开线程,这样就可以缓解卡顿的问题
    a87150
        12
    a87150  
       2016-10-17 16:05:37 +08:00
    感觉没什么意思,按什么键都一样,也没有快捷键什么的。
    SuneBear
        13
    SuneBear  
    OP
       2016-10-17 16:07:05 +08:00
    @XhstormR 一时半会想不到优化方案,为了模拟钢琴的延音,播放完的 Pitch Node 会停驻一段时间,相当于很多个通道一起制造音源,最后合成在一起。还有就是古典曲子手速之快, 60/1000 毫秒都跟不上~
    SuneBear
        14
    SuneBear  
    OP
       2016-10-17 16:09:55 +08:00
    @a87150 需要什么快捷键呢?现在用 Esc 可以暂停,游戏支持多键同时触发,如果在未来的积分模式中就是很有难度的,除了锻炼节奏,还能帮助记忆一个 Bunch 的音符数
    chunqiuyiyu
        15
    chunqiuyiyu  
       2016-10-17 16:13:16 +08:00
    感觉不错,点个赞
    SuneBear
        16
    SuneBear  
    OP
       2016-10-17 16:14:20 +08:00
    @XhstormR 更正一下,是 1000/60 毫秒, 16 毫秒 /帧
    a87150
        17
    a87150  
       2016-10-17 16:23:32 +08:00
    @SuneBear 突然觉得自己有点傻,这种游戏的乐趣应该是得分达成目标之类的。弄复杂了不如直接玩乐器。
    qinxi
        18
    qinxi  
       2016-10-17 16:44:19 +08:00
    厉害了,我的哥
    irgil
        19
    irgil  
       2016-10-17 16:53:29 +08:00
    感觉好好
    ETiV
        20
    ETiV  
       2016-10-17 16:57:20 +08:00
    Web 跑 MIDI 几年前想过,但效率真的是……

    下落式 MG 大概 2 年前做过一个,改天找个机会放出来给各位老爷玩玩……
    murmur
        21
    murmur  
       2016-10-17 17:00:33 +08:00
    web 做音游 想想睡吧 osu 那帮家伙都要输入延迟在 0.x 毫秒才能玩 音频延迟盯着 ASIO 二三十 ms 都有人受不了
    webaudio 那个性能?呵呵哒,别人都在用 144hz 的显示器了,你刷新率能有多少
    nazhenhuiyi294
        22
    nazhenhuiyi294  
       2016-10-17 17:33:37 +08:00
    性能确实不行啊...我试了下,自动模式下有噪音,卡顿..这是 pc 上面..手机端更是要炸吧
    shawnhill
        23
    shawnhill  
       2016-10-17 17:35:00 +08:00
    体验非常棒
    PolarisChen
        24
    PolarisChen  
       2016-10-17 17:47:51 +08:00
    虽然偶有沙沙声和卡顿,但体验和界面设计动画都非常赞~ 加入太鼓达人模式与乐谱模式后感觉可玩性会大大提高,支持加油~
    muziki
        25
    muziki  
       2016-10-17 17:52:18 +08:00
    好厉害
    benpichu
        26
    benpichu  
       2016-10-17 18:17:51 +08:00 via Android
    [还没有打开……话说有 midi 键盘输入么(]
    noe132
        27
    noe132  
       2016-10-17 19:38:53 +08:00
    一开始还挺不错的。。。
    后来放个月光 第三章,先是噪音,噪音慢慢变多,然后直接卡的没声音了。。
    yangff
        28
    yangff  
       2016-10-17 20:02:13 +08:00
    那么怎么玩呢?
    SuneBear
        29
    SuneBear  
    OP
       2016-10-17 20:40:48 +08:00 via iPhone
    @PolarisChen Thx ,我接下来打算先折中音效与粒子特效,优化一下性能
    SuneBear
        30
    SuneBear  
    OP
       2016-10-17 20:43:53 +08:00 via iPhone
    @benpichu MIDI 输入很好实现,切换一下音源即可,适合演奏模式
    SuneBear
        31
    SuneBear  
    OP
       2016-10-17 20:51:00 +08:00 via iPhone
    @murmur 其实这个游戏和 OSU 差挺大的,主要还是获取一种沉浸式的体验与提供一些实用功能
    kazarin
        32
    kazarin  
       2016-10-17 21:13:15 +08:00
    很有意思, Safari 上一切良好,感谢楼主
    SuneBear
        33
    SuneBear  
    OP
       2016-10-17 21:33:11 +08:00 via iPhone
    @kazarin Great ,求贴一下配置,我在 15 年中配 Pro 上测试不会卡,不过在快节奏曲子中有杂音,现在找到的原因是和低通滤波器有关~
    winduser
        34
    winduser  
       2016-10-18 00:44:27 +08:00
    有意思,感觉楼主好厉害~
    winduser
        35
    winduser  
       2016-10-18 00:44:52 +08:00
    有意思,感觉楼主好厉害!!
    winduser
        36
    winduser  
       2016-10-18 00:48:46 +08:00
    @qqqppp9998 为了特地给 Sune 回复,你这 ID 看上去就像是刚注册的小号。
    yelite
        37
    yelite  
       2016-10-18 01:18:01 +08:00
    Prelude-in-C-via-WTC-Bk-1-No-1.mid 错了,变成 Pathetique 了
    a570295535
        38
    a570295535  
       2016-10-18 01:34:48 +08:00
    有一种学会了钢琴的感觉,虽然不会玩。。。
    dreampuf
        39
    dreampuf  
       2016-10-18 02:21:30 +08:00
    可以,很强
    WildCat
        40
    WildCat  
       2016-10-18 02:27:39 +08:00 via iPhone
    就差广电审核了
    ericls
        41
    ericls  
       2016-10-18 02:45:09 +08:00
    厉害!!!!!!
    lslqtz
        42
    lslqtz  
       2016-10-18 04:23:46 +08:00
    @murmur osu 我 4ms 没问题啊。。
    flash 可以拿来做我觉得没问题啊
    lslqtz
        43
    lslqtz  
       2016-10-18 04:24:09 +08:00
    @murmur 这个你得看看 4399 那些垃圾枪游。。
    lslqtz
        44
    lslqtz  
       2016-10-18 04:24:26 +08:00
    @SuneBear 楼主好厉害。。
    starvedcat
        45
    starvedcat  
       2016-10-18 06:14:24 +08:00
    感谢楼主,这里面德彪西的曲子我都很熟悉很喜欢,玩起来很有意思~
    murmur
        46
    murmur  
       2016-10-18 07:59:12 +08:00
    @lslqtz flash 以前不是金山的勾勾么 早死了不知道多少年了
    xiaket
        47
    xiaket  
       2016-10-18 08:08:21 +08:00
    murmur
        48
    murmur  
       2016-10-18 08:32:53 +08:00
    @PolarisChen 太鼓早就有模拟器了, win/android/ios 都支持而且性能非常好
    不过 国内玩太鼓的不多啊 ?
    murmur
        49
    murmur  
       2016-10-18 08:35:51 +08:00
    @benpichu midi 键盘有个叫 syn 什么的东西可以玩 比正经弹钢琴都累 如果你认为玩音乐游戏可以学会键盘抓紧洗洗睡吧
    再老的,你可以找 yamaha 的 keyboard mania ,网上有下载,估计 xp 可以,我 win10 检测不到 midi 键盘

    另外,楼上那些喜欢钢琴下落式的,去玩 deemo 好么?不喜欢情怀的, deemo 也有模拟器啊,不是我泼冷水,音乐游戏对延迟和输入体验要求非常高,不仅要求延迟低,而且还要稳定, android 都达不到这个要求只能做宽判定或者像大厂云下发延迟校正数据, flash 也只能做个模拟器,市面上那么多音乐游戏谁家是 html5 啊。。。
    hronro
        50
    hronro  
       2016-10-18 08:39:50 +08:00 via Android
    厉害厉害
    benpichu
        51
    benpichu  
       2016-10-18 08:53:07 +08:00 via Android
    @murmur [我并没有想通过这种方式学键盘乐啊(]
    SuneBear
        52
    SuneBear  
    OP
       2016-10-18 09:18:17 +08:00 via iPhone
    @xiaket 啊哦, Prelude 后成为 Pathetique ,很像一次失败的相亲~
    hustlzp
        53
    hustlzp  
       2016-10-18 09:38:18 +08:00
    赞!
    caiya21
        54
    caiya21  
       2016-10-18 09:50:37 +08:00
    给楼主点赞了
    lslqtz
        55
    lslqtz  
       2016-10-18 10:13:40 +08:00
    @murmur 金山有勾勾?根本没找到
    murmur
        56
    murmur  
       2016-10-18 10:15:03 +08:00
    @lslqtz 现在只剩下老的新闻了,一出来就被 osu 玩家骂惨了,山寨 osu 不说源生兼容 osu 谱面也罢了,你还搞个充值叫 J 币,我充你个 JB 充啊
    SuneBear
        57
    SuneBear  
    OP
       2016-10-18 10:15:55 +08:00
    @hustlzp 感谢支持,我记得用过你写的 jquery-s2t ,给你点个赞
    SuneBear
        58
    SuneBear  
    OP
       2016-10-18 10:21:26 +08:00
    @murmur 活捉一只音游老司机,我前同事做过一个 [Web Taiko]( https://github.com/waksana/taiko) 的音游,只要不过分追求音效与特效, HTML5 性能可以跟上的
    lk920724
        59
    lk920724  
       2016-10-18 10:21:57 +08:00
    mark 回家看~
    murmur
        60
    murmur  
       2016-10-18 10:23:55 +08:00
    @SuneBear key 音很重要,尤其是太鼓一定要听鼓声的,不追求音效不可能
    chuhemiao
        61
    chuhemiao  
       2016-10-18 10:25:09 +08:00
    鼠标加空格同时试试:D
    dawncc
        62
    dawncc  
       2016-10-18 10:27:44 +08:00
    体验很好 假装自己会弹琴...
    cxshun
        63
    cxshun  
       2016-10-18 10:29:06 +08:00
    楼主厉害,必须 star 一个。
    ClassicOldSong
        64
    ClassicOldSong  
       2016-10-18 16:59:19 +08:00 via Android
    等会过来看
    Web 做音乐游戏的话延迟是个大问题,老早以前就有想法了但是纠结延迟所以一直没动
    lslqtz
        65
    lslqtz  
       2016-10-18 20:15:12 +08:00 via iPhone
    @murmur 我都没找到新闻...
    pheyer
        66
    pheyer  
       2016-10-19 14:44:15 +08:00
    手机上的 Magic Piano 不就是这么玩的吗,效果更佳
    SuneBear
        67
    SuneBear  
    OP
       2016-10-20 09:39:34 +08:00 via iPhone
    @pheyer 握手, Smule 的 Magic Piano 是我最喜欢的音游之一,以后还得学习一个,向西方看齐(匿
    lurrpis
        68
    lurrpis  
       2016-10-20 14:28:35 +08:00
    熊老湿~
    SuneBear
        69
    SuneBear  
    OP
       2016-10-24 11:34:43 +08:00
    @lurrpis 退隐多年,居然还是被认出来。绿色出行,拒绝开车
    charlie21
        70
    charlie21  
       2021-05-27 22:17:13 +08:00
    ydys
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     3797 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 10:16 PVG 18:16 LAX 03:16 JFK 06:16
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86