三国杀动态皮肤播放

引言

众所周知,三国杀十周年动态皮肤文件分为4个:
“daiji.sk”、“beijing.sk”、“daiji.png”、“beijing.png”,
分别是Laya龙骨动画用的人物骨骼动画、背景骨骼动画、人物贴图(尸块)、背景贴图,
把这四个文件放在同一个文件夹下,即可以使用Laya播放。

动皮默认大小好像是876*632,在Laya中设置画布大小大于这个数的时候,即可显示游戏里显示区域外的东西(jio之类的)
下载动态皮肤后,用以下链接里的代码替换Laya创建的空白工程里的“Main.ts”文件,把代码里“path_list_init()中初始化的文件夹列表里的文件夹改成自己下载动态皮肤文件的文件夹”,就可以播放了。

注意:每张动态皮肤的四个文件放一个单独的文件夹,否则不同动态皮肤之间会相互干扰。

步骤

下载并安装 Visual Studio Code 代码编辑器和 LayaAir IDE

从以下链接下载并安装Visual Studio Code

https://code.visualstudio.com/Download

从以下链接下载LayaAir IDE,直接解压打开“.exe”运行

https://ldc2.layabox.com/layadownload/?language=zh&type=layaairide-LayaAir

创建工程

如下图,创建一个空工程,编程语言选择TypeScript:
在这里插入图片描述

替换代码

如下图,单击红框图标,打开代码编辑器,会使用Visual Studio Code打开
在这里插入图片描述
如下图,找到并打开“Main.ts”
在这里插入图片描述
替换代码为以下的示例代码:


class SgsSkinViewer {
    private path_list: string[]; 
	private path_list_index: number;
	private width: number = 1800;
	private height: number = 1300;
    private height_offset: number = 100;
    private num: number = 0;

    private daiji: Laya.Skeleton;
    private beijing: Laya.Skeleton;
    private ani_index: number;

    private showinfo: number = 0;

    constructor() {
        // 画布设置
		Laya.init(this.width, this.height, Laya["WebGL"]);
        Laya.stage.alignV = "middle";
        Laya.stage.alignH = "center";
		Laya.stage.scaleMode = "showall";
		Laya.stage.screenMode = "none";
        Laya.stage.bgColor = "#000000";
        this.setup();
    }

    private setup(): void {
		this.path_list_init();
        this.State_Interactive_on();
		this.load_skin();
    }

	private onKeyDown(e: Event): void {
		var keyCode: number = e["keyCode"];
        switch (e["keyCode"]) {
            case 39:
				this.next1();
				break;
			case 37:
				this.previous1();
				break;
		}
	}

	private mouseWheel(e: Laya.Event): void{
		switch(e.delta){
            case 3:
                this.previous1();
                this.num += 1;
                break;
		    case -3:
			    this.next1();
                this.num += 1;
                break;
        }
        var txt = new Laya.Text(); 
		txt.text = String(this.num);  
		txt.color = "#ffffff";  
		txt.pos(0,0);  
		Laya.stage.addChild(txt);
	}

	private load_skin(): void{

        // let files = fs.readdirSync(file);

		var path = this.path_list[this.path_list_index];

		var beijing_file = path.concat("beijing.sk");
		var daiji_file = path.concat("daiji.sk");
        var daiji_tx_file = path.concat("daiji_tx.sk");

        Laya.stage.destroyChildren();
		this.createInteractiveRect();
        
		this.beijing = new Laya.Skeleton();
		Laya.stage.addChild(this.beijing);
        this.beijing.pos(this.width/2,this.height/2 - this.height_offset);
		this.beijing.load(beijing_file);

		this.daiji = new Laya.Skeleton();
		Laya.stage.addChild(this.daiji);
        this.daiji.pos(this.width/2,this.height/2 - this.height_offset);
		this.daiji.load(daiji_file);
        

        // try

        // var txt = new Laya.Text(); 
        // txt.text = String(6);  
		// txt.color = "#ffffff";  
		// txt.pos(100,0);
		// Laya.stage.addChild(txt);

		// var daiji_tx:Laya.Skeleton = new Laya.Skeleton();
		// Laya.stage.addChild(daiji_tx);
		// daiji_tx.pos(this.width/2,this.height/2);
		// daiji_tx.load(daiji_tx_file);

        if(this.showinfo == 1){
            this.State_Info();
        }
	}

