PixelBox

PixelBox is an extension for three.js, for rendering voxel sprites.

It includes base classes, a sprite and scene editor, and some examples.

PixelBox was originally developed to create Santa Drop game for iOS, and then expanded with extra tools and released as open source.

Examples

• Example 1: Single scene
• Example 2: Transitions and composer
• Example 3: Animations and tweens
• Example 4: Instancing templates and object recycling
• Example 5: Animation events
• Example 6: Snow
• Example 7: Paths
• Example 8: CANNON physics
• Example 9: Animated sprites

Links

• PixelBox Scene Editor
• Documentation on github.com
• Project page on github.com

PixelBox sprites

• Based on THREE.PointCloud.
• Multiple named animations, that can be played or looped at variable speed, forward or backward.
• Named anchors that are animated along with sprite's frames. They can be used, for example, to specify where the character's hand is during different animations. Other objects can be added to anchors, which serve as simple containers.
• Ability to tween any property, such as opacity, position, or color.
• Support transparent and self-illuminated voxels.
• Cast and receive shadows.
• Transformation pivot point.
• Sprite opacity, tint, and additive color.
• Sprite stipple (pattern transparency).
• Animation and anchor events.
• Static scenery can be merged into a single pointcloud for faster drawing.

PixelBoxScene class

• Parses / populates scenes created with PixelBox scene editor.
• Easy scene hierarchy access by object name. e.g.

  scene.robot.head.eyeball

• Supports instancing of templates created with scene editor.
• Object recycling: instead of destroying objects, they get recycled for quicker reuse.
• CANNON physics integration.

PixelBoxAssets class

• Easy preloading of assets - PixelBox scenes, sprites, image textures, and json files.
• Load progress and complete notifications.

PixelBoxRenderer class

• Used to switch between PixelBox scenes, with or without transitions.
• Scene transitions using textures or blends are adopted from three.js examples.
• Built-in downsampling of resolution rendering.

LinePath class

• Moves objects along a path in space using tweens.
• Integrated into Scene Editor.

FxSprite class

• Play Adobe Flash MovieClips animations.
• Supplied exporter (JSFL) for Adobe Flash CS6 or higher.