Add 2b. Canvas Size, Pixel Scale, and File Formats
parent
3fb4f812df
commit
ac00753c07
1 changed files with 210 additions and 0 deletions
210
2b.-Canvas-Size%2C-Pixel-Scale%2C-and-File-Formats.md
Normal file
210
2b.-Canvas-Size%2C-Pixel-Scale%2C-and-File-Formats.md
Normal file
|
|
@ -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.
|
||||||
Loading…
Add table
Add a link
Reference in a new issue