Physics in browser setup

IIllustraktor · 30 set 2024

Hi, i am trying to get started, setting up Spine animations/physics for web-export. I know about the runtimes, and started using npm for "developing". I am just a web-animator, not a developer, so i am having a hard time understanding, if it is not described step by step. So, i managed to get the canvas-kit examples working, but now i am trying to set up my own template folder structure using npm+vite+gsap. First project is just going to be a little horizontal parallax scrolling thing, where mouse movements do the parallax and gsap animations get triggered onclick.
The Question: Is there a step by step guide to get started, what exactly i have to do, when i exported a basic spine-project with super-simple physic-constraints, and want to include that in my gsap thingy...
Please let me know if i missed a noob guide...thanx

edit:
ok i just found this site: http://de.esotericsoftware.com/spine-player.
I will test it with my physics project ....

Spinebot · 30 set 2024

To get started with setting up Spine animations and physics for web export using npm, Vite, and GSAP, you can follow these steps:

Set Up Your Project:

Create a new project directory and navigate into it.

Initialize a new npm project:

     npm init -y

Install Vite, GSAP, and the Spine runtime:

     npm install vite gsap @esotericsoftware/spine-phaser

Project Structure:

Create the following folder structure:

     your-project/
     ├── index.html
     ├── main.js
     ├── spine/
     │   ├── your-spine-project.json
     │   └── your-spine-project.atlas
     └── package.json

Configure Vite:

Create a vite.config.js file in the root of your project:

     import { defineConfig } from 'vite';

     export default defineConfig({
       server: {
         open: true,
       },
     });

Set Up HTML:

In index.html, include the necessary script tags and a canvas element:

     <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Spine Animation</title>
     </head>
     <body>
       <canvas id="gameCanvas"></canvas>
       <script type="module" src="/main.js"></script>
     </body>
     </html>

Set Up JavaScript:

In main.js, set up Phaser, Spine, and GSAP:

     import Phaser from 'phaser';
     import { SpinePlugin } from '@esotericsoftware/spine-phaser';
     import gsap from 'gsap';

     const config = {
       type: Phaser.AUTO,
       width: 800,
       height: 600,
       backgroundColor: '#2d2d2d',
       parent: 'gameCanvas',
       scene: {
         preload: preload,
         create: create,
         update: update
       },
       plugins: {
         scene: [
           { key: 'SpinePlugin', plugin: SpinePlugin, mapping: 'spine' }
         ]
       }
     };

     const game = new Phaser.Game(config);

     function preload() {
       this.load.setPath('spine/');
       this.load.spine('your-spine-project', 'your-spine-project.json', 'your-spine-project.atlas');
     }

     function create() {
       const spineBoy = this.add.spine(400, 300, 'your-spine-project', 'animation', true);
       spineBoy.setScale(0.5);

       // Example GSAP animation
       gsap.to(spineBoy, { duration: 2, x: 600, yoyo: true, repeat: -1 });
     }

     function update() {
       // Update logic
     }

Run Your Project:

Start the Vite development server:

     npx vite

This setup will get you started with a basic Spine animation integrated with GSAP for animations. You can expand on this by adding more complex animations and physics constraints as needed.

For more detailed information, you can refer to the spine-phaser documentation and the Spine User Guide.