    private State_Info(): void {
        var txt = new Laya.Text(); 
		txt.text = String(Laya.Browser.clientWidth);  
		txt.color = "#ffffff";  
		txt.pos(0,0);  
		Laya.stage.addChild(txt);

		var txt = new Laya.Text(); 
		txt.text = String(Laya.Browser.clientHeight);  
		txt.color = "#ffffff";  
		txt.pos(40,0);  
		Laya.stage.addChild(txt);

        var txt = new Laya.Text(); 
		txt.text = String(this.path_list_index);    
		txt.color = "#ffffff";  
		txt.pos(80,0);  
		Laya.stage.addChild(txt);
    }

    private State_Interactive_on(): void {
        Laya.stage.on(Laya.Event.KEY_DOWN, this, this.onKeyDown);
		// Laya.stage.on(Laya.Event.MOUSE_WHEEL,this, this.mouseWheel);
    }
    private State_Interactive_off(): void {
        Laya.stage.off(Laya.Event.KEY_DOWN, this, this.onKeyDown);
		Laya.stage.off(Laya.Event.MOUSE_WHEEL,this, this.mouseWheel);
    }
    private createInteractiveRect(): void {
        var previous_rect1: Laya.Sprite = new Laya.Sprite();
        previous_rect1.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        previous_rect1.size(this.width/3, this.height/3);
        previous_rect1.x = 0;
        previous_rect1.y = 0;
        Laya.stage.addChild(previous_rect1);
        previous_rect1.on(Laya.Event.MOUSE_DOWN, this, this.previous1);

		var next_rect1: Laya.Sprite = new Laya.Sprite();
        next_rect1.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        next_rect1.size(this.width/3, this.height/3);
        next_rect1.x = this.width*2/3;
        next_rect1.y = 0;
        Laya.stage.addChild(next_rect1);
        next_rect1.on(Laya.Event.MOUSE_DOWN, this, this.next1);

        var previous_rect2: Laya.Sprite = new Laya.Sprite();
        previous_rect2.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        previous_rect2.size(this.width/3, this.height/3);
        previous_rect2.x = 0;
        previous_rect2.y = this.height*2/3;
        Laya.stage.addChild(previous_rect2);
        previous_rect2.on(Laya.Event.MOUSE_DOWN, this, this.previous2);

		var next_rect2: Laya.Sprite = new Laya.Sprite();
        next_rect2.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        next_rect2.size(this.width/3, this.height/3);
        next_rect2.x = this.width*2/3;
        next_rect2.y = this.height*2/3;
        Laya.stage.addChild(next_rect2);
        next_rect2.on(Laya.Event.MOUSE_DOWN, this, this.next2);


        var pause_rect: Laya.Sprite = new Laya.Sprite();
        pause_rect.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        pause_rect.size(this.width/3, this.height/3);
        pause_rect.x = this.width*2/3;
        pause_rect.y = this.height*1/3;
        Laya.stage.addChild(pause_rect);
        pause_rect.on(Laya.Event.MOUSE_DOWN, this, this.pause);

        var play_rect: Laya.Sprite = new Laya.Sprite();
        play_rect.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        play_rect.size(this.width/3, this.height/3);
        play_rect.x = 0;
        play_rect.y = this.height*1/3;
        Laya.stage.addChild(play_rect);
        play_rect.on(Laya.Event.MOUSE_DOWN, this, this.play);

        var changeskin_rect: Laya.Sprite = new Laya.Sprite();
        changeskin_rect.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        changeskin_rect.size(this.width/3, this.height/3);
        changeskin_rect.x = this.width*1/3;
        changeskin_rect.y = this.height*1/3;
        Laya.stage.addChild(changeskin_rect);
        changeskin_rect.on(Laya.Event.MOUSE_DOWN, this, this.changeskin);
        
    }

