How would you make a scroll bar to scroll the screen

If possible can you put code here

Anyone

You never said what you wanted to scroll. This example show a sprite and some text. Just slide your finger up or dowd the screen. Or see this previous post of mine. http://twolivesleft.com/Codea/Talk/discussion/2166/scrolling-game-starter#Item_2


function setup()
    tab={}
    dy=HEIGHT/2
    for z=1,100 do
        table.insert(tab,z)
    end
end

function draw()
    fill(255)
    background(40, 40, 50)
    sprite("Planet Cute:Character Boy",100,dy)
    for z=1,100 do
        text("Scroll some text  "..tab[z],300,dy-20*(z-50))
    end
end

function touched(t)
    dy=dy+t.deltaY
end

Thanks

That’s very interesting @dave1707. I didn’t realize scrolling with a finger touch was so straight forward.

Do you reckon this would work to scroll around more complicated cases, like, for instance, Test3 in the “Physics labs” example? I’m guessing dealing with physical objects makes it a little more tricky…

Here’s the code for Test3 in my beloved physics lab, I just added dx and dy… now… where to apply the x and y offsets in draw()?

Cheers!

Test3 = class()

function Test3:init()
self.title = “gravity scale”
end

function Test3:setup()
createGround()
local circle1 = createCircle(50, HEIGHT/2, 25)

local circle2 = createCircle(150, HEIGHT/2, 25)
circle2.gravityScale = 0.5

local circle3 = createCircle(250, HEIGHT/2, 25)
circle3.gravityScale = 0.25

end

function Test3:draw()
end

function Test3:touched(touch)
dx=dx+t.deltaX
dy=dy+t.deltaY
end

@Rodolphe, you could translate everything being drawn by dx and dy. Here is a small snippet of pseudo-code:

function draw()
    pushMatrix()
    translate(dx,dy)
    sprite()
    rect()
    mesh:draw()
    ....
    more stuff drawn
    etc. etc. etc.
    popMatrix()
end

You just have to make sure that the things you want to scroll are within the pushMatrix and popMatrix.

Wow, thanks @Slashin8r, that’s pretty simple! (let’s contain our joy until I manage to implement it though :smiley: )
In the same kind of idea, would it be easily feasible to, say, use two fingers to pan around, and at the same time detect changes in the relative distance between fingers to zoom in and out. Much like photo viewing?

Is that way out in terms of difficulty?

@Rodolphe Here’s one way of doing zoom in/out. Just move 2 fingers around, zooming in or out.


displayMode(FULLSCREEN)

function setup()
    tab={}
    hDist=0
end

function draw()
    background(40, 40, 50)
    fill(255)
    if #tab>=1 then
        text("touch 1".."  "..tab[1].x.."  "..tab[1].y,WIDTH/2,HEIGHT/2-50)
    end
    if #tab==2 then
        direction()
        text("touch 2".."  "..tab[2].x.."  "..tab[2].y,WIDTH/2,HEIGHT/2-100)
    end
end

function direction()    -- get touch directing, in/out
    if #tab==2 then
        v1=vec2(tab[1].x,tab[1].y)
        dist=v1:dist(vec2(tab[2].x,tab[2].y))    -- get distance between touch
        if dist>hDist then
            str="moving out"
        elseif dist<hDist then
            str="moving in"
        else
            str=""
        end
        text(str,WIDTH/2,HEIGHT/2)            
        hDist=dist   -- save previous distance
    end
end

function touched(t)
    if t.state==BEGAN then    -- add touch to table
        for a,b in pairs(tab) do
            if b.z==t.id then    -- already in table
                return
            end
        end
        table.insert(tab,vec3(t.x,t.y,t.id))
    end
    if t.state==MOVING then    -- update moving x,y values
        for a,b in pairs(tab) do
            if b.z == t.id then
                b.x=t.x
                b.y=t.y
                return
            end
        end
    end
    if t.state==ENDED then    -- remove touch from table
        for a,b in pairs(tab) do
            if b.z==t.id then
                table.remove(tab,a)
            end
        end
    end
end

Great, then “scale()” does the zoom in/out trick! Thanks!

(double post…)

About your pseudo code, @Slashin8r, does translate() move all the actual objects or only their drawing positions? When I try paning a series of physics objects that respond to touches, the drawed objects nicely move with my finger, but touching the objects doesn’t register to the new position. However, touching objects where they use to be at the very beginning, at their original positions, registers the touches (which makes be believe there is a difference between drawing and actual moving of objects).

Or maybe touch.x and touch.y in the touch function need to be offset as well, somehow?

@Rodolphe, yep you are absolutely correct. It only moves the objects being drawn, it doesn’t actually give them new positions. The best way to accomplish them moving and their touch locations moving with them would be to actually give the objects new coordinates. You can do this within the touched function instead of using translate in the draw function. You will have to create a table of all objects that are able to be moved by panning. Then you would iterate through those objects with a for loop inside the touched function and change their coordinates depending on the direction panned.

Alright, that does the trick! ^:)^