customneko

a Svelte port of Neko for use with custom spritesheets and custom behavior

play with an example here :)

Svelte usage

<!-- +page.svelte -->
<script>
  import CustomNeko from '$lib/components/CustomNeko.svelte';

  // props..
  // image_path: url or path to a spritesheet image, see below for the expected layout
  // sprite_width, sprite_height: each spritesheet frame is expected to have the same width and height
  // optional..
  // update_ms: how fast sprite animations should cycle frames
  // sleep time: how many total frames there should be in-between sleep frames
  // move_speed: sprite move speed in pixels, every update_ms ms
</script>

<CustomNeko
    image_path={'image_path_here'}
    sprite_width={40}
    sprite_height={40}
/>

expected spritesheet layout..

[!TIP] reference the component's animation map to see how you can customize the layout of the spritesheet. it's very easy to modify as long as each sprite has the same grid size!

development

to run locally..

npm i
npm run dev

to build..

npm run build

thanks to the PMD Sprite Repository for easily accessible spritesheets