I'm working on a Python/Pygame runtime.

terrymisu

Hi Nate,

My plan was to call the project spine-python (for instance, on Github), but I was going to call the pygame wrapper pyguts with the idea that other graphical front-ends for the spine-python runtime can be distinguished easier.

So users of python-spine with pygame who want to install the runtime would know they can:

easy_install/pip install pyguts

for the PyGame version of the runtime.

Python allows us to do:

import pyguts as spine

So any future frontends would

import foo as spine

as well, and all they really have to do is make a copy of the module, change its name, and modify the blitting/texture handling code, and any code other people have written will Just Work™.

Are you ok with this approach?

terrymisu

We might be able to separate this into two modules so that there aren't dissimilar copies of the spine runtime embedded in different toolkits.

Right now I've got pyguts/spine, but I can pull that out and we can call it "python-spine". So I'd have pyguts import python-spine inside of itself.

That's probably a better solution.

I'll still need the pyguts module for PyGame, though, so that'll work. 🙂

Thoughts?

Nate

terrymisu ：
Right now I've got pyguts/spine, but I can pull that out and we can call it "python-spine". So I'd have pyguts import python-spine inside of itself.

That sounds good.

terrymisu

Awesome... I'll do that then.

terrymisu

Ok, I have the Animation and timeline stuff done, but I'm running into some problems.

I have no idea how to properly draw a skeleton.

It feels like I'm close to having this working... but I'm confused about how things are bolted together and which set of coordinates I should be using to draw with.

Here's the code I'm using in my main application:

    

    skeleton.flipX = False
    skeleton.flipY = False
    skeleton.setToBindPose()
    skeleton.getRootBone().x = 200.0
    skeleton.getRootBone().y = 420.0
    skeleton.updateWorldTransform()

deltaClock = pygame.time.Clock()
animationTime = 0.0

