Isometric Pixel Art
slynyrd.com
slynyrd.com
https://youtu.be/ZW8gWgpptI8 GDC presentation by the developer of A Short Hike
My review: a fun, calming, and enjoyable 2 hour game with a heartwarming ending.
https://www.polygon.com/23278977/live-a-live-hd-2d-remake-sq...
I had to implement "snap to grid" calculations in the background for moving units inside buildings, meaning for the depth sorting algorithm, I pretend they are on a different tile (when needed). Unfortunately I dont have a video of this yet.
As for efficiency, I implemented static quads (for non moving items) and only draw items within the quads on screen. And for units/vehicles, I do a rectangle collision check (unit rectangle compare to screen space rectangle). It's very fast!
You can find progress updates on: https://www.reddit.com/r/Archapolis/
Or a few video logs at https://www.youtube.com/channel/UCUYLstskSLNcSkFg1giTBtQ
Shouldn't that be sorting by the world.y position? Ie, northness, rather than northness + altitude = world.y + world.z = screen.y.
I'm not sure about how much it matters for your game particularly (you don't seem to have world.z coordinates), but in general screen-space operations are a recipe for that sort of bugs, and should be avoided whenever practical.
My game is an "old fashioned" isometric game, meaning it is a 2D game through and through. All assets are square (for top down) or rectangle (for isometric) sprites. Of course, since it's pretending to be a 3D game, you have to draw/place the isometric tiles oddly so the inner rhombus (or hexagon, which is what an isometric cube is without shading) are drawn flush, since the graphics engine is working with rectangles. Thus the sprite's rectangles overlap like this: https://i.imgur.com/NTNHvbL.png
In order to simulate a camera looking into a 3D world, I need to draw everything from the top of the screen to the bottom, in that order, so assets with height are drawn over everything behind it (in world space)
For simulating world height (e.g. something flying one tile off the ground), you just need to move the sprite's screen.y position up the sprite's height (i.e. the height of the rectangle) per tile of height.
I have yet to implement terrain height into my game, but I think there are a couple ways to accomplish this.
1.) I can store the part of the asset touching the ground for all assets stacking upwards (like a multistory building). Thus I can keep the depth sorting algorithm I have.
2.) Or I can add the asset's world height multiplied by asset's (rectangle) height to the screen.y position (again, just for the depth sorting part)
For both cases, I may need to add micro adjustments if I need a specific order within the tile stack itself (seems unlikely). edit: this wont be needed unless I have overlap in the stacking, and I wanted to e.g. have something lower down on the stack be drawn over something above the stack, like an antenna or w/e.
Lastly, this only works if all assets are the same size (thus larger ones are a combination of smaller sprites).
Hope I explained this clearly.
To be fair, I was pilfering loanwords like "screen-space"(adj) from the 3D dialect.
> In order to simulate a camera looking into a 3D world, I need to draw everything from the top of the screen to the bottom
Right, the point I was trying to make was that, technically, you need to draw things from the north edge of the world to the south. If you have a asset with height, you need to draw it at a higher screen position, but also a later time, than a low/short asset that's at norther world position but lower screen position. (Presumably you know that already; I was mostly asking/objecting about confusing the screen position versus the world position.)
> I can add the asset's world height multiplied by asset's (rectangle) height to the screen.y position (again, just for the depth sorting part)
My point was that you'd add[0] the world height plus the world.y position, in order to get the screen.y, but depth sort based only on world.y, independently of height or screen position. That way things that are vertically on top of each other have the same world x and y coordinates (differing only in z), even though they're draw at different screen.y coordinates to provide isometric simulation of height.
0: give or take factors of -1 depending on which way the various coordinate axes go
Most 2d engines use shader system underneath, it easier to write a shader to solved all the z-sorting problems. Only minimal 3d maths and billboarding(tile) are all you need.
I thought it was pretty exciting at the time, but it was actually amazing how few people really got it.
Celebrating pixels and pixel art only seemed to make sense to a small group within the overall population, even of portfolio-reviewing folks.
This came as a minor shock to me, as someone who was surfing Pouet and various pixel art sites all the time. :-)
I'm also recently starting to get into pixel art. Maybe you have some cool pixel art galleries or even tutorials you could share with me?
What's your favorite pixel art?
I do remember DA had some really great tutorials, and Pixeljoint was full of neat stuff to look at. Twitter was also a good place to check sometimes.
In a bit less mature vein, here's a 2D pixel sketch I made a while back that came to mind. I was trying to recreate the enthusiasm I had when drawing combat pictures as a kid.
https://www.reddit.com/r/PixelArt/comments/rq1z8d/now_green_...
When I taught art at the local college, I would sometimes give extra credit to students who tried pixel art, and I usually spent some time demonstrating how photoshopping could be done effectively and even quickly at the pixel level.
If you can work effectively with pixels (and maybe beziers in the vector world, not just the manipulation technique but the minimal-node style), you can pick up just about any graphics tool faster. I would even include 3D design tools in that.
https://www.eboy.com/pool/everything/1
They are the isotitan. No discussion of isometric pixel art would be complete without it.
Behold their PIXORAMAS!
I found it interesting around that time that user interfaces finally got to have less visible pixels due to higher resolutions and full color antialiasing, as well as proper 3D graphics, and yet the retro pixelated pseudo-3D style was trending so much.
https://www.khanacademy.org/computer-programming/iso-buildin...
https://www.khanacademy.org/computer-programming/bricks/4672...
With scrolling (different format from the Ant Attack to Head over Heels one).
Edit: and Crystal Castles a few years.
Graphics will be what medium and artist allow; in that phase the implementation of depth management in projection was especially impactful.
Wikipedia article: https://en.wikipedia.org/wiki/Isometric_video_game_graphics
[1] https://www.eurogamer.net/the-classic-8-bit-isometric-games-...
(Oh, and the title always made me wonder if it was a Tears for Fears collab, which seemed like such a rad idea at the time)
As others pointed out Zaxxon and Marble Madness came first, but neither allowed the same sort of interaction with the environment (changing depth and moving other blocks around).
Seeing Knight Lore, it very clearly must have been the inspiration for Viva Mortis. How cool. Thanks for sharing.
19.5959179423 to be precise
16*cos(30)/(sin(30)*sqrt(2)) to be exact.
So this is 16 × √2 ≈ 22.6 or 23px, which seems over tall to me
20px looks good to me, but maybe it's subjective.
Ratio between the foreshortened diagonal of top surface and foreshortened height of the cube would be sin(30)/cos(30) if they were same length in 3d.
Since they don't have the same length in 3d (diagonal is sqrt(2) times longer than cube height) the final ratio in projection between cube height and diagonal comes out to be cos(30)/(sin(30)*sqrt(2)) so more than 19px and less than 20px (a little bit closer to 20px) for the foreshortened diagonal of 16px.
I've stumbled across so many SketchUp imported meshes that are just . . hmm . . I don't know the scientific word for it. "Unconventional" is a nice one. Remesh is going to do some weird stuff there.
[1] Camera>Orthographic Camera Rotation> X:54.7, Y:0.000004, Z:45
In a previous thread [2], Oskar Stålberg, creator of the games Bad North, Townscaper, is talking about his use of grids and their dual for procedural tile placement.
Franekk, an amazing pixel artist, is reacting to this that hex-grids are difficult for pixel-art, and later figures out that Oskars trick does indeed work for pixel-art too [3].
[1]: https://twitter.com/Franrekk/status/1485669221711425544 [2]: https://twitter.com/OskSta/status/1448248658865049605 [3]: https://twitter.com/Franrekk/status/1486045914930233351
By the way, I have a title editor that supports isometric tiles. Here it is if anyone wants to play with it:
I'd like to be able to generate 3d diagrams of infrastructure maps using the python based mingrammar "Diagrams as Code" approach: https://diagrams.mingrammer.com/docs/guides/diagram presently this can only do 2d SVG.
Loads of good iso resources mentioned here in the thread, too. Does anyone know of anything similar but for voxel art/artists?
I've dabbled with regular pixel art, but never quite figured it out and haven't found much in the way of good tutorials.