LogoLogo
一般アカウントプレイヤーオーナークリエイターThe Sandbox ウェブサイト
クリエイターページ
クリエイターページ
  • 🎆クリエイター向けコンテンツのご紹介
  • 🟦制作の基本
    • 🟦LAND の使用方法とサイズ
    • 🟦アセットと装備品
    • 🟦アバターとキャラクター
    • 🟦外観とイメージ
    • 🟦ロジックの基本
    • ❓ゲームプレイに関する質問
    • ❓アセットに関する質問
  • 🪙収益化
  • Game Maker
    • ✨体験の制作
    • 🔰初心者向けガイド
    • 📖ドキュメント
      • Game Maker ホーム画面
      • 体験の管理
      • コントロールとショートカット
      • 制作に関するメニュー
        • トップバー
          • メニューバー
          • Objective
          • Player
          • Gameplay
          • Debug
        • サイドバー
          • Hierarchy
          • Preset
        • ライブラリとクイックアクセスバー
        • グリッドシステムとスナップツール
        • プロパティパネル
      • 🔹ブロックの使い方
      • 🔹アセットとオブジェクトの使い方
        • ビヘイビアとコンポーネントのパラメーター
        • Tags(タグ)
        • Messages(メッセージ)
      • 🔹Behaviour(ビヘイビア)
        • Actor Property Switcher
        • Advanced Platform
        • Animated Decoration
        • Asker
        • Asset Spawner
        • Basic Platform
        • Bird
        • Citizen
        • Crowd Event
        • Door
        • Farmer
        • Healer
        • Melee Enemy
        • Message Broadcaster
        • Multi
        • Post Process Effects
        • Predator
        • Prey
        • Projectile
        • Replace Asset
        • Spawn Point と Avatar's Feature
        • Soldier
        • Timed Events
        • Void
        • Weather Switcher
      • 🔹Components(コンポーネント)
        • Avatar Checkpoint
        • Avatar Teleport
        • Button
        • Climbable
        • Collectable
        • Defeat
        • Drop
        • Health
        • Image Display
        • Indicator
        • Light
        • NFT Details Display
        • NFT Image Display
        • NFT Sensor
        • Pickable
        • Plant
        • Play Sound
        • Power Up
        • Rarity VFX
        • Raycast
        • Slide
        • Speaker
        • Switch
        • Toggle
        • Trigger Volume
        • Victory
        • Visual FX
      • 🔹ゲームルール
        • ルールタイプ
        • シングルプレイヤーとマルチプレイヤーのロジック
      • 📋クオリティガイドライン
        • Text Formatting
        • 最適化
        • テスト
        • プレイアビリティ
      • パッチノート
        • Game Maker 0.9 (Active)
        • Game Maker 0.8 (Active)
        • 0.7
        • 0.5 [10/02/2021]
        • 0.4 [12/23/2020]
      • 🔩テンプレート
    • 📑クリエイティブガイド
      • 📗ゲームルールガイド
        • 🅿️Point Race
        • 🅿️Collect Points(ポイント集め)
        • 🅿️Time Trial(タイムトライアル)
        • 🅿️Combo(コンボ)
        • 🅿️Hunger(ハンガー)
        • 🅿️Poison(ポイズン)
        • 🅿️Shop(ショップ)
        • シングルプレイヤーとマルチプレイヤーのロジック
      • ⚙️ロジックガイド
        • Climbing
        • Doors & Chests
        • Dialogue Strings
        • Quiz
        • Collectibles
        • Quests
          • Quest System & Indicators
          • Dialogue States for Quests
        • Platforms
          • Button & Platform
        • Victory & Defeat
        • Miscellaneous
        • NFT Inspect
        • Fighting
        • Respawn
      • 🏞️体験ガイド
        • Tower Defense
        • Horror/Backrooms
        • Parkour & Platformers
        • Resource Management
          • Cooking Simulator
        • Survival
        • Action / Adventure
        • Night Club & Sound
        • Virtual Home & Architecture
        • NFT Gallery / In-Game Shop
        • Puzzle Games
        • Social Hubs
        • Simulation
      • 🎲体験デザインテクニック
        • ストーリーデザイン
          • Worldbuilding
          • Storyboard
          • Dialogue
        • アートデザイン
          • Experience Art Concept
          • Asset Curation
          • Blockout Aesthetics
          • Detailing /Dressing
        • 3D 空間レイアウト
          • Rough Base Map
          • Greyboxing / Blockout
        • ゲームデザイン
          • 難易度の設定
          • リスクと報酬
          • Game Loops & Decisions
    • 🎬ゲーム制作ガイド
      • 🟥コンセプト
      • 🟧ブロックアウト
      • 🟨ロジック
      • 🟩アート
      • 🟦QA
      • 🟪ポリッシュ
      • ⬜マーケティング
    • 🧰体験の公開
      • 体験マネージャー
        • Experience Analytics
        • 🧰体験ページ
          • Content Guide
          • Marketing
          • Create an Experience Trailer
          • Player Engagement
        • マップロケーション
        • アセットレビュー
        • GM Compatibility Check
        • アクセス制限
      • Collaborating With Third Parties
      • ❓体験の公開に関する質問
    • 🕘変更履歴
      • Game Maker 0.11
        • 0.11 アップグレードガイド
    • ❓Game Maker に関する質問
  • VoxEdit
    • ✨アセットの制作
    • 🔰初心者向けガイド
    • 📖ドキュメント
      • Navigate VoxEdit Home
      • Controls & Shortcuts
      • 🔹ブロックエディタ
        • ブロックエディタ - メニュー
        • Block Editor Dropdown Menu
        • Block Editor Top Bar
        • Block Editor Tools Menu
        • Block Editor Viewport
        • Block Editor Panels
      • 🔹モデラー
        • Modeler Menus
        • Modeler Dropdown Menu
        • Modeler Top Bar
        • Modeler Tools Menu
        • Modeler Viewport
        • Modeler Panels
      • 🔹アニメーター
        • Animator Menus
        • Animator Dropdown Menu
        • Animator Top Bar
        • Rig: Animator Skeleton & Viewport
        • Motion: Animator Timeline Panel
        • Animator Library & Inspector Panels
      • 🔹テンプレート
      • 📋クオリティガイドライン
        • Asset Types & Collisions
        • Asset Scale
        • Node Efficiency
        • Pivot Point & Alignment
        • アニメーション
        • ビジュアルクオリティ
        • Asset Name & Description
        • Manage Files & Folders
    • 📑クリエイティブガイド
      • 🧍アセットガイド
        • Structures & Landmarks
          • Basic Building: No Entry
          • Animated Building: No Entry
          • Unanimated Building: Player Entry
          • ランドマーク
          • 建物の正面
          • Structure Component Parts
          • Modular Architecture
        • Humanoids & Animals
        • Vehicles
        • 装備品
        • Art: Statues, Paintings
          • Animated Art Screens
          • Statues
          • キネティックアート彫刻
          • Paintings
          • パフォーマンスアート
        • Furniture
        • Platforms
        • Doors, Gates, and Windows
          • Multi Design Door Asset
        • Chests & Other Animated Interactions
        • Plants, Trees
        • Objects, Machines
        • Signs & Text
        • Obstacles
        • フレームアセット
      • 🎨アートテクニック
        • アートアイデア
        • 3D デザイン
          • 🧹Need to Simplify?
          • ✂️Trim All Volumes
          • 🟢Optimize with Texture
          • 🟢Curved Edges: Blocky Style
          • 🟡Break Down Objects
          • 🟡Create Smooth Angled Lines
          • 🟡Circular Shapes: Cross Technique
        • 色とテクスチャ
          • 🪅Colour Choice & Strategy
          • 🧱Textures & Materials
    • 🧰アセットのワークスペースへのアップロード方法
    • 🌟アセットのミントと販売方法
    • 🕘変更履歴
    • 🔓オープンソースアセット
    • ❓VoxEdit に関する質問
  • クリエイター向けプログラム
    • 🏗️Builders' Challenge
      • ルールと参加条件
      • 賞金の獲得と報酬
      • Builders' Challenge 成功のコツ
      • ❓Builders' Challenge に関する質問
    • ℹ️コンテスト
    • 🏆Game Jam
      • ルールとガイドライン
      • 審査と投票
      • 過去の入賞作品
      • ❓Game Jam に関する質問
    • 🏆VoxEdit コンテスト
      • ルールとガイドライン
      • 審査と投票
      • 過去の入賞作品
      • ❓FAQs: Voxel Art Contests
  • 一般
    • 📚The Sandbox ドキュメント
    • 🔄遊んで、作って、稼ごう!
    • 🗺️マップ
    • 🛒マーケットプレイス
    • 🗣️Discord コミュニティ
    • 🔗SNS、お知らせ、ブログ
    • The Sandbox リンク集
    • 📣FAQ(よくある質問)
    • ❓ヘルプ、お問合せ
