diff --git a/src/content/docs/usage/Animating/assets/annotated-timeline.png b/src/content/docs/usage/Animating/assets/annotated-timeline.png new file mode 100644 index 0000000..ef5ffb3 Binary files /dev/null and b/src/content/docs/usage/Animating/assets/annotated-timeline.png differ diff --git a/src/content/docs/usage/Animating/getting-started.mdx b/src/content/docs/usage/Animating/getting-started.mdx index 53581d0..2451c90 100644 --- a/src/content/docs/usage/Animating/getting-started.mdx +++ b/src/content/docs/usage/Animating/getting-started.mdx @@ -1,6 +1,6 @@ --- title: Getting Started with Animations -description: Learn animation basics in PixiEditor. +description: Learn the basics of animation in PixiEditor and explore two main approaches to animating your projects sidebar: order: 1 @@ -9,76 +9,96 @@ sidebar: variant: tip --- -import timelineImg from 'assets/timeline.png'; +import timelineImg from 'assets/annotated-timeline.png'; import { Image } from 'astro:assets'; -PixiEditor offers two main ways to animate your projects: **Frame by Frame** and **Procedurally**. -Both methods can be used together freely. +# Getting started with animations +Welcome to PixiEditor. This guide introduces key animation concepts and walks you through the two main ways you can animate your projects: +- Frame-by-Frame +- Procedural animation. -## Timeline +--- + +## Understanding the timeline + +The timeline is the most important component of animation in PixiEditor. It controls every aspect of your animation flow, including frames, layers, and playback speed. -The timeline is the most important component of animation in PixiEditor. Everyting related to animation is managed there. +You can open the timeline in either of these ways: +- Click the **Timeline** icon on the toolbar at the top of the screen. +- Go to **View**, choose **Open Tab** and then choose **Timeline**. -You can access the timeline by pressing button on top of the screen. +### Timeline interface overview +The following image shows the interface of the timeline. + ![The timeline interface](./img/annotated-timeline.png "The timeline interface") -or by going to `View -> Open Tab -> Timeline` menu. -An image of timeline UI +1. **Frames per second (FPS)** + Controls how fast your animation plays. Higher values produce smoother result but require more frames. + - 60 FPS- Smooth animation (common in games) + - 24 FPS - Industry standard for films -1. **Frames per second setting** - how fast timeline should play the animation. Higher values require more frames for the same amount of time, but produces smoother result. - The usual values are: - - 60 - for smooth animation, usually used in games - - 24 - movie industry standard +2. **Settings** - opens a menu with timeline related-settings. -2. **Settings** - opens a menu with timeline related-settings 3. **Action buttons** -- - Add an empty cel to the currently selected layer -- - Creates a duplicated cel to the currently selected layer. Duplicates the content under active frame. -- - Toggles on/off onion skinning -- - Deletes all selected cels + - **Plus icon** - Adds an empty cel to the selected layer + - **Duplicate icon** - Duplicates the current cel + - **Onion icon** - Toggles onion skinning on/off + - **Trash icon** - Deletes selected cels -4. **Layer** +4. **Layers panel** - From the left to the right: + From left to right: -- - Disable whole animation for layer. -- Image Preview - It displays the layer's **base** image. -- Layer Name -- Collapse button, it squishes whole layer animation row, so it takes minimal space. + - **Eye icon** - Show/hide the layer + - **Image thumbnail** - Displays the layer's base image + - **Layer name** - Name of the layer (e.g., *Slime*) + - **Collapse button** - Minimize the layer to save space -5. **Playback buttons** +5. **Playback controls** -- - Moves the frame cursor back to the edge of the closest cel. -- - Moves the frame cursor back one frame. -- - Plays the animation -- - Moves the frame cursor forward one frame. -- - Moves the frame cursor forward to the edge of the closest cel. -- `00:00.08/00:01.75` - `current time` / `end time` in `mm:ss.ff` format where `mm` - minutes, `ss` - seconds, `ff` - hundredths of a second +- Step start - Moves the frame cursor back to the edge of the closest cel. +- Step Back - Moves the frame cursor back one frame. +- Play- Plays the animation +- Step Forward - Moves the frame cursor forward one frame. +- Step End - Moves the frame cursor forward to the edge of the closest cel. +- **00:00.08 / 00:01.75** – Current time and total time in `mm:ss.ff` format. `mm` for minutes, `ss` for seconds, `ff` for hundredths of a second -6. **Frame Bar** +6. **Frame bar** + This is the top slider that lets you: + - Drag to change the active frame + - Zoom in/out by scrolling over it + - View frame numbers and ticks - The frame bar is the top part of the timeline viewport. It displays frame cursor, frame ticks and frame numbers. It is essentially a slider. You can click and drag to change active frame. You can zoom in our out by scrolling over it. +7. **Cel row** + Displays all cels in a layer. Each cel shows a thumbnail preview and duration. + - Drag the edges to change the cel’s length + - Drag the cel itself to move it along the timeline + +--- -7. **Cel Row** +## Animating projects +PixiEditor supports two main animation methods: - Cel row displays all cels within the layer. One cel consists of a preview image and cel length rectangle (how many frames a cel should occupy) that can be shortened or lengthened by dragging the edges. You can also drag the whole cel to move it around. +### 1. Frame-by-Frame animation -## Frame by Frame Animations +The traditional method of animation. You draw each frame manually to create smooth transitions. -Frame by frame animation is a traditional method of animating. It involves drawing each frame by hand. +> To learn more, check [Frame-by-Frame Animations](/docs/usage/animating/frame-by-frame/). -For more information, check out a [dedicated guide](/docs/usage/animating/frame-by-frame) -## Procedural Animations +### 2. Procedural animations +This method uses operations and parameters to create movement without manually drawing frames. Think of it as giving a set of instructions. For example: *Move to the right by 10 pixels over 1 second.* +With this method, you can animate almost any property within the Node graph. -PixiEditor gives full freedom over animations, meaning you can animate almost any property within the [Node Graph](/docs/usage/node-graph/getting-started-with-node-graph). -It does not involve any manual drawing, unlike frame by frame animations, but is rather a result of combining operations and parameters. +> To learn more, check: +> - [Procedural animation](/docs/usage/animating/procedural/). +> - [Node graph](/docs/usage/node-graph/getting-started-with-node-graph) -Think of it as a set of instructions. -`Move to the right by 10 pixels over 1 second` -For more information, check out a [dedicated guide](/docs/usage/animating/procedural) \ No newline at end of file +:::tip +You can combine both methods for more dynamic results. For example, use frame-by-frame for character movement and procedural animation for background effects. +:::