62 lines
2.9 KiB
HTML
62 lines
2.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Plugin System: Sprite Editor</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: #fff; padding: 15px; border-radius: 6px; overflow-x: auto; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Plugin Architecture: Sprite Editor</h1>
|
||
|
|
<p>This plugin acts as a <strong>feature-set provider</strong>. It does two things: it injects a toolset into the React Editor UI and provides the serialization logic to convert 16x16 pixel arrays into your project's JSON format.</p>
|
||
|
|
|
||
|
|
<h2>1. The Plugin Structure</h2>
|
||
|
|
<p>To make this "pop in," the plugin exports a UI component for React and a logic object for the Engine.</p>
|
||
|
|
|
||
|
|
<pre><code>// plugins/SpriteEditorPlugin.js
|
||
|
|
export const SpriteEditorPlugin = {
|
||
|
|
id: 'sprite-editor',
|
||
|
|
|
||
|
|
// 1. Injected UI for React
|
||
|
|
renderTool(editorProps) {
|
||
|
|
return <SpriteToolUI palette={PICO8_PALETTE} {...editorProps} />;
|
||
|
|
},
|
||
|
|
|
||
|
|
// 2. Logic for serialization
|
||
|
|
serialize(pixelData) {
|
||
|
|
// Converts 16x16 array to compact JSON
|
||
|
|
return {
|
||
|
|
type: 'sprite',
|
||
|
|
size: 16,
|
||
|
|
data: btoa(pixelData.join('')) // Base64 encoding for size
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};</code></pre>
|
||
|
|
|
||
|
|
<h2>2. Dynamic Injection</h2>
|
||
|
|
<p>Your main Editor shell uses an "Extension Registry." On boot, it iterates through loaded plugins and asks if they have a <code>renderTool</code> method. If they do, it mounts them into the Sidebar.</p>
|
||
|
|
|
||
|
|
<pre><code>// EditorSidebar.jsx
|
||
|
|
function EditorSidebar({ plugins }) {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
{plugins.map(p => p.renderTool && p.renderTool())}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}</code></pre>
|
||
|
|
|
||
|
|
<h2>3. The "Tooling" Workflow</h2>
|
||
|
|
<ol>
|
||
|
|
<li><strong>Discovery:</strong> The Editor scans the <code>/plugins</code> directory.</li>
|
||
|
|
<li><strong>Registration:</strong> It adds <code>SpriteEditorPlugin</code> to the central <code>PluginRegistry</code>.</li>
|
||
|
|
<li><strong>UI Mounting:</strong> React sees the new tool in the Registry and dynamically renders the 16x16 canvas component in the sidebar.</li>
|
||
|
|
<li><strong>Serialization:</strong> When the user hits "Save," the Editor loops through all registered plugins, calling their <code>serialize()</code> method to bundle the file.</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>4. Why this keeps the Engine clean</h2>
|
||
|
|
<p>The Core Engine doesn't know "Sprite Editor" exists. It only knows that when it loads a map file, it might contain a <code>sprite</code> data block. The plugin handles the complexity of the 16x16 grid math and color palette, while the Engine just treats the result as another JSON asset to be rendered by PixiJS.</p>
|
||
|
|
</body>
|
||
|
|
</html>
|