GitBook提供
LogoLogo

インフォ

  • Discord
  • SNS、お知らせ、ブログ
  • システム状況

プレイ

  • イベント
  • マップ
  • アバター

制作

  • VoxEdit
  • Game Maker
  • コンテスト

所有

  • SAND
  • LAND
  • トークン

Copyright © The Sandbox. All Rights Reserved.

このページ内
  • Timeline
  • Animation Selector
  • Animation Playback
  • Skeleton Bone
  • Frame Counter
  • Visibility Toggle
  • Bone Animation Lock Toggle
  • New Keyframe Button
  • Keyframe Interpolation Band
  • Interpolation Variations
  • What is the Animation Off-set Function?

役に立ちましたか?

  1. VoxEdit
  2. ドキュメント
  3. アニメーター

Motion: Animator Timeline Panel

前へRig: Animator Skeleton & Viewport次へAnimator Library & Inspector Panels

役に立ちましたか?

In the timeline, we can begin creating an animation by choosing one or many nodes and recording a keyframe.

These keyframes record the position and rotation of a node at that specific point on the timeline, and then, if there is a difference in positioning between two keyframes, computes the motion from one keyframe to another.

Each tick mark along the timeline is a frame and every 24 frames in one second. It's setting this motion over time, that creates movement and forms the basis of our animation.

