Random noise tag the student lounge wall

Storage: • CLASS MAP LINKS: ⤵ • DIFFICULTY: ★★☆☆☆ • REQUIREMENTS: Fighter Factory 3 Guy's Walk Sprites

~ DEMO LAYOUT ~ Hows This Look ___________________◢ PROJECT ~ PFG ⤵ ◉ ~ CLASS COMPLETE ~

------ ADVANCED PALETTE EDITOR HOW TO pt 1 There are 4 buttons between the them which look like this. [pic] In the left palette, select any colors you want to move by clicking on them (shift-click to select a range, ctrl-click to select multiple). Then on the right side palette, select the destination spaces you want to move them to. Once you have the selections you want on both sides, click the "Send Selection Colors" button. [pic] Simply mirror the process to send colors back. You can also send empty boxes from the right to replace the colors on the left you've already sent, and visa versa. Remember to make sure the background transparency color ends up in the first box in the left palette. Once you've got the palette organized how you want it, ------ ADVANCED PALETTE EDITOR HOW TO pt 2 Here's a quick overview. There are 2 palette displays. The left one is the actual palette, the right one is purely for organizational purposes. Start by selecting the color(s) you want to edit by clicking on them (shift-click for range select, ctrl-click for multiple individual select). You can also select them using the eye dropper tool [pic]. Use that to click on the actual image, and it will select the colors of the pixels you click on. Once the colors are selected you can adjust them multiple ways. For starters, you can use the Hue / Saturation sliders or the RGB sliders. Click the X to reset them or check to apply the changes. You could also use the Mask button to temporarily turn all of those colors to a single color, which you can select by pressing the Mask's Color button. You can also swap the values of RGB color channels, say the red & blue in all the selected colors by selecting the channels you want to change and pressing the arrow button just above the eye dropper. [pic] ----- TRANSPARENT COLORS WITH ALPHA 255 It is possible to make a color with an Alpha value of 255 transparent, however. This is done within an animation, or in the coding itself. So let's say you have a large red circle with an Alpha value of 255 that's been made transparent by an animation, and it's moving across a middle grey back ground. The animation / coding itself will tell us on a scale of 0 - 255 how visible the background behind the circle should be, and on another scale of 0 - 255 how visible the circle itself should be. For now lets assume they're both set at 255, or 100% To figure out what color the pixels inside the red circle should be, Mugen will add 100% of the background's red channel to 100% of the red circle's red channel. The total is 128 + 255 = 383. Because 383 is more than 255, Mugen just sets the red channel at 255. It then does the same thing with the Green and Blue channels. So the resulting color has a RGBA value of: 255, 128, 128, 255. Sort of a pinkish color. ----------------- COLOR SEPARATION MAYBE THIS SHOULD BE ITS OWN MISSION? MAKE STAGE 1 ABOUT COLORS AND MOVE THE OTHER STAGES DOWN? Let's say you have a Blanka character and his hair and shorts both use the same oranges on the color palette. Let's also say you'd like to be able to change the color of his hair without changing the color of his shorts. This is where the process of Color Separation comes into play. Here you need to separate the shorts from the hair. For starters this means that you're going to need to add some colors to the palette. However many shades of orange the hair uses, that's how many new colors you're going to need to add. For simplicities sake we'll assume both the hair and the shorts use all the available orange colors, and there are 6 shades of orange. That means 6 new colors need to be added for the hair. Start by going into the sprites tab [picture], go to one of the characters sprites, and pop open the Advanced Palette Editor by clicking this button [picture]. You'll see the palette which looks something like this: [picture]. Click one of the empty black boxes, hold shift and click another empty box that's 5 boxes away. This should highlight 6 boxes. Now click on the gradient tool which looks like this [picture]. It'll ask you to input a start color and an end color. It doesn't really matter what you choose, but try to pick something distinct from the existing colors just to make it easier to see what you're doing. Once you've got the new color gradient added in, save the palette by clicking this button. [picture] Now go to the first of the characters sprite. Don't worry about the portraits, or sparks or effects or anything for this part, just the actual character sprites. Once your on the first sprite, open up the image editor by clicking this button: [picture]. Select the color swap brush by clicking on this [picture]. Now in fill the first column with the original orange color gradient and the second column with the new color gradient you added. [picture]. You can change the size of the brush using the slider bar [picture]. From here what you're going to be doing is basically drawing with the brush over the hair to change all the orange to the new color you added. As soon as you're finished, save the sprite and move to the next sprite. You're going to have to do this for all of the characters sprites, so learning the shortcut keys for "save" and "next / previous sprite" is probably a good idea. Remember to save often, but that's basically the process. You can imagine how far this could be taken if you really wanted to. There are some links below that explain it differently or in more detail. [spoiler=----------( Key Points & Resources] ___/ KEY POINTS • The first step to color separation is adding in as many colors as the area you want to separate has. • Adding a gradient can be done using the Advanced Palette editors gradient tool. • Use the color swap brush in the image editor sprite by sprite with shortcut keys for quickest results. ___/ RESOURCES • Color Separation Tutorial by ___ [/spoiler] - STAGE 3 COMPLETE - [/spoiler]

- STAGE 3. Common States Ok so at this point we know what a state is. We know some of the common state controllers that make them up, and we know what the statedef itself is. Now let's talk about some common states. You might remember from the Graphics Mission that a characters sprites and animations have a numbering standard. Sprite group 20, and animation 20 for example are commonly used for walking forward. Well, as you might have guessed, so is state 20. State's should share the same basic numbering standards as sprite groups and animations. And for good reason. Having all of them numbered the same makes your coding life a fuck of a lot easier. You'll see. So where can you find such a list you ask? Here. (link) That's a list of the suggested animation and sprite group standards anyway. It gets a little slippery when you start coding because there isn't a single state for every animation, so you're going to have to use your best judgement at some point. That being said, it's well worth the effort to keep it all synced up. It's also true that not all characters have the same abilities. Some characters don't dash, some parry, some don't super jump, so you're obviously going to have to go outside the suggested standards at some point. And they're not a hard fast rule at all, this is totally fine, they're just there as a guide. The most important thing is that you keep consistency between sprite groups, animations and states within your own numbering system. And that's the last part of the prep talk before we dive into actually coding a character. From here on out we'll be moving out of the conceptual and into the actually doing it part. So get ready. And feel free to take a minute to revisit anything you didn't fully understand before we get started.

----------------------------------------------------------------------------------------------------------- LEVEL 2: COMMON CODE ----------------------------------------------------------------------------------------------------------- - STAGE 1. Common State Controllers Now that we understand the basic structure of a characters code, let's take a look at some common state controllers, and how they work. The single most necessary state controller is the ChangeState controller. Without it, your character would never leave their initial state, unless they were hit. Not only is it responsible for changing from one state to another, but it's also responsible for changing from an idle / standing state to an attack state when a button is pushed. So it's really the core of your characters input controls. ChangeState is literally everywhere. So how does it work? We know it has to be triggered somehow in order to actually work, so when your adding one into your code, the first thing to consider is when do we want the state were in to change? Let's say our character is in the air, in a jumping state. We want them to change to their landing state when they hit the ground. So the trigger for our ChangeState controller might look something like: trigger1 = pos y >= 0 Seeing as the characters pos y value is 0 when they're on the ground (negative numbers are upward), if your characters pos y is greater than 0 you would want it to go into a landing state. So all together that controller would look like this: [State 0, Go to landing state] type = ChangeState trigger1 = pos y >= 0 value = 60 ctrl = 1 You can tell by this ChangeState that the Statedef number of the landing state is 60. We know this because value = 60. There are only two variables for a ChangeState. "Value" tells Mugen what state to put your character in, and "ctrl" tells Mugen whether or not they have keyboard / joystick control while in that state. 1 = yes and 0 = no for just about everything in Mugen. One last thing about changing states. When Mugen is reading your character's state top to bottom, and it encounters a ChangeState, it will immediately jump to the new state and continue reading, starting at the top of it on the same tick. It doesn't wait till next tick to start on the new state. That's pretty much all you need to know about the ChangeState controller, aside from different ways to trigger it. Let's take a look at another state controller: Velset, short for Velocity Set. Obviously, this sets your characters velocity. Here's how it looks in action: [State 0, Change the velocity] type = VelSet trigger1 = time > 5 x = 0 y = -2 This would set your characters x velocity to 0 and y velocity to -2 (upwards) on every tick after the 5th tick since the state was entered. Thats because it uses the time trigger. And 0 counts for time, it's the first tick. So ticks 0 - 5, nothing. Tick 6 and up, velocities are set, until a ChangeState is triggered. That's VelSet. Another common state controller is ChangeAnim. It looks like this: [State 0, Change the animation] type = ChangeAnim trigger1 = vel y < -1 value = 100 elem = 1 Value is the animation number to change your character's animation to. Elem is the frame number to jump to. You can leave this out if you want, and it will just start at the beginning. In the example, the trigger would cause ChangeAnim to activate if your characters y velocity dropped below -1 (which again is upward movement). On the same tick that was true, your character's animation number 100 would begin, without waiting for the animation they're currently in to finish. It would also re-trigger on every tick the trigger was true, so your anim 100 would actually just keep starting over as long as their y velocity was less than -1. Animations also loop by default, remember. So those are some common state controllers. You should now have a decent feel for how they work. - STAGE 2. Common Statedef Details Next up is the actual StateDef itself. This marks the beginning of any state, and give the state its number. Here's a look at one: ; Stand [Statedef 0] type = S physics = S movetype = I anim = 40 ctrl = 0 sprpriority = 1 I'm sure you've noticed there's no trigger. That's because it triggers once, on the first tick the state is entered, and that's it. There's actually a lot of variables that can be set here, but you'll usually only see a few, and any values it does set can also be set later by other state controllers. The first thing being set here is type. The options for that are S, C, A, L, or U which mean Standing, Crouching, Air, Lying down, or Unchanged respectively. It defaults to S, so if you don't want it to change from the last state, make sure to add type = U. The second one is physics. The options there are S, C, A, N, or U. Again, meaning Standing, Crouching, Air, None, or Unchanged. Same goes here for Unchanged. If you leave the Physics variable out, it will automatically set itself to S. So if you want it to remain unchanged from the last state, you're going to have to add physics = U. The physics variable will effect the friction the character experiences, which basically means if they're on the ground, and their velocity gets set to something, they'll slow down automatically. The third variable is movetype. Options there are I, A, H or U. Idle, Attacking, Hit or Unchanged. Hit as in "got hit" not "hit the opponent". This tells Mugen what your character's doing as far as attacks go. Idle obviously means not attacking or getting hit. Attacking and Hit are pretty obvious. If you're character's punching or kicking, they're going to be in an attack state. If they just got punched or kicked, they're probably going to be in a Hit state. If you leave the variable out all together, it automatically goes to Idle. Another way to say that is the variable "defaults to Idle". So again, if you want it to remain unchanged from the previous state, you gotta add movetype = U. Those 3 variables are the main 3 you're going to see in just about every single Statedef. Even tho you can change them with the StateTypeSet controller, it's really a good idea to mark all that stuff at the beginning of the state, as you'll see once you get to coding. As for the other variables, anim sets the animation, ctrl determines whether or not that state can take input from your keyboard or joystick, and sprpriority (short for Sprite Priority) tells Mugen which layer to put your characters sprite on, between -5 to 5. They normally hang out around 0. So that's Statedefs.

_____/ LEVEL 1 - How Mugen Works Imagine all of a characters code laid out in a single text file. All of that code breaks up into separate chunks called States. Every State has a number that defines it, and that number is called the State Def. Your character is only ever in one State at a time. At some point, something in the State will tell your character to change to a different State number. This is basically how your character's behavior is determined. Here's what a State looks like: ; Stand [Statedef 0] type = S physics = S sprpriority = 0 [State 0, 1] type = ChangeAnim trigger1 = Anim != 0 && Anim != 5 trigger2 = Anim = 5 && AnimTime = 0 ;Turn anim over value = 0 [State 0, 2] type = VelSet trigger1 = Time = 0 y = 0 [State 0, 3] ;Stop moving if low velocity or 4 ticks pass type = VelSet trigger1 = abs(vel x) < Const(movement.stand.friction.threshold) trigger2 = Time = 4 x = 0 [State 0, 4] ;Are you dead? type = ChangeState trigger1 = !alive value = 5050 ctrl = 0 As you can see, the code inside a single State breaks up into smaller chunks. These chunks are called State Controller (sometimes abbreviated Sctrls). Each State Controller performs a specific task. For example the thing inside a state that tells your character to change to another state is a State Controller. Another State Controller might cause your characters position on the screen to change, or one might change the animation they're running, and another might make the screen shake. Basically every individual thing your character does is caused by a State Controller. Here's what one looks like on its own: [State 0, Personal notes or a number] type = ChangeState trigger1 = time > 5 value = 20 Each State Controller has a trigger. The trigger is basically an equation that turns out to be either true or false. If it's true, the State Controller does its thing. If it's false, the State Controller does nothing. For example, if a State Controller had a trigger that was "2 + 2 = 5", that state controller would never do anything. If it was "2 + 2 = 4" it would always preform its task. If the trigger was "time >= 10" it would only perform it's task after 10 Ticks had passed since your character entered their current state. When Mugen is running during a match, the way it handles all that is actually pretty simple. It runs 60 loops or "Ticks" per second. On each loop it jumps to the State your character is currently in and checks every State Controller in that state in order. For each State Controller, it checks the trigger to see if it's true, and if it is, the State Controller "activates", meaning it does its thing. Once Mugen is finished with all the State Controllers in your characters state, it does the same thing for the opponent. That's assuming you're P1 of course. It's pretty much that simple. Let's take another look at the original example. It's an example of a Kung Fu Mans standing state: ; Stand [Statedef 0] type = S physics = S sprpriority = 0 [State 0, 1] type = ChangeAnim trigger1 = Anim != 0 && Anim != 5 trigger2 = Anim = 5 && AnimTime = 0 ;Turn anim over value = 0 [State 0, 2] type = VelSet trigger1 = Time = 0 y = 0 [State 0, 3] ;Stop moving if low velocity or 4 ticks pass type = VelSet trigger1 = abs(vel x) < Const(movement.stand.friction.threshold) trigger2 = Time = 4 x = 0 [State 0, 4] ;Are you dead? type = ChangeState trigger1 = !alive value = 5050 ctrl = 0 Here you can see the State Def up top, followed by four State Controllers. Each State Controller has a "type" which tells Mugen what task that state controller will preform. Below the type is the trigger. Each trigger is numbered, and it's common for a State Controller to have multiple triggers. If all the triggers with the same number are true, the State Controller will carry out its task. So if there's multiple trigger1's and multiple trigger2's, then either all of the trigger1's or all of the trigger2's would have to be true for it to activate. There's also triggerall's which apply to all numbers. After the type and triggers, there are the Variables that will be set if the triggers activate it. What Variables there are depends on the State Controller type. For example, if "type = VelSet" as seen above (short for Velocity Set), the only Variables it can set are X and Y. These change the characters velocity on the X and Y axis. If the type were ChangeState, the only variable would be "value" which would be the number of the state to change to. Also notice up top that the State Def itself has some of its own Variables. It also has no trigger. Those variables are set once, as soon as the state is entered. The last piece of the puzzle here is Negative States. Your character has 3 Negative States, -3, -2 and -1, which are read by Mugen in that order on every single Tick, with one exception. State -3 is not read if your character has been put into a "custom state" by the opponent. That means your character is actually in a state in the opponents code for a minute (this happens during throws and on other random occasions). If that's the case, your characters state -3 will be skipped. Other than that, all 3 Negative States are read on every Tick. State -1 is used for joystick / keyboard input. Usually it's a bunch of Change State type state controllers triggered by certain commands. State -2 is just for code you want to happen every tick, and same for -3 mostly. And that takes care of the core concepts. Everything in character coding builds on that framework.

LEVEL STAGE 1 [spoiler=----------( Stage 1] In L1 S1 we talked about how a sprite is a picture file, rectangular in shape, which is basically a grid of pixels. The X axis on that grid is horizontal, the Y axis is vertical, and any x,y location marks a single pixel which is a single color. 0,0 is the upper left most pixel, and Width, Height is the lower right most pixel. Each sprite also comes with it's own Palette, which is a list of 256 colors that it uses to fill in each of the pixels. When a sprite is Indexed, that's what it means. It has a color palette of 256 colors attached. - STAGE 1 COMPLETE - [/spoiler] [glow=limegreen,2,300]O>[/glow] STAGE 2: Applying a Palette [spoiler=----------( Stage 2] After loading in a bunch of sprites to your blank Fighter Factory file, you might have noticed that in the right panel, the palettes are starting to add up. If the right panel is displaying a list of numbers [picture] then click the organizer button [picture] to switch to the palette display. There's a scroll bar you can use to look through them. When each sprite is loaded, FF loads its palette separately. They remain attached, but you can view the palettes separately in the right panel. [picture] As the sprite is being loaded, FF checks all the existing palettes to see if the sprites exact palette already exists. If it does, rather than loading a duplicate of the sprites palette right along with it, it just attaches the sprite to the already existing version of it's palette. In other words it applies the existing palette to the sprite. This is how loading all of a characters sprites will still cause there to only be 1 palette. That's assuming all of the sprites have the same palette to begin with, of course. For more info on working with lots of sprites and their palettes, visit the Gimp Mission, or the Photoshop Mission. [spoiler=----------( Key Points & Resources] ___/ KEY POINTS • In the sprites tab, use the organizer button to switch between the sprites list and the palette display. • Loading a sprite with the same palette as an existing sprite will cause FF to apply the existing palette. ___/ RESOURCES • [/spoiler] - STAGE 2 COMPLETE - [/spoiler] [glow=limegreen,2,300]O>[/glow] STAGE 3: Modifying a Palette [spoiler=----------( Stage 3] Once you have a bunch of sprites and a bunch of palettes, 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 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 and am completely satisfied with it. Second, you can modify the palette in the sprites tab [picture] in Fighter Factory. To do this, go into the sprites tab, and click the organizer button [picture] if the palettes are not already displayed in the right column. Simply double click on any color and use the default palette editor to adjust it. When you're finished, if you want to save that palette as a file, simply click the "save the palette as a file" button [picture] and give it a name. Saving a palette as a file allows you to allow you to use it as one of the characters 12 in game palettes. To do that you just drop it into the characters folder, and edit their .def file to include it. See the character Mission Lv X St Y for more details on that process. Saving a palette as a file also allows you to share it on a forum. To learn more about that see the ___ Mission at Lvl X Stg Y. The third way to modify a palette is using Fighter Factory's Advanced Palette Editor, by clicking this button. [picture] From here down will be modified eventually because as of now I have no clue whatsoever how that thing works. If you want to mess with it, as of now, your guess is as good as mine. I do know it offers a handy gradient tool, which we'll get to in a minute. :) [spoiler=----------( Key Points & Resources] ___/ KEY POINTS • Palettes can be modified, in a separate program, in the sprites tab, or in the Advanced Palette Editor. • Saving a palette as a file allows you use it as one of a characters 12 in game palettes. ___/ RESOURCES • [/spoiler] - STAGE 3 COMPLETE - [/spoiler] [glow=limegreen,2,300] - End of Level -[/glow]

~ PROJECT 1 ~ The Process ✓ ___________________◢ INSTRUCTIONS ~ Graphics Class Project ⤵ ◉ ~ CLASS COMPLETE ~

~ LESSON 5 ~ Notation ✉ ___________________◢ TOPIC 1 ~ Animations as Text ⤵ ___________________◢ TOPIC 2 ~ Numbering & Labeling ⤵ ___________________◢ TOPIC 3 ~Wrap Up & FAQ ⤵ ◉ ~ LESSON COMPLETE ~

~ LESSON 4 ~ Animations ► ___________________◢ TOPIC 1 ~ Creating & Labeling Animations ⤵ ___________________◢ TOPIC 2 ~ Flip & Transparency ⤵ ___________________◢ TOPIC 3 ~ Scaling, Rotation & Interpolation ⤵ ◉ ~ LESSON COMPLETE ~

~ LESSON 3 ~ Palettes ✎ ___________________◢ TOPIC 1 ~ Colors & Palettes ⤵ ___________________◢ TOPIC 2 ~ Modifying a Palette ⤵ ___________________◢ TOPIC 3 ~ Combining & Organizing Palettes ⤵ ◉ ~ LESSON COMPLETE ~

~ LESSON 2 ~ Sprites ☃ ___________________◢ TOPIC 1 ~ Loading Sprites ⤵ ___________________◢ TOPIC 2 ~ Sprite Alignment ⤵ ___________________◢ TOPIC 3 ~ Sprite Sets & Sheets ⤵ ◉ ~ LESSON COMPLETE ~

~ LESSON 1 ~ The Basics ☻ ___________________◢ TOPIC 1 ~ Introduction to Sprites ⤵ ___________________◢ TOPIC 2 ~ Introductions to Palettes ⤵ ___________________◢ TOPIC 3 ~ Introductions to Animations ⤵ X ◉ ~ LESSON COMPLETE ~

~ LESSON 5 ~ Releases ___________________◢ TOPIC 1 ~ Standard Info Included ⤵ X ___________________◢ TOPIC 2 ~ What, Where, How? ⤵ ___________________◢ TOPIC 3 ~ Feedback & Etiquette ⤵ ◉ ~ LESSON COMPLETE ~

~ LESSON 4 ~ GIFS & Videos ___________________◢ TOPIC 1 ~ Making GIFS ⤵ X ___________________◢ TOPIC 2 ~ Screen Capture Software ⤵ X ___________________◢ TOPIC 3 ~ Video Hosting & Posting ⤵ ◉ ~ LESSON COMPLETE ~

~ LESSON 3 ~ Screenshots ⍗ ___________________◢ TOPIC 1 ~ Taking Screenshots ⤵ ___________________◢ TOPIC 2 ~ Image Hosting ⤵ ___________________◢ TOPIC 3 ~ Images in Posts ⤵ ◉ ~ LESSON COMPLETE ~

~ LESSON 2 ~ Files ⎘ ___________________◢ TOPIC 1 ~ About Hosting ⤵ ___________________◢ TOPIC 2 ~ Hosting Sites ⤵ X ___________________◢ TOPIC 3 ~ Files in Posts ⤵ ◉ ~ LESSON COMPLETE ~

~ LESSON 1 ~ For Starters ☞ ___________________◢ TOPIC 1 ~ Caring is Sharing ⤵ ___________________◢ TOPIC 2 ~ You Are Here ⤵ ___________________◢ TOPIC 3 ~ What You'll Need ⤵ ◉ ~ LESSON COMPLETE ~

Don't do bad stuff.

__/ Senior CLASS 1 ~ Screenpacks CLASS 2 ~ Stage Creation: Expert CLASS 3 ~ Character Creation: Expert CLASS 4 ~ Bonus Levels Last push! Don't stop now, you're almost done! lol jk

--- Junior Coure CLASS 9 ~ Character Creation: Intermediated CLASS 10 ~ Stage Creation: Intermediate CLASS 11 ~ Storyboards CLASS 12 ~ Lifebars Almost there! Now is where the real mind fuck begins!

How many slots does it have?...

~ DEMO LAYOUT ~ Hows This Look ___________________◢ PROJECT ~ PFG ⤵ ◉ ~ CLASS COMPLETE ~

up up down down le...