Circular loading bar with image












-1














I want to create an achievement system in my game. I want players to see their % achievement progress like this.



For example, if he completed 65% -> 75% -> 100% to look like this.



https://imgur.com/a/P3l6hOQ



Is there any way to crop the image circular to look like a circular progess bar? A direction, a hint, a pod or a piece of code is appreciated.



My images will be rectangles with rounded corners and the code is written in SpriteKit.










share|improve this question






















  • You can add a white circle on the image and set the opposite percentage on it.
    – TheTiger
    yesterday










  • This can do as a workaround if I don't find an easier solution. I can create a circle with Path and add it as a mask to crop image.
    – Alexandru Vasiliu
    yesterday










  • Why do you think of it as a workaround? This is exactly what is needed - masking.
    – Losiowaty
    yesterday
















-1














I want to create an achievement system in my game. I want players to see their % achievement progress like this.



For example, if he completed 65% -> 75% -> 100% to look like this.



https://imgur.com/a/P3l6hOQ



Is there any way to crop the image circular to look like a circular progess bar? A direction, a hint, a pod or a piece of code is appreciated.



My images will be rectangles with rounded corners and the code is written in SpriteKit.










share|improve this question






















  • You can add a white circle on the image and set the opposite percentage on it.
    – TheTiger
    yesterday










  • This can do as a workaround if I don't find an easier solution. I can create a circle with Path and add it as a mask to crop image.
    – Alexandru Vasiliu
    yesterday










  • Why do you think of it as a workaround? This is exactly what is needed - masking.
    – Losiowaty
    yesterday














-1












-1








-1







I want to create an achievement system in my game. I want players to see their % achievement progress like this.



For example, if he completed 65% -> 75% -> 100% to look like this.



https://imgur.com/a/P3l6hOQ



Is there any way to crop the image circular to look like a circular progess bar? A direction, a hint, a pod or a piece of code is appreciated.



My images will be rectangles with rounded corners and the code is written in SpriteKit.










share|improve this question













I want to create an achievement system in my game. I want players to see their % achievement progress like this.



For example, if he completed 65% -> 75% -> 100% to look like this.



https://imgur.com/a/P3l6hOQ



Is there any way to crop the image circular to look like a circular progess bar? A direction, a hint, a pod or a piece of code is appreciated.



My images will be rectangles with rounded corners and the code is written in SpriteKit.







ios swift sprite-kit






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked yesterday









Alexandru Vasiliu

10911




10911












  • You can add a white circle on the image and set the opposite percentage on it.
    – TheTiger
    yesterday










  • This can do as a workaround if I don't find an easier solution. I can create a circle with Path and add it as a mask to crop image.
    – Alexandru Vasiliu
    yesterday










  • Why do you think of it as a workaround? This is exactly what is needed - masking.
    – Losiowaty
    yesterday


















  • You can add a white circle on the image and set the opposite percentage on it.
    – TheTiger
    yesterday










  • This can do as a workaround if I don't find an easier solution. I can create a circle with Path and add it as a mask to crop image.
    – Alexandru Vasiliu
    yesterday










  • Why do you think of it as a workaround? This is exactly what is needed - masking.
    – Losiowaty
    yesterday
















You can add a white circle on the image and set the opposite percentage on it.
– TheTiger
yesterday




You can add a white circle on the image and set the opposite percentage on it.
– TheTiger
yesterday












This can do as a workaround if I don't find an easier solution. I can create a circle with Path and add it as a mask to crop image.
– Alexandru Vasiliu
yesterday




This can do as a workaround if I don't find an easier solution. I can create a circle with Path and add it as a mask to crop image.
– Alexandru Vasiliu
yesterday












Why do you think of it as a workaround? This is exactly what is needed - masking.
– Losiowaty
yesterday




Why do you think of it as a workaround? This is exactly what is needed - masking.
– Losiowaty
yesterday












1 Answer
1






active

oldest

votes


















0














Managed to solve it. Indeed the best and easiest solution was to create a mask_node.



    let button_image : SKSpriteNode = SKSpriteNode()
let crop_node : SKCropNode = SKCropNode()

let completion : CGFloat = 0.83 // from 0.0 to 1.0

let circle_bezier_path = UIBezierPath(arcCenter: CGPoint.zero, radius: 200, startAngle: 0, endAngle: CGFloat.pi * 2 * completion, clockwise: true)
circle_bezier_path.addLine(to: CGPoint(x: 0, y: 0))

