The 4.3 beta is now available!

April 4th, 2025

We are happy to announce that the Spine v4.3 beta has begun!

Our last Spine release brought physics and other great new features that make a big difference for your animations. For 4.3 we'll both add some big new features and make some of the most commonly used Spine features more powerful, plus our usual sprinkling of quality of life improvements.

Below are some of the changes already in the beta. Check out the changelog for the full list. There is more to come soon!

Transform constraints

You can now map transform properties to different properties. For example when you translate a bone, other bones can rotate. Any combination is possible!

You can "clamp" the constrained bone values so they don't exceed a range. World or local can be chosen separately for the source and constrained bones.

Transform constraints can also work like they did previously, but better. For example, you can map rotation to rotation, like before, but at a different speed or with clamping.

All of this opens up a ton of possibilities for how your skeletons can move automatically! Here translate X is connected to scale X:

Clamp is enabled so scale can't go below -1 or above 1. Translate X has a very small range, ensuring that scale will be either -1 or 1. The result is that the constrained bone flips when the source bone passes 0:

Adjusting keys

Previously when you moved keys up or down in the graph or you set new keys, Spine would keep your Bezier curve handles static. In 4.3 we are now super smart about adjusting the handles, doing our best to keep your curves intact. That means a lot less fiddling with handles to fix them up after adjusting your keys. One user reports that this speeds up their animating by 200%!

Import PSD

There is now an option when importing a PSD to have Spine delete all images that were previously created by importing a PSD. This prevents old images from being orphaned after a rename, so your images folder stays tidy.

UI scale

Spine has native support for 100% and 200% UI scale. This works well on 1080p and 4K screens, but may be too small or too large for other sizes, like 1440p. You can set other UI scales, but values like 125% or 150% used to be quite blurry. Not any more! Now all of Spine's text rendering is crisp at any UI scale, allowing you to dial in the size of the UI that works best for your eyes and monitor size.

Faster texture packing

The texture packer has always had a Fast setting that packs less tightly, but gets it done faster. It now gets it done much faster. In some cases, 8X faster! Not only that, but it also packs much more tightly than before, sometimes as good as not using Fast. It's worth giving it a try, as faster packing can save a lot of time during game development.

Folder color

It's a small thing, but you can now set a color on your folders for organization and quick identification.

Bone splitting

There are now more options when splitting a bone, and the viewport shows the results as you change options.

Feedback

Give it a try and let us know what you think on the Spine forum. We greatly appreciate your feedback!

Come suddividere i tuoi asset per l’animazione

March 6th, 2025

Se ti stai avventurando per la prima volta nell’animazione scheletrica 2D con Spine, potresti aver bisogno di conoscere come preparare al meglio i tuoi asset per l’animazione. Ecco alcuni suggerimenti per iniziare e trarre il massimo dal tuo processo di animazione.

Disegna anche le parti nascoste degli asset

Quando crei gli asset, è fondamentale disegnare persino le parti solitamente coperte da altri elementi. Ad esempio, se stai disegnando capelli parzialmente nascosti dietro la testa, assicurati di disegnarne la parte completa, non solo quella visibile. Questo sforzo aggiuntivo ti permette di ruotare o muovere i capelli senza ritrovarti con spazi vuoti imbarazzanti. Inoltre, garantisce la massima libertà di movimento per ogni asset.

Estremità arrotondate

Per ottenere movimenti degli arti fluidi e naturali, è importante curare il modo in cui disegni le articolazioni. Se stai disegnando arti come braccia e avambracci, cerca di lasciare un’area il più possibile vicina a un cerchio dove le giunture si sovrappongono. Questo approccio circolare favorisce rotazioni e sovrapposizioni senza interruzioni, per un’animazione più morbida.

In generale, se non sai come concludere una parte che si sovrappone a un’altra, arrotondarla di solito è una scelta sicura. È particolarmente importante per le parti che ruotano attorno ai punti di attacco, come spalle o gomiti. Terminare le parti che si sovrappongono in modo arrotondato garantisce transizioni lisce e movimenti naturali.

Le immagini dritte si piegano meglio

Quando progetti asset che devono piegarsi, inizia con immagini diritte. Le immagini diritte possono essere piegate in entrambe le direzioni, offrendoti più flessibilità. Partire da un’immagine già piegata e provare a curvarla nella direzione opposta spesso dà risultati insoddisfacenti. Se non sai come “raddrizzare” qualcosa che dovrebbe avere sempre qualche curva, come capelli mossi, cerca di disegnarla nello stato più “rilassato”, dove non è influenzata dal vento.

