Language…
15 users online:  bebn legg, crocodileman94, Heraga, jobvd, Jukeboxi_, Knight of Time, MorrieTheMagpie, Reiko3, Scoutellite, Scrydan,  Shiki_Makiro, TalliAnims, tavio, TheSpreee333, X11Gbyte - Guests: 107 - Bots: 117
Users: 67,998 (2,141 active)
Latest user: deusdetemcjunior

Fundamentals of Aesthetics and Perception

ExGFXCustom Music

Fundamentals of Aesthetics and Perception

Welcome to my aesthetics tutorial. This is not a step-by-step guide in using tools or software to manipulate aesthetic content in an SMW hack. It covers subjective and artistic concepts that will be useful in creating a well-rounded hack.

What you should know before starting:

+Basic use of Lunar Magic
+Using a graphics editor like YY-CHR
+Inserting music

Some things that we'll be covering:

+Color theory
+Visual coherence
+Cutoff
+Perspective
+Choosing a music port

PALETTES

COLOR THEORY

When we were children, we all learned the color by how they look: red, blue, yellow, etc. As we got older, we learned that there are shades of the same color, or you can blend one color into another. There is a science and theory behind the classification of color. Early color theorists were painters that blended their paint pigments together to create new ones, and they needed a system to understand how that worked. In a digital medium, we use a numerical system that can be understood by a computer.



Bringing up the palette and color editors in Lunar Magic, I've circled the values that reflect the color theory of a color. I'm highlighting palette 0, color 2 (third one from the left on the first row). The SNES RGB value of this color is 3942, which is used in palette exanimation. The Red Green Blue values, or RGB, are 16, 80, 112. These reflect the amounts of red, green, and blue that can be mixed together to create this color, our lovely shade of dark blue.

Most important for our conceptualization and understanding of colors are the hue, saturation, and luminosity. These are 133, 180, and 60.

Hue is basically what "color of the rainbow" it is. Looking at our color map on the top right of the screenshot, we can scan along the top line, and see that the available colors to us are red, orange, yellow, chartreuse (yellow-green), green, teal (green-cyan), cyan, blue, purple, magenta, and back to red. Currently we are selecting hue 133, which is between pure blue and cyan.

Saturation is how much brilliance or vibrancy our hue has. The opposite of saturation is desaturation, and a totally desaturated color is black, white, or grey. You can see the desaturated colors at the bottom of the color map, and it's all grey. Saturated colors are visually stunning. Black, white, and grey are important colors in their own right, but they are also useful as utility colors. They're good for outlines or for colors that go well with anything.

Luminosity, also called value, is how bright the color is. You can see the luminosity slider to the right of the color map. Our 60 luminosity is towards the bottom. 0 luminosity is always black, and 240 luminosity is always white.

COHERENCE

Let's hop into my test ROM and see what Yoshi's Island looks like.



What do we see? We see a small plumber with his hands at his sides. He is looking towards a bush. He's standing on some grass, with dirt beneath it. In the distance are tall, spotted hills, poking up through the mist. Are we actually looking at these things? No, of course not. But artistically, it represents them. The illusion of looking like what we intend it to look like is called coherence.

It's important to a hack designer to understand what their visuals look like in terms of their game function.

The hills in the distance are a BACKGROUND. It provides visual interest, but the player can't interact with it. One way that something coheres as a background is that it scrolls at a different rate from the foreground, to create the illusion of parallax. You have to move farther to create more relative distance when something is in the distance. The SNES can imitate this effect by scrolling the background more slowly than the foreground. Change the background scroll speed by selecting the "Change Other Properties" dialog, depicted by the 3 leaves. You can change the horizontal and vertical scrolling rates. None means the background doesn't scroll. Constant means it's locked to the foreground. Variable means it's slower than the foreground, and slow is even slower, to depict something farther away like outer space.

The other way we can make the background cohere as the background, is to make it darker than the foreground. This works especially well with indoor settings, but let's look at what happens if we make the foreground twice as dark and the background twice as bright.



What we see here is that the background almost leaps out at us. It's more apparent when it's in motion, but a bright background catches our attention and literally stands out in space so that it looks like it's in front of the foreground. This is very bad for fast-paced levels where the player needs to differentiate background and foreground elements from each other.

If a custom background is too bright, you can multiply the luminosity of every color by a constant value less than 1. 0.5 and 0.75 are good numbers to try. Don't subtract a constant value, or it will distort the colors.

