How to make a scrolling background in codea??

Questions
1

How to make my own sprite(“background”,x,y,xw,xy) scroll???

I need it to move from left to right…

2

Set the x value to a variable such as “backgroundx” and change that variable with a positive to move it right and a negative to move it left

3

Check here. See the code by tnlogy.

http://twolivesleft.com/Codea/Talk/discussion/2487/need-some-help-a-beginner-s-request#Item_13

4

Thanks that helped… But it didn’t…
I can’t use any other sprits As a background…
Just the one that’s in the code…
But the one that splits and copy’s one sprit to a mash of maybe 4 down 6 wide works…

5

You need to make sure the size of the sprite is a power of 2

6

@corneliuhoffman - I’ve heard that before. Can you please explain what difference that makes?

7

Actually I have no idea why that is, my observation it is experiment based. If you have an image whose size is a power of two then tnology’s elegant trick works. Otherwise it does not. I assume it has to do with the way interpolation works for meshes.

8

@corneliuhoffman - actually, I don’t think tnology’s code has anything to do with the “power of 2” speed issue sometimes referred to in OpenGL forums, nor mesh interpolation. He just wrote his code so it worked for power of 2, and then he provided another version that worked for non power of 2.

I did some research and it seems that while power of 2 was an issue some years ago, these days, not too many people are worrying about it.

Certainly, I am using hundreds of different size meshes in my code, none of them power of 2, and I am having no problems!

9

Of course, I also use many meshes and and they are all based on the size of the screen. However tnology’s brilliant trick

m:setRectTex(1, ElapsedTime,0,5,5)

simply fails in the case the texture image has different size, to convince yourself, try this minimal modification of his code and then just change the image size to image(255,255 ) for example

-- Pattern

-- Use this function to perform your initial setup
function setup()
    displayMode(FULLSCREEN)
    m = mesh()
    img=image(256,256)
    setContext(img)
    sprite("Cargo Bot:Starry Background", 128,128)
    setContext()
    m.texture = img --readImage("Cargo Bot:Startup Screen")
    m:addRect(WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
end

-- This function gets called once every frame
function draw()
    -- repeat the pattern 5x5 times
    -- move the start x position of the texture with ElapsedTime 
    m:setRectTex(1, ElapsedTime,0,5,5)
    m:draw()
end
10

If you copy and paste his code…
Then go to the same sprite pack as the red background…
It has a background that’s 256 by 256…
Just like the red background but… It doesn’t work…
Try it… It’s called “Background fade”

11

But it does, the trouble is that the background fade is essentially black with a transparent centre. Try to put a background(255) command in the first line of the draw

12

@Ignatz if you want to use a repeating texture in OpenGL (i.e. if you make the texture coordinates larger than the texture itself) then you have to use a power of 2 texture. Thats the only reason you ever need one.

13

A little shader removes the need for power of 2


-- Pattern

-- Use this function to perform your initial setup
function setup()
    displayMode(FULLSCREEN)
    m = mesh()
    m.texture = readImage("Platformer Art:Block Brick")
    m:addRect(WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
end

-- This function gets called once every frame
function draw()
    -- repeat the pattern 5x5 times
    -- move the start x position of the texture with ElapsedTime 
    m:setRectTex(1, ElapsedTime,0,5,5) 
    m.shader = shader(autoTilerShader.vertexShader, autoTilerShader.fragmentShader)
    m:draw()
end


autoTilerShader = {
vertexShader = [[
//
// A basic vertex shader
//

//This is the current model * view * projection matrix
// Codea sets it automatically
uniform mat4 modelViewProjection;

//This is the current mesh vertex position, color and tex coord
// Set automatically
attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;

//This is an output variable that will be passed to the fragment shader
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;

void main()
{
    //Pass the mesh color to the fragment shader
    vColor = color;
    vTexCoord = texCoord;

    //Multiply the vertex position by our combined transform
    gl_Position = modelViewProjection * position;
}

]],
fragmentShader = [[
//
// A basic fragment shader
//

//Default precision qualifier
precision highp float;

//This represents the current texture on the mesh
uniform lowp sampler2D texture;

//The interpolated vertex color for this fragment
varying lowp vec4 vColor;

//The interpolated texture coordinate for this fragment
varying highp vec2 vTexCoord;

void main()
{
    //Sample the texture at the interpolated coordinate
    lowp vec4 col = texture2D( texture, vec2(mod(vTexCoord.x,1.0), mod(vTexCoord.y,1.0))) * vColor;

    //Set the output color to the texture color
    gl_FragColor = col;
}

]]}
14

–xpos = potion of your srtite
–at the bottom of the draw function do
xpos = xpos - 10