Editing MM+ UI with After Effects Tutorial for Hatsune Miku: Project DIVA Mega Mix+

Introduction and Notes

To make the tutorial overall easier to understand, it assumes a few things

First off, this tutorial assumes you have some experience using a modern Non-Linear Editing program like Premier Pro, Sony Vegas, or Final Cut Pro.

Secondly, it assumes you have access to Adobe After Effects and are also familiar with editing images.

Thirdly, it assumes you have MikuMikuModel and you know how to use it, and that you understand how to make a basic structure of a mod.

For this tutorial, I will be making a simple UI mod that adjusts In-Game UI to all appear on the top of the screen. Hopefully you will be able use what you've learned here to make your own UI mods, as well as adding to 3DPVs. This will not cover modifying spr_db.bin and aet_db.bin but they may be covered in a future tutorial.

Installing AetPlugin

Download Samyuu's AetPlugin from Github

Go to your installation folder and go to the following directory

Windows
Program Files\Adobe\Adobe After Effects [Version]\Support Files\Plug-ins

Now place the AetPlugin in your Plug-ins Folder

Image Not Found - Click to retry loading

Image Not Found - Click to retry loading

Acquire the file you would like to edit

Use MikuMikuModel to open diva_main.cpk. UI elements are generally in rom_steam/2d or rom_steam_(language)/2d, while PV elements are generally in rom_steam/2d, rom_ps4/2d, or rom/2d depending on the game they were last updated in.

Now Export the AET file you would like to edit, as well as the associated spr_ file

Image Not Found - Click to retry loading

In order to help find what you need, I've compiled a short list of all the .farc files and what they contain
To edit the aet, you need to find the corresponding aet_xxx.bin

spr_cmnitm_thmbXXX.farc // Icons for module hair
spr_fnt_36.farc // Font Files
spr_fnt_bold36.farc // Bold Font Files
spr_gam_cmn.farc // In game Elements such as Hit Icons, Timing Indicators, Difficulty, health, and UI
spr_gam_pvXXX.farc // Visual Elements in a PV such as a titlescreen
spr_nswgam_adv.farc // Boot up Screen, Logo, Title Screen
spr_nswgam_cmn.farc // Help Screens, Loading Screens, Menu Icons
spr_nswgam_cmnbg.farc // Main Menu Background
spr_nswgam_custom.farc // Customization menu assets, module selection
spr_nswgam_decoration.farc // Sticker Menu Assets
spr_nswgam_gallery.farc // Gallery Assets, including leaderboards
spr_nswgam_game.farc // Practice Mode Assets
spr_nswgam_menu.farc // Main menu assets
spr_nswgam_option.farc // Option Menu Assets
spr_nswgam_playlist.farc // Playlist Menu Assets
spr_nswgam_result.farc // Result Screen Assets
spr_nswgam_songselector.farc // Song Select Assets
spr_nswgam_staff.farc // Credits menu
spr_nswgam_tshirtsedit.farc // Custom T-Shirt Designer assets
spr_sel_mdXXX.farc // Module Sprite
spr_sel_pvXXX.farc // Song logo, Background, Album Art

For editing PS4 Assets based on the PS4 UI mods, it is the same however with ps4 replacing nswgam.

For this Tutorial, we are making an In game UI mod, so we will just need spr_nswgam_cmn.farc and aet_nswgam_cmn.bin. For the sake of your own sanity I recommend putting each set of files in their own folder.

Image Not Found - Click to retry loading

Editing the AET

To edit the AET and see the textures, you need to make sure the aet_xxx.bin and spr_xxx.farc are in the same folder. Then drag the aet file into the middle leftmost panel in after effects.

Image Not Found - Click to retry loading

It will take up to a few minutes to import, as its unpacking every single sprite within the farc file for use in after effects. This is normal.

Once it has finished loading, open the folders and double click on the first composition file. This will load an instance of the AET. If you want to edit the images though after effects, the images will be in the data\video folder, however, we will not be doing that here.

Image Not Found - Click to retry loading

Once loaded, theres a good chance your device will lag. This is because after effects is not great at loading all of these layers at once. I recommend selecting "solo layer" on the layers that you're looking to edit. Sidenote: Some layers are locked with a padlock icon. You can simply just click on the padlock to be able to edit the layer.

