Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How would you make a scroll bar to scroll the screen

edited April 2013 in General Posts: 139

If possible can you put code here

Comments

  • Posts: 139

    Anyone

  • dave1707dave1707 Mod
    edited April 2013 Posts: 7,923

    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
  • Posts: 139

    Thanks

  • Posts: 277

    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

  • edited August 2013 Posts: 391

    @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.

  • edited August 2013 Posts: 277

    Wow, thanks @Slashin8r, that's pretty simple! (let's contain our joy until I manage to implement it though :D )
    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?

  • dave1707dave1707 Mod
    Posts: 7,923

    @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

                    
                

  • Posts: 277

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

  • edited August 2013 Posts: 277

    (double post...)

  • Posts: 277

    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?

  • Posts: 391

    @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.

  • Posts: 277

    Alright, that does the trick! ^:)^

Sign In or Register to comment.