{"author_link":"\/users\/deltamain","author_name":"DeltaMain","author_uid":"deltamain","comments":[],"epoch":1696952199,"event":"LD54","format":"md","ldjam_node_id":382083,"likes":9,"metadata":{"p_key":"203838","p_author":"DeltaMain","p_authorkey":"1265785","p_urlkey":"438432","p_title":"Sprite stacks - Hovercraft devlog","p_cat":"LDJam ","p_event":"LD54","p_time":"1696952199","p_likes":"9","p_comments":"0","p_status":"WAYBACK","us_key":"1265785","us_name":"DeltaMain","us_username":"deltamain","event_start":"1695945600","event_key":"117","event_name":"Ludum Dare 54"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD54","removed_author":false},"_superparent":371459,"_trust":2,"author":265785,"body":"Have you ever seen pseudo-3D pixel art games? There are multiple methods to achieve this effect, but I will cover only one of them - sprite stacking.\n\nSo what is sprite stacking?\n\n![2023-10-10 19-44-15_5.gif](\/\/\/raw\/93e\/04\/z\/601f5.gif)\n\nSprite stacking is a technique based on rendering voxel model as many horizontal slices placed on top of each other.\nThis method allows us to easily render big voxel models using traditional rendering methods. \n\n:rocket: Let's look at pros and cons of sprite stacking!\nPros:\n- Looks aesthetically pleasing\n- Pretty easy to make it working\n- Kinda does not have an alternative\nCons:\n- Most naive implementation is slow\n- Realtime version may require multiple optimizations\n\nSo, how can we accomplish that?\nLet's start with creating voxel model:\n\n![Catank.PNG](\/\/\/raw\/93e\/04\/z\/601f6.png)\n\nThis is the model I created for my game - Hoverspace\n\nBtw, you can play it here: https:\/\/ldjam.com\/events\/ludum-dare\/54\/hoverspace\n\nI created this model in MagicaVoxel. Image above is rendered with magica's renderer. \nIn order to use this in game, I had to export it as slices:\n\n![Slice.PNG](\/\/\/raw\/93e\/04\/z\/601f7.png)\n\nAfter that, I had to do just one thing - actual sprite stack renderer.\n\nForemost we need to construct mesh, that we are going to render:\n\n![code.png](\/\/\/raw\/93e\/04\/z\/601f8.png)\n\nAll these buffers are assigned only to one mesh. It allows us to render all stack just in one draw call!\nNext, we should define actual rendering logic. In the most simplistic case, we would just set mesh filter or render stack using Graphics.DrawMesh and call it a day.\n\nWe are not going to do this. It's just too easy ;)\n\nMy approach is slightly more complicated. Here's my algorithm:\n- In update, check if object rotation has changed.\n- If it did - render mesh onto render texture. If needed - apply outline shader.\n- Then draw render texture onto the screen in the correct place.\n\nThis allows us to avoid rendering whole mesh each frame, by replacing it with just one quad! \nAlso, this method gives us possibility to apply some effects on top of the texture. In my example, it is outline.\n\nThis is how I render mesh onto render texture:\n\n![RT.png](\/\/\/raw\/93e\/04\/z\/601f9.png)\n\nIf you are interested in render texture utilities like ones used here, here you are:\nhttps:\/\/github.com\/nothke\/unity-utils\/blob\/master\/Runtime\/RTUtils.cs\n\nFiguring render texture size is done with lots of math. And due to the fact that my approach is not optimal I'll leave this as an excercise for you :smirk:\n\nThough, this method may help you in your journey. It calculates screen space AABB that can be used for setting RT size:\n\n![RTSpace.png](\/\/\/raw\/93e\/04\/z\/601fa.png)\n\nRendering render texture on screen is straightforward.\n\nThis algorithm was used in my game - Hoverspace.\nI would really appreciate if you check it out!\nhttps:\/\/ldjam.com\/events\/ludum-dare\/54\/hoverspace","comments":0,"created":"2023-10-10T15:23:46Z","files":[],"files-timestamp":0,"id":382083,"love":9,"love-timestamp":"2023-10-10T20:03:57Z","meta":[],"modified":"2023-10-10T20:03:57Z","name":"Sprite stacks - Hovercraft devlog","node-timestamp":"2023-10-10T15:36:39Z","parent":379877,"parents":[1,5,9,371459,379877],"path":"\/events\/ludum-dare\/54\/hoverspace\/sprite-stacks-hovercraft-devlog","published":"2023-10-10T15:36:39Z","scope":"public","slug":"sprite-stacks-hovercraft-devlog","subsubtype":"","subtype":"","type":"post","version":1189710},"node_metadata":{"n_key":"382083","n_urlkey":"438432","n_parent":"379877","n_path":"\/events\/ludum-dare\/54\/hoverspace\/sprite-stacks-hovercraft-devlog","n_slug":"sprite-stacks-hovercraft-devlog","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"265785","n_created":"1696951426","n_modified":"1696968237","n_version":"1189710","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/54\/hoverspace\/sprite-stacks-hovercraft-devlog","text":"Have you ever seen pseudo-3D pixel art games? There are multiple methods to achieve this effect, but I will cover only one of them - sprite stacking.\n\nSo what is sprite stacking?\n\n![2023-10-10 19-44-15_5.gif](\/\/\/raw\/93e\/04\/z\/601f5.gif)\n\nSprite stacking is a technique based on rendering voxel model as many horizontal slices placed on top of each other.\nThis method allows us to easily render big voxel models using traditional rendering methods. \n\n:rocket: Let's look at pros and cons of sprite stacking!\nPros:\n- Looks aesthetically pleasing\n- Pretty easy to make it working\n- Kinda does not have an alternative\nCons:\n- Most naive implementation is slow\n- Realtime version may require multiple optimizations\n\nSo, how can we accomplish that?\nLet's start with creating voxel model:\n\n![Catank.PNG](\/\/\/raw\/93e\/04\/z\/601f6.png)\n\nThis is the model I created for my game - Hoverspace\n\nBtw, you can play it here: https:\/\/ldjam.com\/events\/ludum-dare\/54\/hoverspace\n\nI created this model in MagicaVoxel. Image above is rendered with magica's renderer. \nIn order to use this in game, I had to export it as slices:\n\n![Slice.PNG](\/\/\/raw\/93e\/04\/z\/601f7.png)\n\nAfter that, I had to do just one thing - actual sprite stack renderer.\n\nForemost we need to construct mesh, that we are going to render:\n\n![code.png](\/\/\/raw\/93e\/04\/z\/601f8.png)\n\nAll these buffers are assigned only to one mesh. It allows us to render all stack just in one draw call!\nNext, we should define actual rendering logic. In the most simplistic case, we would just set mesh filter or render stack using Graphics.DrawMesh and call it a day.\n\nWe are not going to do this. It's just too easy ;)\n\nMy approach is slightly more complicated. Here's my algorithm:\n- In update, check if object rotation has changed.\n- If it did - render mesh onto render texture. If needed - apply outline shader.\n- Then draw render texture onto the screen in the correct place.\n\nThis allows us to avoid rendering whole mesh each frame, by replacing it with just one quad! \nAlso, this method gives us possibility to apply some effects on top of the texture. In my example, it is outline.\n\nThis is how I render mesh onto render texture:\n\n![RT.png](\/\/\/raw\/93e\/04\/z\/601f9.png)\n\nIf you are interested in render texture utilities like ones used here, here you are:\nhttps:\/\/github.com\/nothke\/unity-utils\/blob\/master\/Runtime\/RTUtils.cs\n\nFiguring render texture size is done with lots of math. And due to the fact that my approach is not optimal I'll leave this as an excercise for you :smirk:\n\nThough, this method may help you in your journey. It calculates screen space AABB that can be used for setting RT size:\n\n![RTSpace.png](\/\/\/raw\/93e\/04\/z\/601fa.png)\n\nRendering render texture on screen is straightforward.\n\nThis algorithm was used in my game - Hoverspace.\nI would really appreciate if you check it out!\nhttps:\/\/ldjam.com\/events\/ludum-dare\/54\/hoverspace","title":"Sprite stacks - Hovercraft devlog","wayback_source":[]}