Bayonetta costume (1 Viewer)

[Faceless]

Right, at stuntcock's suggestion, this thread is for documenting progress on a Bayonetta costume mod. The plan is to have two modes: normal and Wicked Weave.

normal mode concept art
Wicked Weave mode concept art

Now, the above concept art is very much not the final design that made it into the game (especially Wicked Weave mode), but they illustrate the major differences between the modes. I've already made some progress:

• Wicked Weave mode:
  
• normal mode:
  

As you can see, the heels and gloves are finished at this point. Normal mode still needs the hair curtains hanging from her arms, which stuntcock has agreed to help me out with. Additionally, I need to draw the rest of her outfit in normal mode, and fix the hair coming out of her head in Wicked Weave mode (something about it just bugs me).

I also need to draw Scarborough Fair and All4One for her heels. Tracing those guns is the first thing that comes to mind for anyone who wants to contribute. If you do decide to trace them, don't worry about the text.

Note that this mod will not include hair. This is purely a costume mod. I did try tying the hair color to a costume RGB slider, but that didn't work so well without a separate rgbFill component. I can embed hair HSL settings to match the two standard colors for this costume (black for Bayonetta, white for Jeanne), but anything else will need the user to make adjustments himself.

Addendum: Here's a demo that stuntcock whipped up for the hair curtains.

Spoiler

Note: I can provide physics demo files before we make this decision. This would involve very crude artwork (e.g. matte grey cylinders hanging from the forearms) but it may help us to address the question of visual fidelity vs performance. It might also allow us to predict complications, such as "the hair strands get badly criss-crossed during rapid handjob stroking."

By all means; that would be greatly appreciated.

Here's an initial demo.


SDT-bayonetta-physicsDemo.mod

Three tapered cylinders anchored on the upper arm, assigned slightly different physics parameters so that they'll tend to "fan out" and form a continuous curtain.

After playing around with this file for a minute or two, please let me know if you'd like to see any specific variants (eg. shorter/longer curtains, more ropes, ropes on left arm, lighter/heavier simulated mass, 9 thin ropes instead of 3 thick ones, etc).



I tuned the settings so as to yield shapes which are similar to those shown in the reference image -- they're somewhat "stiff" so that they can exhibit horizontal spread even when the girl stops moving. Of course, it's not believable for actual hair to resist gravity this much. We can tone down this effect if it's distracting, or we can just say "she's a witch; gravity doesn't matter."

It's a question of "moving" vs "posing." The stiff physics allow us to keep the hair strands in a fancy position when the girl is at rest. Relaxed physics would produce motion which is smoother (and/or more believable), but the hair strands will tend to fall limply towards the ground as soon as she stops moving.

There's no need to resolve this question immediately. We can experiment with different physics settings very "late" in the project (e.g. after the hair has been vectorized) without much risk.



I included vertical "streaks" to give the visual impression of actual hair strands. The actual implementation need not consist of opaque shapes; you can imagine each cylinder being composed of 5-6 thin hair strands with transparent space between them.

The transparency approach will probably be necessary for gameplay reasons -- the hair curtains tend to conceal too much of the girl's body if they're fully opaque.

Note: I'm not proposing alpha blending. The dynamic hair animation technique works fine with opaque objects and transparent ones, but anything with [Alpha=0.5] will look ugly due to overlap.

Canonically the entire outfit is magically controlled hair, so shortening the curtain is absolutely fine if making it pool on the floor convincingly turns out to be too big of a performance hit.

I tested the puddle/pool stuff, but it looked awful. This is mostly because I'm using very large segments (it's a quick-and-dirty physics demo, after all) which produce very large zig-zag shapes when the hair begins to touch the ground.

It's literally a "one line" change, so we can easily re-test this feature later on (e.g. when we have some proper vector artwork with smaller segments).

Aside from the artwork-size thing, there's a code deficiency. Currently, any rope which touches the floor will slide smoothly across it (like a chunk of butter on a hot frying pan). This looks wrong ... I ought to add some math for surface friction.

