vue-phigros-render

基于Vue 2的Phigros谱面渲染器（模拟器）组件

原作者：lchzh3473（已获得许可）

当前版本基于v1.3.1修改。

使用前必读

• 本渲染器 不会 支持实际游玩功能，即使原作者已经实现
• 本渲染器仅支持官方谱面，不提供任何谱面获取和修改教程，不提供任何 非开放谱面1 的导入
• 本项目采用BSD 3-Clause协议，除非获得许可，否则公开发布使用本组件的代码项目时，不能直接使用作者及机构名字，以及作者其它的产品名字做市场推广，允许包含本组件的源码仓库或npm包的地址；发布基于本组件获得的作品（例如投稿视频）时不受此限制，但必须注明来源。

非开放谱面： 任何不能通过直接公开获取的工具生成的谱面，或在不使用反编译等利用游戏代码的手段的情况下无法解析的游戏谱面

特性

• 通过@babel/preset-env插件增加新语法转义和polyfill，相比原版支持更广泛的浏览器，理论上支持Chromium 55+。
• 通过Vue 2组件化的方式封装，解耦文件加载和谱面渲染逻辑，可以同屏渲染多个实例。
• 该组件利用了webpack url-loader进行资源嵌入，无需额外引入图片音频资源，极大地简化了使用过程。
• 使用resize-detector检测组件尺寸变化并自动适应，检测开销更小，适配性更强

安装与使用

yarn add vue-phigros-render

引入

import Vue from "vue";
import axios from "axios";
import VuePhigrosRender from "vue-phigros-render";
import "vue-phigros-render/dist/vue-phigros-render.css";

// 组件依赖axios进行网络请求，如果window没有名为axios的变量，或者vue的原型上没有名为axios或者$axios的属性，则必须在注册插件时传入
Vue.use(VuePhigrosRender, { axios });

快速使用

组件没有默认尺寸，会撑满容器的100%宽度（但有最小尺寸），并按照比例渲染高度，如果需要固定宽度请给组件增加一个width的style。

<template>
<vue-phigros-render v-model="status" 
    :chart="chart" :chartInfo="chartInfo"
    bgmUrl="/bgm.wav" 
    backgroundUrl="/image.png"
    style="width:960px"
/>
</template>

<script>
    export default {
        data() {
            return {
                chart: {},
                chartInfo: {
                    name: "<Untitled>",
                    level: "SP LV.?",
                    designer: "unknown",
                    illustrator: "unknown"
                },// 谱面显示信息
                status: "stopped"
            }
        }
    }
</script>

Props

传URL的参数，均支持普通http(s)链接，base64 data URL和blob URL。如果采用前端读取用户选择的文件并加载的方式，建议通过URL.createObjectURL的方式传递blob URL。

• status: string, 当前状态，v-model绑定属性，取值为"stopped", "playing"和"paused"，用于切换播放和暂停。
• chart: object, 官方格式的谱面JSON对象，支持formatVersion1和formatVersion3的绝大部分特性。
• chartInfo: object, 谱面基本信息，用于播放谱面的开头信息显示。
• bgmUrl: string, BGM地址，传入一个可访问的URL。
• backgroundUrl: string, 背景图地址，传入一个可访问的URL。
• hitSound: boolean, 是否启用按键音，默认true。
• multiHint: boolean, 是否启用多押辅助，默认true。
• showTransition: boolean, 是否播放开头和结尾动画，默认true。
• aspectRatio: number, 长宽比，默认16/9。

Events

• init-success: 初始化加载成功的事件。
• init-error: 初始化加载失败的事件，参数error包含了错误信息。
• load-success: 加载谱面文件成功的事件。
• load-error: 加载谱面文件失败的事件，参数error包含了错误信息。