54 lines
2.9 KiB
HTML
54 lines
2.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Plugin System: TypeScript Export</title>
|
||
|
|
<style>
|
||
|
|
body { font-family: sans-serif; line-height: 1.6; max-width: 800px; margin: 40px auto; padding: 0 20px; color: #333; }
|
||
|
|
code { background: #f4f4f4; padding: 2px 4px; border-radius: 4px; }
|
||
|
|
pre { background: #2d2d2d; color: #ccc; padding: 15px; border-radius: 6px; overflow-x: auto; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Exporting to TypeScript</h1>
|
||
|
|
<p>Instead of relying on <code>JSON.parse()</code> at runtime, this plugin converts your 16x16 sprite data into static TypeScript files. This allows your IDE to provide autocomplete for your assets and ensures your data structure is validated at compile time.</p>
|
||
|
|
|
||
|
|
<h2>1. The TypeScript Exporter Plugin</h2>
|
||
|
|
<pre><code>// plugins/TypeScriptExporter.js
|
||
|
|
export const TypeScriptExporter = {
|
||
|
|
id: 'ts-exporter',
|
||
|
|
|
||
|
|
// Transforms internal pixel grid to a TypeScript source string
|
||
|
|
generateExport(spriteName, pixelData) {
|
||
|
|
const typeDefinition = `export interface SpriteData { name: string; pixels: number[]; }`;
|
||
|
|
const dataConstant = `export const ${spriteName}: SpriteData = {
|
||
|
|
name: "${spriteName}",
|
||
|
|
pixels: ${JSON.stringify(pixelData)}
|
||
|
|
};`;
|
||
|
|
|
||
|
|
return `${typeDefinition}\n\n${dataConstant}`;
|
||
|
|
}
|
||
|
|
};</code></pre>
|
||
|
|
|
||
|
|
<h2>2. The Workflow: From Canvas to Code</h2>
|
||
|
|
<ol>
|
||
|
|
<li><strong>Tooling:</strong> The user draws on the 16x16 canvas in the React Editor.</li>
|
||
|
|
<li><strong>Serialization:</strong> The Editor calls <code>TypeScriptExporter.generateExport('hero_walk', pixels)</code>.</li>
|
||
|
|
<li><strong>Write to Disk:</strong> The Editor (via Electron/Tauri/Node) saves the resulting string as <code>src/assets/hero_walk.ts</code>.</li>
|
||
|
|
<li><strong>Runtime Usage:</strong> In your game code, you simply import the asset:
|
||
|
|
<pre><code>import { hero_walk } from './assets/hero_walk';
|
||
|
|
console.log(hero_walk.pixels); // Type-safe and immediately available</code></pre>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>3. Why Export to TS?</h2>
|
||
|
|
<ul>
|
||
|
|
<li><strong>Zero Parse Latency:</strong> Your game doesn't need to load or parse JSON files at startup; the data is bundled directly into your application code.</li>
|
||
|
|
<li><strong>Type Safety:</strong> If you change your sprite format, TypeScript will throw an error immediately, preventing runtime crashes.</li>
|
||
|
|
<li><strong>Bundler Optimization:</strong> Webpack/Vite/Esbuild can tree-shake your assets, ensuring only the sprites you actually import are included in your final production build.</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2>4. Architecture Tip: Dual-Mode</h2>
|
||
|
|
<p>You might want to keep the raw JSON for the editor to load/save while working, and use the TypeScript exporter only for the final build pipeline. This keeps your editor fast and iterative while making your runtime lean and performant.</p>
|
||
|
|
</body>
|
||
|
|
</html>
|