Loop/Repeat feature in SPMatrix

epa_neto

Hello,

I'm using a background in my game:

SPImage *background = [[SPImage alloc] initWithContentsOfFile:@"background.png"];
[_contents addChild:background];

According to the user speed, i move this background using SPMatrix
background.transformationMatrix = [SPMatrix matrixWithA:1 b:0 c:0 d:1 tx:-userSpeed ty:0];

In AS3, I could set the image to repeat, creating a loop no matter how much i change the tx. There is any way to do this on Sparrow? I really don't want to create 2 backgrounds and move, because it is a very big image.

Thank you in advance!
Epa

seriousGeorge

Oh Yes. I second that. I would be very interested in a working solution/example.

In the AS3 Framework ND2D you just manipulated the UV-X and Y Coordinates and set the openGL UV to "clamp" (Example: http://www.nulldesign.de/2011/09/26/nd2d-infinite-scrolling-made-easy-with-animated-uv-coordinates/)

Daniel

In Sparrow, you can animate the UV coordinates as well. It's just not done through the "transformationMatrix", epa_neto, but with one of the corresponding methods of "SPImage":

SPTexture *texture = ...; // must be power-of-two texture!
texture.repeat = YES;

SPImage *image = [[SPImage alloc] initWithTexture:texture];

__block float offset = 0.0;

[self addEventListenerForType:SP_EVENT_TYPE_ENTER_FRAME block:^(id event)
{
    offset += [event passedTime];

    [logoPvr setTexCoordsWithX: offset y:0 ofVertex:0];
    [logoPvr setTexCoordsWithX:1+offset y:0 ofVertex:1];
    [logoPvr setTexCoordsWithX: offset y:1 ofVertex:2];
    [logoPvr setTexCoordsWithX:1+offset y:1 ofVertex:3];
}];

Beware that this does not work with atlas textures; you need to have a texture that's loaded separately AND that has side-lengths that are powers of two. (That's a limitation of OpenGL.)

If you want to animate the UV coordinates with a tween, you can subclass SPImage and add a property like "texCoordXOffset" that calls the 4 methods from above internally. Then you can animate that property with a tween.

seriousGeorge

Got it working. Thanks Daniel.

But I'm curious how to manipulate Y-Axis only. No matter what I'm entering I'm getting a shift in the X-Axis or a stretched/squashed texture.

Daniel

Replace the four lines in the sample with this code to animate the y-axis instead:

[logoPvr setTexCoordsWithX:0 y: offset ofVertex:0];
[logoPvr setTexCoordsWithX:1 y: offset ofVertex:1];
[logoPvr setTexCoordsWithX:0 y:1+offset ofVertex:2];
[logoPvr setTexCoordsWithX:1 y:1+offset ofVertex:3];

That should do it! Again, beware that your texture needs to have a height that is a power of two. (Actually, I think the width must be POT as well -- just try it out.)

epa_neto

Thank you very much @Daniel, it worked like a charm 🙂

epa_neto

Hey guys,

Reviving this post to ask something else about this feature.
I am now using these setTextCoords methods in a race game, where the speed with which I change the background texture position goes from 0 to a very high value - like 16px per frame.

I realized that when the speed is a bit higher (using a speed variable, not the event.passedTime value), there is a lot of "flickering" going on, and after some time, the background starts to move with a terrible performance. The fps is fine, is just the visual performance that gets really bad.

I did some testes, and realized that this starts when the offset variable gets a really big value. I could treat this variable by making _offset = 0 after some time, but this turns out into a bad visual approach.

After some time, I decided to test this same feature on Starling, and I got the same visual problems.

The code is being used just as daniel's. Any hints?

Jonkel

Sounds like ye olde float precision errors, they tend to happen after a long time of manipulating the same float/double values or very high decimal values without re-setting them.

Daniel

If it is a floating point problem (that the floats get too imprecise when the number gets higher), you could try this:

An offset of, say, 100.84 looks just the same as an offset of 0.84. So you could calculate the decimal part and use just that:

float offset = 100.84f; // just a sample
float integral;
float fractional = modff(offset, &integral); // -> fractional = 0.84f

If you use that value, the offset will always stay between 0 and 1, keeping its precision.

Alternatively: could this be the classic Wagon Wheel Effect?

epa_neto

Hey Daniel,

It worked! I didn't know about the modff.
It wasn't the wagon wheel effect, I have set some max speed values so this would not occur. It was the big float number 🙂

Thanks!

Daniel

Perfect, I'm glad that helped!

BTW, since you mentioned that this happens in Starling, too, I better add the AS3 solution, too — just in case anyone else stumbles across this through Google! 😉

var offset:Number = 100.84; // just a sample
var fractional:Number = offset % 1.0; // -> fractional = 0.84