Data oriented game engine based on ECSY.
npm install white-dwarfrelease.html as release version of your game.
dist/editor.html to your output directory.
src/editor.ts, src/index.ts, src/release.ts as entry points.
package.json with 3 more tasks:
json
"scripts": {
"build": "esbuild src/index.ts --bundle --outfile=dist/release.js",
"watch-editor": "esbuild src/editor.ts --bundle --sourcemap --outfile=dist/editor.js --watch",
"watch-release": "esbuild src/release.ts --bundle --sourcemap --outfile=dist/release.js --watch"
}
`
You can config output canvas in release.ts by:
`ts
// Setup main canvas.
coreRenderContext.mainCanvas = document.getElementById(
"mainCanvas"
) as HTMLCanvasElement;
`
Details will be covered latter.
White Dwarf Editor
!picture 1
$3
The white dwarf editor contains 3 working spaces: world editor, entity list, and entity inspector.
Right Click to move around. Scroll to zoom in and out. Left Click to select an entity from the entity list or the world editor.
Notice that Editor Main Camera is shown in the entity list, but it will not be instantiated in release mode.
Click Play to switch from release preview and editor mode.
$3
To create a new entity, enter entity name and click Create Entity at the bottom of entity list.
!picture 3
To add components, select one from the inspector component dropdown, and click Add Component.
!picture 4
Notice that some of the components will NOT show in your editor. Components will be shown ONLY IF there are Systems using them. This is a esbuild compile issue.
$3
White Dwarf supports prefabs and world serialization. To create a prefab, select an entity and click Serialize Entity in the inspector. This will create an entity prefab json file.
To import a prefab, click Load Entity at the bottom of entity list, and select a prefab json file. This will load the prefab into the scene.
To save a world, just click Serialize & Save World in the tool bar. To load a world, click Load World and choose a world json file.
!picture 5
$3
One of the feature supported by White Dwarf is hermite curve editing and animation.
When a hermiet curve data component is added to an entity, a curve preview will be shown when the entity is selected.
!picture 6
To edit the curve, you can add and remove segments in the HermiteCurveData editor. This feature is implemented by custom editor API provided by White Dwarf. More details will be covered latter.
To apply hermite curve animation to an entity, add HermiteCurveMoveData` component to the entity.