How to achieve this background terrain effect

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|49\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Art and Sound -> How to achieve this background terrain effect
Sun, 11 Apr 2021, 16:17
HoboBen	How to achieve this background terrain effect I was admiring the background terrain features in The Secret Games Company's Kim And I was wondering how to achieve something similar I think the roads are just overlaid - I can do that no problem But how do they get that gorgeous background terrain without obvious signs of tiling? Maybe just... lots and lots and lots of tiles? If you look at one of the screenshots with steps in them, you can see the terrain is perspective correct even along the walls. And in the top-right you can see its not all grid aligned And get this... Its all PROCEDURALLY GENERATED Its not hand painted for every scene! Any guesses? -=-=- blog \| work \| code \| more code
Sun, 11 Apr 2021, 16:49
Pakz	From what I did with generated art is that you just program the painters hand that paints the picture. Brushstroke by brushstroke. Being able to program your own painting app effects is useful here!
Sun, 11 Apr 2021, 17:13
Jayenkai	Ooooh Lordy, that's gorgeous. As someone who's made a ton of grid/tile based games, I couldn't begin to assume how that's all done.. However.. You once made a lovely landscape generator, Hero Extant. If you took that, but generated an even bigger landscape, I bet you could get some nice "worlds" using that method. Split the world into a chunky grid, to add objects/building and the like, and add tiny tiles to make up most of the world. Render an area outside of the screen onto an ever scrolling buffer, and don't forget to add a noise pattern to give an artistic style. I think it'd be "doable"... But damn if I could ever pull it off!! -=-=- ''Load, Next List!''
Sun, 11 Apr 2021, 17:20
Jayenkai	Additional... It seems to me that this might be easier to pull off in 3D than 2D. Poly's instead of tiles, and with a simple shader filter over the top. -=-=- ''Load, Next List!''
Sun, 11 Apr 2021, 18:24
Jayenkai	A quick test. I used the following "tiles" There's grass and sand. Note that each "tile" is a middle, and a "fluffy" edge, with bits of transparency poking through. The terrain is randomly generated. A world of the grass tiles, and a path of the sand. Each tile is given a random rotation, a random X&Y scale, a random darkness, and a random -0.5 to 0.5 offset from the grid. ( DrawTile at (X+OffsetX)GridWidth,(Y+OffsetY)GridWidth ) All tiles are overscaled by about 1.5 grid size, on top. The random path generator moves in a smooth curved pattern, with occasional random turn or a complete random new-direction, and sets grid[floor(x),floor(y)] to be sand. That's all this is. And it took about an hour. If I had.. A) Time to spend on a better generator B) Tiles for different elements.. water, dirt, rock paths, etc. C) Tiles for buildings and such D) An ounce of artistic talent.. and then a nice shader on top to finish it off. ... Then, yeah, that all seems entirely feasible. -=-=- ''Load, Next List!''
Sun, 11 Apr 2021, 18:34
shroom_monk	It's hard to tell from the trailer and screenshots, but do you know how much of it is procedurally generated, and to what granularity? The website says "roam hand-painted towns and procedurally generated countryside", which to me implies that only the countryside is procgen, while the town designs are fixed? With fairly large tiles you could have large predesigned areas that slot together nicely (like how some roguelikes stick together premade rooms to make a larger dungeon), which would work well for that kind of hand-painted art style and the resources of a small indie team. It's quite possible they're doing something more advanced than that to get more granular procedural generation, but if they are then I suspect it's not tile-based, given how non-griddy the art looks. -=-=- A mushroom a day keeps the doctor away... Keep It Simple, Shroom!
Sun, 11 Apr 2021, 18:38
HoboBen	I think you might be right about it being 3D with a nice shader Jay. Pics 2 & 4 make me think that. I don't need quite the same level of detail - im gonna be covering everything with 3D grasses - but I'd really like to have mud patches looking half as good as in pictures 1 like what the house is sitting on and the paths the trees are on And in picture 5, you can see its not just a simple shader at the gradiant but there's pebbles too Maybe there are some hand painted set pieces I'd love to know how it was all done! \|update\| -=-=- \|update\| Jay thats amazing! -=-=- blog \| work \| code \| more code
Mon, 12 Apr 2021, 05:04
Krakatomato	If you own the game then take a look inside to see if you can dig out any assets from it. The images may help you understand what's going on. Personally, I don't think this is tile based, nor much of a grid at play either. I'd consider certain key elements like buildings to be placed first, at any angle (think of them simply as a rectangle that can be used as a rough collision guide too). Then I'd look at using techniques to place down roads/paths around these buildings. Bezier curves are probably helpful here and a simple smoothed out walk around the buildings to draw the local heavy-used paths/roads could work. Then probably place down known sprites from a random selection (at varying angles according to the curves), and in some cases maybe even perform some stroke patterns without any sprites - lots of possibilities here. I'd say the key is to ensure the main elements are in place. Determine start/end points of railway (and any key points in between) and run curves for it too. Trees appear to be rendered last as they can overlap buildings etc. Fun little project
Mon, 12 Apr 2021, 07:57
Jayenkai	As much as I was originally thinking "Definitely 3D", it was when I looked at the shadows of the trees that I changed my mind. Notice how the trees cast EXACT shadows. The shadows don't appear to be following laws of depth. They're quite obviously a case of.. SetColor(black); SetAlpha(0.25); DrawImage(x,y-shadowdepth,treesprite); .. or at least, that's what I reckon!! Or, maybe the trees are separate sprites overlaid on top of the 3D environment...? shrugs -=-=- ''Load, Next List!''
Mon, 12 Apr 2021, 11:41
HoboBen	If any part is 3D, then there's definitely a mix - the trees, houses and major roads are definitely just flat 2D overlays., the roads/traintrack might be a triangle strip along a bezier curve maybe, but still 2D and overlaid. You can see the houses that are rotated, the shadows don't all point the same direction, they're baked into the house image - Jay's method of drawing a shadow would work even better than what they're doing! (At a small cost of overdraw) -=-=- blog \| work \| code \| more code