博客
关于我
【前端/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/

你可能感兴趣的文章
MySQL最大建议行数 2000w,靠谱吗?
查看>>
MySQL有哪些锁
查看>>
MySQL服务器安装(Linux)
查看>>
mysql服务器查询慢原因分析方法
查看>>
mysql服务无法启动的问题
查看>>
MySQL杂谈
查看>>
mysql权限
查看>>
mysql条件查询
查看>>
MySQL架构与SQL的执行流程_1
查看>>
MySQL架构与SQL的执行流程_2
查看>>
MySQL架构介绍
查看>>
MySQL架构优化
查看>>
MySQL查看数据库相关信息
查看>>
MySQL查看表结构和表中数据
查看>>
MySQL查询优化:LIMIT 1避免全表扫描
查看>>
MySQL查询优化之索引
查看>>
mysql查询储存过程,函数,触发过程
查看>>
mysql查询总成绩的前3名学生信息
查看>>
MySQL查询报错ERROR:No query specified
查看>>
mysql查询数据库储存数据的占用容量大小
查看>>