Spaceship Sprites

Contents

• Usage
• Sources

Usage

Building a single sprite

import { Color, Sprite, SpriteBuilder } from 'spaceship-sprites'

// Creates a builder with default parameters
let builder = new SpriteBuilder({})

// Creates a builder with custom parameters
let custom = new SpriteBuilder({
    // The sprite painting area
    spriteDimensions: [9, 9],
    // The average blank pixels in the sprite
    blankPercentage: 0.7,
    // The color used in spots 'without' pixels
    blankColor: new Color(22, 22, 22),
    // The colors used when creating the sprite
    // Color accepts RGB from range [0, 255] or [0.0, 1.0]
    colorPallet: [new Color(20, 30, 40), new Color(0.1, 0.2, 0.3)],
    // Overrides colorPallet and is used only if useRandomPallet is true
    randomColorCount: 5,
    // If true, uses up to colorCount random colors
    useRandomPallet: true,
    // border in pixels, [up, right, down, left]
    border: [1, 2, 3, 4],
    // If true, ships will also be horizontally symmetrical
    horizontalSymmetry: true,
})

// Makes a single sprite
let sprite1 = builder.single().build()

// Makes a sprite and adds the border with blankColor color
let sprite2 = builder.single().withBorder().build()

// Adds a border until the sprite is of the specified dimension
let sprite3 = builder.single().withPadding([22, 22]).build()

SVG

new SpriteBuilder({}).single().withBorder().build().svg(100, 100)

The svg function will try to fit as best as possible the width and height. In this case, 100 became 108 to fit the sprite with dimensions 7 + 2 (sprite + border).

Creating svg might lead to some undesired stripes when the sprite dimensions aren't exactly divisible by the width and/or height:

new SpriteBuilder({spriteDimensions: [5, 7]}).single().withBorder().build().svg(100, 100)

To mitigate this, you might use withPadding to make the sprite square:

new SpriteBuilder({spriteDimensions: [5, 7]}).single().withPadding([9, 9]).build().svg(100, 100)

You can also use svgScale to set the dimension of each pixel:

new SpriteBuilder({spriteDimensions: [5, 7]}).single().withBorder().build().svgScale(1, 'em')

Sources

• EN
• RU.