byjp.me
CSS & optional JS for showing your rpg.actor on your own site
byjp.tngl.io/web-rpg-actor
946 B
30 lines
1.rpg-sprite {
2 --row: 0;
3 display: inline-block;
4 width: 48px;
5 height: 48px;
6 background-image: var(--sprite);
7 background-position-y: calc(var(--row) * -48px);
8 image-rendering: pixelated;
9 background-position-x: -48px;
10}
11
12.rpg-sprite[data-direction="down"] { --row: 0; }
13.rpg-sprite[data-direction="left"] { --row: 1; }
14.rpg-sprite[data-direction="right"] { --row: 2; }
15.rpg-sprite[data-direction="up"] { --row: 3; }
16.rpg-sprite[data-direction="n"] { --row: 0; }
17.rpg-sprite[data-direction="e"] { --row: 2; }
18.rpg-sprite[data-direction="s"] { --row: 3; }
19.rpg-sprite[data-direction="w"] { --row: 1; }
20
21.rpg-sprite[data-animating]:not([data-animating="false"]) {
22 animation: rpg-walk 0.6s steps(1) infinite;
23}
24
25@keyframes rpg-walk {
26 0%, 100% { background-position-x: 0; }
27 25% { background-position-x: -48px; }
28 50% { background-position-x: -96px; }
29 75% { background-position-x: -48px; }
30}