import type { Composition } from './Composition'; import type { Renderer, RendererInternal, Texture, TextureOptions } from '@predy-js/render-interface'; import type { BaseItemTransform, JSONScene, vec3 } from '@predy-js/specification'; import type { ImageSource, PluginSystem } from './PluginSystem'; import type { SceneLoaderStaticsDetails } from '../../type/statics'; import type { PredyCompressedTextureLevel } from '../load/JSONLoader'; import type { PredyPlayerRenderFrame } from '../render/PredyPlayerRenderFrame'; export interface PlayerScene extends JSONScene { readonly pluginSystem: PluginSystem; readonly textures?: TextureOptions[]; readonly renderLevel?: string; readonly player?: any; readonly _textures?: Array; readonly consumed?: boolean; readonly images: Array; readonly statics: SceneLoaderStaticsDetails; readonly env: string; } export interface ItemClickedParams { name: string; player: PredyPlayer; id: number; itemId: string; hitPositions: Array; compositionId: number; } export interface PredyPlayerConstructor { /** * 播放器的容器,会在容器中创建canvas,container和canvas必传一个 */ container?: HTMLElement; /** * 制定canvas进行播放 */ canvas?: HTMLCanvasElement; /** * RN环境下,传递PredyView创建的RendererInternal */ internal?: RendererInternal; /** * 画布比例,尽量使用默认值,如果不够清晰,可以写2,但是可能产生渲染卡顿 */ pixelRatio?: number | 'auto'; /** * 播放器是否可交互 */ interactive?: boolean; /** * 播放器是否需要截图(对应webgl的preserveDrawingBuffer参数) */ willCaptureImage?: boolean; /** * canvas是否透明,如果不透明可以略微提升性能,默认 true */ transparentBackground?: boolean; /** * 渲染帧数,默认60 */ fps?: number; /** * 是否停止计时器,否手动渲染,默认 false */ manualRender?: boolean; /** * 当webgl context lost时候发出的回调,这个时候播放器已经自动被销毁,业务需要做兜底逻辑 */ onWebGLContextLost?: (player: PredyPlayer, canvas: HTMLCanvasElement) => void; /** * 播放器被元素暂停的回调 */ onPausedByItem?: (arg: { name: string; player: PredyPlayer; }) => void; /** * 交互元素被点击的回调 */ onItemClicked?: (params: ItemClickedParams) => void; /** * 交互元素发送message的回调 */ onMessageItem?: (arg: { name: string; phrase: number; }) => void; /** * 播放器更新的回调 */ onPlayableUpdate?: (arg: { playing: boolean; time?: number; player: PredyPlayer; }) => void; onRenderError?: (player: PredyPlayer, err: Error) => void; /** * 图片预乘Alpha,默认为false */ premultiplyAlpha?: boolean; /** * 播放合成的环境 默认为空,编辑器中为 'editor' */ env?: string; renderFramework?: 'webgl' | 'webgl2' | 'debug-disable' | 'opengles2' | 'opengles3'; reportGPUTime?: (time: number) => void; /** * player 的 name */ name?: string; } export interface PredyPlayerPlayOptions { /** * 是否在初始化阶段提前编译,默认为true */ precompile?: boolean; /** * 播放开始时间,默认为 0 */ currentTime?: number; /** * 播放第一帧后暂停播放器 */ pauseOnFirstFrame?: boolean; /** * 合成销毁时,保留编译shader,如果下次还要播放,跳过shader编译,默认为true */ keepCompiled?: boolean; /** * 播放完成后不销毁texture对象,loadSceneAsync的结果能再次被播放, * 如果设置为true,keepCompiled参数也会被设置为true */ keepResource?: boolean; /** * 合成是否会倒播,默认为false */ willReverseTime?: boolean; /** * 播放速度,当速度为负数时,合成倒播 */ speed?: number; /** * 是否为多合成播放,默认为false,会替换当前播放的合成 */ multipleCompositions?: boolean; /** * 多合成播放时的基础渲染顺序,数字小的先渲染 */ baseRenderOrder?: number; /** * 如果动画配置有多个合成,设置要播放的合成名称 */ compositionName?: string; /** * 合成结束时的回调 */ onEnd?: (composition: Composition) => void; /** * 合成的基础位置偏移 */ transform?: BaseItemTransform; /** * 给Plugin的数据,可以通过plugin可以通过 scene.storage 获取 */ pluginData?: Record; /** * 内部合成转移API,不对外开放 */ _transferredRenderFrame?: PredyPlayerRenderFrame; } export interface PredyPlayerSnapshotOptions { target: 'dataURL' | 'texture' | 'data'; imageType?: 'image/jpeg' | 'image/png' | 'image/webp'; imageQuality?: Number; textureSize?: number[]; playable?: PredyPlayerPlayOptions; scene?: Object; data?: ImageData; } export interface PredyPlayerConfiguration { speed?: number; compositionName?: string; } export interface PredyPlayerLoadOptions { /** * 模板参数 * 当图片可能加载失败时,提供降级图片配置,传递图片数组,如果第一个加载失败,将尝试使用第二个地址 * { * variables:{ * bg:['url','fallback_url'], // 如果两个图片都失败,将会触发加载失败 * fg:'url' // 如果图片加载失败,将会触发加载失败, * amount:88.8, * name:'abc' * } * } */ variables?: Record; /** * 模板图片缩放倍数 * @default 1 如果图片比较糊,可以用 2(但会增大图片内存) */ templateScale?: number; /** * 使用压缩纹理 */ useCompressedTexture?: PredyCompressedTextureLevel; /** * 渲染分级,默认为S * 分级之后,只会加载当前渲染等级的资源 * 当渲染等级被设置为B后,player的fps会降级到30帧 */ renderLevel?: string; /** * 资源加载超时,时间单位秒,默认10S */ timeout?: number; /*** * 用于给plugin的加载数据, * key value 的内容由plugin自己实现 */ pluginData?: Record; /** * 加载时不要进行提前编译, * 默认false,加载过程就开始进行编译,加快播放启动速度 */ pendingCompile?: boolean; /** * 需要额外引入的pluginName, * 不会覆盖JSON中已经声明的plugins */ extraPlugins?: string[]; /** * 提前加载资源,不会触发播放, * 此参数为true时,插件只加载资源,并不解析资源 */ preload?: boolean; /** * 播放合成的环境 默认为空,编辑器中为 'editor' */ env?: string; } export declare class PredyPlayer { /** * 当前播放的合成名称,如果是多个合成同时播放,返回第一个合成名称 */ readonly currentCompositionName: string; /** * 当前播放的合成对象,请不要修改此数组内容 */ readonly compositions: Composition[]; /** * 是否有合成在播放 */ readonly hasPlayable: boolean; /** * 播放器是否暂停 */ readonly paused: boolean; /** * 播放器的渲染对象,请保持只读 */ readonly renderer: Renderer; /** * 计时器,用于设置fps, * 手动渲染时不创建计时器 */ readonly ticker?: { fps: number; }; /** * 构造函数 * @param {PredyPlayerConstructor} props 构造参数 */ constructor(props: PredyPlayerConstructor); /** * 加载动画资源,异步函数 * @param {string | PlayerScene} sceneOrURL URL或者通过URL请求的JSON Object * @param {PredyPlayerPlayOptions} options 加载可选参数 * @returns {Promise>} */ loadSceneAsync(sceneOrURL: Object | string, options?: PredyPlayerLoadOptions): Promise; /** * 创建并播放合成对象,此方法会进行shader异步编译,如果Mars要和CSS同时使用, * 建议playAsync的promise被解析后,开始播放CSS,这样可以保证CSS不卡顿 * @param {PlayerScene|Composition} scene 合成对象或者加载好的动画网络资源 * @param {PredyPlayerPlayOptions} options 播放可选参数 * @return {Promise>} */ playAsync(scene: PlayerScene | Composition, options?: PredyPlayerPlayOptions): Promise; /** * 创建并播放合成对象,更推荐使用playAsync函数 * @deprecated use playAsync instead * @param scene 合成对象或者加载好的动画网络资源 * @param options 播放可选参数 * @returns {Composition} */ play(scene: PlayerScene | Composition, options?: PredyPlayerPlayOptions): Composition | null; /** * 创建合成对象,提前预编译,之后可直接播放 * @param scene 合成对象或者加载好的动画网络资源 * @param options 播放可选参数 * @returns {Composition} */ initializeComposition(scene: PlayerScene, options?: PredyPlayerPlayOptions): Composition; /** * 暂停播放器 * @param options * @param options.offloadTexture 是否卸载贴图纹理,减少内存 */ pause(options?: { offloadTexture?: boolean; }): any; /** * 卸载播放器纹理,请使用 player.pause({ offloadTexture:true }) */ _offloadTexture(): any; /** * 恢复播放器, * 如果暂停时卸载了纹理贴图,此函数将自动请求网络重新加载纹理 */ resumeAsync(): any; /** * @deprecated 请使用 resumeAsync */ resume(): any; /** * 销毁播放器 * @param keepCanvas 是否保留canvas画面,默认false,canvas不能再被使用 * */ destroy(keepCanvas?: boolean): any; tick(dt: number): any; /** * 配置播放器参数 * @param {PredyPlayerConfiguration} config */ config(config: PredyPlayerConfiguration): any; /** * 将播放器重新和父容器大小对齐 */ resize(): any; resizeToAspect(aspect: number, scale?: number): any; snapshot(options: PredyPlayerSnapshotOptions): any; /** * 清空canvas的画面 * @param immediate 如果立即清理,当前画面将会消失,如果player还有合成在渲染,可能出现闪烁 */ clearCanvas(immediate?: boolean): any; /** * 渲染出错时候的函数 * @param player * @param error * @protected */ onRenderError(player: PredyPlayer, error: Error): any; }