RobotMonkeyHead Posted September 25, 2016 Share Posted September 25, 2016 • DIFFICULTY: ★★☆☆☆ • WHAT TO EXPECT: ⤵ Spoiler In this class you'll tackle everything you need to know about how graphics work in Mugen. You don't need any knowledge of Mugen coding at all to start. We'll start with a basic description of the 3 fundamentals: Sprites, Palettes and Animations, and then we'll get into more detail about how to implement them, and eventually master them yourself. By the time you're finished with this mission, if you're not seeing in pixels or watching your cat loop it's "Pet Me" animation, you might want to give it another read. • WHAT YOU'LL NEED: ⤵ Spoiler Fighter Factory 3 (Download Link) Guy's Walk Sprites (Download Link) • LESSON LINKS: ⤵ Spoiler LESSON 1: The Basics TOPIC 1 ~ Intro to Sprites TOPIC 2 ~ Intro to Palettes TOPIC 3 ~ Intro to AnimationsLESSON 2 - Sprites TOPIC 1 ~ Loading Sprites TOPIC 2 ~ Sprite Alignment TOPIC 3 ~ Sprite Sets & Sheets LESSON 3 - Palettes TOPIC 1 ~ Colors & Palettes TOPIC 2 ~ Modifying a Palette TOPIC 3 ~ Combining & Organizing Palettes LESSON 4 - Animations TOPIC 1 ~ Creating & Labeling TOPIC 2 ~ Flip & Rotation TOPIC 3 ~ Scaling, Rotation, & Interpolation LESSON 5 - Notation TOPIC 1 ~ Animations as Text TOPIC 2 ~ Numbering & Labeling TOPIC 3 ~ Wrap Up & FAQ Link to comment Share on other sites More sharing options...
RobotMonkeyHead Posted September 26, 2016 Author Share Posted September 26, 2016 ~ LESSON 1 ~ The Basics ☻ ___________________◢ TOPIC 1 ~ Introduction to Sprites ⤵ Spoiler A sprite is simply a single picture file. Up close it looks like a bunch of different colored squares. Each square represents a pixel on the screen, and they're laid out on a rectangular grid. The number of squares wide the grid is equals the number of pixels wide the sprite is, and the same goes for the height. From now on we'll call those squares pixels. Any pixel on the grid can be located using it's X, Y coordinates. Basically, X is how far from the left edge it is and Y is how far down from the top it is. If you want to locate the pixel at X, Y coordinates 12, 9, start on the upper left most pixel and from there count 12 pixels to the right, and 9 pixels down. It's red. We can see that the above sprite is 16 pixels wide by 18 pixels high, which is usually written "16 x 18". These are sometimes referred to as the sprites dimensions, but more often just as it's size. Don't forget to count 0! Each pixel also has a color, which is chosen from a numbered list of 256 available colors known as that sprite's palette. A color's number on that list is called it's index number. This allows a pixel's color to be written as a single number between 0 and 255, and all pixels with the same color index number will appear the same color on the screen. This is possible because the sprite file is in "indexed color mode" or simply "indexed", meaning it uses a palette in its file structure, unlike "RGB color mode". It's possible to index .png files, but .pcx files are also very popular because they're indexed by default. Aaand, that's a sprite. A 16 x 18 indexed sprite of a mushroom, to be precise. Done? No. We know how locate a pixel, but not a sprite. A sprite is located by using its group number followed by its index number. One way to think of it is you're basically grouping sprites into animations. So the sprites Group is the animation number it's in (usually), and the sprites Index is what animation frame number it is (again counting 0). There are no real rules to how you group and index your sprites, but this is the vastly standard approach. Eventually what you'll be doing is just loading a ton of sprites into Fighter Factory, grouping and indexing them, and then creating animations out of them. Mugen uses sprites this way for pretty much every single thing you see on the screen, save for some of the fonts, so check out the key points below. KEY POINTS • A sprite is a single image. • Each pixel has X, Y coordinates, found by measuring it's distance from the upper left most pixel in the sprite. • Each pixel has a color index, which is a number between 0 and 255 on the color list called the sprites palette. • When a sprite gets loaded into Mugen, you can give it a group number and an Index number within the group.RELATED ARCHIVES • Not yet. ___________________◢ TOPIC 2 ~ Introductions to Palettes ⤵ Spoiler A Palette is a collection of 256 colors, organized on a numbered list from 0 - 255. Mugen uses the first color (color number 0) for transparency in the game, so anything on the sprite that should be invisible in game, like the background for example, is colored with color 0. In any other image viewing software, color 0 will be visible, it's just the way the Mugen engine works. You'll see a lot of color 0 during the creation process. It's usually a bright purple, lime green or teal. Sometimes it's just white, but whatever color you choose for it, try to avoid using a color that's going to be on the character themselves. That way you won't wind up with accidental invisible spots, created when the sprite is converted to indexed color mode, and the software recognizes them as the same color so they get the same number. In Mugen, a single palette can be applied to any individual sprite, or to multiple sprites. When a sprite is loaded into Fighter Factory, the palette is given its own group and index number (unrelated to the sprite's group and index numbers). If 2 sprites get loaded in that have the exact same colors on their palette, FF doesn't bother making 2 palettes. Instead the 2 sprites are just assigned the same palette. This makes it so you can work with the palettes separately from the sprites themselves. Here's an example of a palette and the sprite it rode in on: Every sprite has a palette. Otherwise any pixel on that sprite, at location X, Y would have no color. As you've probably guessed, you can change which palette is being applied to a sprite, and if you do, all the colors on the sprite will change to the new palette. You can also apply the same palette to as many sprites as you wish. This is how all of your character's sprite end up sharing the same palette. Fighter Factory can also save and load palettes as separate files. The file type that Mugen uses for palettes is .act But for the most part that's not necessary, because FF saves all the sprites and palettes together in a single .sff file. Now for the recap. KEY POINTS • A Palette is a numbered list of 256 colors, from 0 - 255. In Mugen, color 0 is transparent. • Each Palette is given a Group and Index number, which is unrelated to any sprites Group and Index number. • Every sprite has a Palette that applies to it, and a single Palette can be applied to many sprites. • Palettes can be saved or loaded as .act files. RELATED ARCHIVES • None. ___________________◢ TOPIC 3 ~ Introductions to Animations ⤵ X Spoiler In Mugen an animation is just a list of sprites. When the animation is played, the sprites are shown in order, and when the end of the list is reached it simply starts over and continues looping until the animation is stopped. An animation is given a single number to represent it on the overall list of animations, unlike sprites or palettes which each take 2 numbers to reference (group and index). That's called it's animation number. Within a single animation, each sprite on the list is called a frame or an element. The terms are interchangeable. Here's a look at the frames / elements in a simple animation: When this is playing, each frame is shown for a determined number of "Ticks". Ticks are how MUGEN measures time (there are no tocks), and each tick is basically one pass through the main code loop in the engine. There are 60 of these in 1 second. Once a frame has been visible for it's set number of ticks, it is replaced by the next frame and the animation continues. Not only does each frame have a sprite, but it also has effects that can be applied to that sprite, like "Make this sprite semi-transparent" or "Move the start of the animation loop to this sprite" or "Gradually fade this sprite out over the course of 60 ticks". This means there are going to be quite a few variables that go with each frame, to make sure that the right sprite is displayed and all the effects are set properly. Those variables are always listed in the following order: 1) The sprite being displayed, group and index 2) The x, y coordinates of the sprite, relative to the animation 3) How long to show that sprite, in ticks 4) Whether to flip it horizontally or vertically 5) How transparent the sprite should be, called its Alpha 6) The scale to stretch the sprite to, x and y (1.1 only) 7) The angle to rotate the sprite to (1.1 only) As lame as it might be, we'll attempt to use use an acronym here to help remember the order: SOT FASA = Sprite - Offset - Ticks Flip - Alpha - Scale - Angle ^------ Image -------^ ^-----------Effects----------^ Don't worry if you don't remember it right now. Fighter Factory handles all of this visually, and makes it very easy. The only time you'll need to know SOT FASA (Mufasa's aunt's husband who drank all that shit that one time) is when we get into editing an animation as a text file, which is quite a ways off. It's only here now so you know exactly what can be done within an animation. One last thing that should be made clear, is that Mugen runs at 60 frames per second, or "60 fps". Again, each one of those 60 frames is called a tick in coding, and is just one complete cycle of the engine's code. But those "frames per second" aren't what we mean when we talk about "frames" in an animation. When you're working with animations, a single frame usually lasts for multiple ticks. So from here on when we talk about frames, we're talking animation frames, not game frames per second. KEY POINTS - An animation is a sequence of Frames (or Elements), each of which has a single sprite. - Certain effects, such as flip, transparency, scale and angle can be applied to a sprite on each Frame / Element. - The components of a Frame / Element can be remember using the acronym SOT FASA. - Mugen runs at 60 frames per second, which are called Ticks, and are not to be confused with Animation Frames / Elements.RESOURCES - None. ◉ ~ LESSON COMPLETE ~ Link to comment Share on other sites More sharing options...
RobotMonkeyHead Posted September 26, 2016 Author Share Posted September 26, 2016 ~ LESSON 2 ~ Sprites ☃ ___________________◢ TOPIC 1 ~ Loading Sprites ⤵ Spoiler Now let's look at how to load a sprite into Fighter Factory. Open Fighter Factory, and click [ Project > New ]. In the Basic tab, select [ Empty ] and click OK. Now we have a blank character file to mess with. Click [ File > Save As ] and give it a name, just so we know where to find it later. Now click on the top Sprites tab: and you'll get to a screen that looks like this: If you want an in depth explanation of everything you see here, check out the Fighter Factory mission (<-link), but for now we'll just stick to what we need to get the sprite loaded. For starters, make sure you download Guy's Walk Animation Sprites in the mission briefing. Unzip that folder and drop it into your FF folder for easy finding. Now, in FF near the upper left of the window, click on this icon: Hovering over it with the mouse, it should read "Add one or more sprites". You now have a standard File Open window. Navigate to the folder with Guy's walk sprites, select one and click Open. A little window that looks like this will pop up: Notice it's asking you what the Group and Index of the sprite should be? Just pick something random, it doesn't matter for now. It's also asking you about the Axis and the Palette. For the Axis, just leave it at 0,0 for now, we can always move it later. For the Palette, just leave it on "Image's palette, if not already added". Click OK. If all went well you should now see the sprite on the screen. Try clicking on it and dragging it around. See the alignment change in the left panel? We'll talk about that in the next stage. See the palette in the right panel? We'll talk about that in the next level. See where it says Group and Index in the left panel? You should already know what that means. And that's how you get a sprite into Fighter Factory. Congrats, you've now taken your first step out of the abstract and into the creation process! Save your work. Often. KEY POINTS - hmmm... nope, not really.RELATED ARCHIVES - None. ___________________◢ TOPIC 2 ~ Sprite Alignment ⤵ Spoiler In L1 S2 we covered that the upper left corner of the sprite is pixel (0,0), in terms of its (X,Y) coordinates. But if all of a characters sprites were placed so they shared the same (0,0) point on the screen, everything would be placed weird because the sprites are all different sizes. None of the foot positioning would line up right, for example. We need to be able to move all the sprites around freely and have Mugen remember their positions, which we can do. And the way Mugen does this is by creating a single (0,0) position called the Sprite Axis and remembering where every single sprite&'s position is relative to that. A sprite&'s position relative to the Sprite Axis is called its Offset, and the process of getting all the Offsets right is called Sprite Alignment. For example, if a sprite has an Offset of (100, 50), that means you started with the sprites upper left pixel (0, 0) lined up on the Sprite Axis (0, 0) and then moved the sprite so that the Sprite Axis is now at the (100, 50) point on the image. That&'s 100 pixels to the right, and 50 pixels down from the sprites upper left pixel (even if the sprite is only 25 x 30). You can toggle the Sprite Axis&' visibility in the View menu by clicking [ View > Sprite Cross ]. On screen it looks like this: A single character usually has hundreds, if not thousands of sprites, so Sprite Alignment can become a little tedious. Thankfully there&'s a work around that lets you load in large groups of sprites with their alignments already in place. We&'ll talk about that in the next stage. But first a few quick notes about aligning sprites manually. You can align an entire group or selection sprites at once using the Sprite Alignment Tool. Click [ Sprites > Alignment Tool ] and you'll get a window that looks like this: Simply select as many sprite as you want in the main window, and up top you can add the X and Y adjustments to be made to all of them by clicking Apply. If you&'re aligning a character, one thing to pay attention to is foot position, (or lower back position in air). This will generally make your characters movement appear more natural (less like they&'re on ice). The onion skin check box in the left panel can help with that too. Spoiler: ----------( Key Points & Resources • hide KEY POINTS - All the sprites in a file share a single Sprite Axis, and their positions are all relative to that. - Moving a sprite to the left causes it&'s X value to increase, because the sprite axis is moving right. - Moving the sprite up raises the Y value of its offset, because the sprite axis is moving down. - Groups of sprites can be loaded at a time, and then cropped after loading to preserve their alignment.RESOURCES - None. ---Things to add to this part: Sprite alignment tool. Notes about Foot position, lower back position in air. ___________________◢ TOPIC 3 ~ Sprite Sets & Sheets ⤵ Spoiler Once you've got a handle on how to load an individual sprite, try doing the same process but instead of clicking on a single .png image, highlight multiple images and then click Open. You've just loaded multiple sprites in a single shot. Now imagine downloading a .zip file containing all of the sprites for a single character. Imagine those sprites broken down into separate folders for each move... and all the sprites in each folder are the same size, so when you load them they all line up. When you hear people talking about sprite sets with the axis in tact, that's basically what they mean. Those sprite sets are by far the easiest to work with. If you just get a single sheet with all the sprites on it, you're going to have to align each one. Depending on the character it might not be as bad as it sounds but having the axis in tact saves you from all of it. The more sprites a character has, the more of a difference it makes. In the last stage we talked about a work around for aligning a bunch of sprites at once, and that's it. With the axis preserved you can load an entire group of sprites at once, and then tell Fighter Factory to crop them after they've been put in place. After being cropped, their offsets will all appear to be different, but the images will line up visually. Cropping the sprites saves memory and makes your creation load quicker in game. To make FF crop the sprites, select "Crop the image (after axis)" when you're loading them. You can manually crop sprites using this button in the sprites tab after they've been loaded too: If you're going to crop a bunch of sprites manually, it's a good idea to learn the shortcut keys by checking out FF's setup window. If you want to check out an example of a sprite set with the axis preserved, there's a download link for Blizzard from Primal Rage in the Key Points & Resources section at the bottom of this stage. If you look around on different sites you can get sprite sets for a ton of characters, not to mention hit sparks, or effects like hyper back grounds. Those all work the same way. They're just a set of sprites that are all the same size. Usually anyway :) Well there you have it. You now know everything you need to know in order to load sprites into your mugen creation, be it a character, stage, screen pack, life bars or story board, it all works the same when it comes to the sprites.KEY POINTS • A sprite set with the axis intact means you won't have to align each sprite by hand. Instead, load multiple sprite files at once and crop. • Loading hit sparks, hyper backgrounds or other effects works just like loading any other sprite. • Cropping sprites after they're placed saves memory, and makes your creation load quicker.RESOURCES • Download Blizzards Sprites ◉ ~ LESSON COMPLETE ~ Link to comment Share on other sites More sharing options...
RobotMonkeyHead Posted September 26, 2016 Author Share Posted September 26, 2016 ~ LESSON 3 ~ Palettes ✎ ___________________◢ TOPIC 1 ~ Colors & Palettes ⤵ Spoiler Let's take a look at how the colors work. In a palette, each of the 256 colors has its own number, from 0 - 255 called its index number. So if you have a sprite, every pixel on that sprite is one of those colors, from 0 - 255. A color itself is made from 4 values: Red, Green, Blue and Alpha or RGBA for short. Each one of these values can be set anywhere from 0 - 255. Here's some examples of colors and what their RGBA values are: Red (R) Green (G) Blue (B) Alpha (A) Transparent 241 132 17 0 Black 0 0 0 255 White 255 255 255 255 Middle Grey 128 128 128 255 Red 255 0 0 255 Purple 128 0 128 255 Teal 0 255 255 255 Lime Green 0 255 0 255 Yellow 255 255 0 255 A color's Alpha value tells you how transparent the color is on a scale of 0 - 255 with 0 being completely invisible, and 255 being completely solid. Every color on the palette has an Alpha value of 255, except for the transparency color (color 0) which has an Alpha value of 0. As a matter of convenience, Fighter Factory does allow you toggle the transparency color's visibility while you're working. When you're working with sprites outside of Fighter Factory, say in Gimp, Photoshop or Paintbrush for example, the transparency color (color 0) is going to be visible. Usually people choose a bright lime green (0, 255, 0, 255) or a magenta (255, 0, 255, 255) for this color because it's almost never used in the actual palette and images generally stand out well against them. Here's an example: See how the background is green, which is the first color in the palette? Once that shroom is in Fighter Factory, all the green will become transparent. When you're working with a bunch of sprites, a character's sprite set for example, your drawing program should allow you to rearrange the palette order. Just make sure you have the background color set in the right place before you save them for use in Fighter Factory. Depending on the drawing program and the file type, it may save the palette in reverse order, meaning whatever color you had at index 0 will actually be at 255 when you go to load it into FF. Thankfully FF allows you to load the palette in reverse order when loading sprites. You can save your sprites as either PCX or a PNG files. Fighter Factory will take either. Just make sure they're in indexed color mode. And that's how Mugen handles the colors in a palette. ___________________◢ TOPIC 2 ~ Modifying a Palette ⤵ Spoiler Once you have a bunch of sprites and palettes loaded from Level 2, there are a few things you can do. For starters you can apply any palette to any sprite, which will look like shit most of the time for reasons you can probably guess. Another thing you can do is mess with an existing palette. Modifying a palette can generally be done 3 ways. First, you can do it in whatever drawing program your using to work with your sprites before you load them in to Fighter Factory. This of course will vary per program. Personally, I use GIMP (which is free) and I&'m completely satisfied with it. Photoshop and Paintbrush are also popular options. Second, you can modify the palette in the sprites tab in Fighter Factory. To do this, open up your project and go into the sprites tab. If the palettes aren&'t already displayed in the right panel, click the organizer button: Once the palettes are displayed, simply double click on any color and use the default palette editor to adjust it. When you&'re finished, if you want to save your new palette as a separate file, simply click the "save the palette as a file" button and give it a name. Third, you can use Fighter Factory&'s Advanced Palette Editor. In the sprites tab, scroll to a sprite you want to edit the palette for and then click this button: This is an extremely versatile tool, and it will take some messing around with to get used to. But as long as you don't save anything you can always just close the editor and reopen to start over. So for starters / learning purposes, stay away from these buttons: Most of the other buttons you should be able to figure out on your own, especially after you've completed the next stage in this level. Until then, just avoid the buttons listed above, and mess around with it for fun. If you want to save a palette you made as a separate file (just be careful not to over write an existing one) click the "Save current palette to a new file" button: This will allow you to use it as one of the characters 12 in game palettes. To learn how to do this, and learn more about the Advanced Palette Editor check out the Palette Creation mission. You'll also learn how to share your work there. ___________________◢ TOPIC 3 ~ Combining & Organizing Palettes ⤵ Spoiler There are actually a couple ways to load palettes into FF. If you're doing a relatively simple stage you can just load the sprites in and let FF load the palettes automatically, the way we did in Level 2. But for larger projects like characters, or more complex stages you might want to generate a single palette for multiple image files. This can either be done in whatever image editing software you're using (Photoshop, Gimp etc) or in FF, and can help reduce the the time it takes for Mugen to load your creation. To generate a single palette for a bunch of images in FF, pop open the Advanced Palette Editor before loading any sprites. Click the "Generate Palette from Images" button, which looks like this: This will allow you to highlight all the images you want to use to create your palette in a typical "File > Open" styled window. Keep in mind you can only load 256 colors total, so if you select 2 images that each have 200 colors, you&'re going to get color loss. Once the palette is generated you should see it in the left of the 2 palette displays in the editor. The right one is purely there for organizing. The left one is the actual palette. After you make whatever changes you want to the order of the colors in the palette, click the "Inset the Current Palette in Images" button. This will open up another standard [ File > Open ] window. Select the exact same files you selected the first time. *Before you click Open, just know that this is going to change the files, so if you want to make a backup to be safe, it might be a good idea first.* Once you&'ve taken whatever precautions you want, click Open. Now all these images share that exact palette. (If you did this process to a picture with more than 256 colors it would simply convert the image to 256 colors doing the best it could with the colors.) After all that, there&'s one more step if you&'re working on a character. Save the palette as Group 1 Index 1 by clicking the "Save as Group/Index in the Sprites Editor" button. FF uses palette 1,1 as the characters main palette by default. If you&'re not working on a character, this step doesn&'t matter at all. You can simply load the pictures and FF will take care not to duplicate the palettes. ◉ ~ LESSON COMPLETE ~ Link to comment Share on other sites More sharing options...
RobotMonkeyHead Posted September 26, 2016 Author Share Posted September 26, 2016 ~ LESSON 4 ~ Animations ► ___________________◢ TOPIC 1 ~ Creating & Labeling Animations ⤵ Spoiler Ok, now we&'re going to try actually making an animation. Open up Fighter Factory, and load your character file you made in Level 2. It should have some of Guys sprites loaded in already. If not, revisit Level 2 to see how to load em in. Click on the animation tab: You should now be in a window that looks like this: First thing we want to do is create a new animation, so in the left panel click on the plus button on the animations scroll bar (not the element scroll bar below it). Hovering over it should produce the label "add new animation". It&'ll ask if you want to define a new number for the animation. Remember in Level 1 how we said that each animation only has a single number, unlike sprites or palettes which have a group and index? This is that number. Click yes, and choose any random number for our new animation. Later on you&'ll learn proper ways to number your animations, but for now we just want to get one working. Now that we have a fresh shiny new blank animation, the first thing we want to do is pick a sprite for the first frame. In the left panel where it says Group and Index enter the group and index of the sprite you&'d like to use. It should appear immediately. Great, there we have it. Now how many ticks do we want to show it for? Remember there are 60 ticks in a second, so let&'s say 10, which is 1/6th of a second. Enter 10 in the box labeled Time. For now, let&'s not worry about flipping it or making it transparent, lets just add in another frame. Click the "add new frame" button, which is a plus sign on the right end of the frame selector scroll bar: Now repeat the same process, by selecting a group and index of the sprite, and the time you want it to show for. Do this about 3 or 4 more times. If you want you can add in the entire walk sequence. When you&'re done push play to preview the fine animation you just made: Now this part is really freakin important, and a surprising number of coders actually miss this, so pay attention right here. See where it says animation Name underneath Number? Name that beast. You might think you&'ll remember it by the number, before you know it there will be more animations than you can count. And it might be a while before you learn all the standard numbers. You&'ll want to be able to find everything easily while you work so label it well! Label everything well. It makes it so much easier in the long run, trust me. Welp, there ya go, you&'ve just created your first animation. KEY POINTS - Unlike sprites or palettes, an animation is identified only by a single number. - Name / label all of your animations!!!RESOURCES - None. ___________________◢ TOPIC 2 ~ Flip & Transparency ⤵ Spoiler Open up Fighter Factory, open your test character file and go to the animation you made in Stage 1. At this point there should only be one animation so going into the animation tab should bring you right to it. If not, use the animation selector scroll bar to get to it. Let&'s mess with it. We&'ll go to the 2nd frame and flip it backwards and make it half invisible. Navigate to the second frame, using the frames scroll bar. See where it says Flip? Click it and select horizontal from the drop down menu. The sprite should flip horizontally. I&'m not saying you should, but if you did click the "apply flip to all next frames" button next to where it says flip (looks like two H&'s) it would make every frame after that one flip horizontally too. Now click where it says Transparency: Select "addition" from the drop down menu (subtraction is weird, we&'ll talk about that in Level 3). The sprite should now look ghostly whitish and be kind of see through. Much like the Flip section, you could click that button next to Source and Dest that looks like two A&'s and it would apply the current transparency settings to all frames after your current one. You can mess with how transparent it is by adjusting the Source and Dest values. Both of these values work on a scale from 0 to 255, where 0 means not visible at all, and 255 is completely 100% visible. Source means the sprite itself. Dest (short for Destination) is the background. When we selected "addition" from the transparency drop down menu, what that meant was it&'s going to Add the sprite&'s RGB (red, green and blue) values of each pixel to the existing RGB values of the Background pixel it overlaps. The highest that any pixel can go, however is 255, 255, 255 which is white. This is why our sprite looks whitish when both Source and Dest are set to 255. We can "fix" that by changing both the Source and Dest to 128, which is about half of 255. We then have a 50% visible background and a 50% visible sprite over it. The result is the RGB values are averaged (half of each), rather than totaled, giving a balanced 50% transparent sprite. Mess around with these to get a feel for it. KEY POINTS - Flip can be either horizontal, vertical or both. There's a button that can apply it to all frames after the current as well. - Transparency or "Alpha" can be Additive or Subtractive. Additive means the pixels RGB values are added to those of the background it overlaps. Subtractive means it subtracts them. - A pixels maximum RGB value is 255, 255, 255 so adding a pixel that is 200, 200, 200 over a background that is 200, 200, 200 will produce white. - Source represents how visible to make the sprite, and Dest is how visible to make the background. Both are on a scale of 0 - 255. - Having the Source and Dest both set at 128 (half of 255) causes the sprite to be exatly 50% transparent with no whitening.RESOURCES - None. ___________________◢ TOPIC 3 ~ Scaling, Rotation & Interpolation ⤵ Spoiler Scaling and rotating are new in 1.1, so if you&'re using 1.0 you can just skip to the end of this level. Assuming you&'re still in the animation tab from the previous stage, click the organizer button in the top bar until the right panel shows some thumbnails and the Scale, Rotation and Interpolation options. Creation Boot Camp Creation The second frames been through enough, so let&'s move up to the 3rd. Navigate using the Frames scroll bar. Adjusting the sprites scale is as easy as it sounds. Just mess with the X scale and Y scale options in the right panel: One thing to keep in mind here, is that when it shrinks a sprite, it doesn&'t use the center of the sprite as the point to shrink it to. Instead it uses a middle ground between the sprites axis, and the Animation Axis. *** Remember the Sprite Axis we talked about in Level 2 Stage 1? Well there&'s an Animation Axis as well. It works the same way as the Sprite Axis, but instead of remembering where every sprite is relative to the Sprite Axis 0,0, and calling that the offset, it creates an Animation Axis 0,0 and remembers where every Frame is (sprite offset and all) relative to the central Animation Axis. It calls that the Frame Offset. Later on, when you&'re coding a character, or something that moves an animation around the screen, the point you&'ll be moving is the Animation Axis. Rotating a sprite is just like it sounds as well. Just input a number in the Angle window: Really 0 through 360 are the only numbers that matter. -10 is the same as 350. There are some glitches in Fighter Factory here so beware! When FF displays the rotate sprite, it shows it rotated around the Animation Axis. In game, however, it will be rotated around the Sprite Axis. Hopefully VirtualTek fixes this at some point, but till then, lots of trial and error will be needed to get your rotations to work right, unless the sprites centered out on both the sprite and animation axis. Now onto interpolationestablishmentarianism. Interpolation is a weird freaking word, but it basically just means "make as smooth of a transition as possible." All the interpolate commands work like so: They take the number of ticks from the frame directly Before the one in which their box is checked, and over the course of those ticks they smoothly space out the changes between that (previous) frame, and the frame where the box is checked. Say you wanted to use "interpolate blend" to make the sprite go from invisible to solid over the course of 20 ticks during the 4th frame, and then remain solid for 10 ticks in the 5th frame. Go to the frame in the animation you want the interpolation to end on, the 5th frame. In the right panel, underneath Interpolate, check the Blend box: Then go to the previous frame (frame 4), and make sure the Transparency is set to Add, Source is set to 0 and Dest is set to 255. The beginning of that frame will be where the interpolation starts. It will take as many ticks as that frame is long to gradually change Source and Dest to the values in the next frame (frame 5), which is where the box is checked. Once that frame is reached, normal animation resumes. Animations loop by default, and adding interpolation to the first frame will cause the last frame of the animation to smoothly transition that variable to that of the first frame, over the course of the last frames ticks. That&'s about all there is too it. If you got all that, you now understand the fundamentals of everything mugen does with graphics. If not you can always revisit the levels as you go. A lot of it sounds confusing at first, but it will become clear when you go to apply it. The important thing is that you feel comfortable messing around with it. (You can always download another Kung Fu Man!) KEY POINTS - The Animation Axis (similar in function to the sprite axis) is used to determine the offset of each frame in the animation. - The Animation Axis is the single point which marks the location of the animation in X, Y terms in coding - An X scale of .5 and a Y scale of .5 will make the sprite exactly half size. - Sprite scaling centers around an average of the sprite axis and the animation axis. - Rotation rotates around the Sprite Axis. - Interpolation causes a gradual transition in one aspect of the animation, beginning on one frame with its values, spanning through that frames number of ticks and ending on the next frames values when the next frame begins.RESOURCES - None. ◉ ~ LESSON COMPLETE ~ Link to comment Share on other sites More sharing options...
RobotMonkeyHead Posted September 26, 2016 Author Share Posted September 26, 2016 ~ LESSON 5 ~ Notation ✉ ___________________◢ TOPIC 1 ~ Animations as Text ⤵ Spoiler Ah yes, the secret wonders of animation notation. This is where you'll learn how to read an animation in it's glorious natural text form. Open up Fighter Factory and load up your project. Click the animations tab and go to that wacky animation you created over the course of Level 4. Now click on the "Edit the current animation as a text" button in the left panel. You'll see a text window open with a bunch of numbers in it. It'll look something like: Name of your animation [Begin Action 99] 20,0, 0,0 ,6 , , AS128D128 20,1, 0,0 ,6 ,H, AS128D128 20,2, 0,0 ,6 , , AS128D128, 1.5, .2, 180 The top line is just the number of the animation, so don't worry if yours is different. Now under that part is the more interesting stuff. It's a bunch of lines that each take the format of numbers separated by commas. Each line is actually 1 frame / element. Here's how the numbers on a line break down: (S) - The first 2 numbers on the line are the sprites Group and Index. (O) - The second 2 numbers on the line are the Frame Offset X and Y. (T) - The 5th number on the line is the Time in ticks. (F) - The 7th variable on the line is the FLIP: H, V or HV. (A) - The 8th variable is the Transparency* (S) - The 9th and 10th numbers are the X and Y scale respectively. (A) - The 11th number is the angle of rotation. *Transparency notation works as follows: First character is a single letter, either A or S for addition or subtraction. Next comes an S for source, followed by a number from 0 - 255 which is how visible to make the Source (sprite). After that comes a D for destination, followed by a number from 0 - 255 which is how visible to make the Destination (background). Take another look at the example and see if it makes sense to you now. It may look a little confusing at first, but it's pretty easy to pick up. Sometimes its just easier to work with animations in text form. Changing a bunch of offsets can be easier this way, or copying and pasting chunks of text from one animation to the next can make things a lot easier. It you plan on doing stages, screen packs or life bars, this is a must know. If you're doing characters, it's worth learning at some point. Maybe not right off the bat, but eventually you'll find it useful. One last thing to beware of here, is that FF has a bug, where if you adjust the angle in text mode without adjusting the scale, it will assume the scale is 0,0 making the sprite invisible. So if you adjust the angle, just remember to make the scale 1,1. AAAAAAnd that's it. ___________________◢ TOPIC 2 ~ Numbering & Labeling ⤵ Spoiler When you're giving your sprites Groups and Index numbers, and numbering your animations, there are some standards that most creators follow. This just makes it easier on yourself and anyone else who might try working on your character in the future. There are also such things as Required Animations, which sort of implies required sprites. There are 2 reasons for this. First is that Mugen needs to know what state to automatically send your character into when they get hit. That's what state 5000 - 5999 are for. It also needs to know what state to change your character to when they auto-turn to face the opponent. That's what states 5 and 6 are for. These (get hits and turn) are the main required animations. Second is that your characters code can be broken up into as many separate files as you want. Because of this, and to save a lot of time and effort, there is a Common1.cns file which contains code that many many characters access. It's in Mugens data folder along with engine configuration options and other things. It's completely possible to have your character not to bother with that file at all. You can even copy and paste all the code from it into your character and tweak it if you want. But if your character does use common1.cns, there are a lot more requirements you'll have to follow. The important thing to understand here is that even if your character Doesn't use the common1.cns file, states 5000 - 5999 and states 5 and 6 are all still required. Unless your making some weird bonus stage or boss or something and you have a work around built in. But for just about all characters, those states are just part of how the engine works. As for the rest of the numbering standards, it's strongly recommended that you follow them either way. It won't break Mugen if you don't, but it's just good practice, and it makes finding everything easier in general. Check out the list in the Resources section below, or in the file air.html in your Mugen docs. And don't forget, name and label Everything! ----------( Key Points & Resources Click here to view Mugen's standard state numbering. ___________________◢ TOPIC 3 ~Wrap Up & FAQ ⤵ Spoiler Ok well we've covered the foundation for how M.U.G.E.N handles graphics. You now know what I mean when I say something like "a bunch of sprites that share a palette are organized into an animation, where each frame lasts for 4 ticks, and the last frame is flipped backwards." You won't run into anything that strays far from the path laid out in this mission. So I guess the last thing to mention is When M.U.G.E.N uses each of the things we talked about. Characters, Stages, Screen Packs, and Lifebars all use sprites, palettes and animations just like they're described above. So like 99% of your graphic needs are covered. Font's are weird, but there's another mission for those. Any time a character uses graphics, it'll only reference the animation number. The animation axis will mark the location it uses to place it on the screen. Stages, Screen Packs and Life Bars all use animations in text form, so they can actually call up the sprites directly by their Group and Index, unlike characters. Those 3 things all work in surprisingly similar ways. And there you have it. Now you know how M.U.G.E.N uses graphics. Cerebral upgrade complete. M.U.G.E.N Graphics Knowledge installed. Here are some answers to frequently asked questions from this thread: empty spoiler ◉ ~ LESSON COMPLETE ~ Link to comment Share on other sites More sharing options...
RobotMonkeyHead Posted September 27, 2016 Author Share Posted September 27, 2016 ~ PROJECT 1 ~ The Process ✓ ___________________◢ INSTRUCTIONS ~ Graphics Class Project ⤵ Spoiler Your final objective in this mission will be to load all the sprites for a single animation into Fighter Factory, crop them, modify the palette, and create, name and label the animation. Instructions are below. If you get stuck feel free to ask any and all questions on this thread. 1) Create a new character file in Fight Factory 3. 2) Load the sprites from the mission requirements section into your character, making sure they're properly aligned and cropped. 3) Modify the palette in some way, and save it. 4) Create the walk animation from the sprites, making sure it's properly numbered and named. 5) Play the animation to test it out. Click here when you've completed everything above. Spoiler ~ CLASS COMPLETE ~ If you wish to continue your training, you&'re now ready for MISSION 3: Palette Creation MISSION 4: Portrait Creation MISSION 5: Stage Creation MISSION 6: Character Creation Congratulations on completing your mission! You should now have a solid understanding of how Mugen handles graphics. Please comment on this thread if you found anything confusing or have any suggestions for how to make the mission better or more complete. Any and all conversation about M.U.G.E.N graphics is more than welcome here. ◉ ~ CLASS COMPLETE ~ Link to comment Share on other sites More sharing options...
RobotMonkeyHead Posted October 2, 2016 Author Share Posted October 2, 2016 Storage: Spoiler CLASS 2 ☕ Graphics • WHAT TO EXPECT: ⤵ Spoiler In this mission you'll tackle everything you need to know about how graphics work in Mugen. You don't need any knowledge of Mugen coding at all to start, and from here you'll be ready for the character creation, stage creation, screen packs and life bars missions. We'll start with a basic description of the 3 fundamentals: Sprites, Palettes and Animations, and then we'll get into more detail about how to implement them, and eventually master them yourself. By the time you're finished with this mission, if you're not sweating pixels and watching your cat loop it's "Pet Me" animation, you might want to give it another read. • CLASS MAP LINKS: ⤵ Spoiler LESSON 1: The Basics TOPIC 1 ~ Intro to Sprites TOPIC 2 ~ Intro to Palettes TOPIC 3 ~ Intro to AnimationsLESSON 2 - Sprites TOPIC 1 ~ Loading Sprites TOPIC 2 ~ Sprite Alignment TOPIC 3 ~ Sprite Sets & Sheets LESSON 3 - Palettes TOPIC 1 ~ Colors & Palettes TOPIC 2 ~ Modifying a Palette TOPIC 3 ~ Combining & Organizing Palettes LESSON 4 - Animations TOPIC 1 ~ Creating & Labeling TOPIC 2 ~ Flip & Rotation TOPIC 3 ~ Scaling, Rotation, & Interpolation LESSON 5 - Notation TOPIC 1 ~ Animations as Text TOPIC 2 ~ Numbering & Labeling TOPIC 3 ~ Wrap Up & FAQ • DIFFICULTY: ★★☆☆☆ • REQUIREMENTS: Fighter Factory 3 Guy's Walk Sprites Link to comment Share on other sites More sharing options...
Recommended Posts