In the actual models, the hair is anchored just above the elbow, and the SDT upper arm does exist at all times. Sorry, I just picked that image because it was a good example of the hair hanging freely from the arm.

Confirmed. After I anchored the ropes to the upper arm, I observed zero problems with arm-position changes.

I have no objections to making this a public project.

Okay. I can start a thread if you'll give me some idea of the project scope:

• is the wicked weave costume on the agenda, or are we focusing on the standard costume?
• do we include the chains and medallions?
• are we going to trace the gun-boots?
• are we creating new SWFs for the standard hairstyle and wicked weave hairstyle?
• how much ownership do you want to take on this project (vs how much of it is open to collaboration)?
  • I assume that my involvement will be mostly rigging and animation
  • I assume that anyone will be welcome to provide reference images
  • I assume that anyone will be welcome to trace vectors for the accessories (such as the pistols and medallions)
  • I don't know whether you're open to large contributions (e.g. someone volunteers to handle the shoes and gloves), or whether you'd prefer to handle all of the artwork so that you can maintain consistency (palette, shading, proportions, etc)
  • I assume that WIP stuff will be posted in the thread (rather than sending PMs back and forth) so that anyone can test it and offer feedback

Alternatively -- if you'd prefer to setup the thread yourself then just go ahead :)

This actually looks really good already, stuntcock. Now, by transparency you're talking about something like making the grey stripes in the demo transparent, right? So that we'll be able to see behind the curtain, sort of like window blinds?

 

[stuntcock]

Now, by transparency you're talking about something like making the grey stripes in the demo transparent, right? So that we'll be able to see behind the curtain, sort of like window blinds?

Exactly :)

We can attach a few (3-5) separate Rope elements near the elbow. In the initial physics demo, the Ropes appear as solid grey shapes. In the final version, each Rope will consist of a few opaque hair strands (including streaks and highlight/reflection patterns) with transparent space between them.

When the hair curtains pass in front of the girl's body, the will look like window blinds instead of a translucent silk veil. The difference is significant, because the SDT physics-animation system produces unpleasant visual artifacts if we try to achieve a partial-alpha translucency effect.

I did try tying the hair color to a costume RGB slider, but that didn't work so well without a separate rgbFill component. I can embed hair HSL settings to match the two standard colors for this costume (black for Bayonetta, white for Jeanne), but anything else will need the user to make adjustments himself.

The Ropes can be assigned to any HSL or RGB slider. We could consider it part of the costume (e.g. assign it to the Top.RGB2 slider or Gloves.RGB2 slider). We could treat it as "hair" (so that it ignores RGB sliders but responds to hair HSL adjustments). Or we could assign it to a rarely-used slider (e.g. tongue piercing) so that users will be able to adjust it without producing any unwanted side-effects on the costume or hairstyle.

Regardles of the exact approach used, it should be possible to embed a few presets (e.g. Bayonetta and Jeanne) into charcodes.



The remainder of this message is intended for the general audience.

Please feel free to play around with the physics-demo MOD file. As I mentioned in the message cc'd by Faceless, we'll need to strike a balance between "hair which moves smoothly" and "hair which forms cool shapes when it's at rest." The initial physics demo is very stiff. As I understand it, the Bayonetta games are mostly about swift movement and acrobatic attack combos -- so perhaps we ought to err on the side of smooth animation. However, I'm open to input from fans of the series.

If you take a look at the reference image for the standard costume, you'll notice some large golden medallions hanging from the arms. We can use the aforementioned physics techniques to include them in the costume mod, but we'll need artwork. This would be a straightforward task for anyone who wants to learn vector-tracing, because the shapes and colors are simple, and because there's a lot of reference imagery available. Heck -- people have made physical copies of these things for cosplay purposes. The high-heel earring is another tracing task that would be appropriate for a beginner.

