Horizontal image flip?

649 views
Skip to first unread message

yoshi

unread,
Jan 28, 2008, 9:09:39 AM1/28/08
to pyglet-users
Is there any way that I can flip an image horizontally. I need this
for a platformer game I`m trying to make and I need the character
image to flip horizontally when the walking direction changes from
left to right or the other way.
It'd save me a lot of trouble having to use 2 different images for the
same animation but different facing.
Here's an example of what I need http://img142.imageshack.us/img142/3804/duckcy5.png

It'd be nice if there was something like image.horizontal_flip() or
something but I couldn`t find anything like that :(

Alex Holkner

unread,
Jan 28, 2008, 9:16:51 AM1/28/08
to pyglet...@googlegroups.com

It's already implemented for pyglet 1.1 ;-) In the meantime:

from pyglet import image
face_left = image.load('person.png').texture
face_right = face_left.get_region(0, 0, face_left.width, face_left.height)
t = face_right.tex_coords
face_right.tex_coords = t[3:6] + t[:3] + t[9:] + t[6:9]

Alex.

Message has been deleted

yoshi

unread,
Jan 28, 2008, 12:28:42 PM1/28/08
to pyglet-users
Great. Thank you.

On Jan 28, 4:16 pm, "Alex Holkner" <alex.holk...@gmail.com> wrote:
> On Jan 29, 2008 1:09 AM, yoshi <teh.y...@gmail.com> wrote:
>
>
>
> > Is there any way that I can flip an image horizontally. I need this
> > for a platformer game I`m trying to make and I need the character
> > image to flip horizontally when the walking direction changes from
> > left to right or the other way.
> > It'd save me a lot of trouble having to use 2 different images for the
> > same animation but different facing.
> > Here's an example of what I needhttp://img142.imageshack.us/img142/3804/duckcy5.png

Alex Holkner

unread,
Jan 28, 2008, 4:26:44 PM1/28/08
to pyglet...@googlegroups.com
On 1/29/08, yoshi <teh....@gmail.com> wrote:
> When`s 1.1 gonna become available for the public ?

There's no telling ;-)

Alex.

yoshi

unread,
Feb 3, 2008, 10:32:43 AM2/3/08
to pyglet-users
Ok, I finally finished the core for the movement, attacking and
jumping for the right facing direction and I started implementing it
for the left facing direction.
I flipped the png with all the actions (I have one file with all the
actions in it, for each action the frames are set in a row), then when
I started 'cropping' it to put each frame into a list
using .get_region() I noticed that when blitted, the image was flipped
back to the original size.
When I blitted the file without cropping it, it was flipped, but the
cropped pieces have the original orientation.
Any idea why and how can I fix this ?

On Jan 28, 11:26 pm, "Alex Holkner" <alex.holk...@gmail.com> wrote:

Txema Vicente

unread,
Feb 3, 2008, 2:20:48 PM2/3/08
to pyglet-users

> I started 'cropping' it to put each frame into a list
> using .get_region()
Suggestion: list=image.ImageGrid(big_image,cols,rows)

And may be glScale(-1,1,1) or glRotate(180,0,1,0) before blitting can
flip you.

Alex Holkner

unread,
Feb 3, 2008, 3:05:30 PM2/3/08
to pyglet...@googlegroups.com
On 2/4/08, yoshi <teh....@gmail.com> wrote:
>
> Ok, I finally finished the core for the movement, attacking and
> jumping for the right facing direction and I started implementing it
> for the left facing direction.
> I flipped the png with all the actions (I have one file with all the
> actions in it, for each action the frames are set in a row), then when
> I started 'cropping' it to put each frame into a list
> using .get_region() I noticed that when blitted, the image was flipped
> back to the original size.
> When I blitted the file without cropping it, it was flipped, but the
> cropped pieces have the original orientation.
> Any idea why and how can I fix this ?

The get_region method doesn't know that you've messed with the texture
coordinates. Either do your cropping before flipping, or create your
own get_region method.

The way this is working (flipping and cropping) is just by changing
the texture coordinates assigned to the texture. An image covering
the whole of an OpenGL texture has .tex_coords =

(0, 0, 0, # bottom left
1, 0, 0, # bottom right
1, 1, 0, # top right
0, 1, 0) # top left

For example, to crop off the left side of the image (leaving only the
right half), you'd use:

(.5, 0, 0, # bottom left
1, 0, 0, # bottom right
1, 1, 0, # top right
.5, 1, 0) # top left

The trick of flipping the image is to rearrange these numbers so the
left and right coordinates are swapped.

Alex.

yoshi

unread,
Feb 3, 2008, 3:38:46 PM2/3/08
to pyglet-users
I'm pretty new to this stuff, how do I call glScale/glRotate for an
image?

Txema Vicente

unread,
Feb 3, 2008, 5:28:46 PM2/3/08
to pyglet...@googlegroups.com
Doing that kind of transformations is not the same thing as inverting the
texture, as Alex told you.
Inverting the texture, you will have an inverted texture forever, that you
can use as any image.

Sure that is easier, I should not tell you about transformations. Do it with
textures.

I didn't think it. Big mouth. But, as I did throw the snowball, I will give
you a clue.

If you want to play with opengl transformations, note that you are not
transforming the image at all, you are transforming the entire view. Each
time you want to see a flipped image, you have to modify the view. You can
have a different view for each image. Endless possibilities, more
complexity.

First thing is that when you rotate or scale the view, you have to know
where the origin is (0,0). If you did not move it (or after calling
glLoadIdentity()), it is at bottom left corner. If you scale the view -1 at
x, now when you blit the image at (x,y) it will be flipped but blitted
outside your monitor, mirrored at -x.

If now you are doing:
img.blit (x,y,0)

You could do this to see the same results:
glLoadIdentity() # to ensure initial view
glTranslatef(x,y,0) # put the origin here (view in modified)
img.blit(0,0,0)

The same thing, more elegant:
glPushMatrix() # get a new copy of the view
glTranslatef(x,y,0)
img.blit(0,0,0)
glPopMatrix() # restore the original view

and this to see the flipped image:
glPushMatrix()
glTranslatef(x,y,0)
glScalef(-1,1,1) # or glRotate(180,0,1,0)
img.blit(0,0,0) # or img.blit(img.width,0,0), to get the
same position.
glPopMatrix()

The origin is the key here, and you better translate it to the center or the
image (play with half image sizes, translate to x+width/2, y+height/2, then
scale or rotate and finally blit at (-width/2, -height/2,0)).

You can survive knowing only about glLoadIdentity, glTranslatef, glScalef
and glRotatef.
Lots of tutorials out there. Good luck.

yoshi

unread,
Feb 3, 2008, 7:07:09 PM2/3/08
to pyglet-users
Thank you, but I think I`ll stick to Alex's version until I get a
better understanding of GL and game programming. This is my first
Python and game programming project.
If anyone is interested, here are teh sources for what I have done so
far: http://www.nyuu.ro/misc/Zelda-test02.zip (ignore the frozen
application, that's for a few friends)
Reply all
Reply to author
Forward
0 new messages