Navigation

    Colyseus
    • Login
    • Search
    • Recent
    • Tags
    • Users
    1. Home
    2. Givo
    G

    Givo

    @Givo

    Chat Follow Unfollow
    1
    Reputation
    7
    Posts
    1010
    Profile views
    0
    Followers
    1
    Following
    Joined Last Online

    • Profile
    • More
      • Continue chat with Givo
      • Flag Profile
      • Following
      • Followers
      • Topics
      • Posts
      • Best
      • Groups
    Givo Follow

    Posts made by Givo

    RE: Can't move babylon.js

    I was able to fix it! Babylon.js was loading a lot faster than colyseus, so using the scene.registerAfterRender(function() {} was calling room.send before the client had even connected. I now use the pointer lock canvas.click function to start the position updates!

    demo at https://boilerplate-fps-works.herokuapp.com/

    WASD moving, mouse look

    posted in Questions & Help •
    Can't move babylon.js

    Hi!

    I've been experimenting with the babylon.js boilerplate (thanks @endel for the update!)

    I'm trying to have the playing move locally, send their position to the server, which sends it out to the other clients. But for some reason, I can't move with the current code. wasd to move and mouse locks to look. you control the free camera.

    It comes down to this error:
    0_1559938997019_error.PNG

    Here is my code:
    index.ts:

    import "./index.css";
    
    import * as BABYLON from "babylonjs";
    import Keycode from "keycode.js";
    
    import { client } from "./game/network";
    
    // Re-using server-side types for networking
    // This is optional, but highly recommended
    import { StateHandler } from "../../server/src/rooms/StateHandler";
    import { PressedKeys } from "../../server/src/entities/Player";
    import { CamPos } from "../../server/src/entities/Player";
    
    const canvas = document.getElementById('game') as HTMLCanvasElement;
    const engine = new BABYLON.Engine(canvas, true);
    
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);
    
    
    
    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    camera.keysUp = [87];
    camera.keysDown = [83];
    camera.keysLeft = [65];
    camera.keysRight = [68];
    
    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());
    
    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);
    
    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    
    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;
    
    // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
    
    // Attach default camera mouse navigation
    // camera.attachControl(canvas);
    
    // Colyseus / Join Room
    const room = client.join<StateHandler>("game");
    room.onJoin.add(() => {
        const playerViews: {[id: string]: BABYLON.Mesh} = {};
    
        room.state.players.onAdd = function(player, key) {
    		if (key != room.sessionId) {
                playerViews[key] = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
    			playerViews[key].position.set(player.position.x, player.position.y, player.position.z);
            }
        };
    
        room.state.players.onChange = function(player, key) {
    		if (key != room.sessionId) {
            playerViews[key].position.set(player.position.x, player.position.y, player.position.z);
    		}
        };
    
        room.state.players.onRemove = function(player, key) {
    		if (key != room.sessionId) {
            scene.removeMesh(playerViews[key]);
            delete playerViews[key];
    		}
        };
    	
    	
    
    })
    
    room.onStateChange.add((state) => {
        console.log("New room state:", state.toJSON());
    })
    
    
    const camposition: CamPos = { x: 0, y: 1, z:0 };
    scene.registerAfterRender(function() {
    	camposition.x = camera.position.x;
    	camposition.y = camera.position.y;
    	camposition.z = camera.position.z;
    	room.send(['pos', camposition]);
    });
    
    // Scene render loop
    engine.runRenderLoop(function() {
        scene.render();
    });
    
    // Keyboard listeners
    const keyboard: PressedKeys = { x: 0, y: 0 };
    window.addEventListener("keydown", function(e) {
        if (e.which === Keycode.LEFT) {
            keyboard.x = -1;
        } else if (e.which === Keycode.RIGHT) {
            keyboard.x = 1;
        } else if (e.which === Keycode.UP) {
            keyboard.y = -1;
        } else if (e.which === Keycode.DOWN) {
            keyboard.y = 1;
        }
        //room.send(['key', keyboard]);
    });
    
    window.addEventListener("keyup", function(e) {
        if (e.which === Keycode.LEFT) {
            keyboard.x = 0;
        } else if (e.which === Keycode.RIGHT) {
            keyboard.x = 0;
        } else if (e.which === Keycode.UP) {
            keyboard.y = 0;
        } else if (e.which === Keycode.DOWN) {
            keyboard.y = 0;
        }
        //room.send(['key', keyboard]);
    });
    
    // Resize the engine on window resize
    window.addEventListener('resize', function() {
        engine.resize();
    });
    

    gameroom.ts

    import { Room, Client } from "colyseus";
    
    import { StateHandler } from "./StateHandler";
    import { Player } from "../entities/Player";
    
    export class GameRoom extends Room<StateHandler> {
        maxClients = 8;
    
        onInit (options) {
            this.setSimulationInterval(() => this.onUpdate());
            this.setState(new StateHandler());
        }
    
        requestJoin (options) {
            return true;
        }
    
        onJoin (client) {
            const player = new Player();
            player.name = `Player ${ this.clients.length }`;
    
            this.state.players[client.sessionId] = player;
        }
    
        onMessage (client: Client, message: any) {
            const [event, data] = message;
            const player: Player = this.state.players[client.sessionId];
    
            if (event === "pos") {
                player.camPos = data;
            }
        }
    
        onUpdate () {
            for (const sessionId in this.state.players) {
                const player: Player = this.state.players[sessionId];
                player.position.x = player.camPos.x;
    			player.position.y = player.camPos.y;
                player.position.z = player.camPos.z;
    			console.log(player.camPos.x + " " + player.camPos.y + " " + player.camPos.z);
            }
        }
    
        onLeave (client: Client) {
            delete this.state.players[client.sessionId];
        }
    
        onDispose () {
        }
    
    }
    

    player.ts

    import { Schema, type } from "@colyseus/schema";
    
    export interface PressedKeys {
        x: number;
        y: number;
    }
    
    export interface CamPos {
        x: number;
        y: number;
    	z: number;
    }
    
    export class Position extends Schema {
        @type("number") x: number = 0;
        @type("number") y: number = 0;
        @type("number") z: number = 0;
    }
    
    export class Player extends Schema {
        @type("string") name: string;
        @type(Position) position = new Position();
    
        pressedKeys: PressedKeys = { x: 0, y: 0 };
    	camPos: CamPos = { x: 0, y: 1, z: 0 };
    
        constructor () {
            super();
        }
    }
    

    thanks for any help, Givo.

    Or, if it helps, here is a zip file of the whole project: https://drive.google.com/file/d/1pKI-eLp6JQhMwCfH6Qb1XWlnK-2EsKbU/view?usp=sharing

    posted in Questions & Help •
    RE: Update and Fix the babylonjs mutliplayer boilerplate

    Thanks a lot! Works great!

    posted in Questions & Help •
    RE: Update and Fix the babylonjs mutliplayer boilerplate

    Sure no problem! Always happy to help.

    posted in Questions & Help •
    Update and Fix the babylonjs mutliplayer boilerplate

    Hi!

    I'm trying to make a multiplayer game with baylon.js and the boilerplate is the only thing that was like a demo.

    It doesn't work currently, as the function that should add another player's sphere is broken in the client index.ts file.

    And I'm pretty sure it is made with colyseus 0.9x and not 0.10x and I was wondering if it could be updated and fixed.

    I'm such a noob with server-side programming. I'm more of a client-side guy.

    Thanks for any help, Givo.

    posted in Questions & Help •
    RE: Error while running npm run bundle-colyseus-client

    Thanks!

    I can try that later!

    EDIT: Works like a charm! Thanks!

    posted in Questions & Help •
    Error while running npm run bundle-colyseus-client

    Hi!

    I keep getting an error when running that command.

    0_1559137785264_error.PNG
    I blacked out my name in the image, that's why there are blank spots in the folder paths.

    All I do is follow the GitHub page and run the commands but I getting this error

    Help would be nice and appreciated.

    Givo

    posted in Questions & Help •