	private next1(): void {
		if(this.path_list_index == this.path_list.length - 1){  
			this.path_list_index = 0;
		}else{
			this.path_list_index += 1;
		}
        this.showinfo = 0;
		this.load_skin();
    }
	private previous1(): void {
		if(this.path_list_index == 0){  
			this.path_list_index = this.path_list.length - 1;
		}else{
			this.path_list_index -= 1;
		}
        this.showinfo = 0;
		this.load_skin();
    }
    private next2(): void {
		if(this.path_list_index == this.path_list.length - 1){  
			this.path_list_index = 0;
		}else{
			this.path_list_index += 1;
		}
        this.showinfo = 1;
		this.load_skin();
    }
	private previous2(): void {
		if(this.path_list_index == 0){  
			this.path_list_index = this.path_list.length - 1;
		}else{
			this.path_list_index -= 1;
		}
        this.showinfo = 1;
		this.load_skin();
    }
    private play(): void {
        this.beijing.play(0,false);
		this.daiji.play(0,false);
    }
    private pause(): void {
        this.beijing.paused();
		this.daiji.paused();
    }
    private changeskin(): void {
        this.beijing.play(1,true);
        this.daiji.play(1,true);
    }

	private path_list_init(): void {
        this.path_list_index = 93;
        this.ani_index = 0;
        this.path_list = ["D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0007 - 黄月英/700701/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0007 - 黄月英/700702/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0007 - 黄月英/800701/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0013 - 大乔/701301/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0013 - 大乔/701302/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0013 - 大乔/701303/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0015 - 孙尚香/701501/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0015 - 孙尚香/701502/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0015 - 孙尚香/701503/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0015 - 孙尚香/701504/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0022 - 甄姬/702201/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0022 - 甄姬/702202/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0022 - 甄姬/702203/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0022 - 甄姬/702204/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0022 - 甄姬/702205/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0022 - 甄姬/702206/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0022 - 甄姬/802201/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0022 - 甄姬/802202/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0025 - 貂蝉/702501/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0025 - 貂蝉/702503/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0025 - 貂蝉/802501/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0025 - 貂蝉/802502/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0025 - 貂蝉/802503/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0031 - 小乔/703101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0031 - 小乔/703103/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0031 - 小乔/703104/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0031 - 小乔/803101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0047 - 祝融/704702/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0047 - 祝融/804701/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0058 - 蔡文姬/705802/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0058 - 蔡文姬/705803/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0058 - 蔡文姬/705805/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0072 - 界·大乔/807201/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0100 - 周妃/710001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0100 - 周妃/710002/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0100 - 周妃/710003/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0100 - 周妃/810001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0291 - 吴国太/729101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0295 - 张春华/729501/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0295 - 张春华/729503/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0295 - 张春华/729504/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0295 - 张春华/829501/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0302 - 步练师/730202/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0302 - 步练师/830201/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0302 - 步练师/830202/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0306 - 王异/730601/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0306 - 王异/730602/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0306 - 王异/830601/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0319 - 伏皇后/731901/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0319 - 伏皇后/831901/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0319 - 伏皇后/831902/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0327 - 孙鲁班/732701/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0327 - 孙鲁班/732702/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0327 - 孙鲁班/832701/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0331 - 蔡夫人/733101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0331 - 蔡夫人/833101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0336 - 夏侯氏/733602/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0336 - 夏侯氏/733603/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0336 - 夏侯氏/833601/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0336 - 夏侯氏/833602/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0400 - 张星彩/740001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0400 - 张星彩/740002/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0400 - 张星彩/740003/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0400 - 张星彩/740004/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0400 - 张星彩/740005/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0401 - 吴苋/740101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0401 - 吴苋/840101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0401 - 吴苋/840102/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0407 - 曹节/740701/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0407 - 曹节/740702/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0407 - 曹节/840701/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0421 - 郭皇后/742101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0421 - 郭皇后/742102/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0421 - 郭皇后/742104/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0424 - 蜀·孙尚香/742402/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0424 - 蜀·孙尚香/842401/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0428 - 魏·蔡文姬/742801/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0428 - 魏·蔡文姬/742802/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0428 - 魏·蔡文姬/742803/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0428 - 魏·蔡文姬/842801/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0428 - 魏·蔡文姬/842802/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0430 - 群·黄月英/743001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0440 - 马云騄/744001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0440 - 马云騄/744002/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0440 - 马云騄/744003/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0440 - 马云騄/844001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0440 - 马云騄/844002/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0441 - 关银屏/744102/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0441 - 关银屏/844101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0443 - 徐氏/744301/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0443 - 徐氏/744303/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0443 - 徐氏/844301/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0443 - 徐氏/844302/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0443 - 徐氏/844303/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0501 - 赵襄/750101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0502 - 诸葛果/750201/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0502 - 诸葛果/850201/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0512 - 灵雎/751201/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0515 - 鲍三娘/751501/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0517 - 大乔&小乔/751703/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0518 - 曹婴/751801/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0518 - 曹婴/851801/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0525 - 花鬘/752501/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0528 - 辛宪英/752801/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0528 - 辛宪英/852801/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0538 - 郭照/753801/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0539 - 董白/853901/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0540 - 樊玉凤/754001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0540 - 樊玉凤/754002/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0543 - 杨婉/754301/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0546 - 潘淑/754601/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0549 - 吕玲绮/754901/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0550 - 周夷/755001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0555 - 曹金玉/755501/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0605 - 唐姬/760501/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0605 - 唐姬/860501/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0653 - 张昌蒲/765301/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0653 - 张昌蒲/765302/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0653 - 张昌蒲/865301/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0703 - 卑弥呼/770301/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0703 - 卑弥呼/870301/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0704 - 张琪瑛/770401/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0704 - 张琪瑛/870401/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0804 - 许劭/780401/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0804 - 许劭/880401/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/1000 - 孙鲁育/7100001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/1000 - 孙鲁育/8100001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/1010 - 王桃/8101001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/1011 - 王悦/8101101/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/1012 - 赵嫣/8101201/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/1052 - 王荣/7105202/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/2060 - 国战·何太后/7206002/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/2060 - 国战·何太后/7206003/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/2070 - 国战·麋夫人/7207001/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/2088 - 国战·陆郁生/8208801/",
        ]
    }
}

