[HN Gopher] Isometric Pixel Art
___________________________________________________________________
Isometric Pixel Art
Author : tosh
Score : 328 points
Date : 2022-12-01 10:37 UTC (12 hours ago)
(HTM) web link (www.slynyrd.com)
(TXT) w3m dump (www.slynyrd.com)
| ilyt wrote:
| Anyone tried tilting pixels at same angle isometric view is ?
| darkteflon wrote:
| Wonderfully written, always lovely to hear someone generously
| share their craft.
|
| Loads of good iso resources mentioned here in the thread, too.
| Does anyone know of anything similar but for voxel art/artists?
| lencastre wrote:
| Shout out to Magicavoxel!
| zevenda wrote:
| Love this style. Can anyone recommend some modern games done this
| way?
| metadaemon wrote:
| Into the Breach immediately comes to mind.
| gabrielsroka wrote:
| 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...
| themodelplumber wrote:
| 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 wrote:
| 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?
| themodelplumber wrote:
| I'll have to look around and see if I can find that old site.
|
| 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.
| bigtunacan wrote:
| Enjoyed this post.
|
| I've dabbled with regular pixel art, but never quite figured it
| out and haven't found much in the way of good tutorials.
| kris-s wrote:
| I wrote a short guide for how I did some of the pixel art in
| Smol Dungeon. Hopefully I kept it approachable.
|
| https://smoldungeon.com/pixel-art
| jmiskovic wrote:
| Here's what AI can produce these days:
| https://twitter.com/emmanuel_2m/status/1598042945906581504
| faitswulff wrote:
| 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
| YesBox wrote:
| 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 wrote:
| > 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.
| YesBox wrote:
| Caveat: I dont have any experience with 3D games, so we may
| not be speaking the same dialect.
|
| 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.
| themodelplumber wrote:
| I enjoyed your latest video update, thanks for posting it.
| amelius wrote:
| Am I the only one who finds isometric projections uncanny?
| sxp wrote:
| 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...
| the_gipsy wrote:
| 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.
| sosborn wrote:
| IMO, Square Enix has perfected this style.
|
| https://www.polygon.com/23278977/live-a-live-hd-2d-remake-
| sq...
| twic wrote:
| Or even where you play through the first 99 levels thinking
| it's purely isometric pixel art, then on the final level, for
| the fight against the boss with perception-warping powers, it
| unexpectedly changes to a first-person shooter.
| frozenlettuce wrote:
| that would be awesome for a Vandal Hearts-inspired game
| CobrastanJorji wrote:
| 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.
| clumsycomputer wrote:
| "A Day in the Park" is beautiful
| twobitshifter wrote:
| 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?
| johnisgood wrote:
| Hexels (https://marmoset.co/hexels/) is a good piece of software
| for making isometric pixel art (animated, too!).
| atum47 wrote:
| 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
| MilStdJunkie wrote:
| 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
| TheHideout wrote:
| Happy to see slynyrd featured here. Not only is his art great,
| but he is a nice person and gives quality personal critiques of
| your pixel art via his patreon on request, of which I'm a member.
| smeagull wrote:
| Love it. I do wish more western RPGs kept with pixel art,
| especially of the isometric kind.
| sys32768 wrote:
| Conjures happy memories of Populous (1989) and Cadaver (1990) on
| the Commodore Amiga.
| habitatenergy wrote:
| 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.
| NohatCoder wrote:
| 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 wrote:
| I'd say >19px.
|
| 19.5959179423 to be precise
|
| 16*cos(30)/(sin(30)*sqrt(2)) to be exact.
| pacaro wrote:
| They're not using 300 though, but rather 1:2 (approx 26.50)
|
| So this is 16 x [?]2 [?] 22.6 or 23px, which seems over tall
| to me
| scotty79 wrote:
| 30 deg is not angle of the lines on the projection. It's
| the angle at which camera must be oriented in 3d space to
| achieve ratio of 1:2 on projection.
| pacaro wrote:
| Aah, that makes more sense
| pacaro wrote:
| https://i.imgur.com/YnHiRTG.png
|
| 20px looks good to me, but maybe it's subjective.
| yreg wrote:
| Why is that?
| Sharlin wrote:
| One reason is, at least, that because pixel art "isometric"
| is actually 2:1 dimetric, the vertical axis is slightly less
| foreshortened than the two horizontal axes.
| yreg wrote:
| And why can't it be "true" isometric? Would it look bad?
| d_tr wrote:
| Yeah it's what you get with 2:1 lines. Actual isometry
| would require some 1:1 "stairs" on these lines, making
| them look less nice.
| scotty79 wrote:
| Let's look at top surface. To have it 2 times wider
| horizontally than vertically in projection camera angle must
| be 30 deg down from horizon.
|
| 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.
| pfortuny wrote:
| 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.
| debaserab2 wrote:
| 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.
| mdp2021 wrote:
| 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.
| pfortuny wrote:
| Thanks, did not know Marble Madness.
| layer8 wrote:
| See also _Spindizzy_ for a similar game, which came two
| years later and some opine is better than _Marble Madness_.
| Cockbrand wrote:
| If you're into retro gaming at all, it's a very fun game on
| 16bit platforms.
| layer8 wrote:
| 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 wrote:
| 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-...
| itronitron wrote:
| they missed Zaxxon >> https://en.wikipedia.org/wiki/Zaxxon
| dark-star wrote:
| Last Ninja on the C64 and (to a certain extent) Spindizzy
| come to mind as well...
| pfortuny wrote:
| Yes! Ant attack came with the Spectrum if I remember
| correctly!! I did not recall it. Thanks. It was an incredible
| game.
| themodelplumber wrote:
| Good memories. Head Over Heels (C64 here) was one I used to
| just stare at, waiting for the next animation, musical cue,
| or room reveal...it was very well put together.
|
| (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)
| tecleandor wrote:
| Being Spanish this bring me, of course, to La Abadia del
| crimen:
|
| https://en.wikipedia.org/wiki/La_Abad%C3%ADa_del_Crimen
| pfortuny wrote:
| Wow, did not know that. Also Spanish, myself, btw.
| swayvil wrote:
| 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 wrote:
| 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 wrote:
| 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
| matthewfcarlson wrote:
| 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 wrote:
| I adore t3ssel8r's work, it looks _so_ good
| scotty79 wrote:
| Shouldn't those cubes be a bit higher? They look squashed to me.
| andai wrote:
| That's as tall as it can be in a 44x44 tile. I think you'd need
| non-square tiles to properly render actual cubes.
| scotty79 wrote:
| Yeah, that's probably it. Although since we are overlapping
| them vertically there's really no point in keeping them
| square.
| dukeofdoom wrote:
| 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.
___________________________________________________________________
(page generated 2022-12-01 23:01 UTC)