Image Not Found - Click to retry loading

From here there are different types of layers. They don't technically have names or are even distinct, however I am going to name them for ease of understanding. One important thing to note is that for some reason there are a lot of duplicates that aren't really used. I plan to document what layers are "real" in the future.

Static Sprites

Basic sprites can be edited either on the main page, or you can double click on the layer to edit its sub-composition. Position, scale, rotation, and opacity can be edited. Depending on the sprite, it may also be possible to animate it with key frames, but it will consistently loop and you can not control it outside of key frames.

Image Not Found - Click to retry loading

Dynamic Sprites

Sprites that appear as Red or White are what I call "dynamic sprites". This means that the layer is just a marker of where a sprite should go. Elements like text, module pictures, and numbers often use these. These dynamic sprites may also be included within a sub-composition. Position, Scale, and opacity can be edited however rotation may will not work with certain types of sprites. Also note that in the event that text is too long, it will simply continue off of the text element until the line of text ends.

Text element that is used for subtitles, song titles (in game), and other text strings. Text is rendered from the top left corner, and adjusting the shape will not affect the shape of the text.

Image Not Found - Click to retry loading

Number elements that are used to display each digit of the score individually. A similar system is used for module icons, and background, thumbnails and Jackets on the song select. Adjusting the scale, size, opacity, and sometimes rotation will work.

Image Not Found - Click to retry loading

Gauge start and Gauge end, used for the life gauge. As far as I can tell, these are completely unique as the game draws a line between the 2 elements, and adds textures in between them. Currently I am not aware of a way to modify the shape, nor a way to make other elements overlap it. Only the position can be modified.

Image Not Found - Click to retry loading

Animated Sprites

Animated sprites generally include a sub-composition that includes many elements that are key-framed in order to make the animation. These can be edited in many ways to adjust the animation. On the main composition, there are tags that indicate to the game what frames are a part of each animation. It can be modified to adjust animation speed or when the looping of an animation happens. Adding new tags won't do anything as far as I'm aware, and removing them may cause unintended behaviour. Sadly, the tag names vary from file to file, but here's a general list.

st_in // The start of a transition in animation

ed_in // The end of a transition in animation

st_lp, loop_start // The start of a looping animation, it will continue the animation until it is no longer needed

ed_lp, loop_end // The end of a looping animation

st_out // The start of a transition out animation

ed_out // The end of a transition out animation, this will be the last frame played.

skip_start, end_start // In the event that the player selects the "skip" button, these frames will be skipped.	Only used in AFT as far as I can tell.

out_start // The start of a transition out animation, there is no corresponding out_end and this is only used for notes.

charge_end // Used at the end of the "charging" animation on holds. There is no charge_start as it starts on frame 0 regardless.

xx_sp_01 // Used when an element has more than one "transition in" and "transition out" animation.

Key-frames can be enabled by selecting the clock on a specific property (like position) and key-frames can be added by clicking the diamond button

Image Not Found - Click to retry loading

There are also some elements (Such as the song select and the module select) that don't use tags to denote animation timing and instead the transition in, loop, and transition out animations are entirely different elements.

Image Not Found - Click to retry loading

Other Sprites

There are some sprites that may not behave the way listed on this tutorial. This is simply because I have not had the time to test everything. If you find something new, experiment with it! Experimentation is one of the best parts of modding. Also, comment below what you've found so that I can add to this tutorial.

Editing the Sprites

Editing the sprites is quite simple, you can simply find the image you want to edit in the sea of images created when you exported it, and replace the image either in the file explorer or after effects.

Image Not Found - Click to retry loading

Exporting

Now that you're done editing your aet, its time to export it.

Select File > Export > DivaAetSet

Image Not Found - Click to retry loading

If you edited the sprite sheet manually, disable all of the export options

Image Not Found - Click to retry loading

If you ended up editing the sprites via after effects, you will want to enable Export Spr Set

Now put the files in the game and you're good to go!

Final Notes

This tutorial was written on and off over the course of 3 months, so some parts might seem clunky or inconsistent. If you find any errors or new information to add, please let me know.

I plan on writing more tutorials on modding soon, as I think knowledge for modding should be as accessible as possible. I may also make this tutorial in video form soon, however it's very time consuming.