Spine Previewer

script.vue

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <h1>Spine Previewer</h1>
    <div id="player" style="margin-bottom: 10px"></div>
    <button ref="holder">Drag JSON/Atlas/Images to Here</button>
    <button @click="doSomething" :class="{ disabled: !conditionsOk }">
      Load
    </button>
    <button @click="reset">Reset</button>
    <div style="display: flex; justify-content: center; text-align: left">
      <ul class="condition">
        <li>
          <span class="correct" v-if="spineData.atlas">√</span>
          <span class="wrong" v-else>×</span>
          <template>Atlas File</template>
        </li>
        <li>
          <span class="correct" v-if="spineData.json">√</span>
          <span class="wrong" v-else>×</span>
          <template>JSON File</template>
        </li>
        <li>
          <span class="right" v-if="spineData.skel">√</span>
          <span class="wrong" v-else>×</span>
<!--           <span class="well" v-else>●</span> -->
          <template>Skeleton File</template>
        </li>
        <li>
          <span class="right" v-if="spineData.image">√</span>
          <span class="wrong" v-else>×</span>
          <template>Image File</template>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      spineData: {
        atlas: null,
        json: null,
        skel: null,
        image: null
      },
      player: null,
      message: "Welcome to Vue!"
    };
  },
  created() {
    // https://github.com/EsotericSoftware/spine-runtimes/blob/3.8/spine-ts/player/example/embedding-json-example.html
    this.$nextTick(() => {
      this.$refs.holder.ondragover = function () {
        return false;
      };
      this.$refs.holder.ondragend = function () {
        return false;
      };

      this.$refs.holder.ondrop = (e) => {
        e.preventDefault();

        for (let file of e.dataTransfer.files) {
          let reader = new FileReader();

          reader.onload = (event) => {
            const text = event.target.result;
            const data = {
              name: file.name,
              data: event.target.result
            };
            if (file.name.endsWith(".png")) {
              this.spineData.image = data;
            } else if (file.name.endsWith(".atlas")) {
              this.spineData.atlas = data;
            } else if (file.name.endsWith(".skel")) {
              this.spineData.skel = data;
            } else if (file.name.endsWith(".json")) {
              this.spineData.json = data;
            }
            console.log(this.spineData);
          };

          reader.readAsDataURL(file);
        }

        return false;
      };
    });
  },
  computed: {
    conditionsOk() {
      return this.spineData.atlas;
    }
  },
  methods: {
    reset() {
      this.spineData.atlas = null;
      this.spineData.image = null;
      this.spineData.json = null;
      this.spineData.skel = null;
      if (this.player) {
        this.player.dom.remove();
        this.player = null;
      }
    },
    doSomething() {
      if (this.player) return;
      if (this.conditionsOk) {
        let data = {
          // animation: "",
          rawDataURIs: {
          },
          backgroundColor: "#666666",
          premultipliedAlpha: true,
          showControls: true
        };

        if (this.spineData.atlas) {
          const info = this.spineData.atlas;
          data.atlasUrl = info.name;
          data.rawDataURIs[info.name] = info.data;
        }
        if (this.spineData.json) {
          const info = this.spineData.json;
          data.jsonUrl = info.name;
          data.rawDataURIs[info.name] = info.data;
        }
        if (this.spineData.skel) {
          const info = this.spineData.skel;
          data.skelUrl = info.name;
          data.rawDataURIs[info.name] = info.data;
        }
        console.log("player data", data);
        this.player = new spine.SpinePlayer("player", data);
      }
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.condition > li {
  list-style: none;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}

span.correct {
  color: green;
  font-weight: bold;
}

span.well {
  color: orange;
  font-weight: bold;
}

span.wrong {
  color: red;
  font-weight: bold;
}

button.disabled {
  color: grey;
}
</style>

scripts

<script src="https://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>

spine-previewer.markdown

Spine Previewer

A Pen by fy on CodePen.

License.

styles

<link href="https://esotericsoftware.com/files/spine-player/3.7/spine-player.css" rel="stylesheet" />