Resources and Support
 Pixel Joint Forum : The Lounge : Resources and Support
Message Icon Topic: Isometric circles and spheres help Post Reply Post New Topic
Author Message
silverskies
Seaman
Seaman


Joined: 28 August 2022
Online Status: Offline
Posts: 3
Quote silverskies Replybullet Topic: Isometric circles and spheres help
    Posted: 29 August 2022 at 4:15pm
i found a few tutorials for isometric circles on this website, but all the images were dead links. Can anyone point me towards some good tutorials?

examples of dead link tutorials: https://pixeljoint.com/forum/forum_posts.asp?TID=6037 https://pixeljoint.com/forum/forum_posts.asp?TID=6033

i also am using tiles with a 4px wide base and 2px high side corner. im not sure how this would affect/warp my circles compared to the 2 px base with 1 px side corner


IP IP Logged
eishiya
Commander
Commander
Avatar

Joined: 04 August 2022
Online Status: Offline
Posts: 1109
Quote eishiya Replybullet Posted: 01 September 2022 at 5:30am
There's not a lot to it. Regardless of what sort of cube/square you draw in isometric, a circle is just a round shape inscribed inside it. And just like with orthographic pixel circles, there's a lot of leeway in how exactly you shape the parts that aren't cutting up against the square bounds.
I don't usually manually draw isometric circles, I use my image editor's tools:
I draw horizontal (top/bottom surface) circles by using the circle tool with a 2:1 width:height ratio and eyeball it, or draw it larger than I need and then scale it until it touches all four sides of the surface. It's possible to calculate the exact bounding box for the circle, but it's faster to eyeball it.
For vertical (left/right surface) circles, I use the circle tool within a bounding box that's as tall as one side of the surface and as wide as the whole surface, and then skew it into shape (the same as offsetting every two columns of pixels by 1px). Skewing distorts the clean shape somewhat, so then I do some manual clean-up, it's usually quick.

Isometric spheres are just spheres, they look like a circle from any angle when there's no perspective distortion. If you're asking about precisely inscribing them in a cube, then this approach should work:
1. Draw the three squares that bisect your cube (two vertical, one horizontal). You can do this by copy+pasting your sides and moving those copies over.
2. Inscribe circles in those squares.
3. The extrema (outermost points) of all those circles form the bounding box of your isometric sphere. Draw an orthographic circle in that box. This is your isometric sphere. The circles you previously drew are a sort of wireframe for it.
- In the case of a squished box like yours (yours is not an isometric square, but has faux perspective I guess?), your bounding box will end up a rectangle rather than a square. You should still draw a 1:1 circle, using the width as a guide, so your sphere will be "taller" than your box. But because it's a sphere, it'll still look fine.
As you might guess from that last note, you can shortcut this entire process by only drawing the horizontal bisection and inscribing its circle, and drawing your sphere based on the width of that. The others aren't needed because it's a 1:1 circle.

IP IP Logged
silverskies
Seaman
Seaman


Joined: 28 August 2022
Online Status: Offline
Posts: 3
Quote silverskies Replybullet Posted: 01 September 2022 at 10:32pm
Thank you for the useful tips ^^

What do you an by this not being an iso cube though? i just made it line up with the grid I'm using. (Blue Lines)

From my understanding this grid is better for making tiles for video games

Should i change the size of the cube to make it square on all sides? im fairly new to this and trying to wrap my brain around geometry in this grid
IP IP Logged
silverskies
Seaman
Seaman


Joined: 28 August 2022
Online Status: Offline
Posts: 3
Quote silverskies Replybullet Posted: 05 September 2022 at 4:45pm
or do you mean it is squished because im using 2:1 instead of 1:1?
IP IP Logged
eishiya
Commander
Commander
Avatar

Joined: 04 August 2022
Online Status: Offline
Posts: 1109
Quote eishiya Replybullet Posted: 12 September 2022 at 6:43am
(Please don't PM me about replies to threads. It won't help me see your post any sooner.)

Your "cube" is wider than it is tall and doesn't look like a cube, that's all I meant. Each side is drawn 32px wide and 32px tall, but you've neglected that the sides are foreshortened since we're seeing them at an angle, so they're wider in "reality" than they appear in isometric projection.

Here's a chart of a unit cube (i.e. a cube where all sides are 1 unit long) in common game projections that I made when planning out some RPG assets, the last one is the relevant one here:
Notice how each side is 1/sqrt(2) or about 0.707 wide once projected, and the height is cos(30) (or cos(arctan (1/2)) if you want strict pixel iso). This means if your cube is 32px tall, each side should be about 25-26px wide. Or if you want each side to be 32px wide, then the cube should be about 39-40px tall. (The cube's height in this case is the height of the vertical edges of the cube, not the size of your image.)
IP IP Logged
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum