[Blender + Godot] How to Pre-render your 3D models into 2D sprites like Clash Royale

I started playing clash Royale almost four years ago now and before that I play clash of clans and in all these years I've always just thought that the games had 3d models in them and rendered them out especially the troops who can walk around with different animations at different angles and it has never crossed my mind that these are actually pre-rendered 2d sprites I only discovered that recently now I have known that mini games use pre-rendered 2d sprites and they're often for stylistic purposes in pixel art games for example but supercells games just hide it so well that I've never noticed it I made a poem and it seems like a lot of you guys actually didn't know that it was 2d sprites I guess you guys are just smarter than me but it does make sense because clash Royale and clash of clans are both mobile games and they've always been very optimized games that run very smoothly even on older devices so whether it's for stylistic purposes or optimization purposes I decided to try and figure out how to do the same thing and pre render a 3d model as a series of frames to use in ghetto here is what I found out in this video we'll be using blender with the Eevee render engine for our 3d work but you could probably do this in any other 3d software as well clash Royale does seem to have rendered out a lot of different angles for all of its characters I'm guessing it's around maybe 16 different directions in total but in this example that I'm doing for the sake of simplicity I'm only gonna do eight directions this video also heavily references a video by JC pan which is a much more detailed and in-depth tutorial about converting 3d models into 2d pixel arts while this video mainly focuses on recreating the 2.5 D nature of clash Royale so if you'd like to learn more about this topic I'll leave a link to that video in the description definitely check it out so first of all we need a good animated model to be our character to render out and I've found this cool little hamster which is animated on sketchfab comm I'll leave the link to it in the description and this one is downloadable as well which means you're actually allowed to download it unlike some of the other models on this website so if you click download' you'll see that it can allow you to download the original format which is an FBX or an auto converted format which is gltf and on this website pretty much every model they convert to a gltf which they call a one-size-fits-all file format and that's pretty convenient because gltf is pretty easy to import an export whether it's blender or Godot or anything else but you do however need the gltf importer and exporter made by Kronos group you can download it from this github page I'll leave it in the description as well anyways I've downloaded the hamster here and I'll just go into blender click file imports and at the bottom I have a gltf 2.0 option that's only if I install the import of exports or plug-in and if I click that I can go to where my gltf file is and just import that now for some reason this hamster ended up being huge so I have to scale it down but if I just select the hamster like this and scale it down as you can see the rigs around it don't scale down and you'll end up messing up the animations so I'll open up a new panel by dragging down on the top right corner here set that to the outliner and I can select the root node here which basically includes everything and then I can open the slide panel using the button N and under scale I'll just set it to 0.01 for all three axes there we go that's a more reasonable size as you can see we can even see the camera now one thing which is also annoying is that the rotation for this hamster is in quaternions and that's really hard to figure out so let's just set it to XYZ oiler which is a lot simpler now let's check out the animation if we drag open another panel down on the bottom here and set it to the timeline and press space then we can see it walks that's the animation but after a certain point it stops and that certain point is around 68 frames which means that the animation was only made for 68 frames and after that there's no more animation information so in the bottom right of this panel we can set the end frame to 68 and that way it only plays up to 68 and after it loops back here in the output tab in this panel the frame rate is 24 fps we can set it to 60 fps to speed it up I personally think that's a much nicer speed so let's set it to 60 fps we will have to enter this frame rate number later in guro as well but right now we can see what it looks like it is 68 frames which is quite a lot of frames and I don't think we need that many frames which is why underneath frame start and end we have a step option which just means how many frames blender skips forward whenever it wants to render the next frame so if I set it to 4 for example it only renders every fourth frame and was it being 60fps with a step value of 4 we'll end up having a 15 FPS animation in Godot that might be a bit choppy for you but for this tutorial I want to keep it a bit simpler now let's set up the camera and lighting since we're trying to emulate clash royale a 2.53 game we want to have the camera at a very set position and a very set angle so instead of moving it with G let's use the side bar here location we want to set X to 0 to make sure it's centered just like that and then move it to somewhere like this let's see how it looks from our camera let's open up another 3d viewport here and we can switch to the camera view by pressing this button here it should be pointing down at a 45 degree angle on the x-axis and facing directly forward on the Z so now we have to set it to orthographic for our 2.5 D game so go down to this camera panel down here with the camera selected and switch the type from perspective to orthographic under the output tab we should also change our resolutions or something that's square so I'm gonna make it 512 by 512 make sure to set the resolution percentage to 100 as well so you don't accidentally render it into 5 6 by 2 5 6 it doesn't frame our hamster that well so I just moved it up a little bit right like that and what you want is an orthographic scale that can zoom in as much as possible without cutting any part of our character however our character is animated and we will have to render this out and if angles so let's select our character play the animation and rotate it around to see whether it cuts any part or not as you can see at this angle the hamsters foot has actually cut off so just adjust the camera scale accordingly now I'll rotate the hamster back and it's time to set up the lighting in the environment note here we can see that our environment is just a solid color which is a gray color and if you press that in this viewport you can actually switch it to render view and as you can see is very dark so let's set it to a white color with the value of I find that zero point nine works decently but it's still dark it hasn't updated the lighting let me press Z to switch it to this again back to rendered still dark okay maybe I have to switch the render engine to cycles and then back to evey there we go that's updated I don't know why but sometimes with evey it doesn't really update the lighting with the environment and you have to switch the cycles and then back maybe this is a bug let me see this is the official release right V 2.8 yeah I think this is the official release but anyway we got our lighting like that now and the background is white when we render it out we want the background to be transparent the way we can do that I scroll all the way down on this output tab to the film option and under here we can click transparent there we go it's transparent let me switch to this panel to an image editor and click render up here there we go that's our hamster if you look at the edges you can see that there is anti-aliasing if you want anti-aliasing off you can go to film and set the filter size to the smallest possible value which is 0.01 pixels if we render again and zoom in then there is no anti-aliasing I do think it's good to have a bit of anti-aliasing though so I'll just set that back to 1 and now as you notice the lighting is actually pretty flat in order to make our character of pop a bit more and look more 3d let's change up the lighting a little bit here I've set up a sunlight pointing towards our hamster and for the environment lighting I'll click use nodes that way we can change the color source to an environment texture and here I can open this sunny HDRI dot jpg that I have now what this is is basically a texture that can let blender set up an environment to light the scene better all you have to do is go on Google and search sunny HDRI and you'll see something pretty similar I'll set the HDRI strengths to 0.7 so a bit lower and the sunlight strength to a three now if we render it out again as you can see it looks a bit more realistic the type of lighting setup that you want obviously depends on what game you're trying to make but just try to keep it consistent for all the different characters at all the different angles that you're gonna render out so no matter what character and what angle it's facing in your game it always looks like the lighting is coming from the same angle and it doesn't look weird but anyway now it's time to render out the whole animation we can go to the output tab again at the bottom we have to select a folder in which all our frames go here I'll go into my project folder go into an animations folder that I made and make a new folder called forward since we're gonna render this out in eight different directions I'll just split it up to organize it a bit better select this folder and now we can press render animation like that as you can see each frame is taking like less than a second and this is really the advantage of Eevee compared to a ray tracing engine like cycles for our use case we don't really need it to be very realistic at all but this just speeds up the process so much anyways we got all our frames here and in Godot I'll just make a new 3d scene and add an animated sprite 3d if we make a new sprite frames resource and open it up then we can drag all of our frames into this and click the playing option here to see our animation in effects however it is very slow because the speed is 5 FPS here as we said it should be 15 and now our character is walking at normal speed let's call this one forward and go render out the animations for the other angles if we select our hamster here and go to the sidebar as you can see we can easily change the rotation on the z-axis to throughout our hamster in the different angles so now I'll just select a different folder I guess I'll call its front left and select that as the output destination I'm sure the people a supercell would have had an automated workflow for doing this in clash Royale but I don't know how to do that so I'll just do it by hand and there we go I've rendered out the sprites for all eight directions and made eight different animations in Godot if luckily a new animation you will see that Godot has to re-import the images for some reason but that's fine after the first time it doesn't have to reinforce it anymore so now it's time to set up our scene so it looks like our hamster is actually walking somewhere now when I search for a clash Royale ground texture on Google it just came up with this image which someone posted on reddit apparently but it seems to fit our to use case pretty well so I downloaded it and now we can use it as a sprite 3d I'll just add it in like this drag the hamster out a little bit like that and honestly having both of them vertical like this the angle is perfectly valid you could just make your game like this like a vertical game but I'm thinking it's probably a lot easier to make the physics work it makes sense and a lot easier to wrap your head around while making the game if you kind of set it up like a real arena so I'll just make it go flat and point upwards by changing the axis from the z axis to the y axis here and as you can see it's pretty trippy actually if we rotate around the hamster seems to always stay in front while in reality half of it should be covered and if we move this right forward enough then the whole hamster is covered while in reality it shouldn't be so the z-index calculation for sprite 3ds are a bit janky but all you have to do to fix this is to actually add a material under the geometry instance options here new spatial material and there we go it's fixed although it did change the color a little bit since now it is affected by the global lighting angle and it's not just a simple sprite anyways I'll add a camera and move it out like this open up a second panel to preview it and have it rotate down 45 degrees set it to orthogonal again and here these size is used to set how much you see in the camera I feel like the spite is not big enough I'll just make it bigger by changing the pixel size value here to around 0.03 I guess and then of course we change the size of our camera the hamster has to come out and actually face the camera at a 45 degree angle just like that and another problem is since we're looking at our map texture from an angle it actually is vertically squashed more than normal so we have to stretch it out to compensate for that if our camera is pointing at a 45 degree angle and it's looking straight at our map then obviously it's going to be the right height but if we make it flat then the height then becomes different compared to if we were to have it at that angle if we just overlay that on top and see the difference between the two angles then as you can see this is 45 this is 45 this is 90 degrees this is the same as this whole length right here and we know that the ratio of the hypotenuse of a 45 degree right angle triangle to one of its sides is the square root of to around 1.4 1/4 which means the ratio between what we would see with the map at an angle versus what we would see with the map being flat is also one point for 1/4 since these two lines are equal so all we have to do is go into the transform of the map and set these at scale to one point 4 1 4 there we go it's in proportion now so in order to make our hamster move and test out the animations I made a kinematic body which contains it and a script for us to move that kinematic body as you can see it's very simple we have a direction variable and change that according to whether we press W a s or D then we move by that direction vector normalized and then times speed which in this case is 2 and we also have a function to set our animation according to which direction we're going with the an invariable being the animated sprite 3d node which we have here and of course I have to call that function as well I forgot I don't have a situation here where we're not moving and the direction is just zero zero but it's fine I guess and I have the directions all wrong I'm not sure why but I'm thinking I can just rotate this 180 degrees and the camera as well and have it like that I think that way okay all our directions are right now in our current code if we're moving to the front left it'll just keep setting our animation to front left even though we're already playing front left it works fine as you can see I'm not sure if this affects performance but I'll just leave it as is the last thing I want to do is actually look at the frames of the animation so if we run it I'm not sure if you notice but if the animation is playing and all of a sudden we change direction it always resets to the first frame so whenever we switch an animation it plays from the very start of that animation instead of where we're up to in our previous animation and remember the all the animations matched because there are just the same 3d animation but rendered at different angles so I'm thinking at the start of the set animation function we can just say variable current frame equals to an M get frame and then at the end because it's reset we can just say an MDOT set frame current frame that way the frame number will stay consistent and hopefully our animations flow a bit better this does require all your animations to have exactly the same number of frames though but that's what we have so let's see when we change direction it doesn't reset the frame number back to zero so that's nice I can't tell as well that the animation flows a bit better when we change directions so yeah that's how you pre render out your 3d models as 2d sprites just like clash Royale if you learn something new in this video be sure to leave a like perhaps subscribe for more content but that's it and I'll see you next time [Music] you [Music]

Channel: Gonkee [OLD]

Views: 65,795

Keywords: gonk, gonkee, gonkmakesvideos, godot, shaders, clash, royale, clash of clans, prerender, render, 2d, sprite, 3d, model, performance, pixel, art

Id: peLvlUHve-4

Length: 17min 38sec (1058 seconds)

Published: Thu Feb 13 2020

Reddit Comments

[u/Novaleaf]

this is a really great resource, also on workflows for .gltf. thanks!

[u/Tsar333]

super useful !

[u/golddotasksquestions]

Wonderful! Thank you!

[u/Goathier]

I do only 2d even tjho it sould work but kept listening because it is very well detailled. Then I learn for the frame between animation for my game.. So thanks a lot :)

[u/notpatchman]

Just wanted to say you're very good at clearly communicating out the commands you are using, better than most tutorial speakers.

[u/asheraryam]

Wow excellent video!