Adding Firealpaca Drawings to Adobe Animator
GameBanana shows no ads to members. Sign up now!
Ads keep us online. Without them, we wouldn't exist. We don't have paywalls or sell mods - we never will. But every month we have large bills and running ads is our only way to cover them.
Please consider unblocking us.Thank you from GameBanana <3
High quality animation without Adobe :3 - A Tutorial for Friday Night Funkin'
Updates
- -
added specifications for which version of fnf you are using
-
Addition added another point to the text
restart your song, not your game!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- -
Added a linked example file for how everything should be done, as well as a fully functioning Boyfriend skin lol
7zip is required I think??? to open it. Soooo go get that
adobe already has enough money lul dont pirate tho
First off, Download FireAlpaca, and Notepad++ as they're the main tools you'll be using in this.
(please support them they make great stuff <3 maybe theyll add dark mode if you buy the steam edition)
I chose FireAlpaca because it has some built in features that'll be useful when trying to make a skin, while also maintaining the quality from a professional program for free.
(I AM NOT EXPLAINING HOW TO USE ANY OF THE SOFTWARE IN GENERAL, ONLY ITS APPLICATIONS IN SPECIFICALLY SKINNING OR CREATING CHARACTERS OR ELEMENTS OF THE BACKGROUND OR UI FOR THE SAKE OF USING THEM IN FNF)
[ . .. baka..]
theres a lot so you can skim through if you want, the most important things are marked like this.
1. Using Fire
Main things you'll need to know are how layers work, drawing, transform, onion skin mode, and animations, if you know how this works feel free to skip over this
- Layers
go to the window tab, and enable layers, boom bruh
layers stack on top of eachother show over whats below unless you select a blending type.
Folders combine the layers inside it as if it was one layer, this is important for onion skin mode
Folders can be put inside folders, inside folders, etc - Drawing
Uuuuuseee the art program :3 if youre new to that kind of stuff look up a tutorial bc i have a character limit - Transform
whoooh this one is important so im gonna baby you a little
Transform goes down from the select tab, you can select a specific area to use Transform on, or if you don't It will use the layer or folder you have selected.
Make sure you always have bicubic selected when you rotate, it either becomes too smooth, or too jagged with the other options. Still avoid rotating if you can, and undo instead of correcting a rotation mistake.
(this is how you get most of the animation done so you have to have this down lol) - Animation mode
From the animation drop down menu, select animation mode.
Onion skin basically just converts the layers into frames of an animation
This would usually limit your ability to have the drawing into separate parts, but you can organize the layers into master folders that keep all of the layers intact. - Animation
To animate you do the afformentioned folders into frames,
To test the animation go to animation, then autoplay. Choose 12fps.
1. Animating and Assembling a Spritesheet (for the game)
Last one and the one after dont matter if you dont know how to do this lolTo actually have the stuff ready for the game, you need to be able to put it into a textureatlas as a spritesheet so that the xml can read it (fancy way to say just put them next to eachother)
- When animating with firealpaca make sure you have the width and height of the canvas youre using as the same, (i recommend 900x900) a separate layer in the folder for each frame that has a thin border around the edge of the canvas.
If you don't, add it in post, export what you already have as an .mdp and open it as a new layer in a canvas that has what I already mentioned.
This is how i organize my stuff lol
- If it's arranged like I have mine in the image, Make a new canvas the width of your canvas width times however many frames you have for that animation. If you have multiple animations multiply the height by how many you have.
- Select the frame folder (the one with the number on it) and copy-paste it into the new canvas, which I will be referring to as a spritesheet.
Get the next frame, and do the same with it, except move it to the right of the first one. Make sure the thin borders are directly next to eachother by the pixel.
- Do this until the animation is finished, and all frames are put into the spritesheet.
If you have another animation, put it on a new line always. This is for organization and will probably keep you on track for a while.
2. Using Notepad++ to make xmls
Equally as important as the last, all you really need to know are how to use replace, find, and how to press tab on your keyboard????dASsauidfxkcj- GET THE THING :3
- Listen to this so you dont get upset while doing it
- Copy or edit an existing xml since I dont think you can *make* one. Not needed, but It's helpful to open Visual Studio Code, and the character.hx to see the offsets of the character you're working on. I will list the offsets of the default characters tho
xml version="6.9" encoding="huh"?> <TextureAtlas imagePath="".png"> <!-- Created with my ass version 1 --> <!-- https://https://gamebanana.com/tuts/add?gameid=8694 --> <SubTexture name="Inside the empty quotation mark, put whatever animation name you're doing that's mentioned in Character.hx. I'll be doing Daddy Dearest for this one as an example.
<SubTexture name="Dad idle dance0000" x="0" y="0" width="900" height="900" frameX="0" frameY="0" frameWidth="430" frameHeight="830"/Theres a bit to unpack here, so I'll go one by one.
x="0" and y="0" marks the top left corner of the spritesheet, which is where the first idle frame would be.
width="900" and height="900" are self explanatory. The aforementioned canvas size is so that you have simple values that are easy to plop in lol
frameX="0" frameY="0" you'll almost never see them be exact 0's all the time, and with these settings it probably wouldn't look too good in the game if I had a spritesheet. These are modifiers to the position of the sprite once it's placed in the scene. This counts after the game puts its own offset on it. frameX and frameY are used to adjust its position to negate the game offset, or *rarely* to add movement or fix small adjustments.
frameWidth and frameHeight change the position of the camera when it's centered on a character in this case.
In the case of framex, framey, framewidth and frameheight, adding makes it go left and up, subtracting goes down and right.
To make the next frame in an animation, take the 0000 and change it by 1, and add it on a new line, with the new values.
3. Testing stuff in game
DEFINITELY the easiest part of this, I just need to be clear so yall dont reset your games after every change ^^;When you're changing character files, you can directly reload the assets used at the moment (unless they're preloaded) by restarting the current song, but remember to shift focus to a new window, not minimize the game. The game kind of breaks and becomes hard to use if you leave it minimized for too long.
4. Correcting offsets the easy way
Probably the easiest part of this, you dont even need to know how to do this in case youre like 6 years old because you gotta calculator If you are using fnf modding plus, fnf fps plus, or the original fnf build:
All you need to do is change the frameX and frameY as the opposite of the offsets mentioned in Character.hx. If you don't have access to the source code, OR youre lazy; here are the offsets lol
If you are using version 1.6+ of Kade engine:
there is a txt file in assets>shared>characters with the same properties as this for each character. Set them all to 0. nwn
-
well making the character's xml is even easier using spritesheet xml generator than coding it lol URL to post:
-
Very detailed tutorial, well done.
URL to post:
-
I was actually working on a (on hold) mod I was an animator for, and when I got that part, I started freaking out about not having adobe animate, when I found this, it helped a ton.
:)URL to post:
-
alpaca supremacy URL to post:
-
This tutorial is perfect! An awesome guide to help new people on modding (like me) to easily create spritesheets and make them work in-game. Im not a big fan with animating so i
forced
asked my friend to animate and it works pretty well! Great jobURL to post:
-
OMFG I LOVE YOU I JUST CANT AFFORD ANIMATE YOU JUST SAVED MY LIFE AAAAAAAAAAAAAAAA-
-
Thanks x 1
URL to post:
-
-
I usually have mine as all the frames i need (i.e 12-15 frames (as an example)) in one mdp file with all the parts on different layers, once im done i just go and hit the export layers [animation mode] AFTER i center them, and it generates the frame 1 by 1 in a folder that you chose (all being separate images without it showing the previous frame), so after that i attach em all together. Sorry if im bad at explaining it, but its easier to show than to text it, but i hope it makes it a bit easier? URL to post:
-
this is what I do on all my mods lol, I have access to adobe animate but since I lack a drawing tablet I usually draw on mobile, thank god for fire alpaca -
Agree x 1
URL to post:
-
-
Very swag URL to post:
-
if you made it this far please like ^^
i want more people to see this as i think its important, and i put a lot of time into it
and mods kinda suck at confirming on time (/j)URL to post:
Adding Firealpaca Drawings to Adobe Animator
Source: https://gamebanana.com/tuts/14136
0 Response to "Adding Firealpaca Drawings to Adobe Animator"
Post a Comment