Built to offer multipurpose custom dice of different shapes, colors, faces and sizes with light effects
The number of dice, colors, character or image on the faces, size, and more can be controlled via JSON data. You can configure the appearance of each dice and also have the ability to preset the landing value. All this with an optional sharp light effect to highlight the landing face.
You can purchase Rolling The Dices here
It is now possible to configure each face of the dice independently. You will be able to paint each face with a different color, put short or long text adapting the font size or add an image that occupies the size and position you want.
Also in this version there is a configurator available to design each face with images or text to facilitate your design. You can also generate the code so that you only have to copy it into your script
Recapitulating:
- Now you can put on each face independently:
- Different background/text color
- Text that adapts to dice shape controlling manually the font size
- Images that can take up all the space and position them however you want ( for D10 this option is not available at the moment )
- There is a configurator available to design each face with these features to facilitate your design. You can also generate the code so that you only have to copy it into your script
- Type of dices: hexahedron, octahedron, decahedron, dodecahedron and icosahedron
- API for get/set options of dices and get throw results
- Landing value can be set to ensure a specific outcome to each dice
- Support to choose where to roll the dice from or do it randomly
- Customizable background/text colors
- Customizable size, font sizes and colors of the edges
- Support for print text, special character or insert an image on each face
- Smooth throw physics
- Responsive
- Customizable number of dices
- Optional Light effect to highlight landing face
- Supports desktop and mobile
- Info popups can be styled via CSS
- Usage examples included. Note: In addition, there are 2 examples included as "art examples" with other light and shadow effects but they are separated from the app options
container - String - Define the document selector which hold the app. Default: body
lights - Boolean - if true, provides a accurate light effect to highlight the top face of the dice. Default: true
D6, D8, D10, D12, D20 - Hexahedron, octahedron, decahedron, dodecahedron or icosahedron dice. Each one is an array of objects containing the following:
-
items- Integer - Number of the dices with same settings -
isImage- Boolean - Define if all dice faces contain images or text -
faceValues-
Array - Contains the text/images of each faces. Each position in the array corresponds to a different face. If set images, must put their path, it can be relative. Ensure the extension is png or jpg. With this setting all faces share the same faceBgColor, faceTextColor and fontSize options.
Examples:
faceValues: ["A","B","C","D","E","F"]/faceValues: ["path/image1.png", "path/image2.png", "path/image3.png", "path/image4.png", "path/image5.png", "path/image6.png"] -
Array with subarrays - contains the text/images of each face. Each position in the array corresponds to a different face and contains a sub-array. Each subarray has different positions depending on whether it is painting an image or a text with its own characteristics, that is, if you paint a text you will be able customize the size and color of the text and background, and if you paint an image you will be able customize the size of the the image and position. The image ensure the extension is png or jpg. With this setting, all faces work independently with their own options for drawing both text and an image.
faceValues subarray positions for text:
[IsImage,text,faceBgColor,faceTextColor,fontSize]. Ex:[false,"11","#000000","#FFFFFF","170"]faceValues subarray positions for images:
[IsImage,text,faceBgColor,hortizontalCoord,verticalCoord,widthImage,heigthImage]. Ex:[true,"path/image1.png","orange","150","150","190","190"]
-
-
faceBgColor- String (Hex) - The background color of all faces -
faceTextColor- String (Hex) - The text color of all faces -
faceColorEdges- String (Hex) - The edge geometry color of all faces. Default: not defined -
radius- Float - Size of dice. Default: 1 -
fontSize- Integer - Font size of all faces. Default: D10->45, D20->49, others->50 -
presetValue- Array -which side do you want the dice to land on? each value of the array represents the position of the faceValues array of each dice defined in items. For example: if we configure a dice as follows: items: 3, faceValues: ["A","B","C","D","E","F"], presetValue: [0,5,1] means that one dice will land with the value A, another with the value F and the last one with the value B. Default: not defined
getOption(String) - Returns Object containing the configurable options. The string passed can be the object of the type of dice, a specific dice or a specific option of the dice.
Usage:
- 1- Get all options of the dices type. Ex: getOption("D6");
- 2- Get all options of the group(index) of the dices type. Ex: getOption("D6[0]");
- 3- Get an individual option of the dice. Ex: getOption("D6[0].faceBgColor");
setOption(String, Object|Array|String) - Returns void. Useful for changing the configurable options of the dice. The string passed as first parameter can be the object of the type of dice, a specific dice or a specific option of the dice. The second parameter can be an object, array or string depending on what you want to change
Usage:
- 1- Set those options (parsed to JSON) on the dices type. Ex: setOption("D6", {options});
- 2- Set those options (parsed to JSON) on the group(index) of the dices type. Ex: setOption("D6[0]", {options});
- 3- Set an individual option of the dice. Ex: setOption("D6[0].faceBgColor", option);
getThrowResults() - Returns an array of objects containing all results of the throws
throw_dices(String|null) - Static function - Throw dices at the indicated position or randomly. This position refers to the position of the screen. For random throw not to pass any value Possible values: topLeftCorner, topRightCorner, topMiddle, bottomLeftCorner, bottomRightCorner, bottomMiddle, leftMiddle, rightMiddle, null.
resetThrowResults() - Static function - Reset the results of the throws
Performance: Rolling The Dices is ready to run on modern browsers. Keep in mind that the library accesses the GPU through the browser's javasript engine and therefore it is important to update it to the latest version, especially on mobile where the native hardware and the OS are not so powerful.
presetValue: this options pre-calculates the roll in quick mode before executing, so it's normal for it to take a while. However, the more dice there are, the wait may increase.
Rolling The Dices is powered by:
- Three js
- Cannon js
<script src="../vendor/three.min.js"></script>
<script src="../vendor/cannon.min.js"></script>
<script src="../rollingTheDices.js"></script>
<link rel="stylesheet" href="../rollingTheDices.css" type="text/css"/>
document.addEventListener("DOMContentLoaded", function(){
_rollingTheDices=new rollingTheDices({
//type of dice
D6: [
{
items: 1,
isImage: false,
faceValues: ["A","B","C","D","E","F"],
faceBgColor: "#FF0000",
faceTextColor: "#FFFFFF"
},
],
//type of dice
D8: [
{
items: 1,
isImage: false,
faceValues: ["1","2","3","4","5","6.","7","8"],
faceBgColor: "#000000",
faceTextColor: "#FFFFFF"
}
]
});
//Throw the dices
_rollingTheDices.throw_dices();
});- Extract the ZIP to a folder on a web server.
- If JSON is setting in a separate file ensure is sitting in the same domain - loading across domains is not allowed due to browser security.
- If use images for the dice faces ensure are sitting in the same domain too.