Another way to make your background look like it's far away is atmospheric perspective, especially if it's outside or a smoky environment.



We can see here that the distant mountains are brighter, less saturated, and have less contrast. Less contrast means the colors are more similar. Use this with care as a bright background can be distracting.

Making a background look like a background is extremely important, but let's move on to other ways that we can use palettes to make game objects represent what they are. Let's look at cement blocks. The normal cement block is brighter on the top left and darker on the bottom right. Almost all vanilla graphics are like this, and they depict a light source coming from the top left.

I'm going to invert the colors, so the brightest color becomes the darkest.



We can see on the grass and the bush that the light is coming from the top left. Coupled with the player's foreknowledge of SMW graphics, having the dark part of the block on the top left just looks weird. It looks like the block is not really a cube in shape, like it's collapsing towards the top left. This is common with cement blocks, especially if the custom background uses the cement block palette row.

It is simply not coherent. That doesn't mean it's aesthetically worthless, but the overall aesthetic design and function of the level needs to support the choice artistically.

One way to avoid this is to open the map16 editor, select block 130 (cement) and right-click on an empty tile, preferably on page 02 or higher. Then, selecting the new tile, choose a new palette, one that isn't being used by other assets in the level. Copy the vanilla colors from another level, or use some other custom palette, to the new palette row, so you can use cement blocks and a palette row 4 custom background in the same level.

Another solution is to use ExGFX. Open a graphics editor like YY-CHR. Copy the cement block graphics from GFX14.bin to a new file, or to an empty space in a currently loaded ExGFX file. Then use the bucket tool to convert colors 1-4 to colors 8+. Use palette row 5-7, or 2-4 if you aren't using berries. Palette rows 0-1 are layer 3 colors that may be used by a retry prompt or status bar. Then you can set the new colors, on the right side of the chosen palette row, which are sparingly used by vanilla SMW assets.

Tip: Use the SMW GFX list in the documents section as a cheat sheet for finding vanilla graphics https://www.smwcentral.net/?p=section&a=details&id=6603

Our final topic regarding coherence is clashing. When colors are close to each other, but they depict one thing, like a sunset, it is coherent. When they are close, but they depict different things, like the cement and the sky, it's called clashing.



In this example, I set the hue of the cement blocks to be a little bluer than the sky. This is clashing. You also don't want it to be the same color, because that would confuse background and foreground. Ideally, you would choose a hue that doesn't clash with any other assets and create a holistic palette.

CREATING A CUSTOM PALETTE

Alright, now let's make our own palette!

There are different ways to approach a totally custom palette. One is to use only one or two hues. A monochrome or two-tone palette is visually stunning and memorable. It's also easy to create because you don't have to worry about shared colors or clashing. However, the level quickly gets confusing, and it doesn't have as much interest or depth.

Choosing a variety of hues that look good together and are spaced out around the color map is more versatile.

The other thing we're going to consider is the physical effect of our color palette on the player. A bright, saturated palette is stunning and powerful, but it's tiring on the eyes. A very dark palette is also interesting from time to time, but it can cause eye strain if the player is forced to focus on something that has very little contrast from the objects around it. Unsaturated palettes, on the other hand, are soothing but dull and lifeless.

In this example, we're going to create a lightly saturated palette with a variety of hues. To do this, I'm going to set out a variety of foreground objects and sprites that I will use in the level. I'll then choose hues that are spaced out around the color map, and choose moderate saturation values. 80-140 will work for what we're trying to do. I will also include neutral colors like grey or brown to prevent visual overload, but I'll do it sparingly so the palette doesn't become boring.

I'm using plenty of gradients on the same palette row because that makes the objects that use that palette row cohere. A gradient is a gradual change in color by modifying the hue, saturation, or luminosity by a constant value between consecutive colors. I'm also creating a hue gradient in the background manually. I did this by making the near hills purple and the sky red, with the distant hills magenta, a hue between purple and red.

When choosing my grass, dirt, and cement palettes, I'm going to be careful not to spoil the texture and contrast of these graphics, because selecting the wrong hue or brightness can ruin the effect of the graphics. Sharing a color between lava/sky and the edges of blocks/pipe reflections is a great way to tie the level together and add depth.

With the sprite palettes, I'm going to use some of the same hues as the level, but I'm going to increase the saturation and brightness so they stand out. In general, this is a good way to make important game elements pop out.



