Skip to content

Commit

Permalink
updated site
Browse files Browse the repository at this point in the history
  • Loading branch information
@davesmith00000
davesmith00000 committed Sep 25, 2022
1 parent 1b149fb commit f369f25
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 22 deletions.
58 changes: 47 additions & 11 deletions docs/presentation/animation.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animation · Indigo</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are two type of animations found in Indigo."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animation · Indigo"/><meta property="og:type" content="website"/><meta property="og:url" content="https://your-docusaurus-test-site.com/"/><meta property="og:description" content="There are two type of animations found in Indigo."/><meta property="og:image" content="https://your-docusaurus-test-site.com/img/undraw_online.svg"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://your-docusaurus-test-site.com/img/undraw_tweetstorm.svg"/><link rel="shortcut icon" href="/img/indigo_logo_solid.svg"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="alternate" type="application/atom+xml" href="https://your-docusaurus-test-site.com/blog/atom.xml" title="Indigo Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://your-docusaurus-test-site.com/blog/feed.xml" title="Indigo Blog RSS Feed"/><script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-169190516-1"></script><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animation · Indigo</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are two types of animations found in Indigo."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animation · Indigo"/><meta property="og:type" content="website"/><meta property="og:url" content="https://your-docusaurus-test-site.com/"/><meta property="og:description" content="There are two types of animations found in Indigo."/><meta property="og:image" content="https://your-docusaurus-test-site.com/img/undraw_online.svg"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://your-docusaurus-test-site.com/img/undraw_tweetstorm.svg"/><link rel="shortcut icon" href="/img/indigo_logo_solid.svg"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="alternate" type="application/atom+xml" href="https://your-docusaurus-test-site.com/blog/atom.xml" title="Indigo Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://your-docusaurus-test-site.com/blog/feed.xml" title="Indigo Blog RSS Feed"/><script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-169190516-1"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments); }
gtag('js', new Date());
Expand Down Expand Up @@ -59,12 +59,12 @@
};
}
});
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 id="__docusaurus" class="postHeaderTitle">Animation</h1></header><article><div><span><p>There are two type of animations found in Indigo.</p>
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 id="__docusaurus" class="postHeaderTitle">Animation</h1></header><article><div><span><p>There are two types of animations found in Indigo.</p>
<ol>
<li>Timeline / Key frame based animations.</li>
<li>Keyframe based animations.</li>
<li>Procedural / programmed animations.</li>
</ol>
<h2><a class="anchor" aria-hidden="true" id="timeline-animations"></a><a href="#timeline-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Timeline Animations</h2>
<h2><a class="anchor" aria-hidden="true" id="keyframe-animations"></a><a href="#keyframe-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Keyframe Animations</h2>
<p>Indigo is a &quot;code-only&quot; game engine, there is no GUI or asset creation pipeline. As such, the expectation is that you'll use another tool in order to manufacture animation sprite sheets, and import them into Indigo.</p>
<p>An example of this is that Indigo has support for <a href="https://www.aseprite.org/">Aseprite</a> (an excellent pixel art editor and animation tool), and the process is:</p>
<ol>
Expand Down Expand Up @@ -113,14 +113,45 @@ <h3><a class="anchor" aria-hidden="true" id="structure"></a><a href="#structure"
<h2><a class="anchor" aria-hidden="true" id="procedural-animations"></a><a href="#procedural-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Procedural Animations</h2>
<p>Procedural animations are any animations and movements produced as a result of code execution, and can be seen in a few forms, notably:</p>
<ul>
<li>Hand coded animations</li>
<li>Timeline animations</li>
<li>Signals &amp; Signal Functions</li>
<li>Hand coded animations</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="hand-crafted-code"></a><a href="#hand-crafted-code" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hand crafted code</h3>
<p>It is entirely reasonable to just do the animation yourself - you're a capable programmer after all! How hard can it be to make something move across the screen?</p>
<p>The main gotcha to be aware of with this kind of programming, is that the amount of time that passes between frames is not consistent. In other words, you can't add <code>1</code> to a characters <code>x</code> position and expect it to move smoothly across the screen.</p>
<p>All movement must therefore be described in terms of the amount of time that has passed, and there are a few helpful functions on the <code>GameTime</code> instance you are supplied with to help you do that.</p>
<p>Timeline animations and Signals already have time either taken care of or factored into the equation for you in some way or other.</p>
<h3><a class="anchor" aria-hidden="true" id="timeline-animations"></a><a href="#timeline-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Timeline Animations</h3>
<blockquote>
<p>The <code>Timeline</code> type is new as of Indigo 0.14.0.</p>
</blockquote>
<p>Timelines allow you to describe animations over time using a combination of <code>SignalFunction</code>s and a nice DSL.</p>
<p>To make use of Timelines, add the following imports:</p>
<pre><code class="hljs css language-scala"><span class="hljs-keyword">import</span> indigo.*
<span class="hljs-keyword">import</span> indigo.syntax.*
<span class="hljs-keyword">import</span> indigo.syntax.animations.*
</code></pre>
<p>This allows you to write timelines that look like this:</p>
<pre><code class="hljs css language-scala"><span class="hljs-keyword">val</span> tl: <span class="hljs-type">Timeline</span>[<span class="hljs-type">Graphic</span>[<span class="hljs-type">Material</span>.<span class="hljs-type">Bitmap</span>]] =
timeline(
layer(
startAfter(<span class="hljs-number">2.</span>seconds),
animate(<span class="hljs-number">5.</span>seconds) { graphic =&gt;
easeInOut &gt;&gt;&gt;
lerp(<span class="hljs-type">Point</span>(<span class="hljs-number">0</span>), <span class="hljs-type">Point</span>(<span class="hljs-number">100</span>)) &gt;&gt;&gt;
<span class="hljs-type">SignalFunction</span>(pt =&gt; graphic.moveTo(pt))
}
)
)
</code></pre>
<p>Each timeline can animate one type of thing, but they and their sub components are reusable and composable. The one above is animating a <code>Graphic</code>.</p>
<p>Timelines are build up of 'layers' which are each their own sequence of 'time slots', such as the ones you can see above (i.e. <code>startAfter</code> and <code>animate</code>).</p>
<p>Time slots form a back-to-back chain of things to do. There are two here but you can have as many as you like. If you wanted to add another animated value - say you wanted to fade the graphic in by altering its material's alpha property - then you would add another layer. The two layers would then be squashed together automatically to produce the end result.</p>
<p>In this animation, we have one layer that initially waits 2 seconds. Then over the next 5 seconds, it calculates a points position diagonally (lerp means linear interpolation) from (0, 0) to (100, 100), and finally moves a graphic to that position. All of this is performed using an 'ease-in-out' function that accelerates the movement up initially and slows it down towards the end.</p>
<p>The function inside the <code>animate</code> block is built up using <code>SignalFunction</code>s (see below) to describe the value transformation that results in the animated movement. There are lots of helpful signal functions available on the <code>SignalFunction</code> companion object for you to make use of.</p>
<blockquote>
<p>Timelines do now know that they are for animation, and can 'animate' anything at all. We just need to change our idea of animation from something like 'moving a picture' to 'producing a value over time following a series of transformations'.</p>
</blockquote>
<p>To render our timeline in our scene, we can ask it to produce it's result like this:</p>
<pre><code class="hljs css language-scala">tl.at(context.running)(myGraphic).toBatch
</code></pre>
<p>This supplies the timeline with the running time and the graphic to animate, and then it converts that into a <code>Batch</code> ready to be inserted into the scene somewhere. Without the conversion to a batch, the timeline would produce an optional value.</p>
<h3><a class="anchor" aria-hidden="true" id="signals--signal-functions"></a><a href="#signals--signal-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Signals &amp; Signal Functions</h3>
<p>Signals in Indigo are pretty simplistic as Signal implementations go, and yet are extremely useful.</p>
<p>As a brief introduction to <code>Signal</code>s, a signal is a value of type: <code>t: Seconds -&gt; A</code> where <code>t</code> is the current time and <code>A</code> is <em>some value of <code>A</code> to produce based on a time <code>t</code></em>.</p>
Expand Down Expand Up @@ -179,6 +210,11 @@ <h3><a class="anchor" aria-hidden="true" id="signals--signal-functions"></a><a h
<li>Parallel running the angle through the <code>xPos</code> and <code>yPos</code> <code>SignalFunction</code>s to get the <code>x</code> and <code>y</code> in a range of -1 to +1.</li>
<li>Piping the xy through the <code>distance</code> <code>SignalFuction</code> to shift the coordinates out the desired range.</li>
</ol>
<h3><a class="anchor" aria-hidden="true" id="hand-crafted-animation-code"></a><a href="#hand-crafted-animation-code" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hand crafted animation code</h3>
<p>It is entirely reasonable to just do the animation yourself - you're a capable programmer after all! How hard can it be to make something move across the screen?</p>
<p>The main gotcha to be aware of with this kind of programming, is that the amount of time that passes between frames is not consistent. In other words, you can't add <code>1</code> to a characters <code>x</code> position and expect it to move smoothly across the screen.</p>
<p>All movement must therefore be described in terms of the amount of time that has passed, and there are a few helpful functions on the <code>GameTime</code> instance you are supplied with to help you do that. The typical approach is to work out how many 'units per second' your animated thing should run at, and multiply that by the time delta provided in the <code>FrameContext</code>.</p>
<p>Sprite and Clip based animations and Signals already have time either taken care of or factored into the equation for you in some way or other.</p>
<script type="text/javascript" src="animation.md.js" defer></script>
<script type="text/javascript" src="mdoc.js" defer></script>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/gameloop/outcome"><span class="arrow-prev">← </span><span>Outcome Type</span></a><a class="docs-next button" href="/docs/presentation/audio"><span>Audio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#timeline-animations">Timeline Animations</a><ul class="toc-headings"><li><a href="#registering-animations-for-sprites">Registering animations (for <code>Sprite</code>s)</a></li><li><a href="#structure">Structure</a></li></ul></li><li><a href="#procedural-animations">Procedural Animations</a><ul class="toc-headings"><li><a href="#hand-crafted-code">Hand crafted code</a></li><li><a href="#signals--signal-functions">Signals &amp; Signal Functions</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/indigo_logo.svg" alt="Indigo" width="66" height="58"/></a><div><h5>Getting Started</h5><a href="/docs/en/quickstart/setup-and-configuration">Setup &amp; Configuration Guide</a><a href="/docs/en/quickstart/hello-indigo">&quot;Hello, Indigo!&quot; Tutorial</a><a href="/docs/en/quickstart/examples">Links to examples</a><a href="/docs/en/quickstart/project-templates">Project templates</a></div><div><h5>Community</h5><a href="https://discord.gg/b5CD47g">Discord</a><a href="https://github.com/PurpleKingdomGames/indigo/discussions">GitHub Discussons</a><a href="https://twitter.com/indigoengine" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>Sponsor us!</h5><a href="https://github.com/sponsors/PurpleKingdomGames">GitHub Sponsors</a><a href="https://www.patreon.com/indigoengine">Patreon</a></div></section></footer></div></body></html>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/gameloop/outcome"><span class="arrow-prev">← </span><span>Outcome Type</span></a><a class="docs-next button" href="/docs/presentation/audio"><span>Audio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#keyframe-animations">Keyframe Animations</a><ul class="toc-headings"><li><a href="#registering-animations-for-sprites">Registering animations (for <code>Sprite</code>s)</a></li><li><a href="#structure">Structure</a></li></ul></li><li><a href="#procedural-animations">Procedural Animations</a><ul class="toc-headings"><li><a href="#timeline-animations">Timeline Animations</a></li><li><a href="#signals--signal-functions">Signals &amp; Signal Functions</a></li><li><a href="#hand-crafted-animation-code">Hand crafted animation code</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/indigo_logo.svg" alt="Indigo" width="66" height="58"/></a><div><h5>Getting Started</h5><a href="/docs/en/quickstart/setup-and-configuration">Setup &amp; Configuration Guide</a><a href="/docs/en/quickstart/hello-indigo">&quot;Hello, Indigo!&quot; Tutorial</a><a href="/docs/en/quickstart/examples">Links to examples</a><a href="/docs/en/quickstart/project-templates">Project templates</a></div><div><h5>Community</h5><a href="https://discord.gg/b5CD47g">Discord</a><a href="https://github.com/PurpleKingdomGames/indigo/discussions">GitHub Discussons</a><a href="https://twitter.com/indigoengine" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>Sponsor us!</h5><a href="https://github.com/sponsors/PurpleKingdomGames">GitHub Sponsors</a><a href="https://www.patreon.com/indigoengine">Patreon</a></div></section></footer></div></body></html>
Loading

0 comments on commit f369f25

Please sign in to comment.