@rpgjs/client 3.3.2 → 4.0.0-beta.3

package/src/Tilemap/CommonLayer.ts

@@ -0,0 +1,20 @@
+import { Layer } from "@rpgjs/tiled"
+import TileMap from './index'
+import { Container } from "pixi.js"
+
+export class CommonLayer extends Container {
+    z: number
+
+    constructor(protected layer: Layer, protected map: TileMap) {
+        super()
+        this.applyProperties()
+    }
+
+    applyProperties() {
+        this.alpha = this.layer.opacity ?? 1
+        this.visible = this.layer.visible ?? true
+        this.x = this.layer.offsetx ?? 0
+        this.y = this.layer.offsety ?? 0
+        this.z = this.layer.properties.z ?? 0
+    }
+}

package/src/Tilemap/ImageLayer.ts

@@ -0,0 +1,20 @@
+import { CommonLayer } from './CommonLayer';
+import { Texture, TilingSprite } from 'pixi.js';
+
+export default class ImageLayer extends CommonLayer {
+  applyProperties() {
+    super.applyProperties()
+    const engine = this.map['renderer']['clientEngine']
+    if (this.layer.image && this.layer.image.source && engine) {
+      const { width, height, source } = this.layer.image
+      const data = this.map.getData()
+      const texture = Texture.from(engine.getResourceUrl(source))
+      const tilingSprite = new TilingSprite(
+          texture,
+          this.layer.repeatx ? data.width * data.tilewidth : width,
+          this.layer.repeaty ? data.height * data.tileheight : height
+      )
+      this.addChild(tilingSprite)
+    }
+  }
+}

package/src/Tilemap/Tile.ts

@@ -0,0 +1,80 @@
+import { Texture, AnimatedSprite, groupD8 } from "pixi.js";
+import TileSet from "./TileSet";
+import { Tile as TiledTileClass } from '@rpgjs/tiled'
+import { CompositeTilemap } from "@pixi/tilemap";
+
+export default class Tile extends AnimatedSprite {
+    static getTextures(tile: TiledTileClass, tileSet: TileSet) {
+        const textures: Texture[] = [];
+
+        if (tile.animations && tile.animations.length) {
+            tile.animations.forEach(frame => {
+                textures.push(tileSet.textures[frame.tileid].clone())
+            });
+        } else {
+            textures.push(tileSet.textures[tile.gid - tileSet.firstgid].clone())
+        }
+
+        return textures;
+    }
+
+    animations: { tileid: number, duration: number }[] = []
+    _x: number = 0 
+    _y: number = 0
+    pointsBufIndex: number
+    properties: any = {}
+
+    constructor(
+        private tile: TiledTileClass,
+        private tileSet: TileSet
+    ) {
+        super(Tile.getTextures(tile, tileSet));
+        this.animations = tile.animations || []
+        this.properties = tile.properties
+        this.textures = Tile.getTextures(tile, tileSet)
+        this.texture = this.textures[0] as Texture
+        this.flip()
+    }
+
+    get gid() {
+        return this.tile.gid
+    }
+
+    setAnimation(frame: CompositeTilemap) {
+        const size = this.animations.length
+        if (size > 1) {
+            const offest = (this.animations[1].tileid - this.animations[0].tileid) * this.width
+            frame.tileAnimX(offest, size)
+        }
+    }
+
+    flip() {
+        let symmetry
+        let i=0
+        const add = (symmetrySecond) => {
+            i++
+            if (symmetry) symmetry = groupD8.add(symmetry, symmetrySecond)
+            else symmetry = symmetrySecond    
+        }
+
+        if (this.tile.horizontalFlip) {
+            add(groupD8.MIRROR_HORIZONTAL)
+        }
+
+        if (this.tile.verticalFlip) {
+            add(groupD8.MIRROR_VERTICAL)
+        }
+
+        if (this.tile.diagonalFlip) {
+            if (i % 2 == 0) {
+                add(groupD8.MAIN_DIAGONAL)
+            }
+            else {
+                add(groupD8.REVERSE_DIAGONAL)
+            }
+        }
+
+        if (symmetry) this.texture.rotate = symmetry
+        
+    }
+}

package/src/Tilemap/TileLayer.ts