The first frame is always a keyframe, this is the starting position for your objects.

Moving the play-head to a new frame, you can create a new keyframe by pressing the diamond button or simply moving an object.

Timeline

VoxEdit supports animations up to 20 seconds in length. Each second is 24 frames: “0” for the first frame, and the 24th frame becomes “1:00” (one second, zero frames).

The last available frame is “19:23” (nineteen seconds and twenty-three frames). The timecode display is all the way to the left of the Playback controls.

The timeline is divided into three strips - from top to bottom: Zoom Area, Loops Area, and Timeline Ruler. The timeline ruler displays a vertical dash for each frame (depending on how close you zoom in) and a number for each second.

Clicking on the ruler will jump the yellow play-head to the closest frame instantly.

You can also drag the play-head left and right to “scrub” through the timeline manually. Dragging past the edge of the timeline’s visible area will cause the timeline to scroll towards your cursor.

You can easily control how much of the timeline is visible with the Zoom Area strip.

The left handle sets the starting frame and the right handle sets the ending frame for what’s visible.

You can drag them to the extreme left and right positions to display all 20 seconds at once.

When you drag the handles closer together, you will zoom into the timeline to see individual frames better.

Dragging the area between the handles will scroll the view earlier or later in the timeline.

Clicking the diagonal arrow button will automatically zoom to fit all the keyframes in your animation.

The Loop Area strip is used to select a group of frames to replay without playing the whole animation.

You can use this to focus on small portions of longer animations.

Drag the handles to the start and end frames of the area you want to loop, and then activate it with the eyeball icon.

Playback will automatically loop at the last keyframe if the loop area ends after the animation completes.

Animation Selector

By default, your rig file comes with an “idle.vxa” animation file.

The VXR (rig file) stores the names of all the nodes, their hierarchy, and the VXMs (model files) attached to them.

The VXA stores the transformations (position and rotation) of each node on the first frame and any keyframes after that.

Deleting the VXA files out of your project folder will make all the nodes reset to position 0,0,0 the next time you load your asset!

Note that the Game Maker does not currently play idle.vxa animations in a loop.

