It's a plugin of RPG JS engine that gives possibility to select character just after logging in with a GUI.
- title-screen plugin
- MMORPG type of game
✅ GUI for selecting actor after first login to game
✅ Possibility to assign graphics to the clsas
You can easily install the RPG JS Plugin using npm. Open your terminal and run the following command:
npx rpgjs add rpgjs-character-select
Remember to add plugin to the rpg.toml
modules = [
'rpg-character-select',
]
import { Class } from "rpgjs-character-select";
@Class({
/* ... other properties */
graphics: {
pernament: ['body-light', 'head-light', 'male-spiked2-sandy'],
baseEquipment: {
torso: 'shortsleeve-charcoal',
legs: 'pants-black',
},
animations: ['slash'],
}
})
export default class Archer {}
pernament
are graphics displayed for player everytime.
baseEquipment
is separated from pernament and animations graphics to have possibility to change them eg. when you want to equip some item and change graphic for it.
animations
it's array of animations like slash of a sword or casting some skill.
Example:
graphics: {
pernament: ['body-light', 'head-light', 'long-light-ears', 'male-bangslong-platinum'],
baseEquipment: {
torso: 'vest-black',
legs: 'pants-black',
},
animations: ['slash', 'fire-ball-cast'],
}
import { Actor } from '@rpgjs/database'
const { MAXHP } = Presets
@Actor({
/* ... other parameters */
class: Archer
})
export default class Elf {}
[characterSelect]
actors = [
'human',
'elf',
'vampire',
]
const player: RpgPlayerHooks = {
/* ... */
onCharacterSelected(player: RpgPlayer, actorId: string) {
player.setActor(actorId);
},
onAuthSuccess(player: RpgPlayer) {
const graphics = player._class.graphics as ClassGraphics;
player.setGraphic([
...graphics.pernament,
...graphics.animations,
...Object.values(graphics.baseEquipment),
]);
}
}
Keep in mind that that onCharacterSelected
hook is executed before onAuthSuccess
You can override variables and styles in theme.scss
/* variables */
$character-select-screen-background: url('../assets/backgrounds/character-select.png');
$character-select-arrow-left-image: url('../assets/gui/arrow-left.png') !default;
$character-select-arrow-right-image: url('../assets/gui/arrow-right.png') !default;
$window-button-success-color: #1c8634;
$window-button-success-shadow: #0d4c30;
$window-button-color: rgba(128, 130, 162, 0.7);
$window-button-shadow: rgb(128, 130, 162);
/* styles */
.character-select {
&__class-name {
color: $primary;
}
&__arrow-left {
width: 75px;
height: 75px;
&:hover {
background: url('@/modules/config/assets/gui/shared/left_arrow_h.png');
background-size: 100% 100%;
filter: brightness(1);
}
}
&__arrow-right {
width: 75px;
height: 75px;
&:hover {
background: url('@/modules/config/assets/gui/shared/right_arrow_h.png');
background-size: 100% 100%;
}
}
&__submit-button {
width: 200px;
height: 75px;
font-weight: normal;
&:hover {
box-shadow: none;
}
}
&__description-content {
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
background: url('@/modules/config/assets/gui/boxes/news_top_ornament.png');
background-size: 100% 100%;
width: 100%;
height: 35px;
margin-top: -32px;
filter: brightness(1.5);
}
&:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: url('@/modules/config/assets/gui/boxes/news_bottom.png');
background-size: 100% 100%;
width: 50%;
height: 35px;
margin-bottom: -32px;
filter: brightness(1.5);
}
&::-webkit-scrollbar-track {
background: #fff;
width: 7px;
}
&::-webkit-scrollbar {
background: #fff;
width: 7px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .5);
&:hover {
background: rgba(0, 0, 0, .7);
}
}
}
}