Quick Links: Gideros Home | Download Gideros | Developer Guide
Circular progress bar
  • How would you go about making a circular progress bar in Gideros?

    image
    9mvCQ.png
    268 x 243 - 11K
    My Gideros games: www.totebogames.com
  • pie +1 -1 (+1 / -0 )
    Member

    Likes: mertocan

  • hgy29hgy29 +1 -1 (+2 / -0 )
    Maintainer Accepted Answer
    What about this ? Heavily based on my attempt at a rainbow :)
     
    CircularProgress=Core.class(Sprite)
     
    function CircularProgress:setValue(val)
    local angs,ange=0,math.pi*val*1.999
    local rl,rh=self.radiusMin,self.radiusMax
    local ta=self:getChildAt(1)
    local ra=math.floor(val*2)
    ta:setLineColor(self.color,1)
    ta:setFillColor(self.color,1)
    ta:setPath("MALAZ",
    math.sin(angs)*rl,-math.cos(angs)*rl,
    rl,rl,0,ra,1,
    math.sin(ange)*rl,-math.cos(ange)*rl,
    math.sin(ange)*rh,-math.cos(ange)*rh,
    rh,rh,0,ra,0,
    math.sin(angs)*rh,-math.cos(angs)*rh
    )
    ta:setLineThickness(4,0.5)
    ta=self:getChildAt(2)
    ta:setText(("%d%%"):format(math.floor(val*100)))
    local tax,tay,taw,tah=ta:getBounds(ta)
    ta:setAnchorPosition(tax+taw/2,tay+tah/2)
    return ta
    end
     
     
    function CircularProgress:init(radius,width,color,font,fontscale)
    self.radiusMin,self.radiusMax=radius-width/2,radius+width/2
    self.color=color
    self.font=font
    self:addChild(Path2D.new())
    local text=TextField.new(font,"-")
    text:setTextColor(color)
    text:setScale(fontscale or 1)
    self:addChild(text)
    self:setValue(0.4)
    end
     
     
     
    application:setBackgroundColor(0)
    local meter=CircularProgress.new(80,20,0xFF0000,nil,4)
    meter:setPosition(100,100)
    stage:addChild(meter)
     
    local animSpeed=240
    stage:addEventListener(Event.ENTER_FRAME,function ()
    local frame=Core.frameStatistics().frameCounter
    local frameIndex=frame%animSpeed
    local ratio=math.abs(frameIndex-animSpeed/2)/(animSpeed/2)
    meter:setValue(ratio)
    end)

    Likes: pie, totebo

  • totebototebo +1 -1 (+1 / -0 )
    Member
    Away from a computer, but I'm going to accept that answer based on previous magic from your direction @hgy29. Can't wait to try it out!

    Likes: hgy29

    My Gideros games: www.totebogames.com
  • @hgy29 I've gotten around to play with this and it's amazing!

    Is there a way to make the corners of the bar clean and crisp (not bevelled)? See screenshot to show what I mean.
    Screen Shot 2016-12-20 at 14.45.10.png
    208 x 228 - 7K
    My Gideros games: www.totebogames.com
  • hgy29hgy29 +1 -1
    Maintainer
    Try to comment out ta:setLineColor(...), or use 0,0 (transparent) as line color
  • I was thinking about a sprite based method - Have a bitmap of a complete circle (100% progress), and an texture of a half circle of the background color. Make two bitmaps of the blank half circle and overlap the completed circle with those, set the anchor point to the circle center, and set the rotation to expose a wedge of the completed circle. That would get you from 0 to 50% (50% when the two blank ones are aligned.) Then make a bitmap of the 0-50% portion of the 100% progress texture, and overlap the others with that. Remove one of the two blank halves and rotate the other to expose the 50 to 100% side. Possibly overlap all of that with a text field for a numerical display.

    The advantage of that method is you could use any texture image for the progress circle.

    I have a little time right now... maybe I'll try whipping that up.

    Paul
  • PaulH +1 -1 (+5 / -0 )
    Member Accepted Answer
    Here's an implementation of the method I was describing, using a cheesy tinted checkerboard for the completed circle as proof of concept:

    image

    Source code is here: http://www.pishtech.com/progress_circle.zip

    One could use any sort of image for the completed progress, including a ring (with a blank center), perhaps with the color progressing from red to green, etc.

    Not to discredit hgy29's method in any way - that's really slick, and has the advantage of not requiring any texture editing. This is just another option.

    Paul
  • This is the sort of thing I would have done back in the flash days, and deffo has its uses if a more complex background is needsd. Thanks for posting!
    My Gideros games: www.totebogames.com

Howdy, Stranger!

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

Login with Facebook Sign In with Google Sign In with OpenID

In this Discussion

Top Posters