Animating in photoshop (for indie games) - Ikeda 8 frame run animation challenge.

[Music] all right all right all right what's happening dudes this is Trent and today I'm going to talk to you about animating in Photoshop and this might come in handy if you yourself find yourself that's redundant if you find yourself in a situation where you must animate but you don't know how to animate because I don't know how to animate but I figured out a few things I can share those with you I'm just gonna do kind of an over overview in time-lapse here of the process that I had done that I'd gone through to get all my keyframes and animate and such and then we're gonna go a little bit more in detail later in the videos if you want you can just skip ahead to the the tips on actually how to do this stuff using Photoshop so we're gonna create our keyframes first and this just entails our list of moves that the character has in the game and that's like a wall slide that's a jump that's a run mostly that's actually that's mostly it there's a beam out animation oh I forgot about the idle yeah you see that all the way over on the left and so what we're doing is we're just we've got our character sheet and we're just creating the keyframe poses and from there we're gonna use those poses to kind of slice up parts and move parts around to create more poses and fill in the blanks in between now I had a rough animation and I started to fill in the parts overtop of that original rough animation but you'll notice that I ended up redoing it and you'll notice the technique that I did to do that in a little bit and I'll address it when it pops up here but really this was about getting the type of movement how extreme does he push his limbs when he runs and things like that how how do parts on his outfit move around his coat how much does it flap behind him you know things like that and how much do is elbow stick out what's his running style and I'm trying to think about those things during this phase now I should preface this by saying I I'm not a animator by trade that's not my profession I didn't study animation I don't particularly like animating I like the results I like to see it once it's done and it's coming to life but if you're a concept artist working in game usually you don't have to do animations or you don't have to think very much about how characters move and unless if you're considering that in the posing of the characters so for me I'm trying to find every cheap way that I can to figure out how to animate this character and make him feel alive without actually having any knowledge or experience animating so how do you do that well you pull up reference and you look at other animations so I think that for the initial run that I had in the Aikido game I used a sprites from Megaman possibly I don't remember which one it was but then I found these cool animation strips that some professional animators had put together and I started kind of copy and pasting my components of my drawings of my characters from my keyframes overtop of them and then I found a better one I found one you'll notice that I kind of switched that background animation guide for the run and some of you might even recognize this this particular guide but it really just breaks down an eighth frame run cycle now I don't really meet to know too much about squash and stretch or the general rules of animation to be able to do an eighth frame run cycle for an indie game now especially since I have no intention of like becoming a pro animator as I said I'd like to see the results and I like to make indie games so it's kind of a necessary evil so I trace over those until I feel like I've gotten pretty close and then what I do is I create a new file and I drop each one of those frames into a layer within that new file and then I start to actually animate and refine the animation there's a feature that lets you run through your cycle of frames in Photoshop and dig into that in a little bit here but once I I feel that I have like a flow that's working where the limbs are moving appropriately but each frame that's when I start to actually add the details and refine the drawings for each frame all right well that's a lot of information really fast all at once let's break it down let's go to real time and let's go through the process now the way to do this the way to create animations in Photoshop is it's sort of a hidden thing but not really if you go up here to window and you scroll down to timeline it'll pop up the timeline I just had it on so I just switched it off timeline and then it usually pops up something that looks a little different and you'll have to go here to this button along the side and drop down and switch it to convert to yours we'll say convert to frame timeline and that's what gives you these frames now each one of these frames is a frame and the animation and it's storing the layer information so for instance if I turn this one on on this frame it fills that that shot in it fills in that frame with the layer that I just switched on so for instance that'll mess up my animation so if I hit play here you'll notice one of those frames is off it doubles up because I had switched in this frame I had switched on the wrong frame and you can tell that it's wrong because it's going if we go at frame one you see that down here this is layer two switches on actually it should be layer one switches on for frame 1 Frame 2 layer 2 switches on frame 3 layer 3 switches on and so forth let me just go ahead and double check that all these are have the according the appropriate according number associated with that frame now when we hit play it plays through wait we've got a doubled up frame which frame is that that is showing two frames here we go it's this one so that's the second frame and we have it should just be frame two is on and then frame one only has frame one on and if we hit play we should have a nice smooth animation now we only have eight frames if we wanted an even smoother animation we couldn't have 16 frames and break it down in in that way but in this case it's an indie game so I'm just I'm just doing and I'm hand animating this so I'm just doing the eight frames also we'll notice that when we zoom way out that looks a lot smoother when the character is very small the bigger your character sprite is the more frames of animation you're gonna need to keep it looking smooth these usually happen very fast though so for instance in game it'll probably run at a slower speed so if we select all those frames and we go to no delay it's gonna just run them at full speed as fast as your processor will allow you to do anyway so that kind of breaks down how to do the frame animations but just a couple more tips that I wanted to throw your way as we go back into time-lapse and and you're watching me kind of detail out a lot more of my frames try to think about how some of the objects are moving so one of the things that I do is I keep an eye on just one element like the arm for example and I'll go cycle through my frames and I try to just focus on is that one arm working in a consistent flow that loops and if that one arm feels like one frame at jostles too far forward or something like that then I'll just focus on that one arm to move it back and then you kind of go through your whole piece making these little adjustments now I know if you're a professional animator none of this is like necessarily the pro way to do it this is the the ghetto way that I taught myself how to animate in order to make indie games and it's just the bare bones of things that I know and tricks that I know to get some basic animation going so here we have a polished pass on all of our frames for the most part it works there are a couple of things I could probably improve but when we look at it about how small it's gonna be in game that's not too bad it's not too shabby I think it's good enough to just double check everything here we might have to get rid of our ground wine that we put in but and I'm checking some different speeds that were running it at to make sure that it's flowing really well and let's let's pop it into the game and see how this looks in game so I drop it into game maker studio 2 which is the program that I use to develop akita and the thing is is when you import images it just throws them all out of sequence so you have to double check to make sure that your frames are all working in sequence so let's run a build and let's see how this looks that's that's not too bad that's not too shabby it doesn't seem jarring it doesn't seem like a like it's it's noticeably off in anyway let's zoom in a little bit here and I'm gonna slow it down a little bit here so we can really really see what we're working with and not too shabby is okay it's not too bad I wouldn't feel embarrassed about that one so I might might make some minor adjustments to it and whatnot and move a couple of frames around so that that that he kicks his leg out right as he gets started within his run but other than that I think this one's good to go I think some minor little animations you can see from maka pixel he did an idle animation that's pretty rockin I think it's like 30 frames adds just a little bit more life to the character I think that's a good call we're gonna probably I might hand this off to him to see if he can add a little bit of flow to that run to just bring the character to life just in just a hair just a little bit more it's all in the details you know I like to put the time in where it matters and where it matters the most is of course gameplay but if you can make your character really feel alive on-screen I think that that's that's worth putting a little bit of extra time into if you are interested in playing the Aikido game you can go and pick it up right now you can play the Alpha it's over there on my Gumroad channel speaking of which if you are a digital artist and you are interested in learning some of my uber secret tricks and tips and cheats specifically one of the things that a lot of people had been telling me is that they feel like there are it's just too slow to get progress on their artwork so I just recently finished a Photoshop cheat box it's called the legendary Photoshop cheat box and it's because it's just that it's basically the most down and dirty tricks that you can use to literally double your speed with painting so dudes thanks for stopping by I hope that these animation tips were helpful to you please let me know in the comments if you'd like to see more animation explorations if we can dig a little deeper into animating in Photoshop there are a lot of things like tweening that I didn't cover it can be useful for making animated shorts or animating icons or animating elements of an indie game like rotating coin things like that and of course if you have any questions or comments anything you'd like to know about the world of concept our indie game development or doing freelance you can drop those in the comments field below any video I read them all the time and every now and then I'll call one out and I'll do a nice big meaty conversation about it and we'll just really dig deep into the most of the things that most people don't really like to talk about like the secrets of the industry that's what I'm here for baby for everybody else dudes I want ketchup on yonder bond and a ciao baby oh yeah so smooth

Channel: Trent Kaniuga

Views: 351,516

Keywords: Trent Kaniuga, Twilight Monk, World of Warcraft, Diablo 3, league of legends, final fantasy, naruto, how to draw, photoshop tutorial, speed painting, time lapse, art, sketchbook pro, art tutorials, art process, how to, drawing mastery

Id: 5IX9sn-oEUQ

Length: 11min 38sec (698 seconds)

Published: Tue Jul 31 2018