@rpgjs/client 3.3.2 → 4.0.0-beta.3

package/src/Components/TileComponent.ts

@@ -0,0 +1,43 @@
+import { TileComponentObject } from "@rpgjs/types"
+import { SceneMap } from "../Scene/Map"
+import Tile from "../Tilemap/Tile"
+import TileLayer from "../Tilemap/TileLayer"
+import { AbstractComponent, CellInfo } from "./AbstractComponent"
+import { Container } from "pixi.js"
+
+export class TileComponent extends AbstractComponent<TileComponentObject, Container> {
+    static readonly id: string = 'tile'
+    cacheParams: string[] = []
+    gid: number = 0
+
+    onInit(cell: CellInfo) {
+        this.cell = cell
+        if (typeof this.value == 'number') {
+            this.gid = this.value
+        } else {
+            this.gid = this.value.gid
+        }
+        this.updateRender({})
+        super.onInit(cell)
+    }
+
+    updateRender(object: any) {
+        this.removeChildren()
+        const height = typeof this.value != 'number' ? this.getValue(object, this.value.height) : null ?? this.cell?.height ?? 0
+        const width =  typeof this.value != 'number' ?  this.getValue(object, this.value.width) : null ?? this.cell?.width ?? 0
+        const scene = this.component.getScene<SceneMap>()
+        const tilemap = scene.tilemap
+        const tileset = TileLayer.findTileSet(
+            this.gid,
+            tilemap.tilesets
+        )
+        if (tileset) {
+            const tile = new Tile({
+                gid: this.gid
+            } as any, tileset)
+            tile.width = width ?? 0
+            tile.height = height ?? 0
+            this.addChild(tile)
+        }
+    }
+}

package/src/Effects/Animation.ts

