From ac00753c077991d9d4e77caa1c5b9182e8e454b3 Mon Sep 17 00:00:00 2001 From: Alexander Sellite Date: Sun, 26 Jul 2026 15:18:02 +0000 Subject: [PATCH] Add 2b. Canvas Size, Pixel Scale, and File Formats --- ...Size%2C-Pixel-Scale%2C-and-File-Formats.md | 210 ++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 2b.-Canvas-Size%2C-Pixel-Scale%2C-and-File-Formats.md diff --git a/2b.-Canvas-Size%2C-Pixel-Scale%2C-and-File-Formats.md b/2b.-Canvas-Size%2C-Pixel-Scale%2C-and-File-Formats.md new file mode 100644 index 0000000..f8ab5a0 --- /dev/null +++ b/2b.-Canvas-Size%2C-Pixel-Scale%2C-and-File-Formats.md @@ -0,0 +1,210 @@ +# Canvas Size, Pixel Scale, and File Formats + +This page explains how to size and export 2D assets for NETFISHING. + +Exact dimensions may vary by issue. When an issue specifies a size, follow that requirement rather than the general defaults below. + +## Pixel-art scaling + +Pixel-style assets should normally use nearest-neighbor scaling. + +Do not use: + +- Bilinear filtering +- Bicubic filtering +- Smooth image resizing +- Automatic antialiasing +- Fractional scaling where it causes uneven pixels + +Where practical, display pixel assets at integer multiples of their source size: + +- 1× +- 2× +- 3× +- 4× + +An asset authored at 32 × 32 pixels can be displayed at 64 × 64 or 128 × 128 without uneven pixel sizes. + +## Provisional source sizes + +These are recommended starting points, not universal requirements. + +| Asset | Suggested source size | +|---|---:| +| Tiny HUD symbol | 16 × 16 or 24 × 24 | +| Hotbar or item icon | 32 × 32 or 48 × 48 | +| Shop item icon | 48 × 48 or 64 × 64 | +| Category icon | 32 × 32 | +| Fish grid thumbnail | 64 × 48 or 64 × 64 | +| Larger fish journal art | 192 × 128 or 256 × 192 | +| Clothing thumbnail | 64 × 64 or 96 × 96 | +| Interaction prompt icon | 24 × 24 or 32 × 32 | +| Emote | 64 × 64 or 96 × 96 | +| UI nine-patch source | Depends on corner radius | +| Tileable environment texture | 64 × 64, 128 × 128, or 256 × 256 | + +Do not create a 2048 × 2048 image for an icon displayed at 48 pixels. + +## Native-resolution design + +Draw assets at or near their intended source resolution. + +Do not draw a smooth 1000-pixel illustration and shrink it to 32 pixels as the primary icon workflow. + +Shrinking often causes: + +- Muddy edges +- Inconsistent pixel sizes +- Unreadable detail +- Accidental antialiasing +- Weak silhouettes + +Larger concept or source illustrations are acceptable, but the final pixel asset should be deliberately redrawn or cleaned at its target resolution. + +## Canvas padding + +Icons should include consistent visual padding. + +Unless the issue specifies otherwise: + +- Keep important art away from the outermost pixel +- Center the visual mass +- Avoid one icon touching every edge while another occupies half the tile +- Match the perceived size of related icons, not only their bounding boxes + +Tall and wide objects may use different empty space while still feeling equally prominent. + +## Transparent backgrounds + +Use transparent backgrounds for: + +- Item icons +- Fish sprites +- Creature art +- Clothing thumbnails +- HUD symbols +- Decorative overlays + +Do not leave an accidental white or cream rectangle around transparent artwork. + +Inspect edge pixels for: + +- White halos +- Dark halos +- Semi-transparent antialiasing +- Stray pixels +- Unintended color matte + +## PNG + +Use PNG for: + +- Pixel art +- Icons +- Fish art +- Creature illustrations +- Clothing thumbnails +- Environment textures +- UI raster assets + +PNG should normally use: + +- RGBA when transparency is required +- RGB when fully opaque +- No lossy compression +- No embedded color profile that causes visible palette shifts where avoidable + +## SVG + +Use SVG only when the asset benefits from vector source and is not expected to preserve a strict pixel grid. + +Suitable uses may include: + +- Logo marks +- Simple scalable symbols +- Website graphics +- Temporary UI icons +- Certain clean interface shapes + +Do not use SVG for pixel art unless the issue explicitly requests it. + +SVG files should: + +- Use simple paths +- Avoid embedded raster images +- Avoid external fonts +- Avoid external dependencies +- Avoid unnecessary metadata +- Render correctly in Godot + +## Editable source formats + +Include an editable source file when practical. + +Examples: + +- `.aseprite` +- `.kra` +- `.xcf` +- `.svg` +- `.afdesign` +- `.psd` + +The exported PNG or SVG is still required. + +Do not submit only a flattened image when the issue requests editable source layers. + +## Color mode + +Use standard RGB or RGBA color. + +Avoid: + +- CMYK +- Indexed modes that break transparency unexpectedly +- Unusual bit depths +- HDR formats for ordinary interface assets + +## File naming + +Use lowercase names with underscores. + +Good: + + coffee_icon.png + fish_finder_icon.png + bluegill_journal.png + shirt_oversized_navy.png + grass_olive_tile.png + +Avoid: + + Coffee FINAL.png + fish2newest.png + Untitled-1.png + image.png + +## Godot import expectations + +Pixel assets should normally be imported with: + +- Filtering disabled +- Mipmaps disabled for UI icons +- Repeat disabled for ordinary icons +- Repeat enabled only for textures designed to tile +- Lossless compression +- No automatic smoothing + +Environment textures may require mipmaps depending on their use on 3D geometry. That should be tested in-game. + +## Test at actual size + +Always review: + +- Native source resolution +- Intended integer scale +- Actual Godot display size +- Small-window presentation +- Normal gameplay distance + +A zoomed-in editor view is not enough to judge readability. \ No newline at end of file