Hi Corona Community!
I am in need of creating a ring/wheel identical to the image I attached!
It needs to be a ring or circle that is divided into 4 equal sections that are all different colors.
Thanks in advance!
-Max
a developer recently put together a tutorial and corresponding code snippets on how to create your own pie timer, which you can use to create the above.
This also should be a fairly basic generator shader, that you could dump onto a circle display object, for instance.
In the fragment kernel, you’ll have texCoord going from 0 to 1, so you can subtract .5 from it to see how far off-center you are. Then, in pseudo-code, you’d have a kernel body like:
vec2 pos = (texCoord - .5) / .5; // Get relative position and normalize it to [-1, 1] if (length(pos) \< .8) { return BLUE\_COLOR; // something like vec4(0., 0., 1., 1.); } const float PI\_OVER\_TWO = 2. \* atan(1.); float angle = atan(pos.y, pos.x); if (angle \< PI\_OVER\_TWO) return PURPLE\_COLOR; else if (angle \< 2 \* PI\_OVER\_TWO) return GREEN\_COLOR; else if (angle \< 3 \* PI\_OVER\_TWO) return RED\_COLOR; else return YELLOW\_COLOR;I took a look at the link you sent me…
I do not understand how I can convert that into a circle with 4 different colors! It is also non moving, just a still object.
If you could walk me through on how to accomplish what I need that would be great!
-Max
@startcrunch
I don’t want to be rude but I have no idea what you are explaining…
If you could explain what I need to do that would be great! Thanks!
No problem. Actually, it only took a few minutes in the playground: link
Did you look at the docs in my first post? You should be able to lift the code from the playground and dump it into a file for use in your app.
Later tonight I can write up some of the details, if you want.
Can you tell us a little more what you want to do with the image and why you can’t just use that image?
Rob
I would love if you could provide more details about how to implement this into my app.
If you could even write out the code so I can just copy and paste it into my game that would be great!
Thanks!
In my game, there needs to be the image above. However, I can’t use the image because I need there to be collision detection that is based on the color of the wheel/ring. Therefore, I can’t use the image because there is no way of detecting which color section gets hit and then basing functions off it.
If you google search the game “impossible dial” or if you already know what it is, I need that kind of ring with the same color collision detection. I know this can be accomplished if I can somehow make the image by coding it in the game.
I hope that further explains what I need to be done. Thanks in advance!
Hi, Max.
I could still write up info on the shader approach, but now I’m not so sure it’s what you want.
I took a look at Impossible Dial just now. Are you basically going for a clone of that? When I read “collision detection” earlier, I figured this must be something with Simon-style controls, but it looks like you just tap to switch direction?
Does the game end if you enter the right color and then leave it without switching?
In either case, I think you should be able to go with an image like Rob said, or a bunch of colored circleswith containers, if you need finer control. Since you’re willing to build the image in code, you obviously assume special knowledge about which quadrants corresponds to a given color, and what angle ranges belong to each. It seems you could just check that state: “I’m red right now, and I’m pointing to 200 degrees, so I’m also in the red quadrant. If I get a tap, flip and make a new choice; if I end up leaving, fail.”
Anyhow, a little more information about the game mechanics would be helpful. It’s probably pretty simple to implement.
It will take a little work, but you can test inside the collision handler where the collision happened. You know the circle’s x and y and you know the other object’s x and y.
if object.x \< circle.x and object.y \< circle.y then -- hit on the top left quadrant elseif object.x \< circle.x and object.y \>= circle.y then -- hit on the bottom left quadrant elseif object.x \>= circle.x and object.y \< circle.y then -- hit on the top right quadrant else -- hit on the bottom right quadrant end
Rob
@rob and @starcrunch
Thanks for your responses… I however did not provide a good example of what I am looking to do.
The ring or image that I attached in the original post needs to be created in the game. BECAUSE I need it to rotate when the user drags it and be able to detect an object hitting a specific colored quadrant. Lets say a green rectangle were to hit the red quadrant, it would detect the collision and game over… That kind of concept. If I used an image, then there would be no way to detect if the rectangle hit a specific color because the ring ISN’T in a fixed location. It is rotating on a certain anchor point but the colors will spin around like a pin wheel. Can’t wait for the responses! Thanks in advance!
-Max
Ah, got it.
Well, you’ll still know what the wheel looks like in its “home” state.
Assuming the wheel rotates around its center (not sure, since you mention anchor points), you could find its angle like so (untested):
local angle = math.atan2(pos.y, pos.x) -- pos = collision point local degrees = math.deg(angle) degrees = (degrees - wheel.rotation) % 360 -- The wheel may have rotated ahead, so what are we really -- hitting? Normalize the result to the [0, 360) range. if degrees \< 90 then -- purple elseif degrees \< 180 then -- green elseif degress \< 270 then -- red else -- yellow end
(This is about half of the idea underlying the shader.)
THANKS SOOO MUCH! That is exactly what I am looking for!
Now, that I know how to detect the collision, how would I go about making the actual wheel?
If I am doing the shader method or whatever it is, can you please give me the exact code on how to make it along with step by step instructions?
Thanks! SO EXCITED!
-Max
your a genius! I figured the rest out on myself and everything worked! No need for code or instructions! thanks!
Heh, you ninja’d my reply. 
Glad to hear it!
So now I have the wheel and rotation implemented. I have another question for you.
I now created the object that will fall from the center of the wheel and hit/bounce off of the colors of the wheel.
How can I make it so the ball will bounce off the sides of the wheel?
I already made the object “dynamic” so it falls from the center but instead of bouncing off of the sides of the wheel, it falls through…
If i make the entire circle/wheel “static”, the ball immediately bounces up because the wheel is just a filter.
I need ONLY the walls or color parts of the wheel to have a “static” physics body in order to allow the object that is falling to bounce back up and repeat the same process.
For example,
Picture a brick-breaker game inside my wheel. And the quadrants of the wheel are the “paddles” or “walls” that keep it in. When the ball hits a side, it bounces back up and goes towards another wall, etc.
Thanks in advance!
-Max
Ah, this was actually what I meant to say in my reply.
Since you’re already inside the wheel (visually, anyhow), I think you’d want to assign it an outline body. I haven’t had occasion to use one myself, so I don’t know whether it tries to “fill in” the body; if so, I also see “edge shape (chain)” bodies nearby in the docs. Somebody else might have a better idea, here.
Can you tell me how to use outline body and/or edge shape (chain)?
I am very confused! Thanks!
From looking at the docs, my guess is:
local chain = {} for i = 1, 32 -- it says edge shapes can take 32 vertices... local angle = 2 \* math.pi \* (i - 1) / 32 chain[#chain + 1] = radius \* math.cos(angle) -- whatever your wheel's radius is... chain[#chain + 1] = radius \* math.sin(angle) end physics.addBody( wheel, "static", { chain = chain, connectFirstAndLastChainVertex = true })
but again, I haven’t played with these (yet?) myself. 