https://aran.ink/posts daily 0.75 2023-03-21 https://aran.ink/posts/celeste-tilesets monthly 0.5 2021-06-04 https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620441328317-2CWFO5RI16ODUYS7A46I/celeste_forsaken-city_large_6.png Video Games Blog - Celeste Tilesets, Step-by-Step https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620436638786-37XSHD92CGYE2QW8OS8U/celeste_forsaken-city_large_3.png Video Games Blog - Celeste Tilesets, Step-by-Step https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620429307727-UGVI2T6QDDG5341VY0BQ/celeste_forsaken-city_large_2_noedge.png Video Games Blog - Celeste Tilesets, Step-by-Step https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620443256737-0D90WCUWQPAUVGGBGALQ/celeste_forsaken-city_large_9.png Video Games Blog - Celeste Tilesets, Step-by-Step https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619941435351-122E7IW5WECBEDNZVKY1/celeste_tilesets_breakdown.gif Video Games Blog - Celeste Tilesets, Step-by-Step - I created this animation to show each step in the process of transforming this room’s “graybox” level geometry into a beautiful, complex space. You don’t want to know how long it took to make this animation! https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620438495687-05YX7KBPK2V09DBY383P/celeste_forsaken-city_large_4.png Video Games Blog - Celeste Tilesets, Step-by-Step It seems subtle, but this solves one of the major problems with 8x8 tiles — they look super repetitive all lined up next to each other! It’s such a clever and simple solution that I’m almost annoyed that I didn’t come up with it myself. Let’s compare this approach to working with 16x16 tiles to see why this is so efficient: If we put two of our 8x8 tiles side-by-side, we get the equivalent of a single 16x8 tile — but if we select from 4 variants for the tile in each position, we get the equivalent of 16 different 16x8 tiles for a lot less work than a single 16x16 tile. Sure, you still have to make all those variants — but once you’ve made one, it’s actually quite easy to copy-and-paste the tile, tweak a few pixels, and boom, you’ve got another variant. With auto-tiling, this random selection can be done automatically, so it adds virtually no overhead for the level designer. You might be thinking “Aran, 16x8 isn’t the same as 16x16!” That’s true — at this point, our tilesets stop only 8px “deep” into each solid, leaving a lot of dark, empty space with a very stark transition. Pedro has a solution for that too, though… https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620441630626-EZNIJFHJEVQMKZDLDLTM/celeste_forsaken-city_large_7.png Video Games Blog - Celeste Tilesets, Step-by-Step https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620442484270-AUCKHLYT5XQNLPS93ZRK/celeste_forsaken-city_large_8.png Video Games Blog - Celeste Tilesets, Step-by-Step https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620435069870-0NR2LBWXRNLVWW736JO4/celeste_forsaken-city_large_2_no_fill.png Video Games Blog - Celeste Tilesets, Step-by-Step https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620424975009-M6W8HZC3B7FT447WBJQA/celeste_forsaken_city_grid.PNG Video Games Blog - Celeste Tilesets, Step-by-Step https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620434735942-41DJX7946ZCZNTSXWNBR/celeste_forsaken-city_large_2_no_fill_no_edgel.png Video Games Blog - Celeste Tilesets, Step-by-Step https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620439370589-V8IGJRINL8D6UKQOBDEA/celeste_forsaken-city_large_5.png Video Games Blog - Celeste Tilesets, Step-by-Step Again, don’t be intimidated by these tiles — they’re even more abstract and easier to make than the edge variants, and you only need ~10 of them in total, since unlike the edge tiles, they’re all functionally equivalent. They follow similar rules: https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620428128223-JIXTGG5G09YLAI4OFW5R/celeste_forsaken-city_large_1_noedge.png Video Games Blog - Celeste Tilesets, Step-by-Step https://aran.ink/posts/room-design-procjam-talk monthly 0.5 2021-05-10 https://aran.ink/posts/better-constraints monthly 0.5 2021-06-17 https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620104967156-QPD59YR7NRL400J2BZXW/room_slides_loop_gif.gif Video Games Blog - Better Constraints For Better Dungeons https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619381293100-CDITHXSF65BE44KCEIY2/rigid_rooms_with_subunit_lines_cropped.PNG Video Games Blog - Better Constraints For Better Dungeons - Tightly constrained rooms are boring This is how most metroidvania-style generators work — if we want two rooms to connect, they must share an exit with a matching XY position. That results in room designs that feel boxy and repetitive. https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620517586739-UODG1BZBVZPAO9DGN1TQ/ss_98370611f4b086e3868cbe710570ad41393c60fb.1920x1080.jpg Video Games Blog - Better Constraints For Better Dungeons https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619381333217-L9V59R4449U4GSNGT992/non-euclidean-rooms-overview.PNG Video Games Blog - Better Constraints For Better Dungeons - Loosely constrained rooms are tricky to arrange The fewer constraints there are on rooms, the cooler they can be, but all that complexity makes it hard for the generator to build worlds out of them. These designs still fit into a grid, but their exits won’t line up. https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620516957347-8308B51L3S79P8QWN1Y3/debug.png Video Games Blog - Better Constraints For Better Dungeons https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619381333217-L9V59R4449U4GSNGT992/non-euclidean-rooms-overview.PNG Video Games Blog - Better Constraints For Better Dungeons https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619414446314-1MANV84XXVZ2X3QSPOMG/disjoint_rooms.jpg Video Games Blog - Better Constraints For Better Dungeons https://aran.ink/posts/boston-fig-2021 monthly 0.5 2021-05-27 https://aran.ink/posts/cat-girl-goth-rave-soundtrack monthly 0.5 2023-11-15 https://aran.ink/posts/remember-ost-jam monthly 0.5 2023-11-15 https://aran.ink/posts/grapple-dog-ost monthly 0.5 2023-03-22 https://aran.ink/posts/plastic-and-plate monthly 0.5 2023-11-15 https://aran.ink/posts/category/Art monthly 0.5 https://aran.ink/posts/category/Video+Games monthly 0.5 https://aran.ink/posts/category/Music monthly 0.5 https://aran.ink/posts/category/Technical+Art monthly 0.5 https://aran.ink/posts/tag/Visual+Novel monthly 0.5 https://aran.ink/posts/tag/Guide monthly 0.5 https://aran.ink/posts/tag/ProcJam monthly 0.5 https://aran.ink/posts/tag/Vocals monthly 0.5 https://aran.ink/posts/tag/Game+Music monthly 0.5 https://aran.ink/posts/tag/Room+Design monthly 0.5 https://aran.ink/posts/tag/Metroidvania+Generation monthly 0.5 https://aran.ink/posts/tag/Talks monthly 0.5 https://aran.ink/posts/tag/Game+Design monthly 0.5 https://aran.ink/posts/tag/Pixel+Art monthly 0.5 https://aran.ink/posts/tag/Vocal+Performance monthly 0.5 https://aran.ink/contact daily 0.75 2021-05-10 https://aran.ink/metroidvania-generation daily 0.75 2023-03-22 https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619582834175-GQ4EFNIJNG7AYJG1DQ6N/doublejump-adapter-grapple-gif.gif Metroidvania Generation - Powerups Worth Hunting For Exploring the a new world shouldn’t feel like a fetch-quest. That means avoiding simple lock + key systems in favor of upgrades that open up new areas to explore by changing the way you move and fight. https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620111880609-5GP2VBPDDQ4YOFXP8ZLY/doublejump-challenge-gif2.gif Metroidvania Generation - Tight Platforming Movement upgrades synergize with one another, encouraging the player gain mastery by tackling familiar rooms in new ways. CorgiEngine provides a solid base for building out lots of different platforming mechanics, including Celeste-style dashes, wall-jumps, and grappling hooks. https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619383278052-KT3M0YY54VGNJS7ATHZS/doublejump-item-gif.gif Metroidvania Generation - Classic Metroidvania Action Fill out the mini-map by wandering through a world full of upgrades, enemies, secrets, and shortcuts. https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620583937990-6D1SXSHM3HIZ9212XH74/keypoint_route_placement_trans_4.gif Metroidvania Generation - Narrative Planning The generator starts with a narrative specification, which describes what items should exist in a given world, where they should be placed, how they block access to new areas of the dungeon as the player progresses. These specifications are derived from a combination of hand-designed templates and random mutation, resulting in dungeons that always feel good but are never exactly the same. https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619587954610-RHR03L4KHE9HJM2TJXB2/big_map_generation_0.gif Metroidvania Generation - Big Dungeon Energy The generator attempts to create a map feels like a physical, interconnected space. It has distinct zones, a clear gameplay narrative, and just the right amount of dead-ends, backtracking, and optional content. https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1620584816366-XM6BPG0KEIRB51B7V4WO/mandatory_modulations_cropped.gif Metroidvania Generation - Modular, Hand-Designed Rooms Room templates are designed by hand in Unity using the native Tilemap and Prefab editors, along with a bunch of custom scripts. Rooms are then modified as needed during dungeon generation by changing tilesets, enemy spawns, and even the exits to other rooms! https://aran.ink/home-1 daily 1.0 2023-03-22 https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619206176213-0A45S7CL0N0X5X2VIESP/PXL_20210321_155422241_2.jpg https://aran.ink/pixel-art daily 0.75 2023-03-22 https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/fc8843f8-ead3-4a5f-ad5d-a3ff3c530b3e/zones_snow_particles.gif Pixel Art Celeste-style snowy-rock tilesets https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/02634cc7-7393-4768-ac2d-e706cea16a96/adventurer_leg_analysis.gif Pixel Art Run cycle analysis & frameboost (original art by rvros) https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/0994bc7c-7321-4ff9-b5ee-3c814216c5a7/combat_particles_1.gif Pixel Art Combat VFX (original models by rvros) https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/96246fd0-5b7e-4489-a865-679aaff8f550/big_map_generation_0.gif Pixel Art Metroid-Style Minimap https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/effc49ae-7bd1-43c4-a86c-970e3a4c434f/tileset-replace-material-gif.gif Pixel Art Tileset replacement shaders https://aran.ink/figma-embed-test daily 0.75 2021-05-14 https://aran.ink/figure-drawing daily 0.75 2023-03-22 https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/04c95747-c6a0-43b1-8f71-c981bfb80e2e/Evan_Hair_Study_1.png Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/d6714064-0a5e-4f34-9a95-5a212c7dd52d/Hair_Iterations_1_Redux.png Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/5b27bd7f-8fae-41ba-9582-effcb202b201/Iteration_Template+%281%29.png Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1b0b1fb6-e3e1-4a70-a64a-f3b6cb5936ba/hand_studies.gif Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/4c4ce625-2a0a-456c-bb02-78c2d8da722f/forearm_muscles_anim_01+%281%29.GIF Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/32b7ebfc-4910-4111-a3ad-6a605e425a2b/IMG_1702.PNG Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/7caad9b1-dbc5-448a-b20d-6386cfdc1e81/IMG_1694.PNG Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/f6aac661-cea4-48d6-9154-97e18d973cbd/Inner_Legs_Study_1.png Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/82d178fe-a5c3-4409-a124-3dc949d91c89/Torso+Study_masc_01_clean.jpg Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/660a6b12-b25a-4004-8868-c36a0fdda3bb/IMG_0130.png Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/a38569cd-fdf1-4b6c-acfe-89cbc811550e/Back_Study_01.png Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/8ce5b2a2-4b4a-411c-b0c8-271d48e322ac/Torso_Study_Femme_01.png Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1ec34320-b3f5-46ff-968a-a86471182c96/IMG_0117.png Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/cc397487-01d7-478d-a620-cd42dd017243/IMG_0133.png Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/03721122-f873-4889-b883-e4f224285299/IMG_0047.png Figure Drawing https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/d703b52f-1aa0-41a1-b6cd-6d7bd9693a38/IMG_0039.png Figure Drawing https://aran.ink/vox daily 0.75 2023-03-21 https://aran.ink/game-music daily 0.75 2023-03-21 https://aran.ink/metroidvania-generation-3 daily 0.75 2021-05-04 https://aran.ink/metroidvania-generation-3/modular-rooms-sgg48 monthly 0.5 2021-04-28 https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619941435351-122E7IW5WECBEDNZVKY1/celeste_tilesets_breakdown.gif Metroidvania Generation - Celeste-like Tilesets https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619592060304-XSOVGHYGQBG4K3ZGWAVC/without_replacement_material.png Metroidvania Generation - Celeste-like Tilesets This debug tileset shows how the tile variants are automatically randomized along both exterior and interior edges. Numbers 0-9 represent internal edge variants, and tiles with 1-4 dots represent external edge variants. (Sorry, they’re backwards here by mistake!) https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619592074720-BXZYQE22JKP49MK9Q59M/with_vertex_colors.png Metroidvania Generation - Celeste-like Tilesets Using a debug shader, we can visualize the vertex color of each sprite in the tilemap. When the tilemap is rendered, the tileset replacement shader uses these vertex colors to determine which tileset atlas to sample from. Magenta tiles are drawn by sampling the “base” tilemap, red tiles sample the “alt” tilemap (ex. another neighboring zone), and teal tiles use a doodad overlay texture (snow piles, vines, etc.) https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619592346678-F7Y7W8NXV88J469JEVA6/with_replacement_material.png Metroidvania Generation - Celeste-like Tilesets With the tileset replacement shader active, the two tilesets blend together nicely. Note how the blue and gray tilesets both use the same “background” or “clear” color — choosing a color that fits well into both palettes helps join the two tilesets together. https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619591932056-A4TQO56S4J5UQOU0KWIP/tileset-replace-material-gif.gif Metroidvania Generation - Celeste-like Tilesets We can even blend between alternate tilesets at runtime! This is super useful when instantiating rooms, since it lets us apply any tileset to any room, without having to regenerate or modify the underlying Tilemap. Since tilemap modifications are one of the most expensive parts of room instantiation, this saves us a ton of computation time! https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619243230674-6484PRNSAFUV8DLI484H/screenshot_640x360_2020-07-22_22-32-42.png Metroidvania Generation - Celeste-like Tilesets https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619243238990-ZWKW13MLGS20CXYBNJVB/screenshot_640x360_2020-07-22_22-33-42.png Metroidvania Generation - Celeste-like Tilesets https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619243250636-F9J3DR3ODNFK83JP8S4P/screenshot_640x360_2020-07-22_22-30-34.png Metroidvania Generation - Celeste-like Tilesets https://aran.ink/metroidvania-generation-3/room-design-talk monthly 0.5 2021-05-04 https://aran.ink/metroidvania-generation-3/modular-rooms monthly 0.5 2021-04-28 https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619588883579-715UIZSZM3QI7T5SOZ6K/room_example.PNG Metroidvania Generation - Modular Rooms https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619588981393-DM559YC0QISANCTEDONG/room_anatomy_gif.gif Metroidvania Generation - Modular Rooms https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619582676533-1IPZQBICDVEKS255WBYE/long-modulation-gif.gif Metroidvania Generation - Modular Rooms https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619589240499-IH756YLISAEO2VSTACN3/mandatory-modulations-small.gif Metroidvania Generation - Modular Rooms https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619589098243-QYLMO677R3IPO0K36CD5/tall-modulation-gif.gif Metroidvania Generation - Modular Rooms https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619582676533-1IPZQBICDVEKS255WBYE/long-modulation-gif.gif Metroidvania Generation - Modular Rooms https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619588911869-9IPPL3EPEA3LCIRVFS76/random_room_configurations_gif.gif Metroidvania Generation - Modular Rooms https://aran.ink/metroidvania-generation-3/non-euclidean-trickery monthly 0.5 2021-04-28 https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619414446314-1MANV84XXVZ2X3QSPOMG/disjoint_rooms.jpg Metroidvania Generation - Non-Euclidean Trickery https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619414477284-HP9DIQJE28ATZMY9E81G/room_slides_loop_gif.gif Metroidvania Generation - Non-Euclidean Trickery https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619381333217-L9V59R4449U4GSNGT992/non-euclidean-rooms-overview.PNG Metroidvania Generation - Non-Euclidean Trickery - Loosely constrained rooms are tricky to arrange The fewer constraints there are on rooms, the cooler they can be, but all that complexity makes it hard for the generator to build worlds out of them. These designs still fit into a grid, but their exits won’t line up. https://images.squarespace-cdn.com/content/v1/608316e08c3eff323f18d9e6/1619381293100-CDITHXSF65BE44KCEIY2/rigid_rooms_with_subunit_lines_cropped.PNG Metroidvania Generation - Non-Euclidean Trickery - Tightly constrained rooms are boring This is how most metroidvania-style generators work — if we want two rooms to connect, they must share an exit with a matching XY position. That results in room designs that feel boxy and repetitive.