let mask_node : SKShapeNode = SKShapeNode(path: circle_bezier_path.cgPath)
mask_node.zRotation = CGFloat.pi/2

let wrapper_node = SKNode()
wrapper_node.addChild(mask_node)

crop_node.maskNode = wrapper_node
crop_node.addChild(button_image)
addChild(crop_node)


Good luck!






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53944382%2fcircular-loading-bar-with-image%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    Managed to solve it. Indeed the best and easiest solution was to create a mask_node.



        let button_image : SKSpriteNode = SKSpriteNode()
    let crop_node : SKCropNode = SKCropNode()

    let completion : CGFloat = 0.83 // from 0.0 to 1.0

    let circle_bezier_path = UIBezierPath(arcCenter: CGPoint.zero, radius: 200, startAngle: 0, endAngle: CGFloat.pi * 2 * completion, clockwise: true)
    circle_bezier_path.addLine(to: CGPoint(x: 0, y: 0))

    let mask_node : SKShapeNode = SKShapeNode(path: circle_bezier_path.cgPath)
    mask_node.zRotation = CGFloat.pi/2

    let wrapper_node = SKNode()
    wrapper_node.addChild(mask_node)

    crop_node.maskNode = wrapper_node
    crop_node.addChild(button_image)
    addChild(crop_node)


    Good luck!






    share|improve this answer


























      0














      Managed to solve it. Indeed the best and easiest solution was to create a mask_node.



          let button_image : SKSpriteNode = SKSpriteNode()
      let crop_node : SKCropNode = SKCropNode()

      let completion : CGFloat = 0.83 // from 0.0 to 1.0

      let circle_bezier_path = UIBezierPath(arcCenter: CGPoint.zero, radius: 200, startAngle: 0, endAngle: CGFloat.pi * 2 * completion, clockwise: true)
      circle_bezier_path.addLine(to: CGPoint(x: 0, y: 0))

      let mask_node : SKShapeNode = SKShapeNode(path: circle_bezier_path.cgPath)
      mask_node.zRotation = CGFloat.pi/2

      let wrapper_node = SKNode()
      wrapper_node.addChild(mask_node)

      crop_node.maskNode = wrapper_node
      crop_node.addChild(button_image)
      addChild(crop_node)


      Good luck!






      share|improve this answer
























        0












        0








        0






        Managed to solve it. Indeed the best and easiest solution was to create a mask_node.



            let button_image : SKSpriteNode = SKSpriteNode()
        let crop_node : SKCropNode = SKCropNode()

        let completion : CGFloat = 0.83 // from 0.0 to 1.0

        let circle_bezier_path = UIBezierPath(arcCenter: CGPoint.zero, radius: 200, startAngle: 0, endAngle: CGFloat.pi * 2 * completion, clockwise: true)
        circle_bezier_path.addLine(to: CGPoint(x: 0, y: 0))

        let mask_node : SKShapeNode = SKShapeNode(path: circle_bezier_path.cgPath)
        mask_node.zRotation = CGFloat.pi/2

        let wrapper_node = SKNode()
        wrapper_node.addChild(mask_node)

        crop_node.maskNode = wrapper_node
        crop_node.addChild(button_image)
        addChild(crop_node)


        Good luck!






        share|improve this answer












        Managed to solve it. Indeed the best and easiest solution was to create a mask_node.



            let button_image : SKSpriteNode = SKSpriteNode()
        let crop_node : SKCropNode = SKCropNode()

        let completion : CGFloat = 0.83 // from 0.0 to 1.0

        let circle_bezier_path = UIBezierPath(arcCenter: CGPoint.zero, radius: 200, startAngle: 0, endAngle: CGFloat.pi * 2 * completion, clockwise: true)
        circle_bezier_path.addLine(to: CGPoint(x: 0, y: 0))

        let mask_node : SKShapeNode = SKShapeNode(path: circle_bezier_path.cgPath)
        mask_node.zRotation = CGFloat.pi/2

        let wrapper_node = SKNode()
        wrapper_node.addChild(mask_node)

        crop_node.maskNode = wrapper_node
        crop_node.addChild(button_image)
        addChild(crop_node)


        Good luck!







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered yesterday









        Alexandru Vasiliu

        10911




        10911






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53944382%2fcircular-loading-bar-with-image%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas