๐ Yu-Gi-Oh! Card - Yugioh Card ๐
A tool for rendering Yu-Gi-Oh! cards using Canvas
Currently there are 5 types of cards: ๐๐๐๐๐
- 1๏ธโฃ Yu-Gi-Oh!
- 2๏ธโฃ Rush Duel
- 3๏ธโฃ Yu-Gi-Oh! Card Back
- 4๏ธโฃ Field Center Card
- 5๏ธโฃ Yu-Gi-Oh! Series 2
## ๐ซก Special Thanks
- [LeaferJS](https://www.leaferjs.com/) for the powerful graphics rendering capabilities
- [็ฝ็พฝๅนธ้ณฅ](https://tieba.baidu.com/home/main?id=tb.1.d6c63ffd.3YV5T6Q9Z7uIeVVhPlo8hg%3Ft%3D1654573649) for providing high-resolution card templates
## ๐ฉ Online Demo
[Online Demo](https://kooriookami.github.io/yugioh-card/)
## โก Quick Start
Requirements: Node.js 22+ and pnpm.
`pnpm add yugioh-card`
### Workspace Development
```bash
# Node.js 22+
pnpm install
pnpm dev
pnpm build
pnpm build:lib
```
### Browser
```js
// Optional: YugiohCard, RushDuelCard, YugiohBackCard, FieldCenterCard, YugiohSeries2Card
import { YugiohCard } from 'yugioh-card';
const card = new YugiohCard({
view: 'xxx', // div container
data: {
..., // see Data properties below
},
resourcePath: 'xxx', // path to static resources, copy src/assets/yugioh-card folder to your project or server
});
// Export image, for more export options refer to https://www.leaferjs.com/ui/guide/basic/export.html
card.leafer.export('xxx.png', {
screenshot: true,
pixelRatio: devicePixelRatio,
});
```
### Node.js
Before running the Node.js example, make sure your local Node.js version is 22 or higher.
`pnpm add skia-canvas@2`
```js
import http from 'http';
import skia from 'skia-canvas';
import { YugiohCard } from 'yugioh-card';
http.createServer((req, res) => {
const card = new YugiohCard({
data: {
..., // see Data properties below
},
resourcePath: 'xxx', // path to static resources, copy src/assets/yugioh-card folder to your project or server
skia: skia,
});
card.leafer.export('png', {
screenshot: true,
}).then(result => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write(`
`);
res.end();
});
}).listen(3000, () => {
console.log('server is running at http://localhost:3000');
});
```
## ๐ Example Code
[Example Code](src/components/YugiohCard.vue)
## ๐ Data Properties
### Yu-Gi-Oh!
| Property Name | Description | Type | Options | Notes | Default |
|:-------------------:|:-------------------------:|:-------:|:-------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------:|:-----------------:|
| language | Language | enum | 'sc' / 'tc' / 'jp' / 'kr' / 'en' / 'astral' | Simplified Chinese / Traditional Chinese / Japanese / Korean / English / Astral | 'sc' |
| font | Font | enum | '' / 'custom1' / 'custom2' | Default / Custom 1 / Custom 2 | '' |
| name | Card Name | string | โ | โ | '' |
| color | Card Name Color | string | โ | โ | '' |
| align | Card Name Alignment | enum | 'left' / 'center' / 'right' | Left / Center / Right | 'left' |
| gradient | Whether Name Has Gradient | boolean | โ | โ | false |
| gradientColor1 | Gradient Color 1 | string | โ | โ | '#999999' |
| gradientColor2 | Gradient Color 2 | string | โ | โ | '#ffffff' |
| type | Type | enum | 'monster' / 'spell' / 'trap' / 'pendulum' | Monster / Spell / Trap / Pendulum | 'monster' |
| attribute | Attribute | enum | 'dark' / 'light' / 'earth' / 'water' / 'fire' / 'wind' / 'divine' / '' | Dark / Light / Earth / Water / Fire / Wind / Divine / None | 'dark' |
| icon | Spell/Trap Icon | enum | 'equip' / 'field' / 'quick-play' / 'ritual' / 'continuous' / 'counter' | Equip / Field / Quick-Play / Ritual / Continuous / Counter | '' |
| image | Center Image | string | โ | โ | '' |
| cardType | Card Type | enum | 'normal' / 'effect' / 'ritual' / 'fusion' / 'synchro' / 'xyz' / 'link' / 'token' | Normal / Effect / Ritual / Fusion / Synchro / XYZ / Link / Token | 'normal' |
| pendulumType | Pendulum Type | enum | 'normal-pendulum' / 'effect-pendulum' / 'ritual-pendulum' / 'fusion-pendulum' / 'synchro-pendulum' / 'xyz-pendulum' | Normal Pendulum / Effect Pendulum / Ritual Pendulum / Fusion Pendulum / Synchro Pendulum / XYZ Pendulum | 'normal-pendulum' |
| level | Level | number | โ | โ | 0 |
| rank | Rank | number | โ | โ | 0 |
| pendulumScale | Pendulum Scale | number | โ | โ | 0 |
| pendulumDescription | Pendulum Effect | string | โ | โ | '' |
| monsterType | Monster Type | string | โ | โ | '' |
| atkBar | Show ATK/DEF Bar | boolean | โ | โ | true |
| atk | ATK | number | โ | ?๏ผ-1, โ๏ผ-2 | 0 |
| def | DEF | number | โ | ?๏ผ-1, โ๏ผ-2 | 0 |
| arrowList | Link Arrows | array | [1,2,3,4,5,6,7,8] | [Top, Top-Right, Right, Bottom-Right, Bottom, Bottom-Left, Left, Top-Left] | [] |
| description | Effect Description | string | โ | โ | '' |
| firstLineCompress | Compress First Line | boolean | โ | โ | false |
| descriptionAlign | Center Effect Text | boolean | โ | โ | false |
| descriptionZoom | Effect Text Zoom | number | โ | โ | 1 |
| descriptionWeight | Effect Text Weight | number | โ | โ | 0 |
| package | Card Pack | string | โ | โ | '' |
| password | Card Password | string | โ | โ | '' |
| copyright | Copyright | enum | 'sc' / 'jp' / 'en' | Simplified Chinese / Japanese / English | '' |
| laser | Laser Mark | enum | 'laser1' / 'laser2' / 'laser3' / 'laser4' | Style 1 / Style 2 / Style 3 / Style 4 | '' |
| rare | Rarity | enum | 'dt' / 'ur' / 'gr' / 'hr' / 'ser' / 'gser' / 'pser' | DT / UR / GR / HR / SER / GSER / PSER | '' |
| twentieth | 20th Anniversary | boolean | โ | โ | false |
| radius | Rounded Corners | boolean | โ | โ | true |
| scale | Card Scale | number | โ | โ | 1 |
### Rush Duel
| Property Name | Description | Type | Options | Notes | Default |
|:-----------------:|:-------------------:|:-------:|:----------------------------------------------------------------------:|:----------------------------------------------------------:|:---------:|
| language | Language | enum | 'sc' / 'jp' | Simplified Chinese / Japanese | 'sc' |
| name | Card Name | string | โ | โ | '' |
| color | Card Name Color | string | โ | โ | '' |
| type | Type | enum | 'monster' / 'spell' / 'trap' | Monster / Spell / Trap | 'monster' |
| attribute | Attribute | enum | 'dark' / 'light' / 'earth' / 'water' / 'fire' / 'wind' / 'divine' / '' | Dark / Light / Earth / Water / Fire / Wind / Divine / None | 'dark' |
| icon | Spell/Trap Icon | enum | 'equip' / 'field' / 'quick-play' / 'ritual' / 'continuous' / 'counter' | Equip / Field / Quick-Play / Ritual / Continuous / Counter | '' |
| image | Center Image | string | โ | โ | '' |
| cardType | Card Type | enum | 'normal' / 'effect' / 'ritual' / 'fusion' | Normal / Effect / Ritual / Fusion | 'normal' |
| level | Level | number | โ | โ | 0 |
| monsterType | Monster Type | string | โ | โ | '' |
| maximumAtk | Maximum ATK | number | โ | โ | 0 |
| atk | ATK | number | โ | ?๏ผ-1 | 0 |
| def | DEF | number | โ | ?๏ผ-1 | 0 |
| description | Effect Description | string | โ | โ | '' |
| firstLineCompress | Compress First Line | boolean | โ | โ | false |
| descriptionAlign | Center Effect Text | boolean | โ | โ | false |
| descriptionZoom | Effect Text Zoom | number | โ | โ | 1 |
| descriptionWeight | Effect Text Weight | number | โ | โ | 0 |
| package | Card Pack | string | โ | โ | '' |
| password | Card Password | string | โ | โ | '' |
| legend | Legendary | boolean | โ | โ | false |
| laser | Laser Mark | enum | 'laser1' / 'laser2' / 'laser3' / 'laser4' | Style 1 / Style 2 / Style 3 / Style 4 | '' |
| rare | Rarity | enum | 'sr' / 'rr' / 'pser' | SR / RR / PSER | '' |
| radius | Rounded Corners | boolean | โ | โ | true |
| scale | Card Scale | number | โ | โ | 1 |
### Yu-Gi-Oh! Card Back
| Property Name | Description | Type | Options | Notes | Default |
|:-------------:|:---------------:|:-------:|:-------------------------------------------------------:|:-----------------------------------------------:|:--------:|
| type | Card Back Type | enum | 'normal' / 'tormentor' / 'sky-dragon' / 'winged-dragon' | Normal / Tormentor / Sky Dragon / Winged Dragon | 'normal' |
| logo | Logo | enum | 'ocg' / 'tcg' / 'rd' | OCG / TCG / RD | 'ocg' |
| konami | Show K mark | boolean | โ | โ | true |
| register | Show R mark | boolean | โ | โ | true |
| radius | Rounded Corners | boolean | โ | โ | true |
| scale | Card Scale | number | โ | โ | 1 |
### Field Center Card
| Property Name | Description | Type | Options | Notes | Default |
|:-------------:|:---------------:|:-------:|:-------:|:-----:|:-------:|
| image | Field Image | string | โ | โ | '' |
| cardBack | Is Card Back | boolean | โ | โ | false |
| radius | Rounded Corners | boolean | โ | โ | true |
| scale | Card Scale | number | โ | โ | 1 |
### Yu-Gi-Oh! Series 2
| Property Name | Description | Type | Options | Notes | Default |
|:-----------------:|:-------------------------:|:-------:|:----------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:---------:|
| language | Language | enum | 'jp' | Japanese | 'jp' |
| font | Font | enum | '' / 'custom1' / 'custom2' | Default / Custom 1 / Custom 2 | '' |
| name | Card Name | string | โ | โ | '' |
| color | Card Name Color | string | โ | โ | '' |
| align | Card Name Alignment | enum | 'left' / 'center' / 'right' | Left / Center / Right | 'left' |
| gradient | Whether Name Has Gradient | boolean | โ | โ | false |
| gradientColor1 | Gradient Color 1 | string | โ | โ | '#999999' |
| gradientColor2 | Gradient Color 2 | string | โ | โ | '#ffffff' |
| type | Type | enum | 'monster' / 'spell' / 'trap' | Monster / Spell / Trap | 'monster' |
| attribute | Attribute | enum | 'dark' / 'light' / 'earth' / 'water' / 'fire' / 'wind' / 'divine' / '' | Dark / Light / Earth / Water / Fire / Wind / Divine / None | 'dark' |
| icon | Spell/Trap Icon | enum | 'equip' / 'field' / 'quick-play' / 'ritual' / 'continuous' / 'counter' | Equip / Field / Quick-Play / Ritual / Continuous / Counter | '' |
| image | Center Image | string | โ | โ | '' |
| cardType | Card Type | enum | 'normal' / 'effect' / 'ritual' / 'fusion' / 'tormentor' / 'sky-dragon' / 'winged-dragon' | Normal / Effect / Ritual / Fusion / Tormentor / Sky Dragon / Winged Dragon | 'normal' |
| level | Level | number | โ | โ | 0 |
| monsterType | Monster Type | string | โ | โ | '' |
| atk | ATK | number | โ | ????๏ผ-1, X000๏ผ-2 | 0 |
| def | DEF | number | โ | ????๏ผ-1, X000๏ผ-2 | 0 |
| description | Effect Description | string | โ | โ | '' |
| firstLineCompress | Compress First Line | boolean | โ | โ | false |
| descriptionAlign | Center Effect Text | boolean | โ | โ | false |
| descriptionZoom | Effect Text Zoom | number | โ | โ | 1 |
| descriptionWeight | Effect Text Weight | number | โ | โ | 0 |
| package | Card Pack | string | โ | โ | '' |
| password | Card Password | string | โ | โ | '' |
| copyright | Copyright | enum | 'jp' | Japanese | '' |
| laser | Laser Mark | enum | 'laser1' / 'laser2' / 'laser3' / 'laser4' | Style 1 / Style 2 / Style 3 / Style 4 | '' |
| radius | Rounded Corners | boolean | โ | โ | true |
| scale | Card Scale | number | โ | โ | 1 |