@@ -0,0 +1,297 @@
+import { Utils } from '@rpgjs/common'
+import { spritesheets } from '../Sprite/Spritesheets'
+import { SpritesheetOptions, TextureOptions, AnimationFrames, FrameOptions, TransformOptions } from '../Sprite/Spritesheet'
+import { log } from '../Logger'
+import { RpgSound } from '../Sound/RpgSound'
+import { RpgComponent } from '../Components/Component'
+import { Sprite, Container, Texture, Rectangle } from 'pixi.js'
+import { Animation as AnimationEnum } from './AnimationCharacter'
+import { BehaviorSubject, Observable } from 'rxjs'
+
+const { isFunction, arrayEquals } = Utils
+
+type Image = { image: string }
+
+type TextureOptionsMerging = TextureOptions & {
+    spriteWidth: number
+    spriteHeight: number
+    sound?: string
+} & Image & TransformOptions
+
+type FrameOptionsMerging = TextureOptionsMerging & FrameOptions
+type SpritesheetOptionsMerging = TextureOptionsMerging & SpritesheetOptions
+type TransformOptionsAsArray = Pick<TransformOptions, 'anchor' | 'scale' | 'skew' | 'pivot'>
+
+type AnimationDataFrames = {
+    container: Container,
+    sprites: FrameOptionsMerging[],
+    frames: Texture[][],
+    name: string,
+    animations: AnimationFrames,
+    params: any[],
+    data: TextureOptionsMerging
+}
+
+export class Animation extends Sprite {
+    public attachTo: RpgComponent
+    public hitbox: { w: number, h: number }
+    public applyTransform: (
+        frame: FrameOptionsMerging,
+        data: TextureOptionsMerging,
+        spritesheet: SpritesheetOptionsMerging
+    ) => Partial<FrameOptionsMerging>
+    private spritesheet: SpritesheetOptionsMerging
+    private currentAnimation: AnimationDataFrames | null = null
+    private time: number = 0
+    private frameIndex: number = 0
+    private animations: Map<string, AnimationDataFrames> = new Map()
+    private _animation$: BehaviorSubject<Sprite | null> = new BehaviorSubject(null as any)
+    readonly animation$: Observable<Sprite | null> = this._animation$.asObservable()
+
+    onFinish: () => void
+
+    constructor(public id: string) {
+        super()
+        this.spritesheet = spritesheets.get(this.id)
+        if (!this.spritesheet) {
+            throw log(`Impossible to find the ${this.id} spritesheet. Did you put the right name or create the spritesheet?`)
+        }
+        this.createAnimations()
+    }
+
+    private createTextures(options: Required<TextureOptionsMerging>): Texture[][] {
+        const { width, height, framesHeight, framesWidth, image, offset } = options
+        const { baseTexture } = Texture.from(image)
+        const spriteWidth = options.spriteWidth
+        const spriteHeight = options.spriteHeight
+        const frames: Texture[][] = []
+        const offsetX = (offset && offset.x) || 0
+        const offsetY = (offset && offset.y) || 0
+        for (let i = 0; i < framesHeight; i++) {
+            frames[i] = []
+            for (let j = 0; j < framesWidth; j++) {
+                const rectX = j * spriteWidth + offsetX
+                const rectY = i * spriteHeight + offsetY
+                if (rectY > height) {
+                    throw log(`Warning, there is a problem with the height of the "${this.id}" spritesheet. When cutting into frames, the frame exceeds the height of the image.`)
+                }
+                if (rectX > width) {
+                    throw log(`Warning, there is a problem with the width of the "${this.id}" spritesheet. When cutting into frames, the frame exceeds the width of the image.`)
+                }
+                frames[i].push(
+                    new Texture(baseTexture, new Rectangle(rectX, rectY, spriteWidth, spriteHeight))
+                )
+            }
+        }
+        return frames
+    }
+
+    private createAnimations() {
+        const { textures } = this.spritesheet
+        if (!textures) {
+            return
+        }
+        for (let animationName in textures) {
+            const props: (keyof TextureOptionsMerging)[] = ['width', 'height', 'framesHeight', 'framesWidth', 'rectWidth', 'rectHeight', 'offset', 'image', 'sound']
+            const parentObj = props
+                .reduce((prev, val) => ({ ...prev, [val]: this.spritesheet[val] }), {})
+            const optionsTextures: TextureOptionsMerging = {
+                ...parentObj,
+                ...textures[animationName]
+            } as any
+            const { rectWidth, width = 0, framesWidth = 1, rectHeight, height = 0, framesHeight = 1 } = optionsTextures
+            optionsTextures.spriteWidth = rectWidth ? rectWidth : width / framesWidth
+            optionsTextures.spriteHeight = rectHeight ? rectHeight : height / framesHeight
+            this.animations.set(animationName, {
+                container: new Sprite(),
+                frames: this.createTextures(optionsTextures as Required<TextureOptionsMerging>),
+                name: animationName,
+                animations: textures[animationName].animations,
+                params: [],
+                data: optionsTextures,
+                sprites: []
+            })
+        }
+    }
+
+    private getSpriteSize(name: 'spriteHeight' | 'spriteWidth'): number {
+        return this.animations.get(this.currentAnimation?.name || AnimationEnum.Stand)?.data[name] || 0
+    }
+
+    getSpriteHeight(): number {
+        return this.getSpriteSize('spriteHeight')
+    }
+
+    getSpriteWidth(): number {
+        return this.getSpriteSize('spriteWidth')
+    }
+
+    has(name: string): boolean {
+        return this.animations.has(name)
+    }
+
+    get(name: string): AnimationDataFrames {
+        return this.animations.get(name) as AnimationDataFrames
+    }
+
+    isPlaying(name?: string): boolean {
+        if (!name) return !!this.currentAnimation
+        if (this.currentAnimation == null) return false
+        return this.currentAnimation.name == name
+    }
+
+    stop() {
+        this.currentAnimation = null
+        this.parent?.removeChild(this)
+    }
+
+    play(name: string, params: any[] = []) {
+        const animParams = this.currentAnimation?.params
+
+        if (this.isPlaying(name) && arrayEquals(params, animParams || [])) return
+
+        const animation = this.get(name)
+
+        if (!animation) {
+            throw new Error(`Impossible to play the ${name} animation because it doesn't exist on the ${this.id} spritesheet`)
+        }
+
+        this.removeChildren()
+        animation.sprites = []
+        this.currentAnimation = animation
+        this.currentAnimation.params = params
+        this.time = 0
+        this.frameIndex = 0
+
+        let animations: any = animation.animations;
+        animations = isFunction(animations) ? (animations as Function)(...params) : animations
+
+        this.currentAnimation.container = new Container()
+
+        for (let container of (animations as FrameOptionsMerging[][])) {
+            const sprite = new Sprite()
+            for (let frame of container) {
+                this.currentAnimation.sprites.push(frame)
+            }
+            this.currentAnimation.container.addChild(sprite)
+        }
+
+        const sound = this.currentAnimation.data.sound
+
+        if (sound) {
+            RpgSound.get(sound).play()
+        }
+
+        this.addChild(this.currentAnimation.container)
+        // Updates immediately to avoid flickering
+        this.update(1)
+    }
+
+    update(deltaRatio: number) {
+        if (!this.isPlaying() || !this.currentAnimation) return
+
+        const { frames, container, sprites, data } = this.currentAnimation
+        let frame = sprites[this.frameIndex]
+        const nextFrame = sprites[this.frameIndex + 1]
+
+        if (this.attachTo) {
+            const sprite = this.attachTo
+            const pos = sprite?.getPositionsOfGraphic('middle')
+            if (pos) {
+                container.x = pos.x
+                container.y = pos.y
+            }
+        }
+
+        for (let _sprite of container.children) {
+            const sprite = _sprite as Sprite
+            
+            if (!frame || frame.frameY == undefined || frame.frameX == undefined) {
+                continue
+            }
+
+            sprite.texture = frames[frame.frameY][frame.frameX]
+
+            const getVal = <T extends keyof TransformOptions>(prop: T): TransformOptions[T] | undefined =>
+                frame[prop] || data[prop] || this.spritesheet[prop]
+
+            const applyTransform = <T extends keyof TransformOptionsAsArray>(prop: T): void => {
+                const val = getVal<T>(prop)
+                if (val) {
+                    sprite[prop as string].set(...val!)
+                }
+            }
+
+            function applyTransformValue<T extends keyof TransformOptions>(prop: T);
+            function applyTransformValue<T extends keyof TransformOptions>(prop: string, alias: T);
+            function applyTransformValue<T extends keyof TransformOptions>(prop: T, alias?: T): void {
+                const optionProp = alias || prop
+                const val = getVal<T>(optionProp)
+                if (val !== undefined) {
+                    sprite[prop as string] = val
+                }
+            }
+
+            if (this.applyTransform) {
+                frame = {
+                    ...frame,
+                    ...this.applyTransform(frame, data, this.spritesheet)
+                }
+
+            }
+
+            const realSize = getVal<'spriteRealSize'>('spriteRealSize')
+            const heightOfSprite = typeof realSize == 'number' ? realSize : realSize?.height
+            const widthOfSprite = typeof realSize == 'number' ? realSize : realSize?.width
+
+            const applyAnchorBySize = () => {
+                if (heightOfSprite && this.hitbox) {
+                    const { spriteWidth, spriteHeight } = data
+                    const w = ((spriteWidth - this.hitbox.w) / 2) / spriteWidth
+                    const gap = (spriteHeight - heightOfSprite) / 2
+                    const h = (spriteHeight - this.hitbox.h - gap) / spriteHeight
+                    sprite.anchor.set(w, h)
+                }
+            }
+
+            if (frame.sound) {
+                RpgSound.get(frame.sound).play()
+            }
+
+            applyAnchorBySize()
+
+            applyTransform('anchor')
+            applyTransform('scale')
+            applyTransform('skew')
+            applyTransform('pivot')
+
+            applyTransformValue('alpha', 'opacity')
+            applyTransformValue('x')
+            applyTransformValue('y')
+            applyTransformValue('angle')
+            applyTransformValue('rotation')
+            applyTransformValue('visible')
+
+            this._animation$.next({
+                spriteWidth: widthOfSprite || sprite.width,
+                spriteHeight: heightOfSprite || sprite.height,
+                anchor: sprite.anchor,
+                width: getVal<any>('spriteWidth'),
+                height: getVal<any>('spriteHeight')
+            } as any)
+        }
+
+        if (!nextFrame) {
+            this.time = 0
+            this.frameIndex = 0
+            if (this.onFinish) this.onFinish()
+            return
+        }
+
+        this.time += deltaRatio
+
+        if (this.time >= nextFrame.time) {
+            this.frameIndex++
+        }
+    }
+}

