simple-canvas-library
    Preparing search index...

    Class Sprite

    Sprite sets up a constructor for a simple game sprite.

    You can draw your own spritesheet using a tool like https://www.piskelapp.com/

    const sprite = new Sprite({
      src: "path/to/spritesheet.png",
      x: 100,
      y: 100,
      frameWidth: 32,
      frameHeight: 32,
      frameRate: 12,
      animate: true
    });

    game.addDrawing(sprite);

    const walkingSprite = new Sprite({
      src: "character.png",
      x: 0,
      y: 0,
      frameWidth: 64,
      frameHeight: 64,
      frameSequence: [0, 1, 2, 1], // walk cycle
      frameRate: 8,
      animate: true
    });

    SimpleCanvas

    Index

    Constructors

    constructor

    Properties

    angle? animate flipHorizontal frameAnimationIndex frameHeight frameRate frames? frameSequence? frameWidth image ready removeOnNextFrame? repeat targetHeight targetWidth update? x y

    Accessors

    colNum frame framesAcross framesDown frameX frameY rowNum

    Methods

    copy draw

    Constructors

    • Creates a new Sprite instance.

      Parameters

      • config: SpriteConfig

        Configuration object for the sprite

        Sprite config type

        • Optionalangle?: number
        • Optionalanimate?: boolean
        • OptionalflipHorizontal?: boolean
        • Optionalframe?: number
        • frameHeight: number
        • OptionalframeRate?: number
        • Optionalframes?: number
        • OptionalframeSequence?: number[]
        • frameWidth: number
        • Optionalrepeat?: boolean
        • src: string
        • OptionaltargetHeight?: number
        • OptionaltargetWidth?: number
        • Optionalupdate?: (sprite: Sprite, cfg: any) => void
        • Optionalx?: number
        • Optionaly?: number

      Returns Sprite

    Properties

    angle?: number
    animate: boolean
    flipHorizontal: boolean
    frameAnimationIndex: number
    frameHeight: number
    frameRate: number
    frames?: number
    frameSequence?: number[]
    frameWidth: number
    image: HTMLImageElement
    ready: boolean = false
    removeOnNextFrame?: boolean
    repeat: boolean
    targetHeight: number
    targetWidth: number
    update?: (sprite: Sprite, cfg: any) => void
    x: number
    y: number

    Accessors

    Methods

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods