Twitch: 404 page animation – Vortex setup, Animation, and Coding

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

Leave a Reply

Your email address will not be published. Required fields are marked *