new SgsSkinViewer();

代码解释:
新建了一个类:SgsSkinViewer,用于播放动态皮肤
单击播放窗口时,根据单击位置进行动态皮肤切换以及播放
其中的path_list属性为一个包含动态皮肤所在文件夹位置的列表,需要根据自己动态皮肤的保存位置进行相应的更改
以下为动态皮肤文件的下载链接示例,修改其中的“765302”可以下载其他的动态皮肤:

https://web.sanguosha.com/10/pc/res/assets/runtime/general/big/dynamic/765302/beijing.sk
https://web.sanguosha.com/10/pc/res/assets/runtime/general/big/dynamic/765302/daiji.sk
https://web.sanguosha.com/10/pc/res/assets/runtime/general/big/dynamic/765302/beijing.png
https://web.sanguosha.com/10/pc/res/assets/runtime/general/big/dynamic/765302/daiji.png

播放动画

如下图,在Laya IDE中,按F9,在项目设置中启用“laya.ani.js”
在这里插入图片描述
如下图,单击红框内图标,编译运行:
在这里插入图片描述

即可播放动态皮肤:
在这里插入图片描述

2022-8-7更新

发现pc端新出的动态皮肤改为.skel+.atlas+.png的格式了
仍然可以使用Laya播放
但是需要增加勾选几个类库
在这里插入图片描述

播放.skel格式的动态皮肤的代码如下:

class SgsSkinViewerSkel {
    private path: string; 
    private path_list: string[]; 
	private path_list_index: number;
	private width: number = 1800;
	private height: number = 1000;
    private height_offset: number = 50;

    private showinfo: number = 0;

    private daiji_templet:Laya.SpineTemplet;
    private beijing_templet:Laya.SpineTemplet;

	private daiji_skeleton:Laya.SpineSkeleton;
    private beijing_skeleton:Laya.SpineSkeleton;

    private index: number = 0;