while True:
    deltaClock.tick_busy_loop(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            sys.exit()
    screen.fill((0,0,0))

    animationTime += deltaClock.get_time()

    animation.apply(skeleton=skeleton,
                    time=animationTime,
                    loop=True)
    skeleton.updateWorldTransform()
    skeleton.draw(screen, 0)
    pygame.display.flip()

And here's the code I'm using in my skeleton.draw() routine:

        

    def draw(self, screen, states):
        for slot in self.slots:
            if slot.attachment:
                slot.attachment.draw(slot)
                screen.blit(slot.attachment.texture, (slot.attachment.u2, slot.attachment.v2))

I know that I still need to apply rotation and scaling, but Spineboy's head isn't even landing in the right spot, so I feel like I'm doing something very wrong.

Thanks!

Nate

It won't work right until you get everything just perfect. 🙂 It can be a pain.

Are your coordinates y-up or y-down? IIRC, libgdx is y-up, Corona is y-down.

The u and v are texture coordinates, I can't tell but maybe you are using them as vertex coordinates?

You need to draw the slot's image at the bone's (worldX, worldY) + (the image's attachment offset rotated by the bone's world rotation matrix). See here:
https://github.com/EsotericSoftware/spi ... .java#L132
Also see updateOffset(), same file. The 4 vertices of the image are precalculated so they only have to be rotated.

If you can only draw rectangles and not quads then you can look at how the Corona runtime draws. Note that you should not use non-uniform scaling (meaning x and y are scaled different amounts) in Spine if you can only draw rectangles. To see why, attach an image to a bone, rotated 45 degrees relative to the bone, then scale the bone non-uniformly and notice how the image becomes a diamond shape.

terrymisu

The pygame coordinates are y-down (top left of the screen is 0,0), and I think it can only draw rectangles.

I tried the Corona code, but no luck yet. I'm getting closer... the up and down motion is correct. I was seeing that when just using bone.worldX/bone.worldY, too.

He's "walking" but his body parts are all in the wrong places.

Any other suggestions for debugging this?

Loading Image

Nate

Mmm, not really. It's one of the trickiest parts. It's hard because it's either completely FUBAR or it works correctly. You'll get some nice satisfaction when it works. 🙂 Good luck!

Søren

If you can show debug of where the root position is it might be easier. Are you taking relative position into account here ?

terrymisu

Shiu ：
If you can show debug of where the root position is it might be easier. Are you taking relative position into account here ?

So, when I change the root bone position, my images do get drawn in a different spot with the same messed up positioning, so that would seem to indicate that the root bone is being referred to in some manner.

When you say relative position, what exactly do you mean? What relative to what? 😉

I'm a little out of my depth as far as understanding exactly what needs to happen. Nate's explanation was a good one, so I think there are still a few things to try.

I noticed some debug code in Corona for helping figure out bone placements, so I'll code that up in Python and see what it gives me.

terrymisu

Nate ：
Mmm, not really. It's one of the trickiest parts. It's hard because it's either completely FUBAR or it works correctly. You'll get some nice satisfaction when it works. 🙂 Good luck!

Hah yeah, well the image placement is obviously jacked up, but what I meant was that when the animation runs, the parts all bob up and down in a manner that definitely looks like the walk animation. They're just all in the wrong spot.

Thanks for the encouragement, and all of your help so far!

evs

@[已注销]

Are your graphics anchor points set to the centre in Python?

I ask because when I ported the Corona Lua to Gideros my graphics were out
of kilter (and bobbing) until I set the anchor points correctly

cheers

evs

Søren

I think you would find things a little easier to debug if you added a debug method to draw the bones, just indicate where the pivot is with a circle and the bone with a line. Then you'll know if it's the bones or the images that are causing the problem.

terrymisu

evs ：
@[已注销]

Are your graphics anchor points set to the centre in Python?

I ask because when I ported the Corona Lua to Gideros my graphics were out
of kilter (and bobbing) until I set the anchor points correctly

cheers

evs

No, they're not. Pygame draws surfaces at (0, 0) by default.

Sounds like that may be the culprit... I'll give it a shot. Thanks!

What exactly did you have to do to fix this for Gideros?

terrymisu

Shiu ：
I think you would find things a little easier to debug if you added a debug method to draw the bones, just indicate where the pivot is with a circle and the bone with a line. Then you'll know if it's the bones or the images that are causing the problem.

Does my debug look correct? I can't quite tell, but it looks as though the images are off?

The top most circles look like the proper head/eye placement?

Thoughts?

Loading Image

terrymisu

Let's try this again... the previous image was with flipX = False, flipY = False, and the root bone at 0, -300.

Here's one with flipY = True and the root bone at 0, 0:

Loading Image

terrymisu

Hmmm... Looking at the Corona runtime some more, I think that I'm completely missing some steps.

I'm not rotating or scaling in pygame. I guess I got confused about that because the corona runtime apparently handles it internally with the image.x, image.y, image.scaleX, image.scaleY, and image.rotation variables on the texture?

Also, do I need to skeleton.flipY, or skeleton.flipX, considering that pygame is rendering from 0, 0 as the top-left corner? Seems like I need to set flipY?

Here's my debug code, which I'm not sure is correct:

                debug = True

            if debug:
                for bone in self.bones:
                    lineX = bone.worldX
                    lineY = bone.worldY
                    lineRotation = -bone.worldRotation

                    if self.flipX:
                        lineXScale = -1
                        lineRotation = -lineRotation
                    else:
                        boneXScale = 1
                    if self.flipY:
                        lineYScale = -1
                        lineRotation = -lineRotation
                    else:
                        boneYScale = 1

                    lineColor = pygame.Color(255, 0, 0, 0)

                    pygame.draw.line(screen, lineColor, (0, 0),  (x, y), 1)

                    circleX = int(bone.worldX)
                    circleY = int(-bone.worldY)
                    circleColor = (0, 255, 0, 0)
                    pygame.draw.circle(screen, circleColor, (circleX, circleY), 5, 1)

Nate

Your lines should not all come from 0,0. The lines show where the bones are. It should look like this:
Loading Image
I think it makes sense to draw your lines before working about the images.

evs

@[已注销]

In Gideros it was just:

image:setAnchorPoint(0.5, 0.5)

I suppose in Python would be something like:

anchorX = slot.attachment.u2 - slot.attachment.width / 2
anchorY = slot.attachment.v2 - slot.attachment.height / 2

screen.blit(slot.attachment.texture, (anchorX, anchorY))

cheers

evs

terrymisu

So, I got a little frustrated with the bone/slot/rotation stuff, and I went ahead and got the color processing working. I had a few things that I missed, and I wasn't properly extracting the colors from the animation file.

Now I'm back to working on Shiu's suggestion of getting the slot/bone stuff working first, however, I think I've got everything right but the rotation (could be wrong, but it's worth asking, right?).

So, two questions:

Does this skeleton look right, sans rotation? I noticed that his eyes and head are actually properly textured... and when the eyes blink, they're in the correct spot. Everything else also looks like it's in the proper location, including the root bone, legs, arms, etc... they're just not rotated properly?
Any ideas why the hair is pink instead of orange, or whatever? Thoughts on debugging this?

His torso is missing here, but it shows up sometimes. I think someone else mentioned both the hair color and the torso issue in a previous post.

Loading Image

[edit]

Here's an image with the torso, for posterity:

Loading Image

The root bone is at 320x240.