@@ -0,0 +1,142 @@
+import Tile from './Tile';
+import { CompositeTilemap, settings, POINT_STRUCT_SIZE, Tilemap } from '@pixi/tilemap'
+import { Layer, Tile as TileClass } from '@rpgjs/tiled';
+import TileSet from './TileSet';
+import TileMap from '.';
+import { CommonLayer } from './CommonLayer';
+
+settings.use32bitIndex = true
+
+export default class TileLayer extends CommonLayer {
+    private tilemap: CompositeTilemap
+    private _tiles: any = {}
+    tiles: (TileClass | null)[]
+
+    static findTileSet(gid: number, tileSets: TileSet[]) {
+        let tileset: TileSet | undefined
+        for (let i = tileSets.length - 1; i >= 0; i--) {
+            tileset = tileSets[i]
+            if (tileset.firstgid && tileset.firstgid <= gid) {
+                break;
+            }
+        }
+        return tileset;
+    }
+
+    constructor(layer: Layer, private tileSets: TileSet[], map: TileMap) {
+        super(layer, map)
+    }
+
+    /** @internal */
+    createTile(x: number, y: number, options: any = {}): Tile | undefined {
+        const { real, filter } = options
+        const { width, tilewidth, tileheight } = this.map.getData()
+        if (real) {
+            x = Math.floor(x / tilewidth)
+            y = Math.floor(y / tileheight)
+        }
+        const i = x + y * width;
+        const tiledTile = this.layer.getTileByIndex(i)
+
+        if (!tiledTile || (tiledTile && tiledTile.gid == 0)) return
+
+        const tileset = TileLayer.findTileSet(
+            tiledTile.gid,
+            this.tileSets
+        )
+
+        if (!tileset) return
+
+        const tile = new Tile(
+            tiledTile,
+            tileset
+        )
+
+        tile.x = x * tilewidth;
+        tile.y =
+            y * tileheight +
+            (tileheight -
+                tile.texture.height);
+
+        tile._x = x;
+        tile._y = y;
+
+        if (tileset.tileoffset) {
+            tile.x += tileset.tileoffset.x ?? 0;
+            tile.y += tileset.tileoffset.y ?? 0;
+        }
+
+        if (filter) {
+            const ret = filter(tile)
+            if (!ret) return
+        }
+        return tile
+    }
+
+    /** @internal */
+    changeTile(x: number, y: number) {
+        const { tilewidth, tileheight } = this.map.getData()
+        x = Math.floor(x / tilewidth)
+        y = Math.floor(y / tileheight)
+        const oldTile: Tile = this._tiles[x + ';' + y]
+        const newTile = this.createTile(x, y)
+        if (!oldTile && newTile) {
+            this.addFrame(newTile, x, y)
+        }
+        else {
+            if (newTile) {
+                const bufComposite: CompositeTilemap = new CompositeTilemap()
+                const frame = bufComposite.tile(newTile.texture, newTile.x, newTile.y)
+                newTile.setAnimation(frame)
+                this._tiles[x + ';' + y] = newTile
+                // @ts-ignore
+                const pointsBufComposite = (bufComposite.children[0]  as Tilemap).pointsBuf
+                    // Change Texture (=0, 1 and 7, rotate (=4), animX (=5), animY (=6))
+                    ;[0, 1, 4, 6, 7, 8].forEach((i) => {
+                        if (this.pointsBuf) this.pointsBuf[oldTile.pointsBufIndex + i] = pointsBufComposite[i]
+                    })
+                // @ts-ignore
+                this.tilemap.children[0].modificationMarker = 0
+                this.addFrame(newTile, x, y)
+                this['modificationMarker'] = 0
+            }
+            else {
+                delete this._tiles[x + ';' + y]
+                if (this.pointsBuf) this.pointsBuf.splice(oldTile.pointsBufIndex, POINT_STRUCT_SIZE)
+            }
+        }
+    }
+
+    /** @internal */
+    get pointsBuf(): number[] | null {
+        const child = this.tilemap.children[0] as Tilemap
+        if (!child) return null
+        return child['pointsBuf']
+    }
+
+    private addFrame(tile: Tile, x: number, y: number) {
+        const frame = this.tilemap.tile(tile.texture, tile.x, tile.y, {
+            rotate: tile.texture.rotate
+        })
+        const pb = this.pointsBuf
+        if (!pb) return null
+        tile.pointsBufIndex = pb.length - POINT_STRUCT_SIZE
+        tile.setAnimation(frame)
+        this._tiles[x + ';' + y] = tile
+    }
+
+    /** @internal */
+    create() {
+        this.tilemap = new CompositeTilemap()
+        const { width, height } = this.map.getData()
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const tile = this.createTile(x, y)
+                if (tile) {
+                    this.addFrame(tile, x, y)
+                }
+            }
+        }
+        this.addChild(this.tilemap as any)
+    }
+}

