Dice Textures

A little module (~2kb) that generates 6 dice textures. It exposes just one functions createDiceTextures which returns an array of data URI strings.

Setup

dice-textures can be installed with npm or using a content delivery network URL to embed it on your HTML page

npm i dice-textures

or

<script src="https://unpkg.com/dice-textures/dist/dice-textures.umd.js"></script>

Usage

const diceFace5Image = document.getElementById('diceFace5Image');
const texturesOptions = { size: 300};
const outputOptions = { type: 'image/jpeg', quality: 0.5 };
const diceFaceTextures = createDiceTextures(texturesOptions, outputOptions);
diceFace5Image.src = diceFaceTextures[4];

pixi.js

import { Sprite } from 'pixi.js';
import createDiceTextures from 'dice-textures';
...
const texturesOptions = { size: 300};
const outputOptions = { type: 'image/jpeg', quality: 0.5 };
const diceFaceTextures = createDiceTextures(texturesOptions, outputOptions);
const diceFaces = diceFaceTextures.map(texture => Sprite.from(texture));

Both parameters are optional. For details see below.

Options

Textures options

Name | Type | Default | Description --- | --- | --- | --- size | number | 100| side of the square texture color | string | black | any CSS color representation strokeColor | string | black | any CSS color representation strokeLineWidth | number | 0 | width of the stroke line cornerRadius | number | 0 | rounded rect corner radius padding | number | 0 | distance between the center of the pip and the dice edge pipColor | string | 'white' | any CSS color representation pipStrokeColor | string | 'white' | any CSS color representation pipStrokeLineWidth | number | 0 | width of the pip stroke line pipRadius | number | 10 | pip radius

Output options

Name | Type | Default | Description --- | --- | --- | --- type | string | image/png| image format quality | number | 0.92 | compression level

For the output options details see here

License

Copyright © 2019, Sergey Chernykh. Released under the MIT License.