skills.rest
skyoxu
skyoxuCOMMUNITY
Explore all skills by this author →
GitHub

nvg-resolution-mode

Configure NanoVG resolution modes with DPR correction and design-resolution scaling for Lua rendering.

Updated Jul 15, 2026
Search Tags:#lua#scaling#resolution#dpi#2d rendering#high-dpi#nanovg
One-click install
npx skills add https://github.com/skyoxu/taptapmarker --skill nvg-resolution-mode-skyoxu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nvg-resolution-mode
Source: https://github.com/skyoxu/taptapmarker/tree/main/.cursor/skills/nvg-resolution-mode
Command: npx skills add https://github.com/skyoxu/taptapmarker --skill nvg-resolution-mode-skyoxu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Raw NanoVG rendering on high-DPI screens produces UI that appears too small or blurry when nvgBeginFrame is called without the correct resolution mode and pixel ratio. This Skill guides the selection and implementation of the correct resolution mode before any nvgBeginFrame call. ## Core Features & Use Cases - Three Resolution Modes: Mode C (physical pixels), Mode B (system logical resolution with DPR correction, the default), and Mode A (design resolution with scale factor and offset for absolute layouts). - Decision Rules: Chooses Mode A when a design resolution like 1920x1080 is specified, otherwise defaults to Mode B, and prompts the user to pick when information is insufficient. - Input Coordinate Conversion: Provides formulas converting physical-pixel mouse/touch input into logical or design-space coordinates for each mode. - Use Case: A Lua 2D game using raw nvgCreate/nvgBeginFrame calls looks tiny on a Retina display; apply Mode B with logicalW/logicalH and pixelRatio=dpr, then upgrade to Mode A with nvgScale and nvgTranslate when a 1080p design target is given. ## Quick Start Ask the AI to set up the NanoVG resolution mode for your project, stating whether you have a design resolution such as 1920x1080 or want the default DPR-corrected logical resolution.

Frequently Asked Questions about nvg-resolution-mode

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix NanoVG UI appearing too small on high-DPI screens?▼

The UI is small because nvgBeginFrame was called with physical pixels and no DPR correction. Switch to Mode B by passing logical resolution (physW/dpr, physH/dpr) with pixelRatio set to dpr, which makes one coordinate unit equal one logical pixel.

Which NanoVG resolution mode should I use for my project?▼

Use Mode A when a design resolution like 1920x1080 is specified or fixed-coordinate layouts dominate. Otherwise default to Mode B with DPR correction and responsive layout. Mode C using raw physical pixels is not recommended.

How do I convert mouse input coordinates in NanoVG design-resolution mode?▼

Engine input APIs return physical pixels. For Mode A responsive layout use designX = inputX / dpr / scale; for absolute design-space layout subtract the offset: designX = inputX / dpr / scale - designOffsetX.

Does this resolution setup apply to urhox-libs UI components?▼

No. urhox-libs/UI widgets render in the Widget layer and handle resolution scaling internally. This guidance only applies to raw NanoVG calls, though projects mixing raw NanoVG with UI components still need it for the NanoVG portion.

Why is my NanoVG rendering blurry even after setting the resolution?▼

Blurriness means the pixelRatio argument of nvgBeginFrame is wrong. Ensure pixelRatio equals the device pixel ratio from graphics:GetDPR() so NanoVG rasterizes at physical pixel density.

Why does NanoVG UI misalign after resizing the window?▼

The layout variables were not recalculated on resize. Subscribe to the ScreenMode event and recompute physical size, DPR, logical resolution, and for Mode A the scale factor and design offsets.

Related Skills

Explore More Software Engineering Skills→
RosyGameStudioRosyGameStudio

sdl-gpu-setup

Set up an SDL3 GPU application with callback architecture and swapchain configuration.

Official
Intermediate
pixijspixijs
302

pixijs-math

Solve 2D geometry and coordinate transformation tasks for PixiJS v8.

Official
Advanced
kehwarkehwar

scale-and-responsive

Scale and resize Phaser 4 games via ScaleManager with centering, fullscreen, and orientation handling.

Community
Advanced
haitao2016haitao2016

responsive-ui-auto-adapter

Automate game UI adaptation for urhox-libs/UI and NanoVG across devices.

Community
Advanced