Help making a visual transition with pygame and NumPy

Perhaps this could be better answered on Stack Overflow, but I thought it would be worth posting here. Right now I'm trying to make visual transitions with pygame's surfarray module which uses NumPy. I'm using Cave Story's diamond-checkerboard transitions as a model right now (you can see them in this video http://www.youtube.com/watch?v=mJbAs-sSX4A).

I'm new to NumPy and I'm a little bit over my head. Is there an easy way to accomplish this, or are there any tutorials I should be following? Google brought up a bunch of general NumPy tutorials which I didn't find very helpful for my specific needs.

You can easily do regular checkerboards by using numpy to copy parts of an image (array) onto another array, like this:

# Let's define two arrays to work on. They should be replaced with your surfaces
a = numpy.ones((640,480))
b = numpy.zeros((640,480))

a[100:110,200:210] = b[100:110, 200:210]


Obviously you can mix it up, copy from multiple sources and different locations if you need it for your effects. Since everything is handled by numpy (without coming back to python after every pixel) it is quite fast.

The only limitation is that the source and destination must be the same size (or obey the broadcasting rules, but that's not what you want here).

Update

I had completely forgotten about choose(). It is the missing piece you need to do the transitions "properly". What you need is something like this:

diamonds = [ ... ] # List of arrays containing 1 and 2 arranged in enlarging diamond patterns, say 100x100
for diamond in diamonds: # you probably want timers and events rather than a tight loop
for x in [0,100,200, ...]:
for y in [0,100,200 ....]:
screen[x:x+100, y:y+100] = diamond.choose(screen1[x:x+100,y:y+100], screen2[x:x+100,y:y+100])
# Pause for transition effect
time.sleep(0.01)


This should get you the required effect. Post if you get into trouble.

• Excellent, this was just the hint I needed to figure the rest out! – tankadillo Aug 27 '10 at 3:44

The basic way to do this is with choose. You need surfarrays of both sides of the transition, and then make a set of arrays for each step of the animation.