How to import spine animation in hype

Spine official documentation:https://github.com/EsotericSoftware/spine-runtimes/tree/3.6/spine-ts#webgl-demos

I don’t program, this is my project file:spine-hype.zip (619.6 KB)

Thank you

You are using an HTML Widget, which is an <iframe> element. Since this is basically a separate web page, for it to see the spine libraries you need to include the <script> tags in its Inner HTML. It should look like:

<script src="${resourcesFolderName}/spine-widget.js">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<div class="spine-widget" data-json="${resourcesFolderName}/raptor-pro.json" data-atlas="${resourcesFolderName}/raptor.atlas" data-animation="walk"></div>

You can then remove the <script> lines from the Head HTML and uncheck Include in document <head> for spine-widget.js in the Resource Library.

1 Like