Emblem Generator: JavaScript library to generate SVG emblems

Based on unmaintained repository GW2Emblem by Mladen Todorovic ([email protected])

A VueJS version is available here: https://github.com/kiplin-dev/emblem-generator-vue

Demo

https://www.pochworld.com/emblem-generator/

How to use!

In browser

Include emblem-generator.js file into HTML:

<script type="text/javascript" src="emblem-generator.js"></script>

In NodeJS environment

import EmblemGenerator from 'emblem-generator';

Usage

Instantiate EmblemGenerator, then, initiate emblemGenerator in empty div with the id 'emblem-div'

const emblemGenerator = new EmblemGenerator();
// 'emblem-div' is div ID and 256 is size of emblem in pixels
emblemGenerator.init('emblem-div', 256);

Display Emblem defined with object option:

emblemGenerator.drawEmblemObj({
    "background_id":1,
    "foreground_id":"star",
    "flags":[],
    "background_color":'#ff0000',
    "foreground_primary_color":'#00ff00',
    "foreground_secondary_color":'#0000ff',
    "black_opacity":1
});

| option | description | |-----------------------------|----------------------------| | background_id | Id of the background used. Defined in the assets | | foreground_id | Id of the foreground used. Defined in the assets | | flags | Flags used for flipping background and foreground. Available: "FlipBackgroundVertical", "FlipBackgroundHorizontal", "FlipForegroundVertical", "FlipForegroundHorizontal" | | background_color | Color used for the background (hexa code, rgb or hsl) | | foreground_primary_color | Primary color used for the foreground (hexa code, rgb or hsl) | | foreground_secondary_color | Secondary color used for the foreground (hexa code, rgb or hsl) | | black_opacity | Level of opacity for black color (value between 0 and 1) |

Options

Assets

It's possible to use custom assets (instead of default assets) - it's sent as 3rd argument for init function call:

emblemGenerator.init('emblem-div', 128, myAssets);

myAssets var is an object in which you can define two different items:

• defs: the emblems
• bg_defs: the backgrounds

var myAssets = {
    defs: {},
    bg_defs: {},
}

defs and bg_defs can be easily generated with the Asset Generator (see below). Demo custom assets are available in the customAssets.js file.

Demo custom colors are available in the customColors.js file. just add your own desired colors in it!

So, you can import these demo file:

<script type="text/javascript" src="customAssets.js"></script>

Then define myAssets var like this:

var myAssets = {
    defs: assets.defs,
    bg_defs: assets.bg_defs
};

You can define one or many of these three items, if not define, default assets will be used.

You can leave it blank or set it to default to use the default assets.

Background

It's possible to use background color (instead of default image) - it's sent as 4th argument for init function call:

emblemGenerator.init('emblem-div', 128, 'default', 'transparent');

or

emblemGenerator.init('emblem-div', 128, 'default', '#3682a0');

Development

The point of the project is to provide an emblem generator with which you can add your own assets!

For this, I developed an Asset Generator to generate backgrounds and emblems from SVG files.

To use this Asset Generator, follow the guide ;)

Requirements

For the following parts, you will need:

• NodeJs
• Yarn (or NPM)

Once installed, get dependencies with the yarn command.

Asset Generator

Prepare the files

There are already demo assets in 'assets/backgrounds' and 'assets/emblems' folders. To add some assets, just add some SVG files in these folders.

The files have some requirements so that the Asset Generator works properly:

• The name of the file will be its ID (without the extension), so choose simple names without special characters

• SVG file should be 256x256

• SVG file should be as simple as possible: avoid transformations like 'scale' or 'translate' because only the path will be used

• For backgrounds, path tags must be nested just below the svg tag. See the SVG files in assets/backgrounds folder for example

• For emblems, path tags must be nested just below the svg tag OR nested in a g tag to group paths by fill color. The g must be nested under the svg tag. See the SVG files in assets/emblems folder for example

• For emblems, the fill color will be used to determinate to which group belongs the shape. There are 4 different groups:

  • Primary color (use the foreground_primary_color option)
  • Primary color transparent (use the foreground_primary_color option with some opacity)
  • Secondary color (use the foreground_secondary_color option)
  • Black transparent (use black color with some opacity)

  So to determine in which group to dispatch the path, check this table:

  | Group | Color code | |-----------------------------|----------------------------| | Primary color | #ff0000 | | Primary color transparent | #00ff00 | | Secondary color | #0000ff | | Black transparent | #000000 or any other color |

  Once again, see the SVG files in assets/emblems folder for example

Generate the assets

Run yarn generate-assets {path/to/assets} {path/to/export/folder} to generate the customAssets.js file.

The path/to/assets folder must contains two sub-folder:

• backgrounds with the backgrounds SVG files
• emblems with the emblems SVG file

path/to/export/folder is where the file will be generated.

Example: yarn generate-assets assets . will generate the customAssets.js file in the base directory of this project

To use these custom assets in a ES6 project with 'import' syntax, the assets needs to be 'exported' with export default assets at the end of the file. To do this, just add 'true' as third argument of the command: yarn generate-assets assets . true

You will now be able to define the custom assets in the init() method (see upon) and to use them by passing their IDs (the SVG filename without the extension) to the object array in drawEmblemObj() method in your html file.

Modify the source code

If you want to modify the source code to your own needs, just check the files in src folder.

Any PR is welcome :)

Asset Generator

For the Asset Generator, modify the src/asset-generator/AssetGenerator.js file.

Then run yarn build-asset-generator. It uses babel to generate util/AssetGenerator that is used by the command yarn generate-assets

Emblem Generator

There are 3 source files for Emblem Generator:

• EmblemGenerator.js (main file based on the original project)
• defaultAssets.js (generated by the Asset Generator)
• index.js (to instantiate the Emblem Generator)

I you make any change to one of those files (in fact, you should'nt have to modify assets.js that is a generated file), you should run yarn build to regenerate emblem-generator.js

Author

Benoît Ripoche - Kiplin

[email protected]