package/src/Tilemap/TileSet.ts

@@ -0,0 +1,40 @@
+import { spritesheets } from '../Sprite/Spritesheets'
+import { TiledTileset, Tileset as TiledTilesetClass } from '@rpgjs/tiled'
+import { log } from '../Logger'
+import { Texture, BaseTexture, Rectangle } from 'pixi.js'
+
+export default class TileSet extends TiledTilesetClass {
+    private baseTexture: BaseTexture
+    public textures: Texture[] = []
+
+    constructor(tileSet: TiledTileset) {
+        super(tileSet)
+    }
+
+    /** @internal */
+    load() {
+        const spritesheet = spritesheets.get(this.name)
+        if (!spritesheet) {
+            throw log(`Impossible to find ${this.name} tileset`)
+        }
+        this.baseTexture = spritesheet.resource
+        for (
+            let y = this.margin;
+            y < this.image.height;
+            y += this.tileheight + this.spacing
+        ) {
+            for (
+                let x = this.margin;
+                x < this.image.width;
+                x += this.tilewidth + this.spacing
+            ) {
+                this.textures.push(
+                    new Texture(
+                        this.baseTexture,
+                        new Rectangle(+x, +y, +this.tilewidth, +this.tileheight)
+                    )
+                )
+            }
+        }
+    }
+}

package/src/Tilemap/index.ts

@@ -0,0 +1,173 @@
+import { Utils } from '@rpgjs/common'
+import ImageLayer from './ImageLayer'
+import TileLayer from './TileLayer'
+import TileSet from './TileSet'
+import Tile from './Tile'
+import { log } from '../Logger'
+import { TiledMap, TiledLayerType, Layer } from '@rpgjs/tiled'
+import { RpgRenderer } from '../Renderer'
+import { Container, Graphics } from 'pixi.js'
+
+const { intersection } = Utils
+
+export interface MapInfo extends TiledMap {
+    layers: Layer[]
+}
+
+export default class TileMap extends Container {
+    background: Graphics = new Graphics()
+    tilewidth: number = 0 
+    tileheight: number = 0
+    private frameRateAnimation: number = 10
+    tilesets: TileSet[] = []
+    layers: {
+        [layerName: string]: TileLayer | ImageLayer
+    } = {}
+    private tilesLayer: Container = new Container()
+    private frameTile: number = 0
+
+
+    constructor(private data: MapInfo, private renderer: RpgRenderer) {
+        super()
+        this.x = 0
+        this.y = 0
+        this.create(data)
+    }
+
+    /** @internal */
+    drawAnimateTile(frame: number) {
+        if (frame % this.frameRateAnimation == 0) {
+           this.renderer['renderer'].plugins.tilemap.tileAnim[0] = this.frameTile
+           this.frameTile++
+        }
+    }
+
+    getData(): MapInfo {
+        return this.data
+    }
+
+    setBackgroundColor(color: string) {
+        color = color.replace('#', '')
+        this.background.beginFill(parseInt(color, 16))
+        this.background.drawRect(
+            0,
+            0,
+            (this.width || 0) * (this.tilewidth || 0),
+            (this.height || 0) * (this.tileheight || 0)
+        );
+        this.background.endFill()
+    }
+
+    private create(data: MapInfo) {
+        this.data = data
+        Object.assign(this, data)
+        if (this.data.backgroundcolor) this.setBackgroundColor(this.data.backgroundcolor)
+        this.addChild(this.background);
+        this.tilesets = this.data.tilesets.map((tileSet) => {
+            return new TileSet(tileSet)
+        })
+    }
+
+    /** @internal */
+    createOverlayTiles(x: number, y: number, instance) {
+        const tilesLayer: any = []
+        this.data.layers.forEach((layerData) => {
+            switch (layerData.type) {
+                case TiledLayerType.Tile: {
+                    const tileLayer = new TileLayer(layerData, this.tilesets, this)
+                    const tile = tileLayer.createTile(x, y, {
+                        real: true,
+                        filter: (tile: Tile) => {
+                            const { data, y: yObject, z: zObject } = instance
+                            const { hHitbox, height } = data
+                            const zLayer = tileLayer.z
+                            const tileHasZ = tile.properties.z !== undefined
+                            let { z } = tile.properties
+
+                            if (zLayer !== undefined) {
+                                z = zLayer + (z !== undefined ? z : 0)
+                            }
+
+                            if (z == undefined) return false 
+
+                            const realZ = z * tile.height
+
+                            if (zObject + height < realZ) {
+                                return true
+                            }
+
+                            // player is on a tile but the player has a high z
+                            if (zObject > realZ + tile.height) {
+                                return false
+                            }
+
+                            if (!tileHasZ) return false 
+
+                            // is front of tile
+                            if (yObject + hHitbox > tile.y + tile.height) {
+                                // if (yObject - tile.y >= height) {
+                                //     return false
+                                // }
+                                const zIntersection = intersection([zObject, zObject + height], [realZ, realZ + tile.height])
+                                if (!zIntersection) {
+                                    return true
+                                }
+                                return false
+                            }
+                            return true
+                        }
+                    })
+                    if (tile) {
+                        tileLayer.addChild(tile)
+                        const size = tile.animations.length
+                        if (size > 0) {
+                            const ms = 1000 / 60
+                            tile.animationSpeed = ms / (ms * this.frameRateAnimation)
+                            const frameIndex = (this.frameTile-1) - (size * Math.floor(this.frameTile / size))
+                            tile.gotoAndPlay(frameIndex)
+                        }
+                        tilesLayer.push(tileLayer)
+                    }
+                    break;
+                }
+            }
+        })
+        return tilesLayer
+    }
+
+    /** @internal */
+    changeTile(x: number, y: number, layerName: string) {
+        const layer = this.layers[layerName]
+        if (!layer) throw log(`${layerName} not exists`)
+        if (layer instanceof TileLayer) {
+            layer.changeTile(x, y)
+        }     
+    }
+
+    /** @internal */
+    load(options?: { drawTiles: boolean | undefined, isUpdate?: boolean }) {
+        this.tilesLayer.removeChildren()
+
+        this.tilesets.forEach(tileset => tileset.load())
+       
+        this.data.layers.forEach((layerData) => {
+            switch (layerData.type) {
+                case TiledLayerType.Tile: {
+                    const tileLayer = new TileLayer(layerData, this.tilesets, this)
+                    if (options?.drawTiles) tileLayer.create()
+                    this.layers[layerData.name] = tileLayer
+                    this.tilesLayer.addChild(tileLayer)
+                    break;
+                }
+                case TiledLayerType.Image: {
+                    const imageLayer = new ImageLayer(layerData, this)
+                    this.layers[layerData.name] = imageLayer
+                    this.tilesLayer.addChild(imageLayer)
+                    break;
+                }
+            }
+        })
+
+        this.addChild(this.tilesLayer)
+    }
+}

