create-gamenative-app 0.1.9 → 0.1.10

package/README.md

@@ -104,13 +104,73 @@ Requires [pkg](https://github.com/vercel/pkg); target is `node18-win-x64`. For o
 | `npm start`   | Run `dist/main.js` (needs `game.config.json`)    |
 | `npm run build:exe` | Build then package to `release/GameNative.exe` |
 
-## API overview (for game code)
+## API reference (everything you need to make a game)
 
-- **`run(game, config?)`** — Framework entry; config: `title`, `width`, `height`, `vsync`, `resizable`, `icon`.
-- **`IGame`**: optional `init(ctx, config)`, required `update(dt)`, `draw()`, optional `dispose()`.
-- **`GameContext`**: `gl`, `input`, `width`, `height`.
-- **Input**: `ctx.input.mouseX`, `mouseY`, `mouseLeft`, `mouseRight`, `mouseMiddle`, `isKeyDown(scancode)`.
-- **`SCANCODE`**: e.g. `SCANCODE.W`, `SCANCODE.Escape`.
-- **`createDraw2D(gl)`**: `clear(r,g,b,a?)`, `fillRect(x,y,w,h,r,g,b,a?)`, `dispose()`.
+Import from `../../scripts/index.js` (or your framework path). All APIs are available in your game file.
 
-For custom rendering, use `ctx.gl` (WebGL 1) directly.
+### Game lifecycle
+
+- **`run(game, config?)`** — Starts the framework. Call once from your entry point. `config`: `title`, `width`, `height`, `vsync`, `resizable`, `icon`.
+- **`IGame`** — Your game implements: optional **`init(ctx, config)`**, required **`update(dt)`**, required **`draw()`**, optional **`dispose()`**.
+- **`GameContext`** — Passed to `init` and available each frame: **`gl`** (WebGL context), **`input`**, **`width`**, **`height`** (updates on resize).
+
+### Input
+
+- **`ctx.input.mouseX`**, **`ctx.input.mouseY`** — Cursor position in pixels.
+- **`ctx.input.mouseLeft`**, **`mouseRight`**, **`mouseMiddle`** — Boolean button state.
+- **`ctx.input.isKeyDown(scancode)`** — Returns true if key is held. Use **`SCANCODE`** for key codes: `SCANCODE.W`, `SCANCODE.A`, `SCANCODE.S`, `SCANCODE.D`, `SCANCODE.Space`, `SCANCODE.Escape`, `SCANCODE.Up`, `SCANCODE.Down`, `SCANCODE.Left`, `SCANCODE.Right`, `SCANCODE.Enter`, `SCANCODE.Shift`, `SCANCODE.Ctrl`, `SCANCODE.Tab`, and `SCANCODE.A`–`SCANCODE.Z`.
+
+### 2D drawing (`createDraw2D`)
+
+- **`createDraw2D(ctx.gl)`** — Returns a Draw2D helper. Create once in `init`, reuse in `draw`.
+- **`draw2d.clear(r, g, b, a?)`** — Clear the screen (default a = 1).
+- **`draw2d.fillRect(x, y, w, h, r, g, b, a?)`** — Filled rectangle in pixels. Origin top-left, y down.
+- **`draw2d.fillTriangles(verts, r, g, b, a?)`** — Draw triangles. `verts` is a `Float32Array` of pixel coords: `[x,y, x,y, x,y, ...]` (3 vertices per triangle).
+- **`draw2d.strokeRect(x, y, w, h, r, g, b, a?)`** — 1px outline rectangle (panels, buttons).
+- **`draw2d.dispose()`** — Call in `dispose()` to free resources.
+
+### Text (fonts, sizes, colors)
+
+- **`loadFont(path)`** — Async. Load a TTF/OTF from path (relative to cwd or absolute). Returns a **`Font`**.
+- **`drawText(draw2d, font, text, x, y, size, r, g, b, a?)`** — Draw a string. (x, y) = top-left; y-axis down; `size` = font size in pixels.
+- **`getTextTriangles(font, text, x, y, size)`** — Returns `Float32Array` of triangle vertices. Use with `draw2d.fillTriangles(triangles, r, g, b, a)` for custom color or caching.
+- **`measureText(font, text, size)`** — Returns `{ width, height }` in pixels (for layout).
+
+### UI / hit-testing
+
+- **`isPointInRect(px, py, x, y, w, h)`** — Returns true if point (px, py) is inside the rectangle. Use with `ctx.input.mouseX`, `mouseY`, `mouseLeft` in `update()` to implement buttons.
+
+### Textures (images / sprites)
+
+- **`loadTexture(gl, path)`** — Async. Load a PNG from path, upload to a WebGL texture, return **`{ texture, width, height }`**. You bind and draw with your own shader; the helper only does load + upload.
+
+### Raw WebGL — do anything
+
+- **`ctx.gl`** — Full WebGL 1 context. No wrapper. Use it for custom shaders, 3D, framebuffers, MSAA, texture arrays, etc. You have full control.
+
+### Full SDL — do anything
+
+- **`sdl`** — The full [@kmamal/sdl](https://github.com/kmamal/node-sdl) module is exported. Use it directly for everything SDL exposes:
+  - **`sdl.video`** — displays, windows (we create one; you can query others).
+  - **`sdl.keyboard`**, **`sdl.mouse`**, **`sdl.touch`** — input (we use keyboard + mouse for `ctx.input`; you can use more).
+  - **`sdl.audio`** — **`sdl.audio.getDevices()`**, **`sdl.audio.openDevice(device, options)`** for playback/recording. Open a device, enqueue buffers (WAV/samples), no high-level helper.
+  - **`sdl.joystick`**, **`sdl.controller`** — gamepads; **`sdl.sensor`** — accelerometer/gyro.
+  - **`sdl.clipboard`**, **`sdl.power`** — clipboard, battery.
+
+### Node / OS — do anything
+
+- Your game runs in **Node.js**. You can **`import 'fs'`**, **`import 'path'`**, use **`child_process`**, native addons, or any npm package. File I/O, save data, scripting, or calling out to other tools — nothing is locked down.
+
+### Exports summary
+
+| Export | Purpose |
+|--------|--------|
+| `run`, `sdl`, `createInput`, `SCANCODE` | Entry, full SDL ref, input factory, key codes |
+| `IGame`, `GameConfig`, `GameContext` | Types for your game and config |
+| `InputState` | Type for `ctx.input` |
+| `createDraw2D`, `Draw2D` | 2D clear/rect/triangles/stroke |
+| `loadFont`, `drawText`, `getTextTriangles`, `measureText`, `Font` | Text rendering |
+| `loadTexture`, `LoadedTexture` | Load PNG → WebGL texture |
+| `isPointInRect` | Button/UI hit-test |
+
+**Summary:** You get raw **`ctx.gl`** (WebGL), full **`sdl`** (SDL2), and **Node** (fs, path, etc.). Helpers (draw2D, text, texture load, isPointInRect) are thin conveniences; they don’t hide the native layers. See **FRAMEWORK.md** in a created project for more detail and a minimal SDL audio example.

package/bin/create.js

@@ -47,6 +47,7 @@ async function scaffold(projectName, parentDir) {
     earcutDts,
     textTs,
     uiTs,
+    textureTs,
     copyConfigJs,
     setExeIconJs,
   ] = await Promise.all([
@@ -63,6 +64,7 @@ async function scaffold(projectName, parentDir) {
     readFile(join(FRAMEWORK_ROOT, 'scripts/earcut.d.ts'), 'utf-8'),
     copyFrameworkFile('scripts/Text.ts'),
     copyFrameworkFile('scripts/UI.ts'),
+    copyFrameworkFile('scripts/Texture.ts'),
     readFile(join(FRAMEWORK_ROOT, 'scripts/copy-config.js'), 'utf-8'),
     readFile(join(FRAMEWORK_ROOT, 'scripts/set-exe-icon.js'), 'utf-8'),
   ])
@@ -296,6 +298,7 @@ export default game
     writeFile(join(scripts, 'earcut.d.ts'), earcutDts),
     writeFile(join(scripts, 'Text.ts'), textTs),
     writeFile(join(scripts, 'UI.ts'), uiTs),
+    writeFile(join(scripts, 'Texture.ts'), textureTs),
     writeFile(join(games, 'Game.ts'), gameTemplate),
     writeFile(join(scripts, 'copy-config.js'), copyConfigJs),
     writeFile(join(scripts, 'set-exe-icon.js'), setExeIconJs),
@@ -320,21 +323,150 @@ Game built with [GameNative](https://github.com/your-org/GameNative).
 
 See FRAMEWORK.md for 2D, 3D, lighting, sound, UI, and camera.
 `
-  const frameworkMd = `# GameNative capabilities
+  const frameworkMd = `# GameNative API — everything you need to make a game
 
-Your game has access to:
+Import from \`../../scripts/index.js\` in your \`src/games/*.ts\` files.
 
-- **2D**: \`createDraw2D(ctx.gl)\` — \`clear()\`, \`fillRect()\`, \`fillTriangles()\`, \`strokeRect()\`. Use \`ctx.gl\` (WebGL 1) for textures, sprites, batching.
-- **Text**: \`loadFont(\'path/to/font.ttf\')\` (TTF/OTF), \`getTextTriangles(font, text, x, y, size)\` → triangles, \`drawText(draw2d, font, text, x, y, size, r, g, b, a)\`, \`measureText(font, text, size)\`. Any font, any size; draw with \`fillTriangles\` for full control.
-- **3D**: Use \`ctx.gl\` directly: buffers, shaders, matrices. Implement camera (view/projection), meshes, and lighting in shaders.
-- **Lighting**: In 3D shaders use uniforms for light position/color; in 2D use tint or custom fragment shaders.
-- **Assets**: Load images (decode PNG with pngjs or similar), upload to \`ctx.gl\` textures; load audio (see sound).
-- **Sound**: \`ctx.sdl.audio\` (SDL audio) — open device, enqueue buffers. Or add a small wrapper in your game.
-- **Visuals**: Full WebGL — post-process by rendering to framebuffer, then to screen; particles, blur, etc. in shaders.
-- **UI / Buttons**: \`fillRect\` + \`strokeRect\` for panels/buttons, \`drawText\` for labels. \`isPointInRect(px, py, x, y, w, h)\` for hit-test. Track \`ctx.input.mouseX\`, \`mouseY\`, \`mouseLeft\` in \`update\` and draw any style in code.
-- **Camera**: 2D: store \`offsetX, offsetY, scale\` and pass to your draw calls or a uniform. 3D: \`view\` and \`projection\` matrices from position/target/up and perspective.
+---
 
-All of this is done in your \`Game.ts\` using \`ctx.gl\`, \`ctx.input\`, and the exported helpers (createDraw2D, loadFont, drawText, isPointInRect, etc.).
+## Game lifecycle
+
+Your game exports a default object implementing **IGame**:
+
+- **init?(ctx, config)** — Called once. Use to create \`createDraw2D(ctx.gl)\`, load fonts, etc.
+- **update(dt)** — Called every frame. \`dt\` = seconds since last frame. Handle input, physics, UI state.
+- **draw()** — Called every frame after \`update\`. Draw with your draw2d, text, or \`ctx.gl\`.
+- **dispose?()** — Called when the window closes. Free resources (draw2d.dispose(), etc.).
+
+**GameContext** \`ctx\`: \`ctx.gl\` (WebGL 1), \`ctx.input\`, \`ctx.width\`, \`ctx.height\` (updates on resize).
+
+---
+
+## Input
+
+\`\`\`ts
+ctx.input.mouseX          // number (pixels)
+ctx.input.mouseY
+ctx.input.mouseLeft       // boolean
+ctx.input.mouseRight
+ctx.input.mouseMiddle
+ctx.input.isKeyDown(SCANCODE.W)   // boolean — use SCANCODE.* for keys
+\`\`\`
+
+**SCANCODE**: \`A\`–\`Z\`, \`Space\`, \`Escape\`, \`Up\`, \`Down\`, \`Left\`, \`Right\`, \`Enter\`, \`Shift\`, \`Ctrl\`, \`Tab\`.
+
+---
+
+## 2D drawing
+
+\`\`\`ts
+const draw2d = createDraw2D(ctx.gl)   // in init
+
+draw2d.clear(0.1, 0.1, 0.15, 1)
+draw2d.fillRect(100, 100, 80, 40, 0.2, 0.6, 0.9, 1)   // x, y, w, h, r, g, b, a
+draw2d.strokeRect(98, 98, 84, 44, 1, 1, 1, 1)         // outline (e.g. button border)
+draw2d.fillTriangles(verts, 1, 0, 0, 1)               // verts: Float32Array [x,y, x,y, x,y, ...]
+\`\`\`
+
+Coordinates: origin top-left; y increases down. All in pixels.
+
+---
+
+## Text (any font, size, color)
+
+\`\`\`ts
+const font = await loadFont('assets/MyFont.ttf')   // TTF or OTF, in init
+
+drawText(draw2d, font, 'Score: 100', 20, 20, 24, 1, 1, 1, 1)   // x, y, size, r, g, b, a
+
+// Or get triangles and draw yourself (e.g. cache or custom color):
+const tri = getTextTriangles(font, 'Hello', 0, 0, 32)
+draw2d.fillTriangles(tri, 0, 1, 0, 1)
+
+const { width, height } = measureText(font, 'Hello', 32)   // for layout
+\`\`\`
+
+---
+
+## UI / buttons
+
+\`\`\`ts
+// In update():
+if (ctx.input.mouseLeft && isPointInRect(ctx.input.mouseX, ctx.input.mouseY, 100, 100, 80, 40)) {
+  // button clicked
+}
+
+// In draw(): draw the button with fillRect + strokeRect + drawText (any style you want)
+\`\`\`
+
+\`isPointInRect(px, py, x, y, w, h)\` — returns true if (px, py) is inside the rect. Build menus, HUDs, and custom-styled buttons in code.
+
+---
+
+## Textures (images / sprites)
+
+\`\`\`ts
+const { texture, width, height } = await loadTexture(ctx.gl, 'assets/sprite.png')   // in init
+// Bind and draw with your own shader; helper only does load + upload.
+gl.bindTexture(gl.TEXTURE_2D, texture)
+// ... your quad + sampler2D shader
+\`\`\`
+
+\`loadTexture(gl, path)\` returns \`{ texture, width, height }\`. You own the texture; use \`ctx.gl\` for the rest.
+
+---
+
+## Raw WebGL — do anything
+
+\`ctx.gl\` is a **full WebGL 1** context. No wrapper. Use it for custom shaders, 3D, framebuffers, MSAA, texture arrays, etc. You have full control.
+
+---
+
+## Full SDL — do anything
+
+\`sdl\` is the full [@kmamal/sdl](https://github.com/kmamal/node-sdl) module. Use it directly:
+
+- **sdl.video** — displays, windows
+- **sdl.keyboard**, **sdl.mouse**, **sdl.touch** — input
+- **sdl.audio** — playback/recording (see below)
+- **sdl.joystick**, **sdl.controller** — gamepads
+- **sdl.sensor** — accelerometer/gyro
+- **sdl.clipboard**, **sdl.power** — clipboard, battery
+
+### Minimal SDL audio (playback)
+
+\`\`\`ts
+import { sdl } from '../../scripts/index.js'
+
+// In init: get playback devices, open one, enqueue buffers (e.g. decoded WAV).
+const devices = sdl.audio.getDevices().filter(d => d.type === 'playback')
+const device = devices[0]
+if (device) {
+  const playback = sdl.audio.openDevice(device, {
+    format: 's16',
+    frequency: 44100,
+    channels: 2,
+    samples: 1024,
+    callback: (buffer) => { /* fill buffer with samples */ }
+  })
+  // Keep playback in scope; call playback.destroy() in dispose()
+}
+\`\`\`
+
+SDL expects raw PCM in the callback (e.g. 16-bit stereo). Decode WAV/MP3 yourself or use a library; then fill the buffer. No high-level \`playSound(file)\`; you get full control.
+
+---
+
+## Node / OS — do anything
+
+Your game runs in **Node.js**. Use \`import 'fs'\`, \`import 'path'\`, \`child_process\`, or any npm package. File I/O, save data, scripting — nothing is locked down.
+
+---
+
+## Beyond this
+
+- **Camera**: 2D — store \`offsetX\`, \`offsetY\`, \`scale\` and pass to draw calls or a uniform. 3D — \`view\` and \`projection\` matrices.
+- **Assets**: Fonts → \`loadFont('assets/...')\`. Images → \`loadTexture(ctx.gl, 'assets/...')\`. Audio → \`sdl.audio\` + decode + buffers.
 `
   await writeFile(join(projectPath, 'README.md'), readme)
   await writeFile(join(projectPath, 'FRAMEWORK.md'), frameworkMd)

package/dist/scripts/Texture.d.ts

@@ -0,0 +1,12 @@
+import type { WebGLRenderingContext as GLContext } from '@kmamal/gl';
+export interface LoadedTexture {
+    texture: WebGLTexture;
+    width: number;
+    height: number;
+}
+/**
+ * Load PNG from path (relative to cwd or absolute), upload to GL, return texture and size.
+ * You own the texture; bind and draw with your own shader or use raw gl.
+ */
+export declare function loadTexture(gl: GLContext, path: string): Promise<LoadedTexture>;
+//# sourceMappingURL=Texture.d.ts.map

package/dist/scripts/Texture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Texture.d.ts","sourceRoot":"","sources":["../../scripts/Texture.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEpE,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,YAAY,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,wBAAsB,WAAW,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAoBrF"}

package/dist/scripts/Texture.js

@@ -0,0 +1,32 @@
+/**
+ * Load a PNG from path and upload to a WebGL texture. Minimal helper; use ctx.gl for everything else.
+ */
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import pngjs from 'pngjs';
+/**
+ * Load PNG from path (relative to cwd or absolute), upload to GL, return texture and size.
+ * You own the texture; bind and draw with your own shader or use raw gl.
+ */
+export async function loadTexture(gl, path) {
+    const abs = path.startsWith('/') || /^[A-Za-z]:/.test(path) ? path : join(process.cwd(), path);
+    const buf = await readFile(abs);
+    const pngjsMod = pngjs;
+    const PNG = pngjsMod.default?.PNG ?? pngjsMod.PNG;
+    const png = PNG.sync.read(buf);
+    const width = png.width;
+    const height = png.height;
+    const data = Buffer.isBuffer(png.data)
+        ? png.data
+        : (png.data instanceof Uint8Array ? png.data : new Uint8Array(png.data));
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return { texture, width, height };
+}
+//# sourceMappingURL=Texture.js.map

package/dist/scripts/Texture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Texture.js","sourceRoot":"","sources":["../../scripts/Texture.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,EAAa,EAAE,IAAY;IAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC,CAAA;IAC9F,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAA;IAC/B,MAAM,QAAQ,GAAG,KAA6N,CAAA;IAC9O,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,QAAQ,CAAC,GAAG,CAAA;IACjD,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC9B,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAA;IACvB,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAA;IACzB,MAAM,IAAI,GAAwB,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;QACzD,CAAC,CAAC,GAAG,CAAC,IAAI;QACV,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,YAAY,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,GAAG,CAAC,IAAyB,CAAC,CAAC,CAAA;IAC/F,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,EAAG,CAAA;IACnC,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;IACtC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAA;IAC3F,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC,CAAA;IACpE,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC,CAAA;IACpE,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,CAAA;IACjE,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,CAAA;IACjE,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,IAA+B,CAAC,CAAA;IAC9D,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA;AACnC,CAAC"}

package/dist/scripts/index.d.ts

@@ -7,4 +7,6 @@ export type { Draw2D } from './Graphics.js';
 export { loadFont, getTextTriangles, drawText, measureText } from './Text.js';
 export type { Font } from './Text.js';
 export { isPointInRect } from './UI.js';
+export { loadTexture } from './Texture.js';
+export type { LoadedTexture } from './Texture.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/scripts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../scripts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAC3D,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAClD,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC7C,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC7E,YAAY,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../scripts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAC3D,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAClD,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC7C,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC7E,YAAY,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}

package/dist/scripts/index.js

@@ -2,4 +2,5 @@ export { run, sdl, createInput, SCANCODE } from './Game.js';
 export { createDraw2D } from './Graphics.js';
 export { loadFont, getTextTriangles, drawText, measureText } from './Text.js';
 export { isPointInRect } from './UI.js';
+export { loadTexture } from './Texture.js';
 //# sourceMappingURL=index.js.map

package/dist/scripts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../scripts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAI3D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../scripts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAI3D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-gamenative-app",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Native TypeScript framework for desktop games — no game engine, just SDL + WebGL.",
   "type": "module",
   "main": "dist/scripts/main.js",

package/scripts/Texture.ts

@@ -0,0 +1,39 @@
+/**
+ * Load a PNG from path and upload to a WebGL texture. Minimal helper; use ctx.gl for everything else.
+ */
+import { readFile } from 'fs/promises'
+import { join } from 'path'
+import pngjs from 'pngjs'
+import type { WebGLRenderingContext as GLContext } from '@kmamal/gl'
+
+export interface LoadedTexture {
+  texture: WebGLTexture
+  width: number
+  height: number
+}
+
+/**
+ * Load PNG from path (relative to cwd or absolute), upload to GL, return texture and size.
+ * You own the texture; bind and draw with your own shader or use raw gl.
+ */
+export async function loadTexture(gl: GLContext, path: string): Promise<LoadedTexture> {
+  const abs = path.startsWith('/') || /^[A-Za-z]:/.test(path) ? path : join(process.cwd(), path)
+  const buf = await readFile(abs)
+  const pngjsMod = pngjs as { default?: { PNG: { sync: { read(b: Buffer): { width: number; height: number; data: Buffer | Uint8Array } } } }; PNG: { sync: { read(b: Buffer): { width: number; height: number; data: Buffer | Uint8Array } } } }
+  const PNG = pngjsMod.default?.PNG ?? pngjsMod.PNG
+  const png = PNG.sync.read(buf)
+  const width = png.width
+  const height = png.height
+  const data: Buffer | Uint8Array = Buffer.isBuffer(png.data)
+    ? png.data
+    : (png.data instanceof Uint8Array ? png.data : new Uint8Array(png.data as ArrayLike<number>))
+  const texture = gl.createTexture()!
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+  gl.bindTexture(gl.TEXTURE_2D, null as unknown as WebGLTexture)
+  return { texture, width, height }
+}

package/scripts/index.ts

@@ -7,3 +7,5 @@ export type { Draw2D } from './Graphics.js'
 export { loadFont, getTextTriangles, drawText, measureText } from './Text.js'
 export type { Font } from './Text.js'
 export { isPointInRect } from './UI.js'
+export { loadTexture } from './Texture.js'
+export type { LoadedTexture } from './Texture.js'