If you're already experienced with vector artwork, then you might be able to help out by tracing the pistols (Scarborough Fair and All4One) or the hair curtains.

If you don't want to get involved with vector stuff, then you can try to find high-resolution reference images for any piece of the costume that hasn't been done yet. Examples: pistols, medallions, chains, hair curtains, etc. Please remember the Reference Shot Guidelines: a single cel-shaded side-view fanart image is probably more useful than a whole gallery of videogame screenshots or cosplay photographs.

Please don't start tracing the Umbran Watch. Since its on the front of the torso, it must be drawn at an oblique perspective rather than a simple face view. We'll also need to wait and see how Faceless plans to tackle Breast Slider support, because the Umbran Watch might need to move (or stretch?) when the breast size changes.

 

[Faceless]

The Ropes can be assigned to any HSL or RGB slider. We could consider it part of the costume (e.g. assign it to the Top.RGB2 slider or Gloves.RGB2 slider). We could treat it as "hair" (so that it ignores RGB sliders but responds to hair HSL adjustments). Or we could assign it to a rarely-used slider (e.g. tongue piercing) so that users will be able to adjust it without producing any unwanted side-effects on the costume or hairstyle.

Regardles of the exact approach used, it should be possible to embed a few presets (e.g. Bayonetta and Jeanne) into charcodes.

I was referring more to her actual hair, rather than the Rope components. In the screens, for instance, she's currently blonde. Normally, she would remain blonde no matter what color the costume is, but for this mod the colors should match since the outfit is formed from her hair (ie in my screencaps her hair should be white). It doesn't seem like there's any easy way of automating this though, especially since the final color value after applying the vanilla HSL sliders depends entirely on the initial color values. So I'll probably just embed the two default settings and let the user puzzle out anything else. *shrugs*

Please don't start tracing the Umbran Watch. Since its on the front of the torso, it must be drawn at an oblique perspective rather than a simple face view. We'll also need to wait and see how Faceless plans to tackle Breast Slider support, because the Umbran Watch might need to move (or stretch?) when the breast size changes.

This is a little tricky because of the different proportions between SDT and the actual Bayonetta models. The Umbran Watch rests on her sternum between the collarbone and breasts, and on the in-game model there's enough room there that the watch isn't really affected too much by the swell of her breasts. There's a lot less room there on the SDT model, but the watch is small enough that I think I can still get away with just putting it on the Chest Under layer and having it ignore the breast sliders. That's not to say that I won't put in breast support, of course, but the watch won't be effected by breast size.

 

[Faceless]

Update!


So... many... chains... In a bid to improve performance, all of those chains were drawn in Flash and then converted into JPEGs.

The basic outlines and fills for normal mode are at this point done. All that remains is drawing some additional details (some lines and runes running along her side and down her leg) and to get rid of the circles on her knee and hip joints. Then I get to play with tweening the Wicked Weave mode breasts and hair. Joy.

As a note, if anyone wants to take a stab at tracing the Umbran Watches, here's the concept artwork.

 

[Gennosuke1]

omfg dude!! can't wait your awesome ;D

 

[Faceless]

Update:

Made some progress on the normal mode costume. I just need to add a lock of hair that trails down the side of her breast, and all the drawing should be finished.

Ran into a bug though. I'm using a proxy method to tie everything into the vanilla shirt RGB slider, and that works, in that the colors properly update and everything. But when I first load the mod, her breasts will be the proper color, and then exactly 4 frames later (I checked!) her breasts turn black.

I spent some hours trying to figure out what was resetting the breast color (and only the breast color) with no success. I believe it's somewhere in the event pipeline for updating her arm position, but I'm unsure of the exact cause.

I suppose that just means that I'll have to force everything to be black on first load (not a problem since Bayonetta's color scheme is black anyway). This would mean that I'll have to forgo allowing users to automatically load Jeanne though.

 

[stuntcock]

But when I first load the mod, her breasts will be the proper color, and then exactly 4 frames later (I checked!) her breasts turn black.

