How to make a 3d space and 2d sprite game like Don’t Starve

1 favourites
  • 10 posts
From the Asset Store
2d mushroom sprite 2d game character enmy sprite game art
  • How to make a 3d space and 2d sprite game like Don’t Starve, because it is annoying to always use the program to set the sprite layer level

  • I don't think you can make a game similar to Don't Starve in C3, I think the closest thing is a top down game with a similar camera and that the objects stay at the same angle. But I'm new to C3 so maybe you can do a bit more

  • what i could find on youtube, looks like Faux 3d, or isometric game type 2.5D you can do it in C3, but requires some trigonometry knowledge for spinning the ground and stuff. i think was a tutorial on C2 that had a 2.5D world test thing, buggy as hell, but yea you could fake that 3d effect. since is not full 3d. but you will need lots of animations and lots of medium/advanced mathematics.

    however easier would be to just make the game in 3D directly using unity or something similar and just tilt the camera... towards that angle... less headaches.

    another way of doing it, is doing it top-view, instead of tilted, as long as you have the story and the gameplay is good, doesn't really matter what camera angle is at.

  • Here is how i do billboard sprites. Let's say you have a 320 by 240 screen.

    The ground texture, you need to use some sort of mode 7. I think someone ported Rojohounds mode 7, but im not sure.

    You could do a old school "Don't Starve", without the floor texture i suppose ;)

    I use one "2d" sprite, and one "3d" sprite. Put those in a container, for easy picking. You can use one "3d" sprite only, but then you need a starting x position and starting y position from the 2d map view, then do the translation. Put all the variables on the "3d" sprite. That's maybe better for older computers.

    Var1 = player.x - 2dsprite.x

    Var2 = player.y - 2dsprite.y

    Var3 = angle(0,0,Var1,Var2)-player.angle

    Var4 = 160+tan(Var3)*320 (The rule here is half the screen resolution, * the full resolution).

    Set the "3d" sprite x pos to var4.

    The y position of the "3d" sprite you can mess around with. In a raycaster engine, you would usaly set the y value half of the screen height (in this case 120).

    To set the height, just do:

    "somevalue"/Distance(player.x,player.y,2dsprite.x,2dsprite.y)/cos(anglediff(player.angle,angle(player.x,player.y,2dsprite.x,2dsprite.y)))*"somevalue"

    If "3d" sprite height is less than 0, set height to 0.

    Set the width value to the height value. This is dependent on how you set up your sprites though, you have to play around with the width values.

  • Here's one idea. The two concepts are rotating around a point and prespective transform.

    Rotation is easy enough. The formula is:

    newX = (x-centerx)*cos(a)-(y-centery)*sin(a) + centerx

    newY = (x-centerx)*sin(a)+(y-centery)*cos(a) + centery

    The beauty of that is we can do a rotation in 3d by replacing xy with yz for example. We can use that to calculate the 3d positions.

    The next part is to calculate the screen transformation.

    fov = 60

    eyez = 320/tan(fov/2)

    screenX = 320+x*eyez/z

    screenY = 240+y*eyez/z

    scale = eyez/z

    Then we just hide anything with a z less than 1, and sort the sprites by z.

    The only other tweak is to move everything forward before the perspective transform by adding say 200 to the z variables after the camera rotation.

    Anyways here's the implementation.

    dropbox.com/s/86iitq0a0n1msbs/starve_test2.capx

    I do like the container idea too. You'll want the displayed sprite, and the one you move with events to be different. As far as the textured floor i don't think the mode7 fx would be suitable for this since it doesn't handle looking up and down.

  • I do like the container idea too. You'll want the displayed sprite, and the one you move with events to be different. As far as the textured floor i don't think the mode7 fx would be suitable for this since it doesn't handle looking up and down.

    i knew someone had some knowledge on this amazing stuff rojo as always, and not to forget happy new year to everyone on this 2021 hope will be better, regarding the up and down look, i dont think he needs it, as far i seen on the gameplay, its just a 30 degree top down view and ground sort of slightly turns left and right by some amount, there might be other scenes where the gameview changes, like in the old hercules game, where from side platformer, it will go to a side platformer with a background elevation ... other than that is all graphics and coding stuff.

    i think he can do it, but is going to be a huge workload for 1 person. especially if he wants to do both coding and artwork.

  • As per usual, R0J0hound whips out another fine example. Nice work!

    Rojo's example pretty much solves the rendering part of it!

    R0J0hound I don't know if people say it enough, but thank you for all your contributions over the years! You are legendary!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • R0J0hound Great example, really smooth, looks great. I added a simple gradient overlay for another little bit of sense of depth. I really like this style of 2.5D using existing features. I imagine for C3, could also use Z elevation, but it may not add much or improve perf that much.

    It's also possible to do this 2.5D style project w/ my FQZ plugin, but I always like a plugin free method better!

  • You can do plug free backgrounds with mesh's.

    Take your pick Sprite, Tiled BG, Drawing Canvas, and even... text. lol

  • The gradient does seem to add depth to it.

    I haven't used the distort mesh feature of c3 yet. I don't see it being good for a perspective transform though. When you make a square into a trapezoid the two triangles that make up the quad become very visible.

    I think the best we can do with vanilla C2 is a sprite sliced up into 1 pixel thick slices. Then reverse the math to do the distort. It's not optimal with 480 sprites for just one quad, but it matches the perspective model used. In c3 you could use the tiled background plugin instead. It adds image offset and image scale, so you don't have to actually slice up the image. It even has image rotation so you could possibly do full mode7 without shaders, maybe.

    dropbox.com/s/dokfcr8k3c0em8d/perspective_test.capx

    Anyways, mikal's fqz plugin would probably be simpler for c3.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)