# Step 4. Create a sprite

# Prerequisites

Have an image with several animation frames (movement, attack, etc.).

# It is necessary to know

It is not mandatory to have a spritesheet as in the example below. You can create animations from any sprite sheet

# 1. Create Spritesheet

Here is the spritesheet we will use:

hero

  1. Place the image in src/modules/main/client/characters/assets
  2. Then create the following file in src/modules/main/client/characters/hero.ts
import { Spritesheet, Animation, Direction } from '@rpgjs/client'

const frameY = direction => {
    return {
        [Direction.Down]: 0,
        [Direction.Left]: 1,
        [Direction.Right]: 2, 
        [Direction.Up]: 3
    }[direction]
}

@Spritesheet({
    id: 'hero', // id (mandatory)
    image: require('./assets/chara.png'), // relative path of image
    framesWidth: 4, // number of frames of the image across the width
    framesHeight: 4, // number of frames of the image across the height
    width: 128, // width of image
    height: 192, // height of image
    textures: {
        [Animation.Stand]: {
            animations: direction => [
                [{ time: 0, frameX: 1, frameY: frameY(direction) }]
            ]
        },
        [Animation.Walk]:  {
            animations: direction => [
                    [ 
                        { time: 0, frameX: 0, frameY: frameY(direction) },
                        { time: 10, frameX: 1, frameY: frameY(direction) },
                        { time: 20, frameX: 2, frameY: frameY(direction) }
                    ]
                ]
         }
    }
})
export class HeroCharacter {}

Follow the information in the comments

It is important to put require() because Webpack will retrieve the images and put it in the dist folder.

# Preset Spritesheet (optional)

It can take quite a long time to create the animations. Think about creating common functions. For example, if you take a spritesheet compatible with RPG Maker (as above). You can take a RMSpritesheet function

import { Spritesheet, Presets } from '@rpgjs/client'

const { RMSpritesheet } = Presets

@Spritesheet({
    id: 'hero',
    image: require('./assets/chara.png'),
    width: 128,
    height: 192,
    ...RMSpritesheet(4, 4, 0)
   
})
export class HeroCharacter {}

Parameters:

  1. framesWidth
  2. framesHeight
  3. Frame for stand animation (1 by default)

# 2. Add the spritesheet in the module

Then go to src/modules/main/client/index.ts, and add the spritesheet in the appropriate property

import { RpgClient, RpgModule } from '@rpgjs/client'
import { HeroCharacter } from './characters/hero'
import { Tilesets } from './maps/medieval'

@RpgModule<RpgClient>({
    spritesheets: [
        HeroCharacter // We add our spritesheet !
    ]
})
export default class RpgClientModuleEngine {}

Character Credit Link (opens new window)