Does the SWF have an embedded charcode which sets her skin tone, hair color, breast size, etc?

If so, that may be the culprit. Changing the breast size (even programmatically!) can cause breast RGB transforms to be overwritten. The actual slider positions don't change, so the user can easily fix it by jimmying one of the R/G/B/A sliders a few pixels. However, that's a dumb workaround -- there's a relatively straightforward code fix (which requires the Loader, but that's a prerequisite for this costume anyhow).

As a quick verification step, you could try to remove the charcode (or omitting the breasts:XX clause), republish the SWF, and check whether the blackout still occurs during loading.



By the way - was I supposed to be making progress on the hair-curtain stuff? I haven't actually done any work since our initial correspondence. I had hoped that we'd get a volunteer to trace the vectors (or at least find some higher-resolution references) so that I could focus mainly on the animation work. If that isn't going to happen then I'll need to start hunting.

 

[Faceless]

Does the SWF have an embedded charcode which sets her skin tone, hair color, breast size, etc?

If so, that may be the culprit. Changing the breast size (even programmatically!) can cause breast RGB transforms to be overwritten. The actual slider positions don't change, so the user can easily fix it by jimmying one of the R/G/B/A sliders a few pixels. However, that's a dumb workaround -- there's a relatively straightforward code fix (which requires the Loader, but that's a prerequisite for this costume anyhow).

As a quick verification step, you could try to remove the charcode (or omitting the breasts:XX clause), republish the SWF, and check whether the blackout still occurs during loading.

Not quite charcode, but following up on your suggestion revealed that the issue was my use of frame labels to handle normal and wicked weave modes for the breasts. I separated them into different MovieClips, using the visible flag to manage them instead, and that's fixed it.

By the way - was I supposed to be making progress on the hair-curtain stuff? I haven't actually done any work since our initial correspondence. I had hoped that we'd get a volunteer to trace the vectors (or at least find some higher-resolution references) so that I could focus mainly on the animation work. If that isn't going to happen then I'll need to start hunting.

Volunteers? Such optimism. I can throw together a vector for you, but the hair itself will be pretty bare bones. The medallion things and chains should be decently detailed, though.

 

[stuntcock]

Volunteers? Such optimism. I can throw together a vector for you, but the hair itself will be pretty bare bones. The medallion things and chains should be decently detailed, though.

It would make more sense for you to proceed with the remainder of the costume and accessories.

If I trace the hair then I can incorporate overlapping layers, at a density which fits the animation plan. I can also deliberately omit a few shading details in order to create cleaner hinges.

I'll take a shot at it.



For the chains - it would make sense to reuse the shapes you drew for the body (assuming that you held onto them after the JPEG conversion). The medallions are simple enough that anyone can trace them, unless you want to apply special shading in order to suggest a metallic lustre (and/or embossing).

We're also going to need to do some testing and tweaking of the physics. The medallions should probably be assigned higher mass (gold is more dense than keratin!), which would cause them to move more ponderously. But the reference artwork almost always shows the chains and medallions embedded in the middle of the hair -- even during vigorous movement. So maybe we'll just have to say "it's magic" and assign the same physics to everything.

Anyways - I'll just focus on the hair for now. We can worry about the chains+medallions later on.

 

[Faceless]

Update!

normal mode:

The lock of hair that lines her breasts (circled in blue) look a little off to me. I think it seems flat, considering that it's supposed to be a lock of hair that parts around her breast and then reforms where the chain starts, but I lack the ability to make it any better, considering that the breasts are bouncing around that area.

Wicked Weave mode:

Had to use a bunch of masking tricks to properly account for her breasts. The area circled in red, particularly, is an intersection of three different components that all move or transform relative to each other. Additionally, the area in green needed to be hidden by her breast, which exists in a container that's on a layer below the costume entirely. My solution in both instances was to create an erase layer in the component that needed stuff hidden, add a second object to the component that ostensibly should be doing the hiding, and set the second object as the mask of the erase layer via ActionScript. The erase layer reduces the alpha values of all sibling layers below it, and the mask ensures that only the portions of the erase layer that overlap with the hiding object are active. And because the mask is an object within another container, all the applicable transformations are preserved.

