一个类似节奏大师游戏的音乐节奏编辑工具



  • 本工具主要为自己开发音乐游戏所用的编辑软件,功能主要编辑音乐节奏,然后保存节奏数据为json格式,然后在节奏游戏中导入这些节奏数据,可以达到节奏大师的效果。暂时没有添加长安节奏类功能。感觉节奏类游戏千变万化,这个工具以后会进行细节的改进,现在眼下先干着IT文化节的作品展示做了小功能了呜呜。

    工具缺点:
    不能加载中文路径(由于用了libzplay做频谱)

    软件功能:
    1,支持加载大部分格式音乐文件
    2,编辑游戏节奏的时候支持回播编辑
    3,支持细微调节节奏点的位置
    4,双击节奏点可以删除该节奏点
    5,一键清除所有节奏点

    操作方式:
    1,打开音乐文件(不能出现中文路径)
    0_1461117374585_upload-50dd6d9f-c416-49f3-9bfd-4e9a665337b8
    2,点击播放按钮播放,或者按space建播放/暂停
    0_1461117446113_upload-d5e56080-0ff4-480a-bf4e-eaaac886691f
    3,在播放的过程中可以按着音乐节奏编辑节奏点,编辑按键为F,G,H,J
    0_1461117636910_upload-a0498546-399f-4d62-9432-4228b4b6715d
    4,微调节奏
    0_1461117787005_upload-127b9ce9-11a9-4445-8a33-26afae8f76e0
    5,保存的时候会在当前音乐文件目录中的Data目录生成对应音乐文件名的json数据
    0_1461117894514_upload-1359f79b-1a0f-486c-8883-69464d5ebb3e
    0_1461117930580_upload-17a3db81-379b-4eba-afcb-5d682082e3cf
    源码分享
    tommego



  • 厉害,没想到这么快就把节奏编辑的软件制作好了。试问中间的梯形Rectangle是如何实现的呢?



  • 其实早两个星期就写好了,我都给我师弟帮我录节奏了, 后来他们说录取完了不好调整,所以我今天下午又改成了qq音速的节奏编辑模式



  • 中间梯形的很简单,就直接把它x轴转60度左右
    代码实现部分以下:

                Rectangle{
                    width: root.width
                    height:root.height/2
                    color:"#99a066"
    
                    Item{
                        width: 1200
                        height: music_duration*1000+500
                        clip:true
                        id:padroot
                        transform: Rotation {
                            origin.x: padroot.width/2;
                            origin.y: padroot.height;
                            axis { x: 1; y: 0; z: 0 }
                            angle: 50 }
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.bottom: parent.bottom
                        Rectangle{
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: 500+2
                            width: parent.width
                            height:4
                            color:"#12aaff"
                        }
    
                        Rectangle{
                            y:current_position*20
                            width:parent.width
                            height:music_duration*1000
                            id:musicPad
                            color:"#44000000"
                            Behavior on y{
                                PropertyAnimation{
                                    properties: "y"
                                    duration: 50
                                }
                            }
    
                            Column{
                                spacing: 1000-3
                                height:parent.height
                                anchors.centerIn: parent
                                Repeater{
                                    model: music_duration
                                    delegate: Rectangle{
                                        width: musicPad.width
                                        height: 3
                                        color:"#aa000000"
                                        Text{
                                            anchors.centerIn: parent
                                            text:""+(music_duration-index)+"s"
                                            font.pointSize: 120
                                            color:"#33eeff12"
                                        }
                                    }
                                }
                            }
    
                            Repeater{
                                model: datasModel
                                delegate: Rectangle{
                                    width: 150
                                    height: 60
                                    id:spot
                                    radius: height/2
                                    color:selected?"#12eeaa":"#99000000"
                                    x:pindex*300+75
                                    y:(music_duration-(pos*20)/1000)*musicPad.height/music_duration-30
                                    z:selected?2:1
    
                                    Rectangle{
                                        anchors.top: parent.bottom
                                        anchors.topMargin: 20
                                        width: 80
                                        height:60
                                        radius: height/2
                                        visible: selected
                                        color:"#ee6612"
                                        anchors.horizontalCenter: parent.horizontalCenter
                                        Rectangle{
                                            width: 3
                                            height: 20
                                            color:parent.color
                                            anchors.horizontalCenter: parent.horizontalCenter
                                            anchors.bottom: parent.top
                                        }
    
                                        Text{
                                            anchors.centerIn: parent
                                            color:"#ffffff"
                                            text:"delete"
                                            font.pointSize: 15
                                        }
    
                                        MouseArea{
                                            anchors.fill: parent
                                            onClicked: datasModel.remove(index);
                                        }
                                    }
    
                                    MouseArea{
                                        anchors.fill: parent
                                        drag.target: spot
                                        drag.minimumY: 0
                                        drag.maximumY: music_duration*1000
                                        drag.axis: Drag.YAxis
                                        onClicked: {
                                            for(var a=0;a<datasModel.count;a++){
                                                datasModel.setProperty(a,"selected",false);
                                            }
                                            datasModel.setProperty(index,"selected",true);
                                        }
                                        onPressed: {
                                            for(var a=0;a<datasModel.count;a++){
                                                datasModel.setProperty(a,"selected",false);
                                            }
                                            datasModel.setProperty(index,"selected",true);
                                        }
    
                                        onReleased: {
                                            datasModel.setProperty(index,"pos",50*(music_duration-(spot.y+30)*music_duration/musicPad.height));
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
    


  • @tommego 嗯,好创意。这也是能够创造出三维感的好办法!

    应该是沿着X轴旋转60度角。



  • @jiangcaiyang 对的,这样既能达到三维效果,又减少开销



  • shurufahuaile,ni hao lihai



  • 感谢分享,望早日可以完成。



  • 谢谢楼主,居然一下子提供了这么多开源软件,其中有几个还很不错~



  • awesome!


登录后回复
 

与 萌梦社区 的连接断开,我们正在尝试重连,请耐心等待