4 Star 5 Fork 1

北京蓝亚盒子科技有限公司 / Live2D

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未指定开源许可证,未经作者的许可,此代码仅用于学习,不能用于其他用途。
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

LayaAir环境使用Live2D案例

本项目基于 LayaAir IDE ts实验版项目Live2D web 版本官方示例项目地址)开发。

适用引擎版本:>= LayaAir 2.7.0

或者可以尝试按照本条修改记录调整引擎(commit

项目构成:

├─ .laya           # laya发布与编译相关脚本
├─ .vscode         # vscode相关文件
├─ bin             # 运行目录
├─ dist 		   # 打包 publish 脚本与 frameWork 代码输出目录
├─ laya			   # IDE编辑时资源与ui目录(可忽略)
├─ libs			   # 引擎源码
├─ src			   # 实现部分代码
|   ├─ Adapter      # 引擎适配部分代码,render部分参考Live2D CubismRenderer实现
|   └─ framework    # 来自于Live2D web官方示例 framework,可以自行替换Live2D官方示例新版本代码(可能需要同步修改adapter部分代码)
└─ scripts          # 工具代码包
	└─ publish.js   # 基于rollup实现的简单打包工具,可将 publish 脚本与 frameWork 目录代码打包,使用改功能前,请在根目录执行 npm install

Live2D的 js 核心库可以从Live2D官方获取

注意事项:

使用本适配库,请必须遵守Live2D官方的软件使用授权协议:https://www.live2d.com/eula/live2d-open-software-license-agreement_cn.html

使用说明:

具体可以参考示例

优先需要初始化相关环境:

//.... 来源与 Main.ts line:33-38
//初始化渲染gl相关
CubismShader_WebGL.__init__();
//编译live2dshader
CubismShader_WebGL.getInstance().generateShaders();
//初始化live2d计时
Delegate.instance.initializeCubism();

使用对应的Loader来加载模型:

//来源 Main.ts line: 48-51
let loader = new Live2DLoader();
let url = this._modelurls[this.index % this._modelurls.length];
this.index ++;
loader.loadAssets("res/"+url,url+".model3.json",Handler.create(this,this._loadSuccess));

//来源 Main.ts line: 54-77
function _loadSuccess(model:Live2DModel,loader:Live2DLoader){
		if(!model)return;
		if(!this.sp){//this.sp未红色按钮
			this.sp = new Box();
			Laya.stage.addChild(this.sp);
		}
		this._model = model;//加载获取的模型
		model.isAutoPlay = false;
		// this._model.addChild(this.sp);
		// model.pivot(model.width/2,model.height/2)
    
    	/** 模型初始化 */
		model.initModel();
		Laya.stage.addChildAt(model,0);
		// this.sp.addChild(model);
		model.scale(0.2,0.2);
		let widget = model.addComponent(Widget) as Widget;
		// widget.centerX = widget.centerY = 0;
		loader.clear();
		model.on(Event.MOUSE_DOWN,this,this.onMouseDown);
		model.on(Event.CHANGE,this,this.aboutEvent);
		Laya.stage.on(Event.MOUSE_DOWN,this,this.stageOnMouseDown);
	}

Live2DLoader加载解析参考

显示相关:

模型的宽高信息为模型数据中的 CanvasWidthCanvasHeight

优化相关:

因为渲染与数据部分使用的 live2d 示例相关代码,且存在获取webgl状态相关逻辑,无法保证渲染效率。

可优化部分:

Live2DSubmit 类中有针对小游戏环境webgl方法不支持问题的补丁,如果只是web环境运行可以去掉以下相关逻辑

public static __init__(gl:WebGLRenderingContext){
        Live2DSubmit._gl =gl;
	    /**web 环境可以自己手动去掉 **/
        var _originBindBuffer = gl.bindBuffer;
        function bindBuffer (target: GLenum, buffer: WebGLBuffer | null):void{
            if(Live2DSubmit.isMark){
                /** 注意使用 _curAB 和 _curEAB 的相关代码也可以省略**/
                if(target == Live2DSubmit._gl.ARRAY_BUFFER){
                    Live2DSubmit._curAB = buffer;
                }else if(target == Live2DSubmit._gl.ELEMENT_ARRAY_BUFFER){
                    Live2DSubmit._curEAB = buffer;
                }
            }
            _originBindBuffer.call(Live2DSubmit._gl,target,buffer);
        }
        gl.bindBuffer = bindBuffer;
    	/** end*/
    }

注意:如果需要更新 framework 可以从 Live2D 官方 Github 获取,再直接替换 src/framework。(可能会有部分不兼容)

如何适用其他IDE类型项目:

1.标准ts项目

可以将 Adapterframework 文件夹拷贝到自己项目下,再将 Adapter 目录下的 ts 文件 import 引擎相关代码调整:

例如:

import { EventDispatcher } from "laya/events/EventDispatcher";
import { Loader } from "laya/net/Loader";
import { Handler } from "laya/utils/Handler";

修改为:

import  EventDispatcher = Laya.EventDispatcher;
import  Loader = Laya.Loader;
import  Handler= Laya.Handler;
2.js项目

JS项目使用源码的源码Adapterframework 要比标准ts项目多一个步骤。在修改 import 之前,使用 tsc 编译获得 Adapterframework 的 js 版本。再重复标准 ts 项目的修改即可。

3. as3项目

as3可以参考发布流程,编译出库之后,项目独立引用 JS 的方式去使用。

发布相关:

如果开发者直接采用live2D源码开发,那用不上发布,除非是JS与AS项目,只能采用JS库的方案。那就需要先把Live2D发布成js库,再通过引入js库的方式来使用live2D的API。

目前通过 scripts 下的 publish.js 脚本已经能简单实现将 Adapterframework两个文件夹打包成独立工具库。

但是目前还不具备生成 d.ts 的能力。所以采用JS库的方式,会没有API提示,如果想加,开发者可根据项目需要,自行编写livd2D的d.ts

环境准备:

在项目根目录下

npm install
发布库:
npm run publish

仓库评论 ( 1 )

你可以在登录后,发表评论

简介

LayaAir2.x引擎适配live2d 展开 收起
TypeScript 等 4 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/layabox/live2d.git
git@gitee.com:layabox/live2d.git
layabox
live2d
Live2D
master

搜索帮助

161121 f78d6d6f 1850385 154831 86f8c370 1850385