Isometric Pixel Art

[sxp]

On a slightly related note, Three.js released a new version recently that has a pixel-shader postprocessor to give 3D scenes a isometric pixel-art feel: https://threejs.org/examples/?q=pixel#webgl_postprocessing_p...

[NortySpock]

Not the same method, but as I recall the developer of the game A Short Hike did a similar procedure - mostly to allow him to quickly draft 3D models and hide the low-poly models, artifacts, and "glitches" behind the pixel shader.

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.

[CobrastanJorji]

I wonder if there's a way to keep the pixels on the diagonal of the crystal that's moving up and down consistent, i.e. move them all up and down 1 at a time, rather than blend it as the shape moves in fractions of a pixel. It'd help it look more pixel art.

[the_gipsy]

Wow that looks indeed amazing. I can imagine a game that's 90% of the time isometric, but you can admire the scene in full 3D if you want.

[Aeolun]

That looks really cool. Kinda makes me want to do something with it immediately.

[thetoon]

is it just me, or is there some weird perspective glitch on the ground grid?

[frozenlettuce]

that would be awesome for a Vandal Hearts-inspired game

[beezlewax]

That's awesome

[YesBox]

I'm currently working on an isometric city builder game. It took me awhile to figure out how to depth sort all assets properly and quickly. I have walls that sit on the edge of a tile, i.e. they take up almost no floor space. Since my game will display the interior of buildings, this means the typical approach of sorting everything by the screen.y position (so long as every asset is a cube (or stack of cubes), or broken up into cubes) fails, because the bottom of the wall texture can be a whole tile-size away from the bottom of the asset.

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

[a1369209993]

> the typical approach of sorting everything by the screen.y position

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.

[themodelplumber]

I enjoyed your latest video update, thanks for posting it.

[johnisgood]

Hexels (https://marmoset.co/hexels/) is a good piece of software for making isometric pixel art (animated, too!).

[jmiskovic]

Here's what AI can produce these days: https://twitter.com/emmanuel_2m/status/1598042945906581504

[themodelplumber]

This reminded me, I used to have a portfolio site that was built around isometric pixel art.

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. :-)

[a20eac1d]

I'd love to check out your portfolio, if it is still online or you have it archived somewhere?

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?

[swayvil]

EBOY

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!

https://www.eboy.com/pool/~Pixorama/1?q=project

[Cockbrand]

Eboy were the definite leader of the early-oughties isometric pixel art fashion. At first I liked it a lot, but after a while, it went everywhere and became a bit tiresome.

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.

[agency]

Early at my last job (~10 employees) they got eboy to do a pixel art portrait of the early crew. I'm pretty sure they paid with shares and that company is doing fairly well these days, I wonder how much they ended up being worth

[gabrielsroka]

A few of my own, using ProcessingJS/vectors instead of pixels. The first one randomizes every time you Restart.

https://www.khanacademy.org/computer-programming/iso-buildin...

https://www.khanacademy.org/computer-programming/bricks/4672...

[pfortuny]

Not criticizing. This is what Ultimate did in Knight Lore https://en.wikipedia.org/wiki/Knight_Lore, and it blew everyone’s minds at the time.

[tecleandor]

Being Spanish this bring me, of course, to La Abadía del crimen:

https://en.wikipedia.org/wiki/La_Abad%C3%ADa_del_Crimen

[mdp2021]

Marble Madness (Mark Cerny and Bob Flanagan) predates that a few months.

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.

[layer8]

I remember Zaxxon, which was one of the first isometric games (1981/1982).

Wikipedia article: https://en.wikipedia.org/wiki/Isometric_video_game_graphics

[Yuioup]

I was Googling around to find more examples and found this blog post [1] which gives a nice list.

[1] https://www.eurogamer.net/the-classic-8-bit-isometric-games-...

[anigbrowl]

It's worth looking into the Filmation engine they invented, which went through 2 iterations before the company was acquired: https://en.wikipedia.org/wiki/Filmation_(game_engine)

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).

[debaserab2]

I found this indie game that I LOVED the artwork of a while ago: https://adamstrange.itch.io/viva-mortis

Seeing Knight Lore, it very clearly must have been the inspiration for Viva Mortis. How cool. Thanks for sharing.

[faitswulff]

If you’re on mastodon, Stefanie Grunwald has been a delight to follow for pixel art. For instance “Autumn Sun, 2019”: https://mastodon.art/@moertel/109427027594690593

[NohatCoder]

Nice guide, but one thing that seems slightly off: All the cubes don't look exactly cube shaped, they need to be slightly taller to look perfectly cube. If for instance a cube is 2x16 px wide, then the height at the side should be approximately 18 px.

[scotty79]

I'd say >19px.

19.5959179423 to be precise

16*cos(30)/(sin(30)*sqrt(2)) to be exact.

[yreg]

Why is that?

[MilStdJunkie]

Blender3d>Modifier>Remesh has a "blocks" modifier, it looks pretty nice, and you can set the camera to "isometric-ish"[1] . However. I hope your model topology is straightened out.

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

[PythagoRascal]

Somewhat related, there is a Twitter thread about (not quite isometric) hex-grid pixel-art [1].

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

[sys32768]

Conjures happy memories of Populous (1989) and Cadaver (1990) on the Commodore Amiga.

[clumsycomputer]

“A Day in the Park” is beautiful

[atum47]

I'm a sucker for pixel art, specially isometric ones. Thanks for the tutorial.

By the way, I have a title editor that supports isometric tiles. Here it is if anyone wants to play with it:

https://victorribeiro.com/tileEditor/?example=01

[habitatenergy]

Does anybody reading this thread have suggestions for open source engines/environments to interact/display isometric pixel art? I've looked at a few game engines and haven't found anything well suited for my purpose.

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.

[dukeofdoom]

I'm trying out midjourney for making game assets for my first game. It gets you 90% of the way there. Cut out, adjust colors in photoshop, scale and animate in Aspite. I don't have art experience, but this gets you good enough results for a hobby project, and better what I could draw.

[matthewfcarlson]

Reminds of the work that is https://www.youtube.com/c/t3ssel8r/videos is doing. I'm not in any way related, just interested in their work.

[fire]

I adore t3ssel8r's work, it looks so good

[twobitshifter]

I was reading this old thread on factorio about the projection that is used there oblique/axonometric. Isometric art and equivalents can speed things up, but I wonder how often you run into walls eventually, like factorios trains?