- Project Afternight custom notes use image assets for judgment visuals, numbers, and extra indicators.
- Prepare transparent PNGs from the supplied template before uploading each asset.
- Upload decals through Roblox Creations, then copy each image asset ID.
- Apply IDs carefully in the game's judgment settings so every visual points to the correct file.
- Use pixel-safe text and test readability before finalizing your custom rating set.
Project Afternight Custom Notes Explained
Project Afternight is a Roblox Friday Night Funkin’ game with a large collection of mod content, unlockable cosmetics, noteskins, notesplashes, icons, and other visual features. In this context, Project Afternight custom notes refers to the visual customization workflow used for custom ratings, custom numbers, and extra judgment elements rather than a new gameplay chart or a downloadable note pack.
The setup is asset-based. You create or edit image files, save them as transparent PNGs, upload them as Roblox decals, copy the resulting image IDs, and place those IDs in the appropriate judgment settings. The workflow does not require Roblox Studio for the basic custom rating process described by the available tutorial.
Custom Ratings
Create replacement judgment images for the visual feedback shown when notes are hit. Use text, drawings, or images, provided the final files preserve transparency.
Custom Numbers
Design the number graphics used alongside rating feedback. Pixel fonts, themed lettering, and simple drawn numerals can all work when they remain readable.
Extra Indicators
Add small supporting visuals such as a dash or other simple elements. These assets should match the rest of the set in scale and style.
Video Highlights:
- The workflow uses regular Roblox image asset IDs instead of a Roblox Studio project.
- A template can guide the placement of ratings, numbers, and extra elements.
- Transparent PNG export helps prevent unwanted backgrounds around the graphics.
- Uploaded image IDs are entered through the judgment settings interface.
The visual set can be built around almost any theme. The tutorial demonstrates a Minecraft-inspired direction, but the same method can support pixel art, handwritten lettering, monochrome designs, character motifs, or a style based on a favorite playable mod. The important distinction is that the theme changes the artwork, while the upload and ID workflow stays broadly the same.
| Asset Group | Main Purpose | Recommended Design Focus |
|---|---|---|
| Ratings | Shows judgment feedback | Strong silhouette, clear lettering, transparent background |
| Numbers | Displays combo or hit values | Consistent font, readable spacing, matching scale |
| Extras | Adds small supporting marks | Simple shapes, clean edges, visual consistency |
Start with a simple theme before attempting animated or highly detailed graphics. Clear ratings are more useful during fast songs than artwork that becomes difficult to read.
Prepare the Custom Asset Files
Before uploading anything, organize the artwork into separate files and confirm that every element is positioned correctly inside the template. The reference workflow uses a template package with guides and may include image or PSD formats for different editing programs.
You can work in Photoshop, another image editor, or a modeling and design tool such as Blockbench if it suits the visual style. The editor matters less than the export result. Each finished image should be saved as a PNG with a transparent background so the game does not display a solid rectangle behind the custom graphic.
Choose a Visual Theme
Decide whether the set will use pixel art, plain text, drawings, screenshots, or another style. Keep the rating, number, and extra elements visually related so the interface feels intentional.
Open the Template
Place each asset inside the supplied template guides. Use separate layers when possible, especially for text, outlines, shadows, and background removal.
Refine Text and Edges
Check the font size, spacing, and edge quality at the scale used in-game. For pixel fonts, disabling anti-aliasing can produce sharper letterforms and cleaner small details.
Export Transparent PNGs
Save each completed rating, number, and extra asset as an individual PNG. Confirm that the canvas has transparency instead of a white or colored background.
A compact file system makes the later upload stage much easier. Use names that identify the asset and its state, such as rating-good.png, rating-miss.png, or number-01.png. The exact names are for your own organization; the game uses the IDs you enter later.
| Preparation Check | Why It Matters | Fix If Incorrect |
|---|---|---|
| Transparent background | Prevents visible rectangles around graphics | Remove the background layer and export again |
| Separate PNG files | Makes individual ID assignment easier | Split combined artwork into separate files |
| Consistent dimensions | Keeps the interface visually balanced | Reposition or resize elements in the template |
| Readable lettering | Helps identify feedback during difficult charts | Increase contrast, size, or stroke thickness |
| Sharp pixel edges | Preserves the intended pixel-art style | Disable anti-aliasing where appropriate |
Do not rely only on the editor's zoomed-in preview. Review the images at a smaller size and compare the visual weight of every asset. A rating that looks attractive on a large canvas may become too thin, crowded, or low-contrast once displayed during a song.
A non-transparent background can make a custom asset look like a large box in-game. Inspect the exported PNG itself before uploading it to Roblox.
Upload Decals and Apply Image IDs
Once the PNG files are ready, upload them through Roblox's creation tools. The documented workflow uses the Roblox Creations area, specifically development items and decals. After an upload finishes, open the image entry and copy its asset ID.
Every graphic needs its own ID assignment. This includes each judgment state, number group, and extra element. Keeping a written mapping between file names and IDs reduces the chance of placing a “miss” graphic in the “good” slot or assigning a number image where an extra indicator belongs.
| Upload Stage | Action | Expected Result |
|---|---|---|
| 1 | Open Roblox Creations | Access your development items |
| 2 | Select Decals | Begin the image upload process |
| 3 | Upload a PNG | Create an image asset from the prepared file |
| 4 | Open the uploaded image | View the asset details |
| 5 | Copy the image asset ID | Obtain the value needed in settings |
| 6 | Repeat for every file | Build the full custom asset set |
Open Roblox Creations
Navigate to the creation and development-item area connected to your Roblox account. Select the decal workflow rather than trying to import the files through Roblox Studio.
Upload Each PNG
Add the rating, number, and extra files one at a time. Wait for each image to finish processing before moving to the next file.
Record the Asset IDs
Open the uploaded image, use the image view or details area, and copy its asset ID. Match it to the local file name in a note or spreadsheet.
Open Judgment Settings
In Project Afternight, go to the settings area for judgments. Paste the correct ID into its matching field.
Test the Set
Apply all IDs, enter a song, and check whether the ratings, numbers, and extras appear in the expected positions.
The ID list should be treated like a small configuration table. A useful example is shown below; replace the placeholder descriptions with the actual asset IDs from your own uploads.
| Setting Slot | Matching File | Verification Question |
|---|---|---|
| Rating state | Rating PNG | Does the correct judgment appear after a hit? |
| Number set | Number PNGs | Are the digits clear and aligned? |
| Extra element | Extra PNG | Does the mark appear without covering feedback? |
| Alternate state | Additional rating PNG | Does the visual match its intended accuracy state? |
The configuration is ready when each setting points to the intended uploaded image, every file keeps its transparency, and the visuals remain readable during an actual song.
Troubleshooting and Quality Tips
Most problems with custom rating visuals come from file preparation, incorrect ID mapping, or a mismatch between the artwork and its display scale. Troubleshoot one asset at a time instead of replacing the entire set immediately.
If a graphic does not appear, first confirm that the copied value is an image asset ID and that it was pasted into the correct judgment field. If the image appears with a background, return to the source file and check whether the background layer was hidden before export. If the artwork is blurry, review the source resolution and the export method.
Missing Image
Recheck the copied image ID, confirm the upload completed, and verify that the value was entered in the intended setting.
Visible Background
Remove the background layer, preserve alpha transparency, and export the PNG again before uploading a replacement.
Blurry Text
Use larger source lettering, cleaner shapes, and a suitable export scale. Pixel fonts may benefit from anti-aliasing set to none.
Wrong Visual
Compare the local file name with your ID list, then replace the mismatched setting with the correct asset.
Use the following review order when refining a set:
- Readability: Can the judgment be recognized quickly during a dense chart?
- Contrast: Does the artwork stand out against different stage backgrounds?
- Spacing: Are numbers and ratings separated enough to avoid visual crowding?
- Consistency: Do outlines, shadows, and font choices match across the set?
- Restraint: Are decorative extras helping the interface instead of covering information?
| Symptom | Likely Cause | Recommended Response |
|---|---|---|
| White box behind image | Background was exported with the PNG | Remove the background and re-upload |
| Rating is too small | Artwork does not fill the guide area | Increase the graphic while keeping margins |
| Text edges look soft | Anti-aliasing or low-resolution source | Use sharper text settings or a larger source |
| Wrong state appears | IDs were mapped incorrectly | Compare every ID against the upload record |
| Extra overlaps the rating | Supporting element is oversized | Simplify or reposition the extra graphic |
Project Afternight also supports a broader customization culture around icons, noteskins, notesplashes, and themed content. Custom rating graphics work best when they complement the rest of the player's visual setup rather than competing with it. A restrained palette and consistent outline treatment usually produce a cleaner result than adding unrelated effects to every asset.
For the broader game context, see the Project: Afternight page on Funkipedia Mods Wiki. For the visual upload walkthrough, use the related Project Afternight custom ratings tutorial.
Final Checklist and FAQ
Use this checklist before considering the custom visual set finished. It focuses on the parts most likely to affect the final in-game result.
Custom Asset Checklist:
- Choose a consistent theme for ratings, numbers, and extras
- Place each graphic inside the template guides
- Export every asset as a transparent PNG
- Upload each PNG as a Roblox decal and record its image ID
- Paste and test every ID in the matching judgment setting
| Final Review | Pass Condition |
|---|---|
| Theme | Ratings, numbers, and extras share a recognizable style |
| File format | Assets are individual transparent PNGs |
| Upload record | Every file has a clearly labeled image ID |
| Settings | Each ID is assigned to the correct field |
| Gameplay test | Visuals appear clearly without unwanted backgrounds |
Q: What are Project Afternight custom notes?
In this setup context, the term refers to custom visual assets used for ratings, numbers, and extra judgment elements. It does not describe a new song chart or a separate downloadable note system.
Q: Do I need Roblox Studio to make custom rating visuals?
The basic workflow described here does not require Roblox Studio. You prepare the images in an editor, upload them as Roblox decals, copy the image IDs, and enter those IDs in Project Afternight's judgment settings.
Q: Why should the files be transparent PNGs?
Transparency removes the unwanted canvas background around the artwork. Without it, a rating or number graphic may appear as a visible rectangle during gameplay.
Q: Can I use text, drawings, or images for the assets?
Yes. The workflow supports different visual approaches, including text layers, drawings, and images. The main requirements are readable artwork, suitable placement, and a correctly uploaded image ID.
Keep a local folder containing the final PNGs and their matching asset IDs. If you revise one graphic later, this record makes replacement and troubleshooting much faster.