Learning Kivy #4 – Speeding up jittery animation

Last time we left off trying to make our animation not-so-jittery, and tshirtman @ #kivy on irc.freenode.net graciously refactored my code so it would be more efficient:

This draws a ridiculous amount of barrels and the fact that its using only one Texture in memory for alllll the barrels it runs really quickly! What I was trying to do earlier was making a spot in memory for each and every instance of the barrel picture, this will be much more efficient. Actually, tshirtman @ #kivy irc.freenet.org corrected me:

Just want to correct something, Kivy uses a cache for a lot of things, and textures are one of them. So you wouldn’t get that much duplication, the efficiency is more in the lower number of property uses and updates.

However, I’m still getting that little white jittering… what could it be from?

Learning Kivy #3 – Using textures

So last class we tried to move some widgets around and that was a huge pain in the ass.

Fortunately, tshirtman @ #kivy irc.freenode.net walked me through and helped explain exactly why my animations were funky. Nice guy! It turns out that our child widgets have to reference back to the root x/y so when that changes they also move. Pretty simple stuff.

Today we’re going to try and put some barrels/chests in our world.

Here’s our starting code

So, let’s just try and set a source texture for our rectangle and see what happens:

Hiiiiiiiiiilarious


Oh man, that’s great. Hilarious looking Stretch Armstrong barrel.

Let’s see if Kivy will figure out the size for us if we leave ‘size’ out of our definition… nope doesn’t work! Still looks like a stretch barrel.

Alright so if we set ‘size: 128, 64′ then the barrels are shaped perfectly

Is that a red barrel in your pocket or are you just happy to see me?

But we got some red barrels on our hands and they are supposed to look brown like this

If we go back to the top of our code and look at our Ky script, Rectangle is inside a Canvas that has its color property set to be ’1′ for Red

Let’s just remove Color anyway, we don’t really need it and it’s just a holdover from the Pong example we started from.

For educational purposes though, remember Color is a “canvas context instruction.” I bet that’ll come in handy later, we can probably fade in/out some colors for a cool LSD trip effect or something. Other Context Instructions are: ‘PushMatrix, PopMatrix, Rotate, Translate, Scale, MatrixInstruction.’

With no Color instruction

It vorks!

Wow, that was easy! It’s all starting to make a little bit more sense. Let’s just get rid of that Label too now that we’re done playing with it.

This works pretty good, but when we try to animate the Barrel it stutters/looks jittery. Apparently we should try mipmapping and that might fix our stutter issue:

Spits us out the error ‘kivy.graphics.vertex_instructions.Rectangle’ object has no attribute ‘mipmap’.

Shit!

Maybe we can create an Image, instead of a Rectangle.

Spits us out ‘You can add only graphics Instruction in canvas.’

Hrm, we can’t seem to even make an image that way, there’s no mention of mipmap and when I tried just removing mipmap it still wouldn’t accept image.

Let’s just get rid of canvas, this allows us to make an image. And we have to remove the “self” references from Image or we get an infinite recursion error for some ungodly reason

It draws it in the bottom left of the screen now and accepts “mipmap: True”, but it’s definitely not animating properly. Jittery still.

I’ve been trying a ton of stuff with qua-non and tshirtman, one of the interesting debugging tools we ran into was:

Then press ctrl + e and it brings up an awesome FireBug like debug panel. Press inspect then click on a widget to view information about it.

Another note: Rectangle is an instruction, while Image is not. Too many Images will bog down the program. Read more.

I tried a bunch of stuff I’m leaving out now, but basically you have to add a property to AreaLevel to make it visible to the ky script:

Learning Kivy #2 – Animating

So.

Today we’re going to try and make a 2d world we can walk around in with a barrel or chest… something!

tshirtman @ #kivy on freenode has been telling me to use the Camera/Scatter widgets to get what I want. We were miscommunicating though, don’t confuse the Camera class in Kivy with ones like in FlatRedBall where Camera is the… “viewport” of the user.

Here’s the game plan now:

  1. Make an AreaLevel widget
  2. Create Canvas widget inside AreaLevel
  3. Store a barrel/chest Texture inside the Canvas
  4. Animate some kind of movement

Here’s the whoooole of the starting code from my last messings-around-with-Kivy (stuff from Pong game tutorial), I’ll make modifications to this throughout the post:

First -> Animation

Added this to my imports

Changes my AreaLevel widget

And it works! It moves both my widgets, looks really silly.

It moves my Label and Rectangle — it moves the Label up 100 and the Rectangle right 100? This isn’t the behavior I was expecting… I expected them both to move up and to the right… hrm!

[tshirtman] BabySuperman: the rectangle doesn’t move vertically because you put 0 as y, you need to put something related to AreaLevel, like, self.y

So, it seems I need to learn about self and root in this context:

Hrm… let’s try an experiment.

Let’s change rectangles pos to something like this:

That makes it move UP AND TO THE RIGHT! Thank the sweet Gods of coding for tshirtman. It’s kind of like setting a div to absolute positioning, if you set that Rectangle to be at y=0, then it stays put unless you directly address it. Makes perfect sense now.

Let’s experiment with that Label though, it still isn’t moving quite right. Let’s try to add a reference to root so it moves along that axis just like the Rectangle does now.

With this code, the Label starts normally in the upper left of the screen (center_x: root.width/4) but as soon as we start the animation it pops over to the right side of the screen (right: root.right – 50) and then behaves as we’d expect, it moves up and to the right.

Let’s remove the ‘center_x’ stuff

Now it behaves as expected. I wonder why ‘center_x’ wasn’t referenced in the movement but ‘right’ was? Both had the ‘root’ reference in them that should make it move… but oh! We are referencing: ‘root.width’!!! That doesn’t change when we move the X + 100, Y + 100!

That makes sense!

Learning Kivy #1

Simple layout example taken from Kivy Pong tutorial!

That’s what I got running today in terms of Kivy.

I learned about:

  • Atlas (mapping out multiple textures inside one image file)
  • Texture.get_region(…) (Similar to above)

Todo:

  • Create an “AreaLevel” that you can walk around in
  • Create an “Building” you can walk into
  • Create barrels inside that building

I couldn’t get it to auto-load the same named “game.ky,” oh well. I must have my paths/environment setup some funky way.

Thanks to qua-non for helping me out on #kivy @ irc.freenode.net!

Thanks to OpenGameArt for some pixel stuff!