Bundle export
Bundle export
https://morgondag.io/pages/bit-bundle-export
Bundle export is a simple data format that contains all the instructions needed to render the assets exactly like in the editor. It can be reached in the export menu or by pressing CTRL+B. The bundle format collects all sprites, asset data, and entity data and exports this into a minimal zip package. If there are any color palettes applied before exporting, all the exported sprites will have that color applied to them.
File structure
The zip file can look like this when exported
bit.json: It contains your entire project data, library assets, and scene entities as well as the scene configurations.
timelapse.json: It contains all the past states of the bit.json data. Use this to step through your asset history and time-lapse.
bit.txt: Just an informative editor file.
.png-files: All your used library assets sprites and sprite sheets. These have ids that are connected with the bit.json data ids.
JSON data
The data file contains raw JSON that can be parsed to import/render the bundle.
| Key | Type | Description |
|---|---|---|
| name | string | the project name |
| version | string (semver) | what version of the editor was this project exported width. |
| width | number | the project and scene's width. |
| height | number | the project and scene's height. |
| scale | number | the project and scene's pixel rendering scale. This explains how large the entities should be rendered at. |
| background | Array | the background color expressed in a array with three RGB values between 0-255. |
| created | timestamp | a timestamp when this project was created. |
| exported | timestamp | a timestamp when this project was exported. |
| updated | timestamp | a timestamp when this project was last updated(saved). |
| isTransparent | boolean | a boolean if this project should have a transparent background instead of the background color. |
| isAnimated | boolean | is this project animated or should the animations be disabled. |
| palette | Array | this contains all the color palette data. |
| scene | Array | this contains all the scene entities' data. |
| assets | Array | this contains all library assets' data. |
| Key | Type | Description |
|---|---|---|
| convertFrom | array | a color expressed in a array with three RGB values between 0-255. This is the color that should be converted from. |
| covertTo | array | a color expressed in a array with three RGB values between 0-255. This is the color the above color should be converted to. |
| Key | Type | Description |
|---|---|---|
| id | string | the unique id of the asset. |
| name | string | the name that shows up in the editor. |
| sprite | string | the PNG filename of this asset. this should match the one of the exported PNG files in the zip. |
| category | string | the asset's category name. |
| subcategory | string | the asset's subcategory name. |
| created | timestamp | when this asset was created. |
| updated | timestamp | when this asset was updated. |
| defaultTile | number | the asset's default tile to render if there is no active sprite sheet animation on entities. |
| spriteSize | object | with x and y contains number, this is the expected sprites full size. |
| tileSize | object | with x and y contains number, this is the configured tile size. |
| animations | array | contains the sprite sheet animation data. |
| Key | Type | Description |
|---|---|---|
| id | string | the unique id of the animation. |
| currentName | string | the name of the sprite sheet animation |
| name | string | the name of the sprite sheet animation |
| frameskip | number | how many frames to skip before going to the next tile. |
| tiles | number-array | contains the index of the asset's tile to show in a sequential step. |
| Key | Type | Description |
|---|---|---|
| id | string | the unique id of the scene entity. |
| assetId | string | the library asset to use for this entity. |
| name | string | the name of the sprite sheet animation |
| isActive | boolean | if this entity is active in the editor. |
| data | object | the data configuration for this entity. |
| Key | Type | Description |
|---|---|---|
| alpha | number | the rendering alpha from 0-255, where 255 is no transparent. |
| animationIndex | number | the current selected sprite sheet animation index. -1 if none is picked. |
| animationsEnabled | boolean | if tweening should be enabled or not. |
| defaultTile | number | the current selected sprite sheet tile to render. |
| flipX | boolean | flip the entity horizontally. |
| flipY | boolean | flip the entity vertically. |
| initialAnimationDelay | float | initial tween delay when the scene is rendered. |
| isLocked | boolean | if the entity is locked in the scene editor. |
| isVisible | boolean | toggle visibility for the entity. |
| mirror | Object X & Y number | the mirror offset numbers in x and y. |
| mirrorX | boolean | should the entity be mirrored horizontally. |
| mirrorY | boolean | should the entity be mirrored vertically. |
| position | object & Y number | the entities position on the screen from the center of the scene. |
| repeatXCount | number | how many times the entity's render should be repeated horizontally. One per each side of the original. |
| repeatXOffset | number | the distance between the repeated copies horizontally. |
| repeatYCount | number | how many times the entity's render should be repeated vertically. One per each side of the original. |
| repeatYOffset | number | the distance between the repeated copies vertically. |
| rotateRepeat | number | how many times should the entity be rendered with a rotated variant behind. |
| rotateRepeatSpace | number | amount of degrees between each rotated repeat. |
| animatedrotateRepeatSpeed | float | rotate speed to increment entity's rotation per frame, for the repeated counted elements. |
| rotation | number | the entity's base rotation without being animated. |
| rotationSpeed | float | rotate speed to increment entity's rotation per frame. |
| tint | Array-number 0-1 * 255 | a color expressed in a array with three RGB values between 0-1 but can be rounded and * 255. The current entity's color tint, this is applied after color palette. |
| animations | array | the configuration object for tween animations. |
| Key | Type | Description |
|---|---|---|
| delay | float | ms before the animation starts tweening. |
| duration | float | the duration in ms of the tween. |
| easing | enum | easing algorithms to use. |
| data | object | contains a bool per toggled tween option followed by a number. If the option is set to true you should animate that part. |
Asset vs Entity
Set up the scene.
Easing algorithms
Easing is set up as ways to control how the different number changes are translated over time. See https://easings.net
Easing used and their index:
enum Easing {
Linear,
QuadIn,
QuadOut,
QuadInOut,
CubeIn,
CubeOut,
CubeInOut,
QuartIn,
QuartOut,
QuartInOut,
QuintIn,
QuintOut,
QuintInOut,
SineIn,
SineOut,
SineInOut,
ExpoIn,
ExpoOut,
ExpoInOut,
CircIn,
CircOut,
CircInOut,
};
Render loop
The render loop is set to 60fps. Speeding this up will not affect tween but will have an impact on sprite sheets animations, frame-delays, and rotations.
There is a tween update pass, update pass, and then a render loop for each of the entities in the scene array of the main object. These are rendered in a reveres for-loop.