Some things I messed up with this palette are the goal and midway posts. In this example, I would probably use an orb for the end of the level, or I would put a door or pipe to a new sublevel with a slightly different palette. You can also modify the graphics and map16 like I explained above.

Finally, test your palettes in an emulator. The colors are slightly different vs. how they look in Lunar Magic. In doing this, I decided to modify the color of the far hills and bump down the saturation on yellow and green koopas.

VANILLA COLOR MAPPING

One of the toughest parts of creating a custom palette for yourself is finding which colors do what. You will probably have to copy a vibrant color, like magenta, into your clipboard, and paste it around the custom palette, undoing it each time, until you find the color you want to modify.

In general, palette rows 0-1 are layer 3 and background, 8 is mario, and E-F are variable palettes

Note that C-F are affected by color math, 8-B aren't. This includes things like the magikoopa and boo cloud fading in and out, or certain level modes that change the color or transparency of sprites like Donut Plains Ghost House.

Also, this resource on the Graphics submission page is helpful.



Ultimately, palette selection is a matter of taste. If you're going for a unique or memorable visual style, these "rules" may not apply to your artistic choices. However, it's important to understand the effect that it creates on the player's perception.

GRAPHICS

CUTOFF

SMW graphics are created with tiles. Foreground tiles are 16x16 pixels. Some of them, like turnblocks, stand by themselves. However, others like ledges are meant to connect with other tiles. When a tile is placed so that the connecting edge of the graphics are hanging off in space, that's called cutoff.

Cutoff can be used artistically to make the player aware that they are playing a hack, while most creators will want to make something look like a polished game, something Nintendo might make. Resolving cutoff is important for making a polished and immersive hack.



Here we see in the bottom left that the pipe was placed on top of the ledge corners, which has some pixels of cutoff between them.

In the bottom middle, the berry isn't placed over a bush, so it uses the wrong color behind it. Edit the berry tile colors in GFX01, GFX31, and GFX32 to fix this.

In the bottom right, the first rope is cutoff at the right, while the second one uses a custom tile to make it connect with the ledge. Just move a few pixels down in YY-CHR. Then save it to an ExGFX file and insert it into your ROM, then load it into your level, probably using GFX slot BG2 or BG3. Then open up the map16 editor. Copy the rope map16 tile to an unused tile. Use the 8x8 editing mode to copy the graphics from your new ExGFX file to the map16 tile. Orient the X/Y position and copy the palette to the new 8x8 tile.

The top left shows a similar problem with bridge railings. I used a custom tile to delete the ropes that hang out into space.

Finally, the top right depicts cutoff and fixed vines. All I did was change a few pixels around the top and bottom. It's common to change the vine tile a bit more to make it interesting.

CHOOSING A BACKGROUND

Choosing a ripped background and inserting it into a level is a great way to add individuality to a level. Of course, you should choose a background with a certain theme or mood that you're going for. However, care should be taken not to choose backgrounds that distract from the gameplay or clash aesthetically with the other graphical assets in your level.



We see here a visually stunning background from DKC2. It looks quite impressive, and it's ripped very well. Unfortunately, DKC2 has a much more photorealistic style, compared to the cartoonish graphics of SMW. The turnblock and dirt graphics in the example image stand out quite a bit. This background certainly has its use, but there needs to be a little more effort towards the foreground or even sprite and player graphics to make this work.

Another issue with custom backgrounds is that they sometimes sacrifice visual clarity for impact. One way to deal with this is removing some of the texture in a pixel editor, or copy-pasting similar colors to flatten the image.



Here I did that in one of my hacks, with a background from the Smurfs 2. Compare it to the 1:1 rip, which is more textured.

https://www.smwcentral.net/?p=section&a=details&id=15045

Another thing you can do to a background is multiply all the saturation or luminosity values by a certain amount to prevent it from interfering with the legibility of the level. Usually 0.75 is a good number to try.

REPURPOSING VANILLA GRAPHICS

Repurposing vanilla graphics is a great way to add variety and interest to your graphics, without sacrificing the consistency of your hack's aesthetics. However, care should be taken not to use graphics in a way that confuses the player about their function. For example, the trees in forest of illusion are passable, so if you use them for impassable walls, the player will spend time, even die, trying to jump through your trees.

CUSTOM BLOCK GRAPHICS

Whether you're inserting ASM from the blocks section of SMWC, using Blockreator, or coding your own from scratch, you must choose graphics for your custom blocks that convey what they do. Something to keep in mind is whether your players will be able to tell what the blocks do.

