# 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:
- Place the image in
src/modules/main/client/characters/assets
- 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 thedist
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:
- framesWidth
- framesHeight
- 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 {}