Note: Scarborough Fair has not been traced yet. What you're seeing is a resized bitmap being used as a placeholder, and there are very obvious interpolation effects in the actual game. However, tracing the guns is about the only thing remaining on my end. Once that's done, then I see three ways to proceed:

1. I do nothing and stuntcock publishes the hair curtains and chains as a separate file.
2. I send stuntcock my source file and he integrates the hair curtains.
3. stuntcock sends me his source file and I integrate the hair curtains.

Let me know what you prefer, stuntcock.

 

[stuntcock]

My solution in both instances was to create an erase layer in the component that needed stuff hidden, add a second object to the component that ostensibly should be doing the hiding, and set the second object as the mask of the erase layer via ActionScript. The erase layer reduces the alpha values of all sibling layers below it, and the mask ensures that only the portions of the erase layer that overlap with the hiding object are active. And because the mask is an object within another container, all the applicable transformations are preserved.

If we're aiming to present a tattered-looking piece of fabric, then an alternative approach would be to set it up as a hair strand which is anchored to her collarbone and loosely connected to the breast (sort of like a bikini strap). It would exist on a single layer* and would not rely on any masking or erasure tricks.

*Correction: two layers. One for the collarbone & right breast; one for the left shoulder & left breast.

The main drawback is that it would respond poorly to the breast slider -- as the nipple moves away from the collarbone, the item would stretch diagonally instead of growing isotropically. The main advantage is that the "tattered" material would be able to sway and flutter around.

Once that's done, then I see three ways to proceed:

I'm still tracing; I gave up on the original references and downloaded some other shiny-black-hair images instead. I'll send you my FLA once it's complete. We may need to do some back-and-forth stuff in order to get everything properly lined up, and ensure that layering+overlap tricks behave properly (e.g. during arm-position changes, or in conjunction with the MoreClothing mod).

 

[Faceless]

If we're aiming to present a tattered-looking piece of fabric, then an alternative approach would be to set it up as a hair strand which is anchored to her collarbone and loosely connected to the breast (sort of like a bikini strap). It would exist on a single layer* and would not rely on any masking or erasure tricks.

*Correction: two layers. One for the collarbone & right breast; one for the left shoulder & left breast.

The main drawback is that it would respond poorly to the breast slider -- as the nipple moves away from the collarbone, the item would stretch diagonally instead of growing isotropically. The main advantage is that the "tattered" material would be able to sway and flutter around.

In theory, it should be possible to give such a strap multiple frames and manually tie them to the breast sliders, but I expect complications from the stretching. Likely every keyframe would need to be progressively more compact, to say nothing of the possibility that the default keyframes won't tween in a way that looks good.

I'm still tracing; I gave up on the original references and downloaded some other shiny-black-hair images instead. I'll send you my FLA once it's complete. We may need to do some back-and-forth stuff in order to get everything properly lined up, and ensure that layering+overlap tricks behave properly (e.g. during arm-position changes, or in conjunction with the MoreClothing mod).

Honestly, I hadn't given any thought to moreclothing at all. My thought was that this is a one-piece outfit that won't mix-n-match very well, so there's no point in registering components to the various vanilla sliders (in fact, I actually disabled a couple of them). Everything in the costume that needs to change color is just tied to the shirt RGB1 slider.

 

[Faceless]

Finished tracing Scarborough Fair. Check out the details that no one will ever notice.

 

[stuntcock]

I'm still tracing; I gave up on the original references and downloaded some other shiny-black-hair images instead.

My apologies for a very belated update here - I had forgotten about this project.

Faceless: You don't need to respond to any of the stuff below (unless you want to). It's mostly just talking-to-myself BS. Some details may be of value to new forum people are interested in the modding process.

