Create a new WPF/SkiaSharp-based AnimationEditor embedded in FRB

[vchelaru]

The current AnimatoinEditor is a mixture of Winforms and WPF along with XNA (not MonoGame). Due to its use of XNA content projects, this requires Visual Studio 2019 along with the XNA runtimes for enduser.

By moving to Skia, no runtimes are needed. This migration also opens the door for additional improvements, such as WPF -> Avalonia for a standalone cross platform app.

For simplicity, the next version of the AnimationEditor is embedded in the FRB editor. This process has already started.

To see it in action, you can select a .achx file and see a tab in the center window.

The code for this plugin lives in the OfficialPlugins/AnimationChainPlugin

Currently the AnimationChainPlugin is a read-only display of AnimationChains. It can be expanded to add functionality to match the AnimationEditor.

• Bottom window which will preview the selected AnimationChain or AnimationFrame. This should have a splitter which can be resized.
• Add middle mouse button hold to pan in bottom window
• Add middle mouse button mouse wheel to zoom in bottom window
• Zooming the window with mouse wheel in the top should not also zoom the window in the bottom
• Add scroll bars to top window to match the size of the current zoom and texture size plus an extra padding amount
• Add ability to edit AnimationFrames using the property grid that appears when the frame is selected- changing a property such as its duration should save the .achx
  • FlipHorizontal
  • FlipVertical
  • FrameLength (seconds)
  • Texture (string, but should prob use the file selection UI)
  • X
  • Y
  • Width
  • Height
  • RelativeX
  • RelativeY
• Add texture coordinate editing support on selected frame
• If an AnimationFrame is flipped horizontally or vertically, show the flip in the "bottom" preview window. Same with the entire animation.
• Display shape sunder the animation frame in the tree view
• Display shapes in the bottom window when the animation is playing
• Display shape in the bottom window for the selected frame
• When selecting shapes, allow editing/saving.
• Have a "Show Guides" checkbox which will show the origin axes (X and Y) - see AnimationEditor for example

[vchelaru]

Information about scrolling

Currently the top window (which shows the entire texture and outlines the animation or current frame) does not allow any scrolling except with the middle-mouse-button. This is problematic for users who are using the tool on a laptop without a mouse.

To address this problem, the top window should have scroll bars. Normally in WPF you can add a ScrollView which will automatically create scroll bars which can scroll the contents and which will respond to the size of the contents relative to the size of the ScrollView.

Unfortunately this won't work here because we are using a Skia canvas which does not have a size that is reported to WPF.

Therefore, we need to create 2 scroll bars and manually adjust their properties such that they match what the user might see.

The current AnimationEditor application shows exactly how this should behave, but I will call out some of the expected functionality:

The scroll bars should control the camera position inside the Skia canvas. If the user grabs the scroll bar, it should scroll the view.

The scroll bars should allow the user to scroll to the edge of the view, plus an extra 50% of the view in all directions. For example if I scroll to the top-right of the image I can see 50% view size border around the image.

If the user pans or zooms in and out with the middle mouse button, then the scroll bars should adjust in response to this change.

Resizing the view should change the scroll bars to match the new visible area.

Note that since you will always be able to scroll to see 50% on either side of the sprite, the scroll bars will effectively always be visible and will always allow some scrolling. In other words, if you can see 50% above and 50% below, that accounts for 100% of the view size. Therefore, the size of the sprite itself will add to that, increasing the scrollable size to be greater than 100% of the view.

The ScrollBar object in WPF mimics the ScrollBar in FRB.Forms. I often found the WPF documentation to be a little confusing, so if you want you can review the FRB scroll bar docs to see how the different properties work:

[vchelaru]

More features:

• Show the selected Animation's frames in the top window
• Allow CTRL+C, CTRL+V to copy/paste animation frames
• Allow CTRL+C, CTRL+V to copy/paste animation chains
• Allow middle-mouse-button scrolling outside of the window - see how we did this with the left/right slide to change value on the property grid