博客
关于我
【前端/Spine.js】不使用服务器形式来传递json和altas数据
阅读量:147 次
发布时间:2019-02-28

本文共 1429 字,大约阅读时间需要 4 分钟。

说在前面

  • 测试浏览器: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
    在这里插入图片描述
    复制粘贴,加引号
    在这里插入图片描述
  • 引用运行
    在这里插入图片描述

示例代码

转载地址:http://byxc.baihongyu.com/

你可能感兴趣的文章
Mysql5.6主从复制-基于binlog
查看>>
MySQL5.6忘记root密码(win平台)
查看>>
MySQL5.6的Linux安装shell脚本之二进制安装(一)
查看>>
MySQL5.6的zip包安装教程
查看>>
mysql5.7 for windows_MySQL 5.7 for Windows 解压缩版配置安装
查看>>
Webpack 基本环境搭建
查看>>
mysql5.7 安装版 表不能输入汉字解决方案
查看>>
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>