package/src/clientEntryPoint.ts

@@ -0,0 +1,141 @@
+import { HookClient, loadModules, ModuleType } from '@rpgjs/common'
+import { GameEngineClient } from './GameEngine'
+import { RpgClientEngine } from './RpgClientEngine'
+
+interface RpgClientEntryPointOptions {
+    /** 
+     * Represents socket io client but you can put something else (which is the same schema as socket io)
+     * 
+     * @prop {SocketIO or other} io
+     * @memberof RpgClientEntryPoint
+     * */
+    io: any
+    /** 
+     * Canvas Options
+     * 
+     * * {boolean} [options.transparent=false] - If the render view is transparent, default false
+     * * {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for
+     *   resolutions other than 1
+     * * {boolean} [options.antialias=false] - sets antialias
+     * * {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The
+     *  resolution of the renderer retina would be 2.
+     * * {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation,
+     *  enable this if you need to call toDataUrl on the webgl context.
+     * * {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or
+     *      not before the new render pass.
+     * * {number} [options.backgroundColor=0x000000] - The background color of the rendered area
+     *  (shown if not transparent).
+     * 
+     * @prop {object} [canvas]
+     * @memberof RpgClientEntryPoint
+     * */
+     canvas?: {
+        transparent?: boolean,
+        autoDensity?: boolean,
+        antialias?: boolean,
+        resolution?: number
+        preserveDrawingBuffer?: boolean
+        backgroundColor?: number
+    }
+    /** 
+     * The element selector that will display the canvas. By default, `#rpg`
+     * 
+     * @prop {string} [selector]
+     * @memberof RpgClientEntryPoint
+     * */
+    selector?: string,
+
+    /** 
+     * The selector that corresponds to the GUIs. By default, `#gui`
+     * If you didn't put a GUI element in the div, an element will be automatically created.
+     * 
+     * @prop {string} [selectorGui]
+     * @memberof RpgClientEntryPoint
+     * */
+    selectorGui?: string
+
+    /** 
+     * The selector that corresponds to the element contains canvas. By default, `#canvas`
+     * If you didn't put element in the main div, an element will be automatically created.
+     * 
+     * @prop {string} [selectorCanvas]
+     * @memberof RpgClientEntryPoint
+     * */
+    selectorCanvas?: string
+
+    standalone?: boolean
+
+    /** 
+     * The general configurations of the game. For example, default keyboard keys, cursor noise. This is information that external modules can reuse
+     * 
+     * @prop {object} [globalConfig]
+     * @memberof RpgClientEntryPoint
+     * */
+    globalConfig?: any
+
+    drawMap?: boolean
+
+    /** 
+     * The maximum number of fps for the rendering
+     * 
+     * @prop {object} [maxFps]
+     * @since 3.0.2
+     * @memberof RpgClientEntryPoint
+     * */
+    maxFps?: number
+
+    /** 
+     * Put the number of FPS that the server processes. It allows to synchronize the client rendering with the server. The default value is 60
+     * 
+     * @prop {object} [serverFps]
+     * @since 3.0.2
+     * @memberof RpgClientEntryPoint
+     * */
+    serverFps?: number
+}
+
+export default (modules: ModuleType[], options: RpgClientEntryPointOptions): RpgClientEngine => {
+
+    if (!options.globalConfig) options.globalConfig = {}
+
+    const relations = {
+        onInit: HookClient.AddSprite,
+        onDestroy: HookClient.RemoveSprite,
+        onUpdate: HookClient.UpdateSprite,
+        onChanges: HookClient.ChangesSprite,
+        onMove: HookClient.SpriteMove
+    }
+
+    const relationsMap = {
+        onAddSprite: HookClient.SceneAddSprite,
+        onRemoveSprite: HookClient.SceneRemoveSprite,
+        onBeforeLoading: HookClient.BeforeSceneLoading,
+        onAfterLoading: HookClient.AfterSceneLoading,
+        onMapLoading: HookClient.SceneMapLoading,
+        onChanges: HookClient.SceneOnChanges,
+        onDraw: HookClient.SceneDraw
+    }
+
+    const relationsEngine = {
+        onStart: HookClient.Start,
+        onStep: HookClient.Step,
+        onConnected: HookClient.Connected,
+        onDisconnect: HookClient.Disconnect,
+        onConnectError: HookClient.ConnectedError,
+        onInput: HookClient.SendInput,
+        onWindowResize: HookClient.WindowResize
+    }
+
+    loadModules(modules, {
+        side: 'client',
+        relations: {
+            player: relations,
+            sceneMap: relationsMap,
+            engine: relationsEngine
+        }
+    })
+
+    const gameEngine = new GameEngineClient()
+    const clientEngine = new RpgClientEngine(gameEngine, options)
+    return clientEngine
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+export { Direction, Control, Input, PrebuiltGui, HookServer, HookClient, RpgPlugin, RpgModule, RpgCommonPlayer as RpgSpriteLogic } from '@rpgjs/common'
+export { default as entryPoint } from './clientEntryPoint'
+export { RpgClient, RpgSceneHooks, RpgSceneMapHooks, RpgSpriteHooks, RpgClientEngineHooks } from './RpgClient'
+export { Scene as RpgScene } from './Scene/Scene'
+export { RpgClientEngine } from './RpgClientEngine'
+export { Spritesheet } from './Sprite/Spritesheet'
+export { Sound } from './Sound/Sound'
+export { Howler as RpgGlobalSound }  from 'howler'
+export { RpgSound } from './Sound/RpgSound'
+export * as Presets from './Presets/AnimationSpritesheet'
+export { Animation } from './Effects/AnimationCharacter'
+export { Animation as AnimationClass } from './Effects/Animation'
+export { ISpriteCharacter } from './Interfaces/Character'
+export { SceneData } from './Scene/SceneData'
+export { SceneMap as RpgSceneMap } from './Scene/Map'
+export { RpgGui } from './RpgGui';
+export { Timeline, Ease } from './Effects/Timeline';
+export { RpgComponent, RpgComponent as RpgSprite } from './Components/Component'
+
+import { spritesheets } from './Sprite/Spritesheets'
+import { sounds } from './Sound/Sounds'
+export const RpgResource = {
+    spritesheets,
+    sounds
+}