If you want your default animation to repeat, you need to rename it “Idle 01” (capitalization and space are necessary).

Clicking on the three dots next to an animations name will show the menu to rename, duplicate, set as default and export animation.

The button at the bottom of this section will add a new animation, with all nodes set in the current position as the first frame.

This is helpful for creating animations that start where the last one left off, like a door closing animation from where the open stopped, or chain attack combos.

If you need more horizontal space to display the timeline, the animation selector can be collapsed with the right-facing triangle.

Animation Playback

While animating, it’s important to check how your animation looks at each stage of the process, so you can make corrections as you go.

With these controls, you will be able to play the current animation, either endlessly in a loop after pressing “play”, or frame by frame with the “next” button.

The timestamp on the far-left, displays the current frame, even if the play-head is not currently visible.

The outer arrows will jump you all the way to the first or last keyframe in your whole animation.

The inner arrows will jump to the previous or next keyframe.

And the middle button will play or pause the current animation.

When selecting a new animation, you will need to press play or move the play-head to update the 3D view.

You can even use the position held from the previous animation to copy translations to a key in the new animation timeline by clicking with the move or rotate tool!

Skeleton Bone

All of the bones in the skeleton will appear in the animation window one after the other ordered vertically.

Frame Counter

This indicated the current frame the animation is in.

The default markers for frames are set to 24 frames per second (24 fps), so at 01:00 seconds the counter will read as (24).

Visibility Toggle

To the far left of the Timeline, next to the Node name, is an 'eye' icon you can click that will allow you to hide the visibility of a node and its linked model.

Don't forget the invisible it is still part of the rig and can still be keyframed and exported.

Bone Animation Lock Toggle

This allows you to lock the node's animation frames. This is useful when you wish to prevent accidental modification of the finished animation of a node.

New Keyframe Button

When moving a bone, or node, in the viewport, you will automatically create a new frame, however, if you wish to manually create a new frame, you can do so by either clicking the diamond icon to add a Keyframe to all nodes in the animation or by clicking the three dots to the right of the node name and selecting '+ Create New Keyframe' from the drop-down menu.

Keyframe Interpolation Band

You have different options when it comes to choosing how the animation will play.

When there are two consecutive keyframes (A and B) with different positions (Keyframe A is on the left, and Keyframe B is on the right) how the node moves position along the path from A to B needs to be calculated, and this is referred to as interpolation.

This interpolation is represented on the Timeline by a square with a line through it, halfway between the two keyframes.

Simply by clicking the bar between the keyframes you are given some options. Linear, Ease in, Ease out, Long rotation and others.

If two consecutive keyframes are exactly the same, they won’t have interpolation and won't have the square with the line through it in between them.

Interpolation Variations

Last but not least, you can right-click on the interpolation band between two keyframes to see the different interpolation types.

These are represented by a range of lines from straight to stepped and curved, and each variation changes the way in which the location and movement of a node are calculated as it moves from one keyframe to the next.

A straight line will average out the position between two keyframes to produce an even consistent movement, whereas a curved line may move slower at the start and end of the movement, but accelerate through the middle.

Using and understanding these variations is important for creating different kinds of motion, and can mean the difference between an organic (animal or human) and mechanical (robot, machine) movement.

What is the Animation Off-set Function?

You are able to select an animation and then change the position of any of the models for that animations. Which will then translate the new position to all the keyframes. This is useful so artists don't need to manually change the position of every single keyframe.

Animation off-set only affects the selected animation, shown in the Timeline Panel.

If changes to your entity require moving a model in other animations, you WILL need to open each animation and edit with the animation off-set function.

You can find the animation offset function icon in the timeline panel. Image is shown below. It will be auto toggled into the "Off" state and you will be able to view that it is toggled "On" when the icon is highlighted.

📖
🔹

The animation off-set function is a time saving tool that allows you to change the position of a model in an animation without needing to manually modify every single motion keyframe individually.

Toggling the animation off-set button on enters a mode where you can adjust a model's position within an animation, which will translate to adjust all keyframes.

'Scubbing' through the Timeline
Changing the 'Zoom Area' in the Timeline.
Setting the 'Loop Area' in the Timeline.