    constructor() {
        // 画布设置
		Laya.init(this.width, this.height, Laya["WebGL"]);
        Laya.stage.alignV = "middle";
        Laya.stage.alignH = "center";
		Laya.stage.scaleMode = "showall";
		Laya.stage.screenMode = "none";
        Laya.stage.bgColor = "#000000";
        this.setup();
    }

    private setup(): void {
		this.path_list_init();
        this.State_Interactive_on();
		this.load_skin();
    }

	private onKeyDown(e: Event): void {
		var keyCode: number = e["keyCode"];
        switch (e["keyCode"]) {
            case 39:
				this.next1();
				break;
			case 37:
				this.previous1();
				break;
		}
	}

	private load_skin(): void{

		this.path = this.path_list[this.path_list_index];

        Laya.stage.destroyChildren();
		this.createInteractiveRect();
        
		this.load_beijing();

        if(this.showinfo == 1){
            this.State_Info();
        }
	}

    private load_beijing(): void {
        var beijing_file = this.path.concat("beijing.skel");
		this.beijing_templet = new Laya.SpineTemplet(Laya.SpineVersion.v4_0);
		this.beijing_templet.loadAni(beijing_file);
		this.beijing_templet.on(Laya.Event.COMPLETE, this, this.load_daiji);
	}
    private load_daiji(): void {
        var daiji_file = this.path.concat("daiji.skel");
        this.daiji_templet = new Laya.SpineTemplet(Laya.SpineVersion.v4_0);
		this.daiji_templet.loadAni(daiji_file);
		this.daiji_templet.on(Laya.Event.COMPLETE, this, this.playani);
	}
	private playani(): void {
		this.beijing_skeleton = this.beijing_templet.buildArmature();
		Laya.stage.addChild(this.beijing_skeleton);
		this.beijing_skeleton.pos(this.width / 2, this.height / 2 - this.height_offset);
		this.beijing_skeleton.scale(1, 1);
		this.beijing_skeleton.play(this.index, true, true)

        this.daiji_skeleton = this.daiji_templet.buildArmature();
		Laya.stage.addChild(this.daiji_skeleton);
		this.daiji_skeleton.pos(this.width / 2, this.height / 2 - this.height_offset);
		this.daiji_skeleton.scale(1, 1);
		this.daiji_skeleton.play(this.index, true, true)
	}

    private State_Info(): void {
        var txt = new Laya.Text(); 
		txt.text = String(Laya.Browser.clientWidth);  
		txt.color = "#ffffff";  
		txt.pos(0,0);  
		Laya.stage.addChild(txt);

		var txt = new Laya.Text(); 
		txt.text = String(Laya.Browser.clientHeight);  
		txt.color = "#ffffff";  
		txt.pos(40,0);  
		Laya.stage.addChild(txt);

        var txt = new Laya.Text(); 
		txt.text = String(this.path_list_index);    
		txt.color = "#ffffff";  
		txt.pos(80,0);  
		Laya.stage.addChild(txt);
    }

    private State_Interactive_on(): void {
        Laya.stage.on(Laya.Event.KEY_DOWN, this, this.onKeyDown);
		// Laya.stage.on(Laya.Event.MOUSE_WHEEL,this, this.mouseWheel);
    }
    private State_Interactive_off(): void {
        Laya.stage.off(Laya.Event.KEY_DOWN, this, this.onKeyDown);
		// Laya.stage.off(Laya.Event.MOUSE_WHEEL,this, this.mouseWheel);
    }

