Need Some Help (A Beginner's Request)

Questions
1

Hello guys,
I’m Not A Good Programmer, but Codea helped me to like programming. Suddenly, something has gone wrong because I tried to do something apparently quite easy. I want to do a animated background with a pattern like in Cargo-Bot game.
This is the pattern:
Picture
cargo bot
Can you help me with a code?

2

Steven, it’s not clear what you want to animate, or how far you have got with your code, which makes it difficult to help you. Can you explain a little more about what you’re trying to do, and post the code you have?

Also, have you looked at the available tutorials, eg

3

If you want the Starry Background, the code below will give it to you. Without seeing your code, it hard to know what you want as @Ignatz said.


displayMode(FULLSCREEN)

function setup()
end

function draw()
    sprite("Cargo Bot:Starry Background",WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
end
4

I guess you wish something like this?


-- Pattern

-- Use this function to perform your initial setup
function setup()
    displayMode(FULLSCREEN)
    m = mesh()
    m.texture = readImage("Cargo Bot:Starry Background")
    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
5

tnlogy, great example. However, I can not figure out why the ElapsedTime works. It would have taken me alot more code to do that. Could you explain it? I get that it’s moving the left egde of the rect but why does it repeat the texture?

6

In this example the texture coordinates start at (0,0) and goes to (5,5) when you start the program. A texture coordinate goes from 0 to 1 to represent the positions in the texture. But it is ok to wrap the texture coordinate space. So if I say start position is (2,0) and goes to (7,5) it will look the same. Don’t know if it a good explanation, but the texture space is wrapping. :slight_smile:

7

However you need to know that the size of the mesh texture is a power of 2

8

Oh, then I also learned something! :slight_smile:

9

A it more complex solution if the texture size isn’t a power of 2. Here I add time as a uniform to the fragment shader and use mod() to make sure that the texture coordinate is in the range 0-1.

-- Pattern

-- Use this function to perform your initial setup
function setup()
    displayMode(FULLSCREEN)
    m = mesh()
    m.shader = pattern
    m.texture = readImage("Cargo Bot:Crate Blue 2")
    m:addRect(WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
    m:setRectTex(1,0,0,5,5)
end

-- This function gets called once every frame
function draw()
    background()
    m.shader.time = ElapsedTime;
    m:draw()
end

pattern = shader()
pattern.vertexProgram = [[
uniform mat4 modelViewProjection;
attribute vec4 position;
attribute vec2 texCoord;
varying highp vec2 vTexCoord;

void main()
{
    vTexCoord = texCoord;
    gl_Position = modelViewProjection * position;
}
]]
pattern.fragmentProgram = [[
uniform lowp sampler2D texture;
uniform highp float time;
varying highp vec2 vTexCoord;

void main()
{
    lowp vec4 col = texture2D(texture, 
                      mod(vTexCoord+vec2(time,0), vec2(1.,1.)));
    gl_FragColor = col;
}
]]
10

I try to make a animated background that moves/scrolling from side to side.
Here is a small example, made on my computer.

Original Video - More videos at TinyPic

11

@tnlogy, that is a fascinating example you provided.

However, my experimenting suggests that you don’t get the same result from (0,0)-(5,5) as you would from (2,2)-(7,7). That is because the last two parameters are not the right hand cords, but width and height, expressed as multiples of image width and height.

So in your original example above, where you have
m:setRectTex(1, ElapsedTime,0,5,5)
What the 5,5 parameters do is to set the width and height of the rectangle to 5 copies of the image, so the image will be shrunk to fit. This happens regardless of how you set the second and third parameters above. So if you set height/width to 1, the image will fill the screen exactly, whereas if you set them to 10, it will be shrunk so 10 can fit each way.

So the height and width parameters are really there to adjust the size of the image.

The first two parameters tell Codea where to start copying from, as a percentage of the image. If you put in an integer, you will always be starting from the left of the image, but by using the system timer, you are putting in small fractions, and this makes Codea start drawing from part way into the image, and as this changes it gives the illusion of movement.

Also, Codea doesn’t double the width and height values, from what I can see. The starry image is misleading because it has two rows, one with one star, and the other with two, which is probably what makes it look like Codea is doubling up.

Thanks again for an interesting example.

12

Oh, I guess my explanation wasnt so good. With “goes to” I meant that (7,5) in the comment above is (2,0) + (width,height), which is (5,5). Maybe that makes it clearer?

Also I moved setRectTx to setup in the second example. Makes it a bit cleaner.

13

Thank you tnlogy. Your example works so well. =;

14

@tnlogy I was wondering if you’d be okay with me using your example code as part of my game.

15

Yes, please use it in any way you like :slight_smile:

16

All this new stuff is really amazing, I have used this with a tweener and now I have a simple comic reader for the levels intro of a new game , lol! :slight_smile: