create-gamenative-app 0.1.5 → 0.1.7

package/scripts/Text.ts

@@ -0,0 +1,159 @@
+/**
+ * Text rendering: load TTF/OTF fonts, tessellate glyphs to triangles, draw at any size.
+ * Use with createDraw2D().fillTriangles() for full control over color and style.
+ */
+import opentype from 'opentype.js'
+import earcut from 'earcut'
+import { readFile } from 'fs/promises'
+import { join } from 'path'
+
+export type Font = {
+  getPath: (text: string, x: number, y: number, fontSize: number) => { commands: PathCommand[] }
+}
+
+type PathCommand =
+  | { type: 'M'; x: number; y: number }
+  | { type: 'L'; x: number; y: number }
+  | { type: 'Q'; x: number; y: number; x1: number; y1: number }
+  | { type: 'C'; x: number; y: number; x1: number; y1: number; x2: number; y2: number }
+
+function flattenCommands(commands: PathCommand[]): number[][] {
+  const contours: number[][] = []
+  let current: number[] = []
+  let lastX = 0
+  let lastY = 0
+
+  const push = (x: number, y: number) => {
+    current.push(x, y)
+    lastX = x
+    lastY = y
+  }
+
+  for (const cmd of commands) {
+    if (cmd.type === 'M') {
+      if (current.length >= 6) contours.push(current)
+      current = []
+      push(cmd.x, cmd.y)
+    } else if (cmd.type === 'L') {
+      push(cmd.x, cmd.y)
+    } else if (cmd.type === 'Q') {
+      for (let t = 1; t <= 4; t++) {
+        const s = t / 4
+        const u = 1 - s
+        const x = u * u * lastX + 2 * u * s * cmd.x1 + s * s * cmd.x
+        const y = u * u * lastY + 2 * u * s * cmd.y1 + s * s * cmd.y
+        push(x, y)
+      }
+    } else if (cmd.type === 'C') {
+      for (let t = 1; t <= 8; t++) {
+        const s = t / 8
+        const u = 1 - s
+        const x =
+          u * u * u * lastX +
+          3 * u * u * s * cmd.x1 +
+          3 * u * s * s * cmd.x2 +
+          s * s * s * cmd.x
+        const y =
+          u * u * u * lastY +
+          3 * u * u * s * cmd.y1 +
+          3 * u * s * s * cmd.y2 +
+          s * s * s * cmd.y
+        push(x, y)
+      }
+    }
+  }
+  if (current.length >= 6) contours.push(current)
+  return contours
+}
+
+function signedArea(contour: number[]): number {
+  let sum = 0
+  const n = contour.length / 2
+  for (let i = 0; i < n; i++) {
+    const j = (i + 1) % n
+    sum += (contour[2 * j] - contour[2 * i]) * (contour[2 * j + 1] + contour[2 * i + 1])
+  }
+  return sum * 0.5
+}
+
+/**
+ * Load a TTF or OTF font from path (relative to cwd or absolute).
+ */
+export async function loadFont(path: string): Promise<Font> {
+  const abs = path.startsWith('/') || /^[A-Za-z]:/.test(path) ? path : join(process.cwd(), path)
+  const buffer = await readFile(abs)
+  const ab = buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength)
+  return opentype.parse(ab) as unknown as Font
+}
+
+/**
+ * Tessellate text into triangles in pixel space. (x, y) = top-left of text; y-axis down.
+ * Use with draw2d.fillTriangles(triangles, r, g, b, a).
+ */
+export function getTextTriangles(font: Font, text: string, x: number, y: number, size: number): Float32Array {
+  const path = font.getPath(text, 0, 0, size)
+  const commands = path.commands as PathCommand[]
+  const contours = flattenCommands(commands)
+  if (contours.length === 0) return new Float32Array(0)
+
+  const areas = contours.map((c) => signedArea(c))
+  const outerIdx = areas.reduce((best, a, i) => (Math.abs(a) > Math.abs(areas[best]) ? i : best), 0)
+  const outer = contours[outerIdx]
+  const holes: number[][] = contours.filter((_, i) => i !== outerIdx)
+  const verts: number[] = [...outer]
+  const holeIndices: number[] = []
+  for (const h of holes) {
+    holeIndices.push(verts.length / 2)
+    verts.push(...h)
+  }
+  const indices = earcut(verts, holeIndices, 2)
+  const out: number[] = []
+  for (let i = 0; i < indices.length; i += 3) {
+    const i0 = indices[i] * 2
+    const i1 = indices[i + 1] * 2
+    const i2 = indices[i + 2] * 2
+    out.push(x + verts[i0], y + size - verts[i0 + 1])
+    out.push(x + verts[i1], y + size - verts[i1 + 1])
+    out.push(x + verts[i2], y + size - verts[i2 + 1])
+  }
+  return new Float32Array(out)
+}
+
+/**
+ * Measure text width and height at given size (approximate from path bounds).
+ */
+export function measureText(font: Font, text: string, size: number): { width: number; height: number } {
+  const path = font.getPath(text, 0, 0, size)
+  const commands = path.commands as PathCommand[]
+  let x1 = Infinity
+  let y1 = Infinity
+  let x2 = -Infinity
+  let y2 = -Infinity
+  for (const c of commands) {
+    const x = 'x' in c ? c.x : 0
+    const y = 'y' in c ? c.y : 0
+    x1 = Math.min(x1, x)
+    y1 = Math.min(y1, y)
+    x2 = Math.max(x2, x)
+    y2 = Math.max(y2, y)
+  }
+  if (x1 === Infinity) return { width: 0, height: size }
+  return { width: x2 - x1, height: y2 - y1 }
+}
+
+/** Draw text with a Draw2D instance. (x,y) = top-left, y-axis down. */
+export function drawText(
+  draw2d: { fillTriangles: (v: Float32Array, r: number, g: number, b: number, a?: number) => void },
+  font: Font,
+  text: string,
+  x: number,
+  y: number,
+  size: number,
+  r: number,
+  g: number,
+  b: number,
+  a = 1
+): void {
+  const tri = getTextTriangles(font, text, x, y, size)
+  if (tri.length > 0) draw2d.fillTriangles(tri, r, g, b, a)
+}