Inoltre, evita di disegnare immagini in diagonale, perché può essere meno efficiente. Le immagini diagonali occupano più spazio nell’atlas rispetto a quelle orientate in verticale o in orizzontale, a meno che non si utilizzi il packing poligonale. Inoltre, il pulsante genera crea una griglia uniforme, poco utile se il contenuto dell’immagine è disposto in diagonale.

Più parti separi, più possibilità avrai

Uno dei punti chiave dell’animazione in Spine è la capacità di muovere le varie parti in modo indipendente. Per farlo, disegna separatamente ogni parte che desideri animare e posizionala su un proprio livello. Il grado di suddivisione dipende da come intendi animare ciascuna parte, ma ricorda che senza un’adeguata separazione, animare i singoli pezzi può risultare complicato e limitare la tua creatività.

Fronte e retro su livelli diversi

Evita di disegnare su un unico livello gli elementi che appariranno sia davanti che dietro a un oggetto. Se stai animando, ad esempio, un personaggio con un mantello che passa davanti e dietro il corpo, assicurati che le parti del mantello siano su livelli distinti. Se devono connettersi in un punto centrale, disegna quel punto su entrambi e, una volta in Spine, attribuisci loro gli stessi pesi per far combaciare le immagini. Usare fondi ti darà una corrispondenza perfetta!

Contorni per le rotazioni

Se lavori con uno stile artistico che prevede contorni, è utile inserire contorni sia sopra che sotto la sezione dell’arto con cui devono intersecarsi. In questo modo, i contorni vengono mantenuti indipendentemente dalla rotazione dell’arto. Nel GIF qui sotto, ad esempio, questa tecnica viene usata sia sull’avambraccio che sulla mano. Permette all’avambraccio di sovrapporsi al braccio superiore senza “fondersi” con esso e dà alla mano un maggior raggio di rotazione, pur restando attaccata all’avambraccio.

Usa i tag nei nomi dei tuoi livelli

Spine ora può importare direttamente i file PSD. È molto più veloce rispetto al vecchio script PhotoshopToSpine e ti permette di usare qualunque software di grafica in grado di esportare un file PSD. I tag possono essere aggiunti a livelli e gruppi nel tuo PSD, consentendoti di gestire gli asset in modo efficiente al di fuori di Spine e di creare una pipeline ottimizzata dal tuo software di disegno preferito a Spine. Basta aggiungere i tag ai nomi di livello e di gruppo, e Spine li elaborerà automaticamente in fase di importazione del PSD.

Assicurati che lo spazio colore del documento sia impostato su RGB e non su CMYK, altrimenti potresti avere sorprese come colori più spenti dopo l’esportazione. E non dimenticare di aggiungere un’origine così da semplificare l’aggiunta di nuovi asset!

Risorse aggiuntive

Spine offre numerose risorse per aiutarti a capire come strutturare e animare i tuoi personaggi in modo efficace. Nella pagina degli esempi troverai diversi esempi scaricabili di personaggi completi. Inoltre, i file delle dirette Twitch mostrano dimostrazioni live e approfondimenti sul processo di animazione. Questi esempi sono utilissimi per vedere come animatori professionisti organizzano e strutturano i propri asset. Le dirette sono lunghe, quindi usa i filtri e i capitoli per trovare le informazioni che ti interessano.

Seguendo queste linee guida sarai sulla buona strada per creare animazioni 2D di grande qualità con Spine. Vieni a trovarci sul forum di Spine per discutere di questo post. Buona animazione!

Spine HaxeFlixel runtime released

March 4th, 2025

spine-haxeflixel

This summer we released spine-haxe with support for Starling. Today we're happy to announce that it now also supports HaxeFlixel!

Our new integration allows you to render Spine animations using HaxeFlixel and OpenFL. Haxe, in combination with OpenFL, empowers you to create applications for a wide range of targets, including HTML5 applications and native apps for both desktop and mobile platforms.

Try out our new HaxeFlixel integration by moving Celeste in the demo below:

To get started, check out the spine-haxe documentation and the examples in our GitHub repository. We also invite you to join the discussion about this release on the Spine forum.