In this video Erika completes the setup in Spine and readapts the example code to work with the freshly exported Spineboy vortex files so that they are all in a self-contained HTML file. A Wallpaper changer changer project is also prepared to have the Spine animation as an interactive desktop wallpaper.
Expand the video description for downloads and chapters!
This is a cut version of the stream. The full version is available on Twitch.
Downloadable Vortex project (start):
https://esotericsoftware.com/files/projects/twitch/twitch-20200813-SroKx9FjNJo.zip
Downloadable Vortex files (end):
https://esotericsoftware.com/files/projects/twitch/twitch-20200820–V0CQa5Xaz8.zip
Downloadable example HTML files:
https://esotericsoftware.com/files/projects/twitch/owl-uri-twitch-stream.zip
Get Spine:
http://esotericsoftware.com
Art by Siniša “Sinke” Mataić.
Follow Erika live as she creates assets for Spine on Twitch:
https://www.twitch.tv/esotericsoftware
All the videos and the shareable files:
http://esotericsoftware.com/spine-twitch
Youtube playlist:
Video chapters:
00:01 Introduction
03:30 Spineboy setup tour
04:59 Vortex images setup and bones creation
06:00 Particle bone creation
**Vortex idle**
06:29 Vortex idle animation
07:19 Separating the Spineboy idle from the Vortex idle
08:05 Changing the interface background to white
08:52 Copying and pasting the scale keyframes
**Directional animations**
10:03 Left animation creation
14:04 Fixing the draw order of the vortices
15:12 Making the left animation seamless by copying and pasting the transforms
17:00 Right animation creation by removing the minus in the translate coordinates of the left animazion keyframes
18:36 Up animation creation
19:26 Down animation creation
**Fine tuning the animations**
20:34 Particle animation
22:57 Adapting Spineboy position to every direction animation
24:08 Spineboy idle animation
**Interactive webpage creation**
25:03 JSON Export
27:08 Opening the example HTML
27:47 Generating the Data URI for the PNG Image and integrating it in the HTML
28:48 Generating the Base64 file for the Atlas
30:08 Generating the Base64 file for the Json
30:40 Replacing all the names that refer to the owl with the vortex
31:05 Making sure the new animations name match in the HTML
32:11 Invert left and right animation so that they follow the mouse better
32:25 Changing the background color
32:45 Final result in the browser
**Wallpaper changer setup**
33:10 Setting up an interactive wallpaper in Wallpaper changer
34:44 Final result and how to publish your wallpaper
35:49 End of stream talk and final result plus tips
