Cinder & C++: Mirror Texture and Efficient Drawing Questions

Question

1. Let's say I have a character that faces to the right and I need to mirror the image so that he now faces left. How do I do this? I found the flip method in gl::Texture, but that flips vertically, not horizontally.

2. I've noticed that if I don't clear the whole window during the draw() method, then whatever I drew last last frame is still present. This is good because I only want to update what changes, but how do I remove a specific gl::Texture from the current frame?

Answer 1

1: Draw a texture flipped on the X axis

There's lots of ways to achieve this effect. Which one works best for you depends on how you're drawing your textures. Since you're starting out with Cinder I would guess you're using the ci::gl::draw function and passing it a TextureRef object. In that case an easy way to draw a flipped texture is (you can put this wherever you are drawing your texture):

// This is to get a "fresh" coordinate system for drawing and to make sure
// you can clean up after you're done
ci::gl::pushMatrices();

// Move the coordinate system to where you want to draw the texture
ci::gl::translate(ci::Vec2f(100, 100));

// Scaling the coordinate system by -1 effectively flips that axis
// (e.g. whatever was going to be drawn at x: 10 will now be drawn at x: -10)
ci::gl::scale(ci::Vec3f(-1, 1, 1));

// Draw your texture
ci::gl::draw(texture);

// Clean up after yourself so any drawing calls after this don't use your modified
// coordinates
ci::gl::popMatrices();

2: Removing a texture from a frame

There's no really easy way to do what you're describing (i.e. draw to the frame buffer and then later remove all the pixels associated with a particular texture). However, depending on the effect you're trying to achieve there may be some ways to do what you want but they would all be relatively advanced. For example, you could draw the textures you want to remove on to a "texture" buffer and everything else on a "background" buffer. Every frame you would draw the background buffer and then the texture buffer on top of it. When you want to "remove" the texture buffer you would just stop drawing it.

P.S. - I'm happy to go into more detail about how to draw the multiple buffers (actually Cinder makes it relatively easy), but only if that's a rabbit hole you think you want to dive down ;)

Answer 2

OK, so I'm not familiar with the Cinder library to be able to tell you if there is a method to flip an image horizontally. However, for the purpose you have exemplified on item 1, you probably don't want to flip the image itself. The flip method present in Cinder's Texture will actually flip the image pixels, creating a new texture. This is way to expensive to be called when you want to make your character face its side. Instead, what you should do is just to apply a rotation transformation to the sprite. I'm sure you can learn that from the library examples and documentation, it seems pretty complete.

As to item 2, bare in mind that the underlaying graphics driver where the library is running on will be rendering using double buffering and constantly refreshing the screen, so while you draw in one buffer, the other one is being displayed. This avoid showing a partly drawn image to the user. However, the graphics driver will not wipe the buffer it is working on by itself, you have to explicitly command it to clear the screen to some color. If you don't, leftovers from the previous draw will still be there. So it is normal to clear the screen at the beginning of every draw(), render your sprites and then swap the buffers to present the drawing. This makes possible for smooth animation, for example, since this process will be happening 30 to 60 times a second.