The official artwork includes too many separate hair strands. Physics simulation of hair strands is computationally cheap. Unfortunately: each hair segment must be drawn as a separate sprite. Rendering a lot of separate sprites in Flash is not cheap; it has a significant impact on the game's runtime performance. We can merge several adjacent hair strands into one comoving sprite (as was the original plan), but this introduces the problem of gaps. Gaps are inconvenient (as is any sort of alpha-blending transparency) because the hair-physics animation technique relies on the deliberate inclusion of overlap zones. When shapes aren't fully opaque, these overlap zones don't get occulted properly, and so the viewer will notice jagged corners and weird geometry.

The official reference artwork is somewhat sketch-y. I'm not an artist, so I needed a more clean/complete image for tracing purposes. I also wanted to trace the hair in a slightly curved shape. Why? Well, consider the two basic scenarios:

• elbow behind torso (arm = behind OR arm = on her leg OR arm = loose)
  • the upper arm is essentially frozen in place w/r/t the body; it will not move very much
    
  • the hair curtain will exhibit a fairly static shape
  • the static appearance of the hair curtain in this orientation must be pleasing
• torso behind elbow (arm = on his leg OR arm = handjob)
  • significant flexion of the upper arm is expected to occur
  • the hair curtain will tend to remain in motion during gameplay
    
  • the animation of the hair curtain in this orientation must be convincing

If the normal resting shape of the hair is curved, but its sprites were traced from a straight-hair image, then each strand of hair will necessarily include several "kinks." Ideally, we want to trace the hair in a shape that closely resembles its resting shape.

Therefore, I chose a reference image whose shape is similar to the physics-determined shape shown in the first demo screenshot. The intent is to stick with the three-strand approach shown in the demo screenshots, so as to mitigate the performance (FPS) impact. Probably 3x5 or 3x6; fewer than 20 segments in total.


Side-by-side comparison of the hair reference image against two Bayonetta references.

Colored highlights show the demarcation of the three proposed strands.​

In terms of artistic details: there are a few internal gaps within the middle hair strand. There are minor gaps between adjacent hair strands, which can grow and shrink during gameplay (due to slightly differences in the physics properties of the three strands). The bottom half of the hair includes a lot of shading details (e.g. streaks), which will hopefully compensate for the absence of internal gaps. The distal shape of the hair strands is TBD - I've left them convex out of laziness, but we could cut them straight or create concave hairtips (for a bat-wing effect, as shown in the official reference image).

The chosen reference image is larger and more detailed than any of the actual Bayonetta artwork that I could find, so I'm able to include a reasonable amount of detail during tracing (which is good, because I can't improvise this stuff). The hair is somewhat brighter than most of the Bayonetta reference art (it contains less true black) but IMO the overall impression is "lustrous black" rather than "dark grey" - so I don't expect that the inconsistent brightness will pose a problem.

Tracing work on the hair continues. I'll send over the FLA when this work is complete. The chains and medallions can be added later. We'll need to decide whether we want to assign them hair-like physics (so that they tend to remain embedded in the hair curtains) or metallic physics (so that they move much more ponderously).

 

[Faceless]

Yessirree, it's an update.

All4One is basically done, unless I want to go back and redo the feather (I don't). Again, check out the details that no one will ever notice.

As a note, there's some stuff for both sets of guns (mainly the embossing, but also the A4O coin) that are actually bitmaps rather than vectors, with produces noticeable interpolation effects in game. I decided that was an acceptable trade for not having to actually trace that shit. At this point the only thing left is the hair curtains, so I've gone ahead and added a preliminary release to the resource manager. https://www.undertow.club/downloads/umbra-witch-costume.618/

 

[Hank East]

Well... I don't see it on the resource manager. The link gives me an error.

 

[Faceless]

Because it's currently waiting on mod approval. Try again later.

 

[fleet]

Well... I don't see it on the resource manager. The link gives me an error.

The link is working now.