+If you're repurposing vanilla assets, think about whether your block can be confused for a vanilla block with another function.
+Think about major hacks that your players might have played, whether your blocks will clash with a preconceived concept they have, going into your hack.
+Think about whether the graphics faithfully depict what the blocks might do. If the block looks solid, but the player will fall through it, it might be confusing for players.
+Is your use of graphics consistent throughout the hack? For example, does a skull block have a similar function throughout? If you use skull blocks as sprite killers and death blocks, it might be confusing. Many interactable objects in SMW are yellow so they stand out to the player: turnblocks, coin blocks, doors, etc. Perhaps your graphics could carry on this theme. Red or flashing colors could be a sign of danger.
+Are your blocks colorblind friendly? 10% of men, and many other people, are colorblind, so it's worth it to come up with unique graphics for blocks that have different functions, instead of just changing their color.

PIXEL ART

If you're making custom pixel art for your hack, great! One of the biggest challenges of pixel art is creating proper shading. Usually SMW graphics depict the light source from the top left. So the brighter colors would normally be on that side of the graphics. The contours of the shading should follow the curves of the thing that you're drawing, instead of just putting a dark outline around the object. This is called "pillow shading" and is a lazy way to represent 3-dimensionality.

EXANIMATION

ExAnimation is a great way to add movement and excitement to your aesthetics. However, there are some common pitfalls to keep in mind with it.

If you are exanimating colors, make sure that the change in colors isn't too fast and dramatic. This can be distracting, or in some people can even cause headaches or seizures.

If you do something like this, it's going to make playing your hack a headache for people. (Warning: flashing lights. Used with the permission of the creator.)



Make sure you choose your exanimation slots wisely. To optimize graphics processing, Lunar Magic organizes the slots to animate on different frames. The slots that will animate on the same frame are (in hex) 00+x, 08+x, 10+x, and 18+x. So 0/8/10/18, 1/9/11/19, etc.

OVERWORLDS

Let's take a look at overworlds and go over some of the common aesthetic issues with vanilla overworlds.



I've made this overworld to demonstrate some issues, and I've labelled them 1-6.

1) This is missing the corner tile, 0x11, that creates a smooth shading across the ledge.

2) This up-and-down ledge is designed to be used over the water. Tile 0x3D should be used against cliffs.

3) This squared-off ledge corner contains the weird pixel that's designed to be used over grass or dirt tiles. If you modify this tile's (0x60) ExGFX to use a black pixel in the corner, it is more versatile.

4) This up-and-down ledge is designed to be used over grass or dirt. Use tile 0x4D instead of 0x4C over water.

5) I used the wraparound corner tiles where the cliff meets the water, like it is in the vanilla overworld. The left side of the cliff, however, doesn't use this tile. Some people argue that it depicts a weird shape to the cliff, while other argue that it's proper to use the graphics the way they were intended. Either way, it's important to be consistent with how this tile is used on the corners of cliffs where they meet the water.

6) Perspective error. The top of this land mass appears flat, and the ocean is assumed to be flat, at sea level. But the distance between the left side of the land and the water, and the distance between the right side of the land and the water, are different. When making complex land masses, the part where the grass meets the cliff, and the part where the cliff meets the water, should have the same shape. The height of the cliff should always be the same, unless there's an obvious change in elevation.

MUSIC

Finally, let's go over some issues with music selection that come up in a hack.

THEMING

The first thing that many people consider with a port is whether it fits the level or environment it's playing in. A port may sound great, but here are some things to keep in mind about how appropriate it is to your hack:

+Does the pace of the music fit the pace of your level? An energetic port might feel off to a player that is strolling through a slow autoscroller.
+Does the music fit the natural environment in the level? For example, ports with steel drums are often associated with beach themes, and ports with kotos might be better suited to a cherry blossom level.
+Does the port fit in with other ports in the hack? Does the soundtrack as a whole cohere artistically?

VOLUME BALANCE

Also, it's a good idea to look at the global volume of each port, to make sure all the music in your hack is balanced. It can be annoying for a player to have to adjust the volume each time they go to another level. Also, if your course clear music is a dramatically different volume, it may ruin the immersion at the moment you want the player to be excited about succeeding.

To change the volume of a port, look for the w command. It should be near the top of the .txt file, and it should have a number up to 255 after it.

Also, if a port is too loud, it will mask the sound effects. The sound of jumping or collecting coins will sound like it's off in the distance, instead of providing feedback and clarity to what's going on in the game. Turn down the global volume of the port to fix this.

