@rpgjs/client 3.3.2 → 4.0.0-beta.3

package/src/Scene/Map.ts

@@ -0,0 +1,393 @@
+import { RpgCommonMap, RpgPlugin, HookClient, RpgShape, Utils, RpgCommonPlayer } from '@rpgjs/common'
+import TileMap from '../Tilemap'
+import { Viewport } from 'pixi-viewport'
+import { Scene, SceneObservableData, SceneSpriteLogic } from './Scene'
+import { spritesheets } from '../Sprite/Spritesheets'
+import { RpgSound } from '../Sound/RpgSound'
+import { GameEngineClient } from '../GameEngine'
+import { TiledLayerType, TiledMap } from '@rpgjs/tiled'
+import { RpgComponent } from '../Components/Component'
+import { CameraOptions } from '@rpgjs/types'
+import { Assets, Container, Point, IRenderer, DisplayObjectEvents, utils, FederatedPointerEvent } from 'pixi.js'
+import { EventLayer } from './EventLayer'
+
+interface MapObject extends TiledMap {
+    id: number
+    sounds: string | string[] | undefined
+}
+
+export class SceneMap extends Scene {
+    static readonly EVENTS_LAYER_DEFAULT: string = 'events-layer-default'
+
+    /** 
+     * Get the tilemap
+     * 
+     * @prop {PIXI.Container} [tilemap]
+     * @memberof RpgSceneMap
+     * */
+    public tilemap: TileMap
+
+    /** 
+     * The viewport of the map
+     * 
+     * It automatically follows the sprite representing the player but you can attach it to something else
+     * 
+     * > Do not change the size of the viewport
+     * 
+     * @prop {PIXI.Viewport} viewport
+     * @memberof RpgSceneMap
+     * */
+    public viewport: Viewport | undefined
+    private players: object = {}
+    private isLoaded: boolean = false
+    private gameMap: RpgCommonMap | undefined
+    private eventsLayers: {
+        [eventLayerName: string]: Container
+    } = {}
+    private defaultLayer: Container | undefined
+
+    shapes = {}
+
+    constructor(
+        public game: GameEngineClient,
+        private renderer: IRenderer,
+        private options: { screenWidth?: number, screenHeight?: number, drawMap?: boolean } = {}) {
+        super(game)
+        if (options.drawMap === undefined) this.options.drawMap = true
+        this.onInit()
+    }
+
+    private constructMethods() {
+        [
+            'getTileIndex',
+            'getTileByIndex',
+            'getTileOriginPosition',
+            'getTileByPosition',
+            'getLayerByName'
+        ].forEach(method => this[method] = (this.gameMap as any)[method].bind(this.gameMap));
+        [
+            'heightPx',
+            'widthPx',
+            'zTileHeight',
+            'tileHeight',
+            'tileWidth',
+            'data',
+            'layers'
+        ].forEach(prop => this[prop] = (this.gameMap as any)[prop])
+
+    }
+
+    /** @internal */
+    async load(obj: MapObject, prevObj: MapObject, isUpdate = false): Promise<Viewport> {
+        let { sounds } = obj
+        const { clientEngine } = this.game
+
+        if (sounds) {
+            if (!Utils.isArray(sounds)) sounds = obj.sounds = <string[]>[sounds]
+        }
+
+        this.gameMap = new RpgCommonMap()
+        this.gameMap.load(obj)
+        this.gameMap.clearCacheTilesets()
+        this.constructMethods()
+
+        RpgCommonMap.bufferClient.set(obj.id, this.gameMap)
+
+        this.tilemap = new TileMap(this.gameMap.getData(), this.game.renderer)
+
+        // TODO: Remove this
+        Assets.reset()
+
+        let nbLoad = 0
+
+        const objects = this.game.world.getObjectsOfGroup()
+
+        for (let { object } of Object.values(objects) as any[]) {
+            if (Utils.isInstanceOf(object, RpgCommonPlayer) && object) {
+                (object as RpgCommonPlayer).updateInVirtualGrid()
+            }
+        }
+
+        const assets: string[] = []
+        for (let tileset of this.tilemap.tilesets) {
+            let spritesheet = spritesheets.get(tileset.name)
+            if (!spritesheet) {
+                clientEngine.addSpriteSheet(tileset.image.source, tileset.name)
+                spritesheet = spritesheets.get(tileset.name)
+            }
+            if (spritesheet?.resource) {
+                continue
+            }
+            Assets.add(tileset.name, spritesheet.image)
+            assets.push(tileset.name)
+            nbLoad++
+        }
+
+        if (nbLoad > 0) {
+            const assetsLoaded = await Assets.load(assets)
+            for (let assetName in assetsLoaded) {
+                if (!assetsLoaded[assetName]) console.log(assetName, assetsLoaded[assetName])
+                const spritesheet = spritesheets.get(assetName)
+                if (spritesheet) spritesheet.resource = assetsLoaded[assetName]
+            }
+        }
+
+        RpgPlugin.emit(HookClient.SceneMapLoading, Assets)
+
+        this.tilemap.load({
+            drawTiles: this.options.drawMap,
+            isUpdate
+        })
+        this.viewport = new Viewport({
+            screenWidth: this.options.screenWidth,
+            screenHeight: this.options.screenHeight,
+            worldWidth: obj.width * obj.tilewidth,
+            worldHeight: obj.height * obj.tileheight,
+            noTicker: true,
+            events: this.renderer.events
+        })
+        this.tilemap.addChild(this.animationLayer)
+        this.viewport.clamp({ direction: 'all' })
+        this.viewport.addChild(this.tilemap, ...this.createEventLayers(obj))
+        this.isLoaded = true
+        if (prevObj.sounds && prevObj.sounds instanceof Array) {
+            prevObj.sounds.forEach(soundId => {
+                const continueSound = (<string[]>obj.sounds || []).find(id => id == soundId)
+                if (!continueSound) RpgSound.stop(soundId)
+            })
+        }
+        if (sounds) (<string[]>sounds).forEach(soundId => RpgSound.play(soundId))
+        if (this.onLoad) this.onLoad()
+
+        return this.viewport
+    }
+
+    createEventLayers(map: MapObject): Container[] {
+        const containers: Container[] = []
+        map.layers.forEach((layerData) => {
+            if (layerData.type !== TiledLayerType.ObjectGroup) return
+            if (this.eventsLayers[layerData.name]) {
+                containers.push(this.eventsLayers[layerData.name])
+                return
+            }
+            const layer = new EventLayer()
+            this.defaultLayer = this.eventsLayers[layerData.name] = layer
+            containers.push(layer)
+        })
+        if (containers.length == 0) {
+            if (!this.defaultLayer) {
+                this.defaultLayer = new EventLayer()
+            }
+            containers.push(this.defaultLayer)
+        }
+        this.cameraFollowSprite(this.game.playerId)
+        return containers
+    }
+
+    getEventLayer(objectName?: string): Container | undefined {
+        for (let layerData of this.data.layers) {
+            if (layerData.type != TiledLayerType.ObjectGroup) {
+                continue
+            }
+            if (!layerData.objects) {
+                continue
+            }
+            for (let object of layerData.objects) {
+                if (object.name == objectName) {
+                    return this.eventsLayers[layerData.name]
+                }
+            }
+        }
+        return this.defaultLayer
+    }
+
+    /** @internal */
+    changeTile(x: number, y: number, layers: {
+        [layerName: string]: object
+    }) {
+        for (let layerName in layers) {
+            const layerInfo = layers[layerName]
+            this.gameMap?.setTile(x, y, layerName, layerInfo)
+            this.tilemap.changeTile(x, y, layerName)
+        }
+    }
+
+    /** @internal */
+    draw(t: number, deltaTime: number, deltaRatio: number, frame: number) {
+        if (!this.isLoaded) {
+            return
+        }
+        super.draw(t, deltaTime, deltaRatio, frame)
+        this.tilemap.drawAnimateTile(frame)
+        this.viewport?.update(deltaTime)
+    }
+
+    // @internal
+    updateTilesOverlayAllSprites() {
+        const objects = this.objects
+        for (let [id, sprite] of objects) {
+            this.updateTilesOverlay(sprite)
+        }
+    }
+
+    private updateTilesOverlay(sprite: RpgComponent) {
+        if (!this.gameMap) return sprite
+        const { tileWidth, tileHeight } = this.gameMap
+        const { tilesOverlay }: any = sprite
+        const bounds = sprite.parent.getLocalBounds()
+        const width = Math.ceil(bounds.width / tileWidth) * tileWidth
+        const height = Math.ceil(bounds.height / tileHeight) * tileHeight
+        const _x = bounds.x
+        const _y = bounds.y
+
+        const addTile = (x, y) => {
+            const tiles = this.tilemap.createOverlayTiles(x, y, sprite)
+            if (tiles.length) tilesOverlay.addChild(...tiles)
+        }
+
+        tilesOverlay.removeChildren()
+
+        for (let i = _x; i <= _x + width; i += tileWidth) {
+            for (let j = _y; j <= _y + height; j += tileHeight) {
+                addTile(i, j)
+            }
+        }
+        return sprite
+    }
+
+    onUpdateObject(logic: SceneSpriteLogic, sprite: RpgComponent, moving: boolean): RpgComponent {
+        const { paramsChanged } = logic
+        if (!this.gameMap) return sprite
+        if (moving || (paramsChanged && (paramsChanged.width || paramsChanged.height))) {
+            this.updateTilesOverlay(sprite)
+        }
+        return sprite
+    }
+
+    /** @internal */
+    setPlayerPosition(id: string, { x, y }: { x: number, y: number }) {
+        this.players[id].x = x
+        this.players[id].y = y
+    }
+
+    /** @internal */
+    updateScene(obj: SceneObservableData) { }
+
+    addObject(obj: RpgCommonPlayer | RpgShape, id: string): RpgComponent {
+        const wrapper = new Container()
+        const inner = new Container()
+        const tilesOverlay = new Container()
+        const component = new RpgComponent(obj, this)
+
+        component.tilesOverlay = tilesOverlay
+        inner.addChild(component)
+        wrapper.addChild(inner, tilesOverlay)
+
+        this.objects.set(id, component)
+        this.getEventLayer(obj.id)?.addChild(wrapper)
+        if (component.isCurrentPlayer) this.cameraFollowSprite(id)
+        component.onInit()
+        return component
+    }
+
+    removeObject(id: string) {
+        let sprite = this.objects.get(id)
+        if (sprite) {
+            this.objects.delete(id)
+            RpgPlugin.emit(HookClient.SceneRemoveSprite, [this, sprite], true)
+            RpgPlugin.emit(HookClient.RemoveSprite, sprite)
+            sprite.destroy()
+        }
+    }
+
+    getShape(name: string): RpgShape | undefined {
+        return this.game.getShape(name)?.object
+    }
+
+    getShapes(): RpgShape[] {
+        const shapes = Object.values(this.game.getShapes())
+        return shapes.map(shape => shape.object)
+    }
+
+    cameraFollowSprite(id: string, options: CameraOptions = {}) {
+        const sprite = this.getSprite(id)
+        const follow = () => {
+            if (sprite) this.viewport?.follow(sprite)
+        }
+        if (options.smoothMove) {
+            this.viewport?.plugins.remove('follow')
+            let moreOptions = {}
+            if (typeof options.smoothMove != 'boolean') {
+                moreOptions = options.smoothMove
+            }
+            this.viewport?.animate({
+                position: new Point(sprite?.x, sprite?.y),
+                ...moreOptions,
+                callbackOnComplete: follow
+            })
+        }
+        else {
+            follow()
+        }
+    }
+
+    /**
+     * Listen to the events of the smile on the stage
+     *
+     * @title Listen mouse event
+     * @method on(eventName,callback)
+     * @since 3.0.0-beta.4
+     * @param {string} eventName  Name of the event (see PIXI documentation). Name often used in the codes
+     * - click
+     * - mousedown
+     * - mouseup
+     * - mousemove
+     * - pointerdown
+     * - pointermove
+     * - pointerup
+     * - (etc...)
+     * @param {(position: { x: number, y: number }, ev?: PIXI.InteractionEvent ) => any} callback
+     * @example
+     * ```ts
+     * sceneMap.on('pointerdown', (position) => {
+     *      console.log(position)
+     * })
+     * ```
+     * @returns {void}
+     * @memberof RpgSceneMap
+     */
+    on(eventName: keyof DisplayObjectEvents, cb: (position: { x: number, y: number }, ev?: any) => any) {
+        if (!this.viewport) return
+        this.viewport.eventMode = 'static'
+        this.viewport.on(eventName, (...args) => {
+            const ev: FederatedPointerEvent = args[0] as any
+            const pos = ev.getLocalPosition(this.viewport as Viewport)
+            cb(pos, ev)
+        })
+    }
+}
+
+export interface SceneMap {
+    data: any;
+    tileWidth: number;
+    tileHeight: number;
+    layers: any[];
+    widthPx: number;
+    heightPx: number;
+    zTileHeight: number
+    getShapes(): RpgShape[];
+    getShape(name: string): RpgShape | undefined;
+    getPositionByShape(filter: (shape: RpgShape) => {}): {
+        x: number;
+        y: number;
+        z: number;
+    } | null;
+    getTileIndex(x: number, y: number, [z]?: [number]): number;
+    getTileByIndex(tileIndex: number, zPlayer?: [number, number]): any;
+    getTileOriginPosition(x: number, y: number): {
+        x: number;
+        y: number;
+    };
+    getTileByPosition(x: number, y: number, z?: [number, number]): any;
+    getLayerByName(name: string): any
+}

