Circular loading bar with image
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
add a comment |
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
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
add a comment |
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
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
ios swift sprite-kit
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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!
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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!
add a comment |
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!
add a comment |
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!
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!
answered yesterday
Alexandru Vasiliu
10911
10911
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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