How to draw Game Art in Procreate | Workflow, Tips and Recommendation
Вставка
- Опубліковано 7 жов 2024
- This is a somewhat quick overview of my experience with drawing game art using procreate, what it is good for, the downsides with the program. I'll cover most features that I personally use, including animation and how I draw my game art. Feel free to ask any question or give tips if you have any!
hey man you dont have to use usb to transfer assets. i also have pc and ipad, you can share pc folder on your wifi (if you have one, if not you can just make a hotspot with your phone and connect pc and ipad to it). and then just connect your ipad to this shared folder and export art and its instantly on your pc. i save it as psd photoshop file and use python script that i wrote to export layers to seperate png files and export it as parallax layers to my tiled map folder. its quite fast now.
Hmm, I should probably look into fixing that, because my current situation with transfers is horrible. Thanks!
@@Nonsensical2D If you end up doing what he suggested, I’d love a video on it!
@@Nonsensical2D its super easy! first i tried using google drive and posting there or opening the icloud in webbrowser on my pc and downloading files. but it wasnt good (still not as bad as using usb stick heheh). but by far the best method is to use shared folder (via home network, wifi) on pc and you can just share files both ways instantly (in procreate you just save file to remote drive from pc, you will have to set some permissions / user, i just do it on a guest user with no password).
Ye, I've sometimes used google drive, but also kind of hate that xD
@@Nonsensical2D I went ahead and tried what @greguar86 suggested, and, wow, is this going to make my life easier! Definetely give it a go if you can 😉
If you change your warp/resize settings from Bicubic to bilinear it helps with the destructive editing!
been trying for a long time to do pixel art or any stupid art on my desktop mac and with a mouse it is horrible and I didn''t want to spend money on a drawing pad or what's it called. Thank you for inspiring me to work on my ipad and finally to start making some actual art, even if I'm very bad at it. I went for iArtbook instead of procreate since it is free and it is so nice and easy to send the files over bluetooth and develop my game. You got my subscribe
Good luck! The ipad will probably be an excellent choice, especially compared to a mouse xD
@@Nonsensical2D thanks. Btw what canvas size do you use when making characters, assets and backgrounds?
I'd say if you want to be on the safe side, just draw bigger than you need it to be. Since I sometimes use frames in actual videos, my actual character is drawn in something closer to a 4k document. I would never import that to the game though, but I just downscale it significantly before I export it to be used in game.
If you know that the character will occupy say 1/10 the heigh of the screen, and you are producing for 1080p, then you would at the least need 108 pixels in height to avoid pixelation (but could probably be a bit larger), but that is moreso when you import your asset, for the source document itself, you should go larger. You can downscale without loss. So my animation is drawn in 4000*2000 document, but in game it is something closer to 200*200 pixels (I think). Just draw it larger to be on the safe side. and when you import it in your game, you reduce the size in order to handle performance, and when you do this you will essentially find what the best size to import is. Generally I would at least always draw it twice as big as I want to have it in game, since I can always downscale, just to be on the safe side.
If you are actually drawing pixel art, it becomes slightly more tricky, because you need to find the exact factor by which you are scaling your image, the size you want your character to be (say 32x32), then multiply that by the same factor so that it scales appropriately.
Overall I recommend that you check this source: blog.unity.com/technology/choosing-the-resolution-of-your-2d-art-assets. it goes over quite a bit of sizes, and would apply to most engines. There is another one in regards to pixel art: blog.unity.com/technology/pixel-perfect-2d. (but I haven't really checked it, because I don't do pixel art generally).
@@Nonsensical2D thanks for your fast and detailed reply
7:00
You can export your images to your ipad's camera roll
And, on Windows, you can access your Apple Cloud in the internet browser
Super straight forward, just need to make sure you enable the cloud
Discord is an underrated tool for transferring files between devices using the share button in an empty server
That's a good point, what's the file size limit? I usually just use Nearby Share or my email, but of course email isn't great for anything over 25MB, and Nearby Share doesn't work with Apple devices
Does it have any effect on the image quality?
If you're using a game engine that allows for skeletal animation, that's another alternative to frame by frame animation. Then you just have to draw body parts on separate layers and animate them externally. I think Godot has a Skeleton2D node, but you can also use something like Spine for other game engines.
Ye, I have been thinking of comparing frame by frame animation with spine2D before. Personally it's not my cup of tea simply because I prefer drawing the entire thing. But it also feels easier to imagine a 3D movement handdrawn than if you use skeletal animation, rotating shoulders and making your character not look like a puppet can become tricky, I think plenty of games do it well, but stylistically I prefer handdrawn.
Many thanks,man! Your art is amazing. I've started learning python a few days ago and i'm aiming to make a simple game with such art. Your vids really help me!
Good luck in your journey! I love python, such an efficient language to write code for :)
Thank you so much for sharing your tips and wonderful work! Love the character with that beautiful running movement. If you also share how to transfer all those animations to unity and function as a part of game, that would be so helpful!
After this video I have begun to transfer them with a server on my pc, it is surprisingly easy and quite quick. I personally use godot now, but from what I recall unity has quite a decent psd (photoshop file format) importer, which can import layers. So it could be worth it to export your files to psd instead of png, transfer the files to a server on your computer, and then just update the project by replacing the previous files. As for how my animation specifically works, it is just a sprite sheet animation so there should be quite a lot of tutorials on it :) I can't really cover any engine specific stuff sadly, since most of the people watching my channel use different engines and I haven't personally used unity for years, but hope it helped a little bit.
@@Nonsensical2D Thank you so much for your prompt response with thorough explanation! I saw lots of videos like making character on procreate then, assign each part of body to the bone on Unity then make it move like this :ua-cam.com/video/St0xHf-E45c/v-deo.html but I felt your movement on game is so much smoother and very satisfying! Do you import a sprite sheet animation layers of whole body movement then just applying the whole sheet for animation or assigning each part of body to each bone/part to recognize separately like the link that I provide when you make it work as a game character on Godot? It's really helpful for me to understand as I am starting to learn this world so I really appreciate it! Your character is so adorable. Also, do you think iPad mini is enough to create this kind of stuff? Thank you so much for your help again!!😊
So my animation is entirely hand drawn and not rigged, so I just have 12 whole body frames that it switches between (no body parts), it works quite well doing frame by frame animation instead of rigging and you can generally make it a bit smoother, but the downside is that it generally takes a while and you can't change the animation once its done, so you can't really make it so that when you pick up a new weapon the weapon will be visible in your animation. customization or change of 'skins' basically only works for rigged animations. So games like cuphead, hollow knight and Gris uses frame by frame animation, which looks really good, but the character looks the same the entire game through. I do have some videos on how I made my animation, but not how i placed it into the engine (it's really easy, you just pick all your images/spritesheet and attach it to the character and you are basically done)
I think ipad mini could work, but it is obviously on the smaller side, It's not what I would necessarily recommend, but if it is what you have then you could definitely make it work. The performance and everything is obviously good enough, but the screen size might be an issue. I haven't tried it myself so I can't say confidently, but I know that there are people that do all their assets on their phone, so it does work for some :)
loving the tips and your art style!
Wow I never knew you could make polly lines and edit angels in Procreate! Super helpful tip and im only 1:11 min in!
The problem with keeping the sizes is that it's only approximate and a point you make on the brush size scale can be 31%, 32%, and 33% which can change the size of the brush dramatically
Also, for sharing files I save them into iCloud, and then on my windows PC, I have the iCloud app downloaded. This seems like the fastest way to share data (I use iCloud files instead of sharing images, those don't really seem to work for me). I use the older iCloud installation, the newest has problems sharing data between devices and creates a bunch of duplicates. I use the older version which I got from a Reddit link when researching how to get it (Apple has decommissioned it and you can't download it anymore)
Hey! If you are using procreate and drawing "sharp" art. You should click the bicubic button in the distortion menu until you have nearest selected. Then you can rotate/distort/scale however you want and the image will look crisp!
Oh wait, you literally just did that after unpausing, well. :D
Haha, ye, I had part of my script discussing different interpolation methods, but it felt a bit dull listening to so I cut it, the only thing of it that ended up remaining was the footage where I compared them xD
Hi, I saw your videos many times and it helps lot. I’m a programmer and very week in art so I start learning by watching your video. It would be good if you show us step by step guide about base, mid ,shadow colouring and smudge in pro create. I’m finding very difficult on colouring and blend
I mention it a bit more detailed in my video on simple 2D game art, but I can probably try and make a video where I spend a bit more time talking about the drawings I make. For the smudging itself It is really important that the brush (i use a soft blend airbrush) is almost as large as the asset itself, it'll make the shading smooth almost automatically. But i'll try and make a more slowpaced tutorial in the future!
I know I’m a bit late but I’ve been wanting to use procreate for art but whenever I draw there’s like a gradient around my lines which is really annoying and also, network drives are so helpful for file management. On my pc I have a few files I made into network files so I can access them from my phone, Mac and iPad as long as the pc is on. You can also get a raspberry pi to act as your network drive that is always on too but it’s easy and helpful for a windows drive to be connected to your network!
I can’t really think of anything that would cause a weird gradient. Other than a brush effect.. I have since this video came out also started using windows ’server’ and agree that it works great!
I love your videos, you bring so much value to the viewer with tons of high quality examples that give and instant "click" in mind on what the concept is all about! I really appreciate it! I just recently got started with game dev and game art and your work on this channel is an infinite help to me!
Also I have a question, do you know if the functionality you mentioned in 1:00 - 1:25 can be found in Krita or Photoshop? It seems really, really useful. I tried to google it out myself, but only found videos and tutorials about smoothing the lines while you draw them
Ohh, I actually had this discussion in the comments with someone right before the video and was planning on mentioning it. As far as I know the functionality doesn't quite exist in krita or photoshop, as you say. You can draw straight lines using ctrl or alt in both programs, but that is pretty bad in comparison. Line smoothing can be really inconvenient to use because you have to toggle it on and off all the time. You can obviously use line tools, but those are really inconvenient as well.
It is a really useful feature, so I would love if it was added to krita, maybe I have missed it being added, but I personally haven't found it in krita/affinity/ps.
can you make a tutorial on how you create a game scene from scratch including putting your assets in to it?
I have a video called "how to place your assets " that discusses a bit on my thought process. But how i place specifically into godot is similar to my video "2.5D parallax effect in Godot 2D engine". As for an extensive talk about how I approach it I also have a video called "how to create a scene from scratch by remaking my old game art". All of them are fairly heavily edited though, they cover thought processes, but only the 2.5D parallax video covers actual implementation. I will make more videos on how to create game scenes in the future though, but there are a few that already touch on the subject quite a bit :)
I'm curious to see how Procreate Dreams helps or hinders your process in November.
Ye, I'm really looking forward to trying it :)
Thanks
I don’t know if you’d be interested, but even though it’s not a 2d platformer, Banner Saga might be a great one to check out art style wise. Or, if not, just an unedited stream of you working on your game would be great too, to see the whole process 😊
it has a great style, and its rotoscoped so its easier to do when it comes to workflow
I'll add it to my wishlist, I've been wanting to make a video on more topdown/isometric content as well, there are plenty of great examples for those games, should i get 1, 2 or 3?
I have been wanting to make an unedited stream of sorts (or rather a very long video), I considered streaming, but I really think I need to practice talking while I draw first, it is extremely difficult if you aren't used to it xD
@@Nonsensical2D Any of the banner sagas would be fine, since the art style is quite consistent.
About the stream/long video, just go fo it! I know I'd watch it even if you didn't speak much; your content is generally great!
Hey i recently found your channel and enjoy the content you make. I am trying to get into independent game development. I know how to code, but i have no experience with art. I am going to start with 2d because 3d seems overwhelming.
I was comparing basically a surface pro 8 vs ipad pro. I'm more comfortable with windows but you really make a good argument for an ipad and procreate. I eventually would like to get into 3d down the road working on blender etc. I do have a desktop PC i can do that on but knowing that would you still suggest an iPad? Any feedback would be great, thanks!
If you are doing game dev or other work on the go and plan to maybe use 3d down the road, then i would personally go for the surface pro 8. As far as I am aware, having seen Brad colbows review of the surface pro 8, the pen quality has now become quite good, so there should be no problem drawing on that device. You simply get more general use from a surface compared to an ipad. I do think the ipad is nicer for drawing specifically hd 2d art, but even that could come down to a matter of taste, and if you haven’t tried it an know you want it beforehand, there is a big risk that the device will go unused, whereas a surface will always be handy for all use cases. With that said, I don’t entirely know your circumstances, but I personally bought a surface before I bought an ipad and I don’t regret that purchase even if I don’t draw on the device nowadays.
@@Nonsensical2D awesome, thank you for the good information. If I did go windows is affinity photo good for doing art vs say procreate? I probably won't get Photoshop because of the monthly fee. Thanks again for the info and also subbed :)
Ye, I'd say affinity or krita. Krita is free. I personally use affinity so I do like it (but not for game art)
Have they ever added the feature to create tiles easier?
Pls can you make a video showing how to export and import these assets on sites like itch for those who wanna sell their sort
rather late but my team ran into this issue recently, how do you resize the animation sprites to a wayyy lower resolution without it looking like mush? I tried so many tricks but it always looks super pixelated or it blends all my colors together.
Hello! Thanks for the helpful video, very useful, saved to my playlists to reference more in future.
With regards to your file transfer problem, on my discord server I just have a little private channel where I send all my drawings to, then I can download it on my PC. Now we've helped each other :D
Ye, I've since this been posted set up a server to kind of do the same :)
Great video hope to see more i can draw almost anything but i struggle with remembering the tools and thank for your awesome tips on doing artwork for 2D games but i would like to explore a way to do it on a PC is it possible using the free art programs on the PC to do a 3D game.
Yes blender is really good for 3D and krita is really good for 2D, both free
So you have a sprite/tilemap behind your painted assets ? And also. How do you decide on the size of your paintings? If they’re too big, doesn’t the details/lines get smaller if you change size ?
I tend to start with a screenshot of a tile map, but as soon as I have used it to sketch up a plan, I end up splitting it into smaller individual assets. With that said, you can easily set correct and exact canvas size to match your tile map by just counting the tiles and multiplying by your tile width.
In your opinion is pixel art more time consuming than this type of art?
I think it depends on the style of pixel art. Something hi-bit pixel art (such as blasphemous or owlboy) can be more time consuming, but 16 or 32 bit pixel art (like iconoclasts) will generally be faster to make. But overall this simple approach can be really quick if you get good at it so I think it is more about what you prefer as a style. The biggest benefit of pixel art is that you don't really have to render any texture that often, but if you go for a simple style like I do, then you generally avoid that issue too.
it gets in the way a lot, rather use literally anything else if you are interested in creating pixel art
This was a very helpful video. Do you have an recommendations for the resolution you should work and export for game art?
Ye, my most recent video covers this topic. In its most simplest form I would say that you estimate the area of the screen that your sprite will cover when in game, suppose it will cover 1/4th of the screen, then the resolution of the exported copy needs to be at least 480x270 in order to not become blurry. (assuming you are making a game with 1080p resolution) The copy you work will often be at least twice that, but should probably nto be much bigger, because of potential issues with scaling that can occur. There are a significant amount of intricacies that I mention in the video, because the topic can become moderately more complex if we start to optimize for performance.
How do you typically resize your files? Do you export them and then resize them on your PC? Or do you duplicate them in Procreate?
I either duplicate and export or resize the original export it and then undo by using command+z (which is probably not recommended since it can be accidentally destructive). I pretty much never resize the image itself on my pc, if I need an existing file resized in game then I resize the import file inside the engine instead of changing the file itself.
The reason I don't like resizing in another drawing software is partly because it tends to be slightly slower for me, but more importantly if I have to adjust something then I don't want to adjust the image in a different drawing software than what the image was made in (since brushes and similar will be different)
@@Nonsensical2D I find the same way, I typically resize it and then export, just wondered what was faster! I began using the PC Folder server for my IPad as well due to one of the comments in here, greatly increased my workflow!
Ye, same here I've also switched to a server :)
Your art is amazing!!! We'd love for you to make a game on our app with your amazing art! No coding needed, and you keep all your profits - let us know if you're interested!
Can Godot run on the IPad Pro? The Main reason I didn't go with an IPad myself is the IPad is so unfriendly and incompatible with other software.
As far as I know it doesnt run godot. I agree with your points, it is incompatible with other software and general use, I don’t personally use it for anything other than notetaking/browsing/drawing, it is good for those things but pretty bad for anything else. I do think if you have a laptop and you have a computer, and maybe you even have an ipad, that it could be worth it to buy a pen in order to draw on the ipad. Or if you are super into drawing it could be worth it, but for most people a drawing tablet to hook up to your computer is probably the best choice.
Great video! I don't know If you answered this apologies if you did but does canvas size matter and if so what do you use for your assets and player character? Like I don't get how that part works at all importing into a game engine
*With the canvas size I mean
I'm copying parts of this answer because I do get this question every once in a while. 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 (minimum 384x216 pixels, or it would have to upscale). 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. I think Unity has quite decent blog post about resolution, it's relevant even if you were to use another engine (like godot), so if you feel like you want some extra reading on the topic: blog.unity.com/technology/choosing-the-resolution-of-your-2d-art-assets.
Regarding the USB transfer, isn't it possible to transfer via, let's say, dropbox or googledrive?
Yes it is, I did do that on occasion. Nowadays I transfer through a server. which works, but overall it is slightly more inconvenient than drawing on the same device you program on (or compared to airdrop, which is super easy).
thanku
So with getting a lefty, does it affect anything while drawing on a touch screen?... I mean I tend to rest my hand and drag it across paper when drawing or writing?
@@re1987p I think this can be an issue for both lefties and righties, but it generally isn’t a big issue. The palm rejection on the ipad (and surface/wacom for that matter) tend to be good enough that it doesnt happen when you dont want it to. The only situation where it will be annoying is if you have clammy hands, like if you have just washed your hands, it might trigger the touch screen a bit too much. But if it does become annoying, getting a drawing glove fixes it, then you can rest your hand on the screen and it wont trigger touch regardless of what you do.
At 1:26, how do you separate the shape and clovers from the background so you could paint the shape with drag and drop without painting the background?
So you could do it in two ways. In this particular instance I am just using the lasso tool and make a rough shape similar to the clovers and fill that in. Then I go in with the brush to fill out the rest of the shape that I missed. The other option is to make sure that the lineart is a 'closed loop' so you do lineart at the bottom as well. Then make a copy of the lineart shape, and fill in the copy below. That way you still have the lineart, but you can fill in the shape faster. But you can see in this particular instance that I am not actually filing in the entire shape, it's more of a circular blob.
Can anyone point me to absolute beginners tutorial to move my stick figures to a game engine? I’m struggling
Which size of ipad is this please ?
11 inch iPad Pro
Google Drive to transfer assets is not good?
I have since set up a server on my computer, which makes transferring somewhat faster. Google drive could work and I did on occasion transfer files using google drive, the problem is that if you have ever been able to have both your drawing software and the game engine open at the same time, and been able to go back and forth instantly, where you make a small adjustment press ctrl+s and then it gets updated directly in game, then you start to see the downside of having a forced 3 minute delay. It can quite easily stifle your progress. But generally I would say that some sort of cloud storage, air drop or personal server is probably the way to go with the iPad.
How big do your make your drawings? Everything looks huge when I export to godot
I try to shoot for around 1080p, so I generally want the art to be not too big so that they drain performance without actually adding anything, and not so small that they need to be upscaled. So when I export I generally want it something that occupies 10% of the height of screen to be at least 108 pixels tall, pretty much. With that said you can and probably should draw significantly larger than you need it in game, because you can always downscale it in the import menu in godot without any loss. However, you can't upscale it without causing blur or other issues. There is a really good unity blog called "Choosing the resolution of your 2D art assets " if you search google, a lot of the tips transfer to godot as well so it could be worth checking out.
@@Nonsensical2D thanks! I didn't realise it would use more resources, is that still true if the sprite node is scaled?
What you can do is go into the debugger with the game running, and under video ram it will say for each png you have how much memory or VRAM that image needs. What can happen if you were to load an 8000x8000 pixel image, is that you have to load 200mb of memory into your graphics card which can easily make the game stutter. You also have other info in regards to how many draw calls you make and such. you can generally scale things without it affecting performance, it at least won't affect vram. I wouldn't worry too much about all of this yet, I'm not too invested in it, it isn't helpful to make things more performant than they need to be and you can still generally go back and fix these things when they cause issues (I have done so many times in the past). The only thing I would make sure to do correct from the start is to not draw too small, because upscaling an image will degrade it.
I just send them to my discord straight from the iPad and download the zip folder from my laptop
I thought I was the only one lol
when it comes to animation callipeg on ipad is much better and super cheap.
Ye I've used calliped in the past and have it, my first video on the channel was using callipeg, but I don't like the drawing experience or the brushes, so i live with the shitty animation in procreate xD but I like the software overall