package/src/Scene/Scene.ts

@@ -0,0 +1,270 @@
+import { RpgPlugin, HookClient, DefaultInput } from '@rpgjs/common'
+import { KeyboardControls } from '../KeyboardControls'
+import RpgSprite from '../Sprite/Character'
+import { Animation } from '../Effects/Animation'
+import { BehaviorSubject, Observable } from 'rxjs'
+import { RpgGui } from '../RpgGui'
+import { GameEngineClient } from '../GameEngine'
+import { RpgComponent } from '../Components/Component'
+import { Controls } from '@rpgjs/types'
+import { Container } from 'pixi.js'
+
+export type SceneObservableData = { 
+    data: {
+        [key: string]: any
+    }, 
+    partial: {
+        [key: string]: any
+    } 
+}
+
+export interface SceneSpriteLogic {
+    paramsChanged: {
+        [key: string]: any
+    } | null,
+    prevParamsChanged: object
+}
+
+export abstract class Scene {
+    protected objects: Map<string, RpgComponent> = new Map()
+    protected animationLayer: Container = new Container()
+
+    private controls: KeyboardControls
+    private animations: Animation[] = []
+
+    private _data: BehaviorSubject<SceneObservableData> = new BehaviorSubject({
+        data: {},
+        partial: {}
+    })
+
+    constructor(public game: GameEngineClient) {
+        const { globalConfig } = this.game.clientEngine
+        this.controls = this.game.clientEngine.controls
+        const mergeInputs = {
+            ...DefaultInput,
+            ...(globalConfig.inputs || {})
+        }
+        this.controls.setInputs(this.inputs || mergeInputs)
+    }
+
+    /**
+     * Listen to all the synchronized values of the scene with the server
+     * 
+     * ```ts 
+     * import { RpgClient, RpgModule, RpgSceneMap, RpgSprite } from '@rpgjs/client'
+     * 
+     *  @RpgModule<RpgClient>({ 
+            scenes: {
+                map: {
+                    onAfterLoading(scene: RpgSceneMap, sprite: RpgSprite) {
+                      scene.valuesChange.subscribe((obj) => {
+                         console.log(obj.data, obj.partial)
+                      })
+                    }
+                }
+            }
+        })
+        export default class RpgClientModuleEngine {}
+     * ```
+     * 
+     * - `data` represents all the current data of the scene (`users`, `events` and others)
+     * - `partial` represents only the data that has changed on the scene
+     * 
+     * > In the class, you can also use the onChanges hook
+     * 
+     * 
+     * @prop {Observable<{ data: object, partial: object }>} [valuesChange]
+     * @readonly
+     * @memberof RpgScene
+     */
+    get valuesChange(): Observable<SceneObservableData> {
+        return this._data.asObservable() 
+    }
+
+    private triggerSpriteChanges(logic: SceneSpriteLogic, sprite: RpgComponent, moving: boolean) {
+        if (this.onUpdateObject) this.onUpdateObject(logic, sprite, moving)
+        RpgPlugin.emit(HookClient.UpdateSprite, [sprite, logic], true)
+    }
+
+     /** @internal */
+    update(obj?: SceneObservableData) {
+        if (!obj) {
+            this.updateScene(this._data.value)
+            return
+        }
+        this.updateScene(obj)
+        RpgPlugin.emit(HookClient.SceneOnChanges, [this, obj], true)
+        this._data.next(obj)
+    }
+
+     /** @internal */
+    draw(t: number, deltaTime: number, deltaRatio: number, frame: number) {
+        const logicObjects = { 
+            ...this.game.world.getObjects(), 
+            ...this.game.events,
+            ...this.game.getShapes()
+        }
+        const renderObjects = this.objects
+        const sizeLogic = Object.values(logicObjects).length
+        for (let key in logicObjects) {
+            const val: SceneSpriteLogic = logicObjects[key].object
+            const valueChanged = logicObjects[key].paramsChanged
+            if (!renderObjects.has(key)) {
+                const sprite = this.addObject(val, key)
+                this.triggerSpriteChanges(val, sprite, true)
+            }
+            else {
+                const object = renderObjects.get(key)
+                if (!object?.update) return
+                const ret = object.update(val, valueChanged, t, deltaRatio)
+                this.triggerSpriteChanges(val, object, ret.moving)
+            }
+        }
+        if (sizeLogic < renderObjects.size) {
+            renderObjects.forEach((val, key) => {
+                if (!logicObjects[key]) {
+                    this.removeObject(key)
+                }
+            })
+        }
+        for (let animation of this.animations) {
+            animation.update(deltaRatio)
+        }
+        this.onDraw(t)
+        RpgGui.update(logicObjects)
+        RpgPlugin.emit(HookClient.SceneDraw, this)
+    }
+
+    abstract onUpdateObject(logic: SceneSpriteLogic, sprite: RpgComponent, moving: boolean): void
+    abstract addObject(obj, id: string): RpgComponent
+    abstract removeObject(id: string)
+
+    /**
+     * Display an animation on the scene
+     * 
+     * The object is the following:
+     * * `graphic`: Spritesheet id
+     * * `animationName`: The name of the animation
+     * * `attachTo`: Define a sprite. The animation will follow this sprite (optional)
+     * * `x`: Position X (0 by default)
+     * * `y`: Position Y (0 by default)
+     * * `loop`: Display the animation in a loop (false by default)
+     * 
+     * ```ts 
+     * import { RpgClient, RpgModule, RpgSceneMap, RpgSprite } from '@rpgjs/client'
+     * 
+
+     * @RpgModule<RpgClient>({ 
+            scenes: {
+                map: {
+                    onAfterLoading(scene: RpgSceneMap, sprite: RpgSprite) {
+                      const animation = scene.showAnimation({
+                         graphic: 'my-spritesheet',
+                          animationName: 'my-anim'
+                      })
+                    }
+                }
+            }
+        })
+        export default class RpgClientModuleEngine {}
+     * ```
+     * 
+     * The return is an animation containing two methods:
+     * * `play()`: Play the animation (Already the case when calling the method)
+     * * `stop()`: Stop the animation
+     * 
+     * They have a hook:
+     * 
+     * `onFinish`: Triggered when the animation is finished 
+     * 
+     * ```ts
+     * animation.onFinish = () => {
+     *      console.log('finish !')
+     * }
+     * ```
+     * 
+     * @title Show Animation
+     * @method scene.showAnimation(object)
+     * @param {object} object
+     * @returns {Animation}
+     * @memberof RpgScene
+     */
+    showAnimation({ 
+        graphic,
+        animationName,
+        attachTo,
+        x = 0,
+        y = 0,
+        loop = false,
+        replaceGraphic = false
+    }: { 
+        graphic: string, 
+        animationName: string, 
+        attachTo?: RpgComponent, 
+        x?: number, 
+        y?: number,
+        loop?: boolean,
+        replaceGraphic?: boolean
+    }): Animation | undefined {
+        if (replaceGraphic && attachTo) {
+            attachTo.showAnimation(graphic, animationName)
+            return
+        }
+        const animation = new Animation(graphic)
+        this.animationLayer.addChild(animation)
+        if (!loop) {
+            animation.onFinish = () => {
+                animation.stop()
+            }
+        }
+        if (attachTo) {
+            animation.attachTo = attachTo
+        }
+        else {
+            animation.x = x
+            animation.y = y
+        }
+        animation.play(animationName)
+        this.animations.push(animation)
+        return animation
+    }
+
+     /**
+     * Retrieve a sprite according to its identifier
+     * 
+     * @title Get Sprite
+     * @method scene.getSprite(id)
+     * @param {string} id
+     * @returns {RpgSprite | undefined}
+     * @memberof RpgScene
+     */
+    getSprite(id: string) { return this.getPlayer(id) }
+    getPlayer(id: string): RpgComponent | undefined {
+        return this.objects.get(id)
+    }
+
+     /**
+     * Retrieve a sprite that the player controls
+     * 
+     * @title Get Current Player
+     * @method scene.getCurrentPlayer()
+     * @returns {RpgSprite | undefined}
+     * @memberof RpgScene
+     */
+    getCurrentPlayer(): RpgSprite | RpgComponent | undefined {
+        return this.objects.get(this.game.playerId)
+    }
+
+    // Hooks
+    onInit() {}
+    onLoad() {}
+    onChanges(obj) {}
+    onDraw(t: number) {}
+    onAddSprite(sprite: RpgSprite) {}
+    onRemoveSprite(sprite: RpgSprite) {}
+}
+
+export interface Scene {
+    inputs: Controls,
+    updateScene(obj: SceneObservableData)
+}

package/src/Scene/SceneData.ts

@@ -0,0 +1,13 @@
+export interface SceneDataOptions {
+    inputs?: {
+
+    }
+}
+
+export function SceneData(options) {
+    return (target) => {
+        for (let key in options) {
+            target.prototype[key] = options[key]
+        }
+    }
+}