Add 2b. Canvas Size, Pixel Scale, and File Formats

Alexander Sellite 2026-07-26 15:18:02 +00:00
parent 3fb4f812df
commit ac00753c07

@ -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.