After balancing your ports out, it's best to test them out in your hack and play it for a while to make sure they're balanced and the music doesn't get tiresome.

FREQUENCY SPECTRUM

Some ports are very loud in the high frequency range. This is because of distortion or imperfections in retro sound chips, or just the design of the music. If the port has screeching guitars, bells, cymbals, hissing, or whistles, take care that the port doesn't become tiresome, especially if it accompanies something that's designed to challenge the player, or if they'll be listening to it for a while.

Having power across the frequency spectrum, especially the bass, will counteract this effect.

EXAMPLE TOUR

I'll close up this tutorial with a tour of some hacks with model aesthetics that have been suggested by the community, or that I personally like. I'll discuss specific things about them that are done well, or things that are unconventional but work anyway.

WATERWORLD



BabaYegha is well-known for his mastery of vanilla aesthetics. Some things to notice about this screenshot in particular:

+The broken tree branches are used together with the pencil graphics. They have a similar texture and palette, so this looks perfectly natural.
+The stars are added to the background to create depth and interest.
+The forest canopy is textured to show the tree wood behind them, also adding depth.
+The level geometry is interesting and complex, but it isn't confusing to parse.
+The colors of the pencils, which represent danger or an obstacle, stand out from the rest of the level. This is done with saturation and brightness.
+The decorations like the grass and tree branches aren't excessive or distracting. They're consistent.
+The trees that are passable are very dark so that they blend in naturally with the background.

SAYONARA 2



Sayonara Mario World 2 is another one that is highly praised by players and creators alike. Here are some things we can learn from this screenshot:

+The foreground uses a variety of repurposed vanilla tiles from other tilesets. None of these tiles are clashing in aesthetic style or distracting.
+The foreground and background use assets from other Mario games made around this time period, so the aesthetic consistency is flawless.
+The background and interactable game objects have hearts interwoven in them, to give the hack a broad theme.
+The palette is incredibly rich in hues. The pastel colors create a consistent theme throughout the hack. The patterning with the hard blocks on the top middle of the screen is easy to parse but interesting to the eye.
+Background contrast is reduced with moderate desaturation.
+Watch out for that fish, Mario! #smrpg{roar}

CIRCADIAN



Idol shows us in her KLDC entry that readable doesn't necessarily mean vanilla.

+Most (all?) the level's graphics are redrawn in some way to give the level a personal flavor.
+Palettes and shading are used to give the level a characteristic radiance.
+Sprites have expressive faces that are emotionally engaging and add life to the world.
+Changing hue and brightness from sublevel to sublevel creates an immersive experience for players as they progress.

YUMP 2



Wait, I thought this was about good aesthetics? YUMP 2 contains lots of aesthetic choices that are garish and controversial. For example, in this screenshot, we can see the hurt block overlapping the switch palace corner, creating cutoff. We can also see that someone didn't Y flip the right wall, breaking the pattern.

And that's OK.

The point of this tutorial isn't about making rules for aesthetics. It's about discussing the effect of aesthetics on the player's experience.

So why is this OK?

+It's a joke hack, and it's funny. I could explain the joke, but I think I'd be doing it a disservice.
+Even though this hack contains low-effort elements, it is part of the history of the YUMP series and the YouTube hacks that inspired it.
+The hack contains tons of high-effort ASM, original aesthetics, and top-notch level design. It's obvious that it's just part of the joke, and not a disrespectful slight to the player.

So really, aesthetics are as much about the overall artistic intention of the hack and the way it's presented.

SAPPHIRE SHORES REDUX



Here's Devazure's entry to the 2021 Overworld Design Contest. While there's a lot here, we're going to focus on the main map.

+Not shown here, but many of the tiles are animated to fill the world with life and movement: waterfalls, flowers, trees.
+Palettes are used tastefully to create separation between the worlds. The map itself is an artistic composition.
+Looking at the bottom middle of the map, we can see in the grassy world that it contains slopes. But the changes in elevation aren't really implied as much as they're proven with diagonal cliffs. Where the land adjoins the water, the altitude of the ledge is carefully considered and painstakingly accurate. In a land-locked area, these slopes might not be as convincing.
+The cliff overhangs create depth and 3-dimensionality. The area under the cliff is darker, and the shadow mirrors the outline of the cliff overhead. Since this was my idea in the SMWC Discord, I take full credit for his design contest win. #smrpg{:D}
NewPointless

ExGFXCustom Music