web-rpg-actor#

Put your rpg.actor character on your own web page with just a CSS file, or an interactive version with a JS file too.

• rpg-sprite.css — pure CSS that can animate & choose the direction of your character
• rpg-actor.js — optional for interactivity; provides a <rpg-actor> web component that you can control with your keyboard, will travel where you click, or can follow your cursor (all while optionally avoiding other HTML elements)

Static sprite (CSS only)#

<link rel="stylesheet" href="rpg-sprite.css">

<div class="rpg-sprite"
     data-direction="down"
     data-animating
     style="--sprite: url('https://rpg.actor/api/sprite/normalized?did=byjp.me')"></div>

• data-direction — down, up, left, right (or n/e/s/w)
• data-animating — presence triggers the walk cycle
• --sprite — URL of your sprite sheet. Use the URL above to pull direct from the rpg.actor API.

Interactive actor (web component)#

<link rel="stylesheet" href="rpg-sprite.css">
<script src="rpg-actor.js" defer></script>

<rpg-actor
  sprite="https://rpg.actor/api/sprite/normalized?did=byjp.me"
  mode="follow-mouse"
  speed="80"
  sibling-elements="overlap"></rpg-actor>

• sprite — same as --sprite above
• mode — follow-mouse, click-tap, keyboard, or roam
• speed — pixels per second (default 80)
• sibling-elements — ignore (walk through them), clear (avoid them), overlap (prevents only the bottom border from overlapping)