Beginner 2D Game Art - How to Place your Assets
Vložit
- čas přidán 12. 02. 2022
- This video is an overview on how you could approach staging your game, using existing assets or sprites. There are some specifics that might not apply to your specific project, but I think the general idea of pre-visualization can help in making your scene or level look nicer. This specific platformer uses something that simulates 2.5D parallax together with a tilemap.
You are approaching the content of the videos in a very cool way. Easy, honest and to the point. Thanks for sharing. Keep going! I've been developing for years now and one of the truths of game developing is that you never stop learning, and that you can learn from anyone that knows how to share and teach knowledge. Thank you!🙂
That was probably your best tutorial to date. Loved everything about it. I love how much depth you can create with simple assets and love the approach that is more methodical than usual "just do what feels good" tutorials out there because my "feel good" sense is not well developed yet.
Thanks :) Glad you liked it, it is still a bit rough around the edges but I hope it is still acceptable enough to get the point across ^^. I think it kind of is as you say, that with experience the 'structure' and methodology gets somewhat displaced by 'going by feeling'. Once you have blocked in multiple scenes and you start getting a feel for seeing the 'shapes' instead of the individual asset, you could potentially stop using it and many people probably do (because it can feel kind of boring. It is sort of like thumbnail sketches in art, which would be the 'blocking' equivalent if you are painting a painting), but I think the underlying principle is still there.
@@Nonsensical2D absolutely it's a bit like learning to drive or a language. I have been in Britain for 16 years now speaking English feels natural now. If I say something I say it because it feels right. Sometimes it's hard to explain to new language speaker why this is said that way and not the other. It just feels right. Of course there are rules and it feels right because we follow those rules but at certain point rules become second nature and you no longer think about them or notice them. Being able to explain those rules still is a skill. It's the same here. You have retain a skill of explaining rules that are second nature to you. I am so glad you sarted this channel
Man I'm loving what I'm seeing in this channel...
Thanks so much for making this video, it’s helped us so much- love your videos, so simple to follow but so effective! Thanks again!
Amazing! Thank you. I really apreciate all the effort and great knowledge.
Awesome tutorial, pls make more!!!
thank you for this great tutorial !! 😙
This method save lots of time buddy .
Great content...also camera movement is really important
Ye, I still have some work to do on creating nice camera movement, but it is definitely important :)
Thank you very much! You've just helped me out with the biggest dilemma ever. I have a metroidvania idea but i was stuck on how to stage the backgrounds.
If possible, in your next video, could you please teach us how to stage cave environment in games?
I have some videos that I have been working on a bit that need to be released first, but I'd like to do more videos on it in the future. In the meantime, I think a lot of the staging advice that I gave for this forest area would possibly work quite well for caves as well. The main takeaway is that it is the shapes that matter most, and not necessarily the asset itself. So something similar to hill and valley approach for foreground, and some background assets that connect platforms, but instead of using trees you would perhaps be using rocks, pillars, bushes, or planks.
@@Nonsensical2D Okay. Thanks for the tip. :-)
woww
Great video. I’m very curious about a few things here..
That screenshot of the tile map you’re working off of.. I imagine you’re resizing it in procreate right? I’d imagine if you zoomed out to take the screenshot of the entire room, you’d have to. I’m curious. Or are you literally drawing everything 1:1?
Do you have a discord or social media that you can be contacted on? Thank you!! Your content is super helpful.
I'm copying parts of this answer from another answer I've given previously. In general, I don't think you should draw directly on top of the 'blocking' instead it should probably more be used as previsualization and hopefully only take you two-three minutes. You could even make several small copies and do different tests and thumbnails. And from there you would either make or have assets that could match. I say this, because you can run into performance issues with vram if you were to literally make really large assets. (i cut these up in significantly smaller sizes as I went on, I largely drew right on top of it in order to make the video more easy to follow)
With that said, to answer your question, you can check the coordinates of your tilemap, then basically take x1-x2, y2-y1 and then you will have the size of your box in terms of tiles, then you multiply that by the size of your tiles. So x*64, y*64 if you have tiles with size 64. In this case I zoomed out quite a bit on my 4k monitor, took a screen grab, and then made slight resizing as you suggested to get something closer to a 1:1 copy. So in this case I believe I was actually drawing 1:1, but only for the sake of the video (I have literally never done it for any other video).
But as I said, I don't think you should work that way (even in procreate I could only have 17 layers, at the moment I think i have 54 assets from this scene and even then they are quite large). I can probably most easily be reached on reddit, I have not really set up much in regards to discord or other things yet, I'm just Nonsensical2D on reddit.
Thank you! This is great. So basically, the individual assets end up getting drawn I’m separate documents. I know this isn’t a super important question, on average, what canvas size does, say, one of your trees end up being? Just curious as to what you find appropriate for not being too large as to be a problem for performance.
I'd say overall it is good to work larger than necessary. You kind of know that your game will be at most 4k ( 3840 × 2160). If you expect your sprite to only cover at most 10% of your screen, then it doesn't have to be that large. If I would care about performance I would potentially import them so that they maintain the ratio of 1080p resolution, or 4k if that would be what I was going for. But when creating them, I think a good rule of thumb would be to make them something like twice as large as what I need them to be when in game, because you can always downscale the asset before you place it in game.
One weird thing to add is that working too large can often be tricky brain-wise. Especially if you are new to drawing art. If you for instance draw a rock 4000x4000 pixels, but you only import it in game as 200x200 pixels, then it is clearly overkill. Is this a problem? It can be, what could happen is that you spend extra time fixing errors and details that would never ever be visible in game. So you would be wasting your time. And you kind of want to make sure to do as little work as possible for the best result possible.
With all that said, I don't think there is a perfect rule to follow, as long as you don't make things smaller than they need to be, because you can downscale art, but upscaling it would degrade the quality. Making it too large could be an inconvenience, making it too small could be catastrophic. In essence, I have a sense for how big an asset will be on screen, a tree can often cover the entire screen height of the screen, so I know that my minimum pixel height has to be around that (but as I said, I generally have a decent margin, so would often have 2-4k pixel height for trees).
If I make assets a fraction too small or too large, I tend to scale them in godot, but I don't think you should do this if they are significantly different in size, my reason for this is because it also scales your lineart or texture. If you have an asset that is really small and has lineart with width say 1 cm, and you scale it up 3x, then your lineart will be 3cm thick, but all your other assets will still have lineart that is 1cm thick. So I think scaling issue as it relates to the look of the asset itself is big enough of an argument against scaling something more than say 1.25. that is if you scale it using transform...
ok cool
I got a dumb question here, how do you get the tilemap from unity to Photoshop or whatever your using? I mean, how do you know its the right size still?
So in general, i don't think you should draw directly on top of the 'blocking' instead it should probably more be used as previsualization and hopefully only take you two-three minutes. You could even make several small copies and do different tests and thumbnails. And from there you would either make or have assets that could match. I say this, because you can run into performance issues with vram if you were to literally make really large assets. (i cut these up in significantly smaller sizes as I went on, I largely drew right on top of it in order to make the video more easy to follow)
With that said, to answer your question, you can check the coordinates of your tilemap, so all your corners, then basically take x1-x2, y2-y1 and then you will have the size of your box in terms of tiles, then you multiply that by the size of your tiles. So x*64, y*64 if you have tiles with size 64. Then you would have a 1:1 copy of your necessary size.
Beautiful tutorial, just what I needed to create landscapes for my hand drawn game. But there is a problem that keeps coming to me: when I try the game, for some reason that I can't understand, the sprites of the landscape have a little strange flicker. From what I see, it doesn't seem to happen to you. I have assumed that it is the fault of the project settings or something that has to do with collisions, but I have not been able to fix it. I was wondering if maybe you knew how to fix it? (Sorry for the bad English, but I'm Italian. I hope I was clear enough ...)
hmm, are you using unity or godot? does it happen in the tilemap or for entire sprites? does it happen when you stand still or when walking? It could really be resolution settings/camera/tilemap, I definitely think its project settings, when I've had issues like it, the solution has always been a few settings. I don't think I've had that specific issue though
@@Nonsensical2D Thank you for your answer! I am using Godot (because I find it much more intuitive than unity, at least for me as just a newbie in this field). The flickering happens only for the sprites that I put inside the canvas layers and right when I stop moving the player (it lasts a couple of seconds, more or less). I didn't put collisions in the sprites themselves, but only used them as a coating for the tilemap (which is only found in CanvasLayer 0 and has collisions). But I think I've found the problem: it has to do with the camera following the player. In fact, by deactivating it, the flickering of the sprites does not occur. I believe that the flickering is given by the Smoothing function, which I keep active at a value of 5. The problem now is that by deactivating the camera, of course, it no longer follows the player. So I was wondering what settings do you use for the camera?
I don't seem to have any issues when adding or removing smoothing, even when having it at 5. where is your camera? do you have it as a child of the player node? do you control it using any type of update function? I'm a bit at a loss, when looking at my own I don't feel like I've done much with it and it was quite a while ago that I first set it up. Your set up does sound similar to mine...
@@Nonsensical2D I placed the camera in a "World" node (wich also contains the first level, the UI, and the Player) and attached to the Player, in its scene, a RemoteTransform2D. Then, in the World node, enabling "editable children" to the Player, I Connected the RemoteTransform2D path to the Camera. I have used this process so that when the Player is destroyed by enemies, the Camera, in addition to following it, is not destroyed with it, but remains in the last position in wich the Player was. It's a bit of a strange process, but it works well.
However, after quite a few attempts, I managed to get to the bottom of the problem. I don't know why, but I had enabled "Use GPU Pixel Snap" in the "2D Rendering" section of the Project Settings. Disabled this, it seems that the flickering of the sprites does not happen anymore.
However now I noticed that the sprites blur when the Player moves fast :( ... But somehow I'll fix this too, I hope.
Anyway I wanted to really thank you for the time you took on my problem and for your really useful videos. I don't know how long I've been looking for a way to recreate a 2.5D parallax effect in Godot and I only managed it thanks to you. Keep it Up! I look forward to new videos with impatience.
(Ah... And sorry for the extremely long comment 0.o").
Glad you found it :) (sprites blurring could literally be due to a poor monitor. Not saying this is the case, but I have had one monitor that I couldn't game/dev on because of ghosting ^^) Good luck and I hopefully have another video coming out soon
That image editor is really neat, which one is it?
It's Procreate on the ipad, the creation pipeline can be really annoying in regards to having to transfer files and such between devices (with a pc). So I'm not sure it is preferred in general, but I think it is more fun to draw on the ipad so I have entirely stopped using krita and photoshop for drawing which were the programs I used before.
@@Nonsensical2D gotcha. I have a Wacom pen and touch, so I'll be interested in seeing how Krita compares to Photoshop, rebelle, or painter in that regard. I so far I've been impressed with Krita. It seems like a more modern alternative to gimp and inkscape.
I wonder. How do you place your parallax layer items in the designer so they end up in the right spot when the character is moving to that part of the screen?
What engine are you using? If you are using godot (like me) then I have a 4 minute video on the topic called "2.5D parallax effect in GODOT 2D engine. Similar to the background parallax in Hollow knight!". If you are using Unity, then I really recommend the same way that hollow knight has done it, which can be seen at the bottom of this page unity.com/madewith/hollow-knight . That method is set up in 3D space using actual perspective to achieve the parallax, and for Unity this was my preferred method. For other engines I'm not quite sure what the best method would be.
@@Nonsensical2D I'm using Unity. I Have a parallax script to move my items. Which works. But as the levels grow in size it might get harder to place them in the right position design time. I Guess I can try to make a script that let's me move the camera in design time and adjust the position of the items at the same time. Currently the parallax movement only work in runtime.
So I tried looking for a unity tutorial, and I think this one covers it: czcams.com/video/E00ok8EvA8w/video.html. I know the problem you are describing, it is the main problem with implementing parallax the way you did. which is why when you work in unity you tend to place things in 3D space instead, this won't really be a problem because unity has a 3d engine anyway. There will probably exist other solutions to solve this issue, but I think changing approach is probably better.
Do you have experience making Top-down or isometric assets?
Only some, I do watch and read stuff about it sometimes, and have drawn it a bit for fun. But nothing serious (but I might do that in the future)
How can I get those blocks to Prototype ?
If you mean the gray blocks they are extremely simple images that are either 32x32 or 64x64 with a 1-2 pixel thick black line around the edges of the canvas. So you can create one in paint (or other program) quite quickly!
Thanks @@Nonsensical2D
How was the tilemap created?
the tilemap itself was just made in godot by using one single grey block with a 2 pixel thick black outline. Then I just made the tilemap and took a screenshot of it. Same principle would work in unity or any engine really.
@@Nonsensical2D I see. I've been animating and creating my own assets and I find it really fun. Your content is awesome and has helped me a lot. Thank you!
@@Nonsensical2D Are you then placing your assets on top of the grey block tile map, or just using it as a guide and making a tilemap out of your ow art, and replacing the grey blocks?
I generally use a tilemap to plan out the collisions for the scene, but I don't visually use a tilemap, Instead i usually place the assets on top of the tilemap, it could work to integrate a lot of the blocks onto a tilemap and you'll probably get some performance benefits from it, but it is quite a hassle to make it look good in my opinion. with that said, the principles that I talk about would be the same even if you use a tilemap
@@Nonsensical2D Thank you. That makes a lot of sense.