• Editor

  • Centered import?

    英语

How would I go about getting my spine import to be at the root center? I just feel like wrong about dragging my imports to the root and hoping it's centered.

    Related Discussions

    Hyperly If you use PhotoshopToSpine to export your images, you can set the skeleton's origin by changing the ruler origin in Photoshop. It is demonstrated in the following video from 3:04 to 3:53:

    If the image editor you are using is not Photoshop, unfortunately it may not allow you to set the skeleton's origin before importing images into Spine. In this case, please adjust the position of the root bone after importing.

        Misaki
        I am using Affinity Designer 2 which has a Spine export option built into it. However, I also have Photoshop and don't mind dragging my image onto there if it means being able to perfectly center it.

        Epic Edit:

        Affinity Designer has this option too yay! And it works the same exact way it does in the video. Thank you for the help. I think this should be put in documentation somewhere though.

            Hyperly I see, I have Affinity Photo and as far as I know it should not be possible to adjust the origin position, perhaps Affinity Designer is as well. Using Photoshop allows you to determine the origin as you like, so it might be a good idea to export your image using Photoshop to avoid the hassle of repositioning it on Spine.

            For your information, the export function for Spine in Affinity Photo and Affinity Designer is not maintained by us, so if you have any improvement requests, please send them to the official support contact of Affinity.

                Misaki
                I have disappointingly discovered that despite being able to Set Ruler Origin in Affinity Designer, the root will still be at the bottom left in spine. I would like to do as much as I can in as few programs as possible.

                I propose a working solution for anyone using Affinity Designer/Photo that is struggling to center their imported spines:

                1. If you haven't already, click the artboard tool and create an artboard with Size: Document then click Insert Artboard. Affinity won't allow you to Export a Spine json without an Artboard.
                2. Enable snapping in View > Snapping. Set a guide on your project. You can easily generate a vertical guide by clicking View > Guides and under Vertical Guides click the add guide button
                3. Select your drawing, layers, etc. and center it at the vertical line. The Y position of your drawing can be wherever.
                4. Click View > Show Rulers and drag from the top left, where the two rulers intersect click and drag towards the bottom left of your canvas or art board. Now your canvas' 0x 0y point should be at the bottom left.
                5. Create a shape, this will act as your temporary floor. Keep this shape touching the bottom of the canvas. Drag the shape towards the vertical guide and have the left most part of the shape touch the guide do not center the shape at the guide 😡 (this is because the root of the shape is at the bottom left, not its center)
                6. Group or layer your drawing and duplicate it. Hide the original, then right click on the duplicate and click Rasterize.
                7. Scale the shape up until the top of it snaps and touches the bottom of your object. Ex.)
                8. If you don't have the transform window opened click Window > Transform. Once you click on your shape the transform window should display its X and Y coordinates, relative to the 0x 0y point of your canvas.
                9. The X coordinate is the bottom left corner of the shape, and the Y coordinate is the top most part of the shape. Where the floor touches the sprite. Write down these values somewhere.
                10. Hide the rasterized duplicate, and enable your original drawing again. If you grouped it ungroup it or it won't export properly. Export your drawing to Spine like normal (there's plenty of tutorials).
                11. In your new Spine project, click on the root then click on Bones and Images to prevent it from moving the sprite(s). Now move in the Translate panel input the X and Y values you saved. (Note the Y value will likely be positive not negative).
                12. Untick Bones and Images then while still having the root selected, change the translate values back to 0, 0.

                this is my 3rd day using Spine sorry if i got something wrong

                y'know a cool solution would be to just update spine to have a button that lets you move the root to the bottom center of a selection, middle, top, etc.

                    Hyperly Thank you so much for sharing the detailed tutorial! Indeed, it seems helpful to put the center position marker on Affinity Designer/Photo.