package/src/Effects/AnimationCharacter.ts

@@ -0,0 +1,7 @@
+export enum Animation {
+    Stand = 'stand',
+    Walk = 'walk',
+    Attack = 'attack',
+    Defense = 'defense',
+    Skill = 'skill'
+}

package/src/Effects/Spinner.ts

@@ -0,0 +1,19 @@
+import { RpgClientEngine } from "../RpgClientEngine";
+import { Graphics, Renderer } from "pixi.js";
+
+export class SpinnerGraphic extends Graphics {
+    constructor(private clientEngine: RpgClientEngine) {
+        super()
+    }
+
+    render(renderer: Renderer) {
+        super.render(renderer)
+        this.rotation += 0.12;
+        const percent = Math.abs(Math.sin(Date.now() / 1000))
+        this
+            .clear()
+            .lineStyle(4, 0xffffff, 1)
+            .moveTo(40, 0)
+            .arc(0, 0, 40, 0, Math.PI * 2 * percent, false)
+    }
+}

package/src/Effects/Timeline.ts

@@ -0,0 +1,294 @@
+import { TransformOptions, FrameOptions } from '../Sprite/Spritesheet'
+
+export const Ease = {
+	linear(t: number, b: number, c: number, d: number): number {
+		return c*(t/=d) + b;
+	},
+	easeInQuad (t: number, b: number, c: number, d: number): number {
+		return c*(t/=d)*t + b;
+	},
+	easeOutQuad (t: number, b: number, c: number, d: number): number {
+		return -c *(t/=d)*(t-2) + b;
+	},
+	easeInOutQuad (t: number, b: number, c: number, d: number): number {
+		if ((t/=d/2) < 1) return c/2*t*t + b;
+		return -c/2 * ((--t)*(t-2) - 1) + b;
+	},
+	easeInCubic (t: number, b: number, c: number, d: number): number {
+		return c*(t/=d)*t*t + b;
+	},
+	easeOutCubic (t: number, b: number, c: number, d: number): number {
+		return c*((t=t/d-1)*t*t + 1) + b;
+	},
+	easeInOutCubic (t: number, b: number, c: number, d: number): number {
+		if ((t/=d/2) < 1) return c/2*t*t*t + b;
+		return c/2*((t-=2)*t*t + 2) + b;
+	},
+	easeInQuart (t: number, b: number, c: number, d: number): number {
+		return c*(t/=d)*t*t*t + b;
+	},
+	easeOutQuart (t: number, b: number, c: number, d: number): number {
+		return -c * ((t=t/d-1)*t*t*t - 1) + b;
+	},
+	easeInOutQuart (t: number, b: number, c: number, d: number): number {
+		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
+		return -c/2 * ((t-=2)*t*t*t - 2) + b;
+	},
+	easeInQuint (t: number, b: number, c: number, d: number): number {
+		return c*(t/=d)*t*t*t*t + b;
+	},
+	easeOutQuint (t: number, b: number, c: number, d: number): number {
+		return c*((t=t/d-1)*t*t*t*t + 1) + b;
+	},
+	easeInOutQuint (t: number, b: number, c: number, d: number): number {
+		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
+		return c/2*((t-=2)*t*t*t*t + 2) + b;
+	},
+	easeInSine (t: number, b: number, c: number, d: number): number {
+		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
+	},
+	easeOutSine (t: number, b: number, c: number, d: number): number {
+		return c * Math.sin(t/d * (Math.PI/2)) + b;
+	},
+	easeInOutSine (t: number, b: number, c: number, d: number): number {
+		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
+	},
+	easeInExpo (t: number, b: number, c: number, d: number): number {
+		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+	},
+	easeOutExpo (t: number, b: number, c: number, d: number): number {
+		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+	},
+	easeInOutExpo (t: number, b: number, c: number, d: number): number {
+		if (t==0) return b;
+		if (t==d) return b+c;
+		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+	},
+	easeInCirc (t: number, b: number, c: number, d: number): number {
+		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+	},
+	easeOutCirc (t: number, b: number, c: number, d: number): number {
+		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+	},
+	easeInOutCirc (t: number, b: number, c: number, d: number): number {
+		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+	},
+	easeInElastic (t: number, b: number, c: number, d: number): number {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+	},
+	easeOutElastic (t: number, b: number, c: number, d: number): number {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
+	},
+	easeInOutElastic (t: number, b: number, c: number, d: number): number {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
+	},
+	easeInBack (t: number, b: number, c: number, d: number, s: number): number {
+		if (s == undefined) s = 1.70158;
+		return c*(t/=d)*t*((s+1)*t - s) + b;
+	},
+	easeOutBack (t: number, b: number, c: number, d: number, s: number): number {
+		if (s == undefined) s = 1.70158;
+		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+	},
+	easeInOutBack (t: number, b: number, c: number, d: number, s: number): number {
+		if (s == undefined) s = 1.70158; 
+		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
+		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
+	},
+	easeInBounce (t: number, b: number, c: number, d: number): number {
+		return c - Ease.easeOutBounce (d-t, 0, c, d) + b;
+	},
+	easeOutBounce (t: number, b: number, c: number, d: number): number {
+		if ((t/=d) < (1/2.75)) {
+			return c*(7.5625*t*t) + b;
+		} else if (t < (2/2.75)) {
+			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
+		} else if (t < (2.5/2.75)) {
+			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
+		} else {
+			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
+		}
+	},
+	easeInOutBounce (t: number, b: number, c: number, d: number): number {
+		if (t < d/2) return Ease.easeInBounce (t*2, 0, c, d) * .5 + b;
+		return Ease.easeOutBounce (t*2-d, 0, c, d) * .5 + c*.5 + b;
+	}
+} 
+
+type EaseType = (t: number, b: number, c: number, d: number) => number
+
+export class Timeline {
+    private time: number = 0
+    private animation: FrameOptions[][] = []
+
+    /**
+     * Allows you to create complex animations more easily. For example, to display a movement with an Easing function
+     * 
+     * ```ts
+     * import { Timeline, Ease } from '@rpgjs/client'
+     * 
+     * new Timeline()
+     *      .add(30, ({ scale }) => [{
+     *          frameX: 0,
+     *          frameY: 1,
+     *          scale: [scale]
+     *      }], {
+     *          scale: {
+     *              from: 0,
+     *              to: 1,
+     *              easing: Ease.easeOutBounce
+     *          }
+     *      })
+     *      .add(100)
+     *      .create()
+     * ```
+     * 
+     * Here we say
+     * 
+     * - For a duration of 30 seconds
+     * - A function that will be called every 1 frame with the `scale` property defined in transform
+     * - An object of transformation. Define the properties of your choice to be passed to the callback function
+     *      - `to`: the starting value
+     *      - `from`: the end value
+     *      - `easing`: An easing function (By default, it is a linear function)
+     * 
+     * Note that if you just put a duration (`add(100)`), it will only put a pause on the animation
+     * 
+     * Easing functions available but you can create your own
+     * 
+     * ```ts
+     * function myEase(t: number, b: number, c: number, d: number): number { }
+     * ```
+     * 
+     * `t`: current time
+     * `b`: start value
+     * `c`: end value
+     * `d`: duration
+     * 
+     * @title Add Animation in timeline
+     * @enum {Function}
+     * 
+     * Ease.linear | linear
+    * Ease.easeInQuad | easeInQuad
+    * Ease.easeOutQuad | easeOutQuad
+    * Ease.easeInOutQuad | easeInOutQuad
+    * Ease.easeInCubic | easeInCubic
+    * Ease.easeOutCubic | easeOutCubic
+    * Ease.easeInOutCubic | easeInOutCubic
+    * Ease.easeInQuart | easeInQuart
+    * Ease.easeOutQuart | easeOutQuart
+    * Ease.easeInOutQuart | easeInOutQuart
+    * Ease.easeInQuint | easeInQuint
+    * Ease.easeOutQuint | easeOutQuint
+    * Ease.easeInOutQuint | easeInOutQuint
+    * Ease.easeInSine | easeInSine
+    * Ease.easeOutSine | easeOutSine
+    * Ease.easeInOutSine | easeInOutSine
+    * Ease.easeInExpo | easeInExpo
+    * Ease.easeOutExpo | easeOutExpo
+    * Ease.easeInOutExpo | easeInOutExpo
+    * Ease.easeInCirc | easeInCirc
+    * Ease.easeOutCirc | easeOutCirc
+    * Ease.easeInOutCirc | easeInOutCirc
+    * Ease.easeInElastic | easeInElastic
+    * Ease.easeOutElastic | easeOutElastic
+    * Ease.easeInOutElastic | easeInOutElastic
+    * Ease.easeInBack | easeInBack
+    * Ease.easeOutBack | easeOutBack
+    * Ease.easeInOutBack | easeInOutBack
+    * Ease.easeInBounce | easeInBounce
+    * Ease.easeOutBounce | easeOutBounce
+     * @method timeline.add(duration,cb?,transform?)
+     * @param {number} duration
+     * @param { (obj?: number, time?: number) => TransformOptions[] } [cb]
+     * @param { [property: string]: { to:number, from: number: easing?: Function } } [transform]
+     * @returns {Timeline}
+     * @memberof Timeline
+     */
+    add(duration: number, cb?: (obj?: any, time?: number) => TransformOptions[], transform?: {
+        [property: string]: {
+            to: number, 
+            from: number,
+            easing?: EaseType
+        }
+    }): Timeline {
+        if (!cb) {
+            this.animation.push([{
+                time: duration + this.time,
+            }])
+            this.time += duration
+            return this
+        }
+        for (let i=0 ; i < duration ; i++) {
+            let anim
+            const obj = {}
+            for (let prop in transform) {
+                const param = transform[prop]
+                const cbEasing = param.easing || Ease.linear
+                if (param.to < param.from) {
+                    obj[prop] = 1 - cbEasing(i, param.to, param.from, duration)
+                }
+                else {
+                    obj[prop] = cbEasing(i, param.from, param.to, duration)
+                }
+            }
+            const ret = cb(obj, i)
+            anim = ret.map(el => {
+                (el as any).time = i + this.time
+                return el
+            })
+            this.animation.push(anim)
+        }
+        this.time += duration
+        return this
+    }
+
+    /**
+     * Allows you to create the animation array to assign to the `animations` property in the Spritesheet
+     * 
+     * ```ts
+     * import { Spritesheet, Timeline } from '@rpgjs/server'
+     * 
+     * @Spritesheet({
+     *  id: 'sprite',
+     *  image: require('./sprite.png'),
+     *  width: 192,
+     *  height: 228,
+     *  framesHeight: 6,
+     *  framesWidth: 6,
+     *  anchor: [0.5],
+     *  textures: {
+     *      myanim: {
+     *          animations: new Timeline()
+     *                          .add(SEE THE ADD METHOD)
+     *                          .create()    
+     *      }   
+     *  }
+     * })
+     * export class MyAnim {}
+     * ```
+     * 
+     * @title Create the animation array
+     * @method timeline.create()
+     * @returns {FrameOptions[][]} The animation array
+     * @memberof Timeline
+     */
+    create(): FrameOptions[][] {
+        return this.animation
+    }
+}