博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【前端/Spine.js】不使用服务器形式来传递json和altas数据
阅读量:144 次
发布时间:2019-02-28

本文共 1435 字,大约阅读时间需要 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/

你可能感兴趣的文章