https://esotericsoftware.com/

1<!DOCTYPE html><html ><head>
2<meta charset="utf-8">
3<title>Spine: 2D skeletal animation for games</title>
4<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
5<link rel="icon" type="image/png" href="/img/favicon/favicon-32x32.png" sizes="32x32">
6<meta name="msapplication-TileColor" content="#40a8f5">
7<meta name="msapplication-TileImage" content="/img/favicon/mstile-144x144.png">
8<meta name="theme-color" content="#40a8f5">
9<meta name="viewport" content="width=device-width, initial-scale=1">
10<meta name="description" content="Spine is 2D skeletal animation software for video games. Bring your Unity, C#, cocos2d-x, iOS, Android, C++, HTML5, JS and other games alive with 2D animation!"><meta name="keywords" content="Spine 2D skeletal animation software video games Unity C# cocos2d-x iOS Android C++ HTML5 JavaScript 2D animation Lua AS3 GameMaker Flash Adobe After Effects"><link rel="alternate" hreflang="x-default" href="https://esotericsoftware.com/">
11<link rel="alternate" hreflang="en" href="https://en.esotericsoftware.com/">
12<link rel="alternate" hreflang="vi" href="https://vi.esotericsoftware.com/">
13<link rel="alternate" hreflang="uk" href="https://uk.esotericsoftware.com/">
14<link rel="alternate" hreflang="tr" href="https://tr.esotericsoftware.com/">
15<link rel="alternate" hreflang="es" href="https://es.esotericsoftware.com/">
16<link rel="alternate" hreflang="ru" href="https://ru.esotericsoftware.com/">
17<link rel="alternate" hreflang="pt" href="https://pt.esotericsoftware.com/">
18<link rel="alternate" hreflang="ko" href="https://ko.esotericsoftware.com/">
19<link rel="alternate" hreflang="ja" href="https://ja.esotericsoftware.com/">
20<link rel="alternate" hreflang="it" href="https://it.esotericsoftware.com/">
21<link rel="alternate" hreflang="hi" href="https://hi.esotericsoftware.com/">
22<link rel="alternate" hreflang="de" href="https://de.esotericsoftware.com/">
23<link rel="alternate" hreflang="fr" href="https://fr.esotericsoftware.com/">
24<link rel="alternate" hreflang="hr" href="https://hr.esotericsoftware.com/">
25<link rel="alternate" hreflang="zh" href="https://zh.esotericsoftware.com/">
26<link rel="alternate" hreflang="ar" href="https://ar.esotericsoftware.com/"><style>@font-face{font-family:icons;src:url(/html/fonts/icons/icons3.woff2) format(woff2),url(/html/fonts/icons/icons3.woff) format(woff),url(/html/fonts/icons/icons3.ttf) format(truetype),url(/html/fonts/icons/icons3.svg?#icons) format(svg)}</style>

26<script src="/html/jquery-2.2.0.min.js"></script>

26<link rel="stylesheet" href="/html/min.css">

26<script src="/html/min.js"></script>

26</head>
27<body>
28<header>
29<div id="top"></div>
30<div id="nav-d">
31	<h1 class="h">Esoteric Software</h1>
32	<a href="/" id="nav-d-logo"></a>
33	<nav>
34		<h2 class="h">Navigation</h2>
35		<div id="nav-d-menu">
36			<a href="/">Home</a>
37			<a href="/blog" name="bdot">Blog</a>
38			<a href="/forum/">Forum</a>
39			<a href="/support">Support</a>
40		</div>
41		<span id="nav-m-link"></span>
42		<span class="social">
43			<span id="lang"></span>
44			<a href="https://bsky.app/profile/esotericsoftware.com" title="BlueSky" class="iconfont-bluesky"></a>
45		</span>
46	</nav>
47</div>
48<div id="nav-m">
49	<div class="table">
50		<div id="nav-m-menu">
51			<a href="/">Home</a>
52			<a href="/blog" name="bdot">Blog</a>
53			<a href="/forum/">Forum</a>
54			<a href="/support">Support</a>
55		</div>
56		<div id="nav-m-spine">
57			<div>Spine</div>
58			<a href="/spine-in-depth">Features</a>
59			<a href="/spine-showcase">Showcase</a>
60			<a href="/spine-runtimes">Runtimes</a>
61			<a href="/spine-academy">Learn</a>
62			<a href="/support#Spine-FAQ">FAQ</a>
63			<a href="/spine-download">Try Now</a>
64			<a href="/spine-purchase">Purchase</a>
65		</div>
66	</div>
67</div>

68<script>blogDot(900)</script>

68
69<div class="nav-b">
70	<div class="nav-b-menu">
71		<a href="/spine-in-depth" class="nav-b-spine-logo"><img src="/img/core/spine_logo_bright.svg" style="width:104px;height:32px" alt="Spine"></a>
72		<a href="/spine-in-depth" class="nav-b-spine-in-depth">Features</a>
73		<a href="/spine-showcase">Showcase</a>
74		<a href="/spine-runtimes">Runtimes</a>
75		<a href="/spine-academy">Learn</a>
76		<a href="/support#Spine-FAQ">FAQ</a>
77	</div>
78	<div class="nav-b-buttons">
79		<a href="/spine-purchase" class="nav-b-buy">Purchase</a>
80		<a href="/spine-download" class="nav-b-try">Try Now</a>
81			</div>
82</div>
83<div class="front-promo-thin-bar-wrap front-promo-desktop">
84	<a href="https://esotericsoftware.com/blog/Spine-4.3-released" class="front-promo-thin-bar">
85		<img src="./img/ogle.png" alt="" class="front-promo-thin-bar-ogle">
86		<span class="front-promo-thin-bar-title">Spine 4.3 is here!</span>
87		<span class="front-promo-thin-bar-subtitle">Sliders. Transform constraints. Rig smarter.</span>
88		<span class="front-promo-thin-bar-link">See what's new <i class="iconfont-arrow-right2"></i></span>
89	</a>
90</div><div class="gradient">
91<div id="trailer">
92	<ul class="slider">
93		<li><div class="img-wrapper"><div class="ken-burn anim-first"><span>image1</span></div></div></li>
94		<li><div class="img-wrapper"><div class="ken-burn anim-second"><span>image2</span></div></div></li>
95		<li><div class="img-wrapper"><div class="ken-burn anim-third"><span>image3</span></div></div></li>
96		<li><div class="img-wrapper"><div class="ken-burn anim-fourth"><span>image4</span></div></div></li>
97	</ul>
98	<div class="slider-overlay"></div>
99	<div class="trailer-video">
100		<div class="trailer-overlay"></div>
101		<div class="video-container"></div>
102		<div class="button-play"></div>
103	</div>
104	<div class="slider-title"><h1>Spine</h1><h2>2D animation for games</h2></div>
105	<div class="trailer-button-minimize"></div>
106</div>

107<script>
108function loadTrailer () {
109	if ($("#player").length == 0) {
110		$("#trailer .trailer-video .video-container").html("<div id='player'></div>");
111
112		var script = document.createElement("script");
113		script.src = "https://www.youtube.com/iframe_api";
114
115		var firstScript = document.getElementsByTagName("script")[0];
116		firstScript.parentNode.insertBefore(script, firstScript);
117	} else
118		playVideo();
119}
120
121var player;
122function onYouTubeIframeAPIReady () {
123	player = new YT.Player("player", {
124		videoId: "5RTkImAOJKM",
125		width: 720,
126		playerVars: { modestbranding: 1, showinfo: 0 },
127		suggestedQuality : "hd720",
128		events: { onReady: onPlayerReady, onStateChange: onPlayerStateChange }
129	});
130}
131
132function onPlayerReady(event) { player.playVideo(); }
133
134function onPlayerStateChange(event) { if (event.data == YT.PlayerState.ENDED) minimizeVideo(); }
135function playVideo() { player.playVideo(); }
136function pauseVideo() { player.pauseVideo(); }
137
138function clearDelayCss(elements) {
139	$(elements).each(function() {
140		var timers = $(this).data("delayCssTimers") || [];
141		$.each(timers, function(i, timer) { clearTimeout(timer); });
142		$(this).removeData("delayCssTimers");
143	});
144}
145
146function expandVideo() {
147	clearDelayCss(".trailer-overlay, .trailer-button-minimize");
148	$(".slider-overlay").stop(true, true);
149	$("#trailer").addClass("trailer-active");
150	$(".trailer-overlay").delayCss([
151		{ delay: 1000, css: { opacity: 0 }},
152		{ delay: 1500, css: { display: "none" }}
153	]);
154	$(".trailer-button-minimize").delayCss([
155		{ delay: 1400, css: { display: "block" }},
156		{ delay: 1500, css: { opacity: 0.75}}
157	]);
158	$(".slider-overlay").css({"background-color" : "rgba(0,0,0,1)", "transition" : "background-color 0.1s"});
159}
160
161function minimizeVideo() {
162	clearDelayCss(".trailer-overlay, .trailer-button-minimize");
163	$(".slider-overlay").stop(true, true);
164	$(".trailer-overlay").css({"opacity" : "1", "display" : "block"});
165	$(".trailer-button-minimize").css({"opacity" : "0", "display" : "none"});
166	$("#trailer").removeClass("trailer-active");
167	$(".slider-overlay").delay(400).queue(function() {
168		$(this).css({"background-color" : "rgba(0,0,0,0)", "transition" : "background-color 1s"});
169		$(this).dequeue();
170	});
171}
172
173$.fn.delayCss = function(cssChanges) {
174	$(this).each(function() {
175		var element = $(this), lastDelay = 0, timers = [];
176		clearDelayCss(element);
177		$.each(cssChanges, function(i, options) {
178			lastDelay += parseInt(options.delay);
179			timers.push(setTimeout(function() { element.css(options.css); }, lastDelay));
180		});
181		element.data("delayCssTimers", timers);
182	});
183}
184
185$("#trailer .trailer-video").click(function () { expandVideo(); loadTrailer(); });
186$("#trailer .trailer-button-minimize").click(function () { minimizeVideo(); pauseVideo(); });
187</script>

187</div>
188</header>
189
190<section>
191<h1 class="h">Main Content</h1>
192<div role="main" >
193
194<div id="edge">
195<style>@media(max-width:440px){.featured-font{font-size:1.714em}}</style>
196<div id="content" class="no-borders front-page">
197<a href="https://esotericsoftware.com/blog/Spine-4.3-released" class="front-promo-mobile">
198	<img src="./img/ogle.png" alt="" class="front-promo-mobile-ogle">
199	<span class="front-promo-mobile-copy">
200		<span class="front-promo-mobile-title">Spine 4.3</span>
201	</span>
202	<span class="front-promo-mobile-link">See what's new <i class="iconfont-arrow-right2"></i></span>
203</a>
204<article>
205	<div class="units-row image-on-left">
206		<div class="unit-50 image"><a href="/spine-in-depth#What-is-Spine"><img src="/img/front-what-is-spine.jpg" alt="Bring video games alive"></a></div>
207		<div class="unit-50">
208			<h1><a href="/spine-in-depth#What-is-Spine">Bring video games alive</a></h1>
209			<p>Animation brings video games alive. We believe creating great 2D animation requires not only powerful software, but a powerful workflow. Spine is dedicated to 2D skeletal animation, providing an efficient workflow both for creating amazing animation and for integrating it into your games.</p>
210			<a class="link-button" href="/spine-in-depth#What-is-Spine"><span>Learn more<i class="iconfont-arrow-right2 link-arrow"></i></span></a>
211		</div>
212	</div>
213</article>
214<article>
215	<div class="units-row image-on-right">
216		<div class="unit-50 image"><a href="/spine-demos"><img src="/img/front-spine-demos.jpg" alt="Features"></a></div>
217		<div class="unit-50">
218			<h1><a href="/spine-demos">Live Demos</a></h1>
219			<p>Our live demos show a sample of what is possible with Spine, right in your browser window. Play animations in layers, manipulate skeletons dynamically, and much more.</p>
220			<a class="link-button" href="/spine-demos"><span>See the demos<i class="iconfont-arrow-right2 link-arrow"></i></span></a>
221		</div>
222	</div>
223</article>
224<article>
225	<div class="units-row image-on-left">
226		<div class="unit-50 image"><a href="/spine-academy"><img src="/img/front-spine-academy.jpg" alt="Spine Academy"></a></div>
227		<div class="unit-50">
228			<h1><a href="/spine-academy">Spine Academy</a></h1>
229			<p>Spine Academy has everything you need to get started learning Spine. Whether you like learning on your own or prefer face-to-face workshops and courses, we got you covered. Check our changelog and roadmap to see what changed between Spine versions and what's being worked on, and don't forget to sign up to our community forum.</p>
230			<a class="link-button" href="/spine-academy"><span>Learn more<i class="iconfont-arrow-right2 link-arrow"></i></span></a>
231		</div>
232	</div>
233</article>
234<article>
235	<div class="units-row image-on-right">
236		<div class="unit-50 image"><a href="/spine-in-depth#Features"><img src="/img/front-features.jpg" alt="Features"></a></div>
237		<div class="unit-50">
238			<h1><a href="/spine-in-depth#Features">Features</a></h1>
239			<p>Animating is an iterative process. Spine provides numerous tools to shape and refine your 2D animations. Bend and deform images with mesh skinning/weights, adjust timing with the dopesheet, visualize motion with ghosting, pose your characters with inverse kinematics, create pseudo 3D effects, and much more.</p>
240			<a class="link-button" href="/spine-in-depth#Features"><span>In depth<i class="iconfont-arrow-right2 link-arrow"></i></span></a>
241		</div>
242	</div>
243</article>
244<article>
245	<div class="units-row-end image-on-left">
246		<div class="unit-50 image"><a href="/spine-runtimes"><img src="/img/front-runtimes.jpg" alt="Spine Runtimes"></a></div>
247		<div class="unit-50">
248			<h1><a href="/spine-runtimes">Spine Runtimes</a></h1>
249			<p>Spine doesn't stop at designing beautiful animations. Export your 2D skeletal animation data, then use our runtime libraries to load and display your animations in your game, just as they do in Spine. We provide runtimes for nearly every major game toolkit and programming language.</p>
250			<a class="link-button" href="/spine-runtimes"><span>All runtimes<i class="iconfont-arrow-right2 link-arrow"></i></span></a>
251		</div>
252	</div>
253</article>
254</div>

255<script>langs.push('en');addLangs('es,fr')</script>

255
256
257<div class="jagged"></div>
258<div id="end">
259<h1>Get started right away!</h1>
260<div id="tryBuy" class="units-row-end units-split">
261	<div id="try" class="unit-50" onclick="go('/spine-download')">
262		<h2>Download the trial</h2>
263		<div></div>
264		<p>Explore Spine firsthand by downloading the Spine trial, free for Windows, Mac and Linux.</p>
265	</div>
266	<div id="buy" class="unit-50" onclick="go('/spine-purchase')">
267		<h2>Purchase Spine</h2>
268		<div></div>
269		<p>Support Spine development by purchasing Spine and enable save, export and use of the Spine Runtimes.</p>
270	</div>
271</div>
272	<div id="quote" ><div></div><i>To make a great impression on kids we needed a natural and expressive animation. Spine with its smoothness and mesh deformation allowed us to achieve this without harming the development flexibility.</i><b>&mdash; Vyacheslav Borovik, Animator</b></div>
273	</div>
274
275</div>
276</div>
277</section>
278
279<footer>
280
281
282<div class="table">
283<div class="column links">
284<div>
285	<h3>Site</h3>
286	<a href="/">Home</a>
287	<a href="/blog">Blog</a>
288	<a href="/forum/viewforum.php?f=3">Forum</a>
289	<a href="/contact">Support</a>
290	<br>
291	<span class="language">English</span>
292	<a href="/site-language"><span class="iconfont-earth"></span>Choose&nbsp;language</a>
293</div>
294</div>
295<div class="column spine links">
296<div>
297	<h3 >Spine<sup class="reg">&reg;</sup></h3>
298	<a href="/spine-in-depth#Features">Features</a>
299	<a href="/spine-in-depth#Runtimes">Runtimes</a>
300	<a href="/spine-documentation">Documentation</a>
301		<a href="/spine-download">Try Now</a>
302	<a href="/spine-purchase">Purchase</a>
303</div>
304</div>
305<div class="top"><a href="javascript:scroll('top')"></a></div>
306<div class="column company">
307<div >
308	<h3>Esoteric Software<sup class="reg">&reg;</sup></h3>
309	<div class="copyright">&copy; 2013-2026 Esoteric Software LLC</div>
310	<div class="social">
311		<a href="https://bsky.app/profile/esotericsoftware.com" title="BlueSky" class="iconfont-bluesky"></a>
312	</div>
313</div>
314</div>
315</div>
316
317</footer></body></html>