【前端/Spine.js】不使用服务器形式来传递json和altas数据

说在前面

• 测试浏览器：chrome 81.0.4
• 其他工具：visual studio code
• 吐槽：用spine.js很不爽，因为必须得搭个支持xhr的服务器，就很烦；然后小改了下，这样测试起来就简单点

代码

• 主要是AssetManager这个类，给他添加个loadTextData的方法，参数依然仿照其他的函数

  AssetManager.prototype.loadTextData = function (path, data) {
  		var _this = this;
  		path = this.pathPrefix + path;
  		this.toLoad++;
  		_this.assets[path] = data;
  		_this.toLoad--;
  		_this.loaded++;
  	}
  

• 对于图片数据，也可以直接使用Base64数据，网上有很多在线的转换工具，并且自带了loadTextureData这个方法。

  AssetManager.prototype.loadTextureData = function (path, data, success, error) {
  		var _this = this;
  		if (success === void 0) { success = null; }
  		if (error === void 0) { error = null; }
  		path = this.pathPrefix + path;
  		this.toLoad++;
  		var img = new Image();
  		img.onload = function (ev) {
  			var texture = _this.textureLoader(img);
  			_this.assets[path] = texture;
  			_this.toLoad--;
  			_this.loaded++;
  			if (success)
  				success(path, img);
  		};
  		img.onerror = function (ev) {
  			_this.errors[path] = "Couldn't load image " + path;
  			_this.toLoad--;
  			_this.loaded++;
  			if (error)
  				error(path, "Couldn't load image " + path);
  		};
  		img.src = data;
  	};
  

实例

• 将altas数据存放到js代码中
  使用vscode打开.atlas文件，格式应如下图：
  
  ctrl+F打开搜索框，并选中正则表达式选项：
  
  输入$，可以看到选中了每行的尾部
  
  选择替换，输入\，替换所有
  
  将\换成n，替换所有
  
  将n换成\，替换所有，最终变成下面酱
  
  全选，复制，粘贴到js文件中，并将最后的\去掉
  
  
• 将json数据存放到js代码中
  在vscode中安装扩展PrettifyJSON
  
  用vscode打开对应的.json文件
  
  ctrl+A，选中所有内容
  ctrl+shift+p，打开命令索引，搜索join lines，运行
  
  将json内容压缩为一行
  
  复制粘贴到js中
  
• 将png数据存放到js代码中
  使用在线转换网站将png转换为base64
  
  复制粘贴，加引号
  
• 引用运行
  

示例代码

• CSDN