package/scripts/UI.ts

@@ -0,0 +1,8 @@
+/**
+ * Minimal UI helpers. Build buttons, panels, and any style in your game code.
+ */
+
+/** Hit-test: true if (px, py) is inside the rectangle [x, y, w, h]. */
+export function isPointInRect(px: number, py: number, x: number, y: number, w: number, h: number): boolean {
+  return px >= x && px < x + w && py >= y && py < y + h
+}

package/{src → scripts}/config.ts

@@ -8,7 +8,7 @@ export interface AppConfig {
     height?: number
     icon?: string
   }
-  /** Game name (no extension). Resolved to src/games/<game>.ts in dev, dist/games/<game>.js in prod. */
+  /** Game name (no extension). Resolved to src/games/<game>.ts in dev, dist/src/games/<game>.js in prod. */
   game?: string
 }
 

package/scripts/earcut.d.ts

@@ -0,0 +1,4 @@
+declare module 'earcut' {
+  function earcut(vertices: number[], holes?: number[], dimensions?: number): number[]
+  export default earcut
+}

package/{src → scripts}/index.ts

@@ -4,3 +4,6 @@ export type { GameContext } from './types.js'
 export type { InputState } from './Input.js'
 export { createDraw2D } from './Graphics.js'
 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'

package/{src → scripts}/main.ts

@@ -14,7 +14,7 @@ async function main() {
   const isPkg = typeof (process as { pkg?: unknown }).pkg !== 'undefined'
   const gamePath =
     isPkg || !isDev
-      ? join(__dirname, 'games', `${gameName}.js`)
+      ? join(__dirname, '..', 'src', 'games', `${gameName}.js`)
       : join(process.cwd(), 'src', 'games', `${gameName}.ts`)
   const href = pathToFileURL(gamePath).href
 

package/scripts/opentype.d.ts

@@ -0,0 +1,8 @@
+declare module 'opentype.js' {
+  const opentype: {
+    parse(buffer: ArrayBuffer): {
+      getPath: (text: string, x: number, y: number, fontSize: number) => { commands: unknown[] }
+    }
+  }
+  export default opentype
+}

package/scripts/set-exe-icon.js

@@ -0,0 +1,36 @@
+/**
+ * Embeds assets/icon.png into the built .exe so the Windows taskbar shows it.
+ * Run after pkg on Windows only. Usage: node scripts/set-exe-icon.js release/MyGame.exe
+ */
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+if (process.platform !== 'win32') process.exit(0)
+
+const exePath = process.argv[2]
+if (!exePath) process.exit(0)
+
+const iconPng = join(process.cwd(), 'assets', 'icon.png')
+if (!existsSync(iconPng)) process.exit(0)
+
+try {
+  const toIco = (await import('to-ico')).default
+  const { rcedit } = await import('rcedit')
+
+  const pngBuffer = readFileSync(iconPng)
+  const icoBuffer = await toIco([pngBuffer])
+  const releaseDir = join(process.cwd(), 'release')
+  mkdirSync(releaseDir, { recursive: true })
+  const icoPath = join(releaseDir, 'icon.ico')
+  writeFileSync(icoPath, icoBuffer)
+
+  const absExe = join(process.cwd(), exePath)
+  if (existsSync(absExe)) {
+    await rcedit(absExe, { icon: icoPath })
+  }
+} catch {
+  // Optional: rcedit/to-ico may be missing or fail
+}

package/src/games/ExampleGame.ts

@@ -1,5 +1,5 @@
-import { createDraw2D, SCANCODE } from '../index.js'
-import type { GameContext, IGame } from '../types.js'
+import { createDraw2D, SCANCODE } from '../../scripts/index.js'
+import type { GameContext, IGame } from '../../scripts/types.js'
 
 interface ExampleGame extends IGame {
   ctx: GameContext | null

package/tsconfig.json

@@ -13,6 +13,6 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true
   },
-  "include": ["src/**/*.ts"],
+  "include": ["scripts/**/*.ts","src/**/*.ts"],
   "exclude": ["node_modules", "dist"]
 }