    private createInteractiveRect(): void {
        var previous_rect1: Laya.Sprite = new Laya.Sprite();
        previous_rect1.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        previous_rect1.size(this.width/3, this.height/3);
        previous_rect1.x = 0;
        previous_rect1.y = 0;
        Laya.stage.addChild(previous_rect1);
        previous_rect1.on(Laya.Event.MOUSE_DOWN, this, this.previous1);

		var next_rect1: Laya.Sprite = new Laya.Sprite();
        next_rect1.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        next_rect1.size(this.width/3, this.height/3);
        next_rect1.x = this.width*2/3;
        next_rect1.y = 0;
        Laya.stage.addChild(next_rect1);
        next_rect1.on(Laya.Event.MOUSE_DOWN, this, this.next1);

        var previous_rect2: Laya.Sprite = new Laya.Sprite();
        previous_rect2.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        previous_rect2.size(this.width/3, this.height/3);
        previous_rect2.x = 0;
        previous_rect2.y = this.height*2/3;
        Laya.stage.addChild(previous_rect2);
        previous_rect2.on(Laya.Event.MOUSE_DOWN, this, this.previous2);

		var next_rect2: Laya.Sprite = new Laya.Sprite();
        next_rect2.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        next_rect2.size(this.width/3, this.height/3);
        next_rect2.x = this.width*2/3;
        next_rect2.y = this.height*2/3;
        Laya.stage.addChild(next_rect2);
        next_rect2.on(Laya.Event.MOUSE_DOWN, this, this.next2);

        var pause_rect: Laya.Sprite = new Laya.Sprite();
        pause_rect.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        pause_rect.size(this.width/3, this.height/3);
        pause_rect.x = this.width*2/3;
        pause_rect.y = this.height*1/3;
        Laya.stage.addChild(pause_rect);
        pause_rect.on(Laya.Event.MOUSE_DOWN, this, this.pause);

        var play_rect: Laya.Sprite = new Laya.Sprite();
        play_rect.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        play_rect.size(this.width/3, this.height/3);
        play_rect.x = 0;
        play_rect.y = this.height*1/3;
        Laya.stage.addChild(play_rect);
        play_rect.on(Laya.Event.MOUSE_DOWN, this, this.play);

        var changeskin_rect: Laya.Sprite = new Laya.Sprite();
        changeskin_rect.graphics.drawRect(0, 0, this.width/3, this.height/3, "#000000");
        changeskin_rect.size(this.width/3, this.height/3);
        changeskin_rect.x = this.width*1/3;
        changeskin_rect.y = this.height*1/3;
        Laya.stage.addChild(changeskin_rect);
        changeskin_rect.on(Laya.Event.MOUSE_DOWN, this, this.changeskin);
        
    }

	private next1(): void {
		if(this.path_list_index == this.path_list.length - 1){  
			this.path_list_index = 0;
		}else{
			this.path_list_index += 1;
		}
        this.showinfo = 0;
		this.load_skin();
    }
	private previous1(): void {
		if(this.path_list_index == 0){  
			this.path_list_index = this.path_list.length - 1;
		}else{
			this.path_list_index -= 1;
		}
        this.showinfo = 0;
		this.load_skin();
    }
    private next2(): void {
		if(this.path_list_index == this.path_list.length - 1){  
			this.path_list_index = 0;
		}else{
			this.path_list_index += 1;
		}
        this.showinfo = 1;
		this.load_skin();
    }
	private previous2(): void {
		if(this.path_list_index == 0){  
			this.path_list_index = this.path_list.length - 1;
		}else{
			this.path_list_index -= 1;
		}
        this.showinfo = 1;
		this.load_skin();
    }
    private play(): void {
        this.beijing_skeleton.play(this.index, true, true)
        this.daiji_skeleton.play(this.index, true, true)
    }
    private pause(): void {
        this.beijing_skeleton.paused();
		this.daiji_skeleton.paused();
    }
    private changeskin(): void {
        if(++this.index >= this.beijing_skeleton.getAnimNum()){
			this.index = 0
		}
        this.play();
    }

	private path_list_init(): void {
        this.path_list_index = 0;
        this.path_list = ["D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0528 - 辛宪英/752803/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/0538 - 郭照/853801/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/1007 - 滕公主/8100701/",
        "D:/Another/temp/ANOTHER_RUBBISH/VIDEOS/sgs/female-DragonBones/1052 - 王荣/8105201/",
        ]
    }
}

new SgsSkinViewerSkel();

求助

第一次使用TypeScript和LayaAir,很多地方还不熟悉,因为不知道如何获取文件夹内的子文件夹的列表,所以才在代码里大费周章的加了个path_list,希望有大佬能够指导一二。

  • 14
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 16
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值