rewrote the app code to more easily allow for collisions

front/dist/maps/map2.json

@@ -155,6 +155,12 @@
                 }, 
                 {
                  "id":77,
+                  "properties":[
+                    {
+                      "name":"collides",
+                      "type":"bool",
+                      "value":true
+                    }],
                  "terrain":[2, 2, 2, 2]
                 }, 
                 {

front/src/Phaser/Entity/PlayableCaracter.ts

@@ -0,0 +1,16 @@
+import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation";
+import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
+
+export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
+
+    constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: string | number) {
+        super(scene, x, y, texture, frame);
+
+        scene.sys.updateList.add(this);
+        scene.sys.displayList.add(this);
+        this.setScale(2);
+        scene.physics.world.enableBody(this);
+        this.setImmovable(true);
+        this.setCollideWorldBounds(true)
+    }
+}

front/src/Phaser/Entity/Sprite.ts

@@ -0,0 +1,8 @@
+export class Sprite extends Phaser.GameObjects.Sprite {
+
+    constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: number | string) {
+        super(scene, x, y, texture, frame);
+        scene.sys.updateList.add(this);
+        scene.sys.displayList.add(this);
+    }
+}

front/src/Phaser/Game/CameraManager.ts

@@ -1,54 +0,0 @@
-import {RESOLUTION} from "../../Enum/EnvironmentVariable";
-import {Player} from "../Player/Player";
-import {MapManagerInterface} from "./MapManager";
-import {PlayerAnimationNames} from "../Player/Animation";
-
-export interface CameraManagerInterface {
-    MapManager : MapManagerInterface;
-    moveCamera(CurrentPlayer : Player) : void;
-}
-
-export class CameraManager implements CameraManagerInterface{
-    Scene : Phaser.Scene;
-    Camera : Phaser.Cameras.Scene2D.Camera;
-    MapManager : MapManagerInterface;
-
-    constructor(
-        Scene: Phaser.Scene,
-        Camera : Phaser.Cameras.Scene2D.Camera,
-        MapManager: MapManagerInterface,
-    ) {
-        this.Scene = Scene;
-        this.MapManager = MapManager;
-        this.Camera = Camera;
-    }
-
-    moveCamera(CurrentPlayer : Player): void {
-        //center of camera
-        let startX = ((window.innerWidth / 2) / RESOLUTION);
-        let startY = ((window.innerHeight / 2) / RESOLUTION);
-
-        let limit = {
-            top: startY,
-            left: startX,
-            bottom : this.MapManager.Map.heightInPixels - startY,
-            right: this.MapManager.Map.widthInPixels - startX,
-        };
-
-        if(CurrentPlayer.x < limit.left){
-            this.Camera.scrollX = 0;
-        }else if(CurrentPlayer.x > limit.right){
-            this.Camera.scrollX = (limit.right - startX);
-        }else {
-            this.Camera.scrollX = (CurrentPlayer.x - startX);
-        }
-
-        if(CurrentPlayer.y < limit.top){
-            this.Camera.scrollY = 0;
-        }else if(CurrentPlayer.y > limit.bottom){
-            this.Camera.scrollY = (limit.bottom - startY);
-        }else {
-            this.Camera.scrollY = (CurrentPlayer.y - startY);
-        }
-    }
-}

front/src/Phaser/Game/GameScene.ts

@@ -1,8 +1,13 @@
-import {MapManagerInterface, MapManager} from "./MapManager";
 import {GameManagerInterface} from "./GameManager";
+import {UserInputManager} from "../UserInput/UserInputManager";
+import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation";
+import {Player} from "../Player/Player";
 
 export enum Textures {
     Rock = 'rock',
+    Player = 'player',
+    Map = 'map',
+    Tiles = 'tiles'
 }
 
 export interface GameSceneInterface extends Phaser.Scene {
@@ -10,8 +15,11 @@ export interface GameSceneInterface extends Phaser.Scene {
     sharedUserPosition(data : []): void;
 }
 export class GameScene extends Phaser.Scene implements GameSceneInterface{
-    private MapManager : MapManagerInterface;
+    //private MapManager : MapManagerInterface;
     RoomId : string;
+    private player: Player;
+    private rock: Phaser.Physics.Arcade.Sprite;
+    private userInputManager: UserInputManager;
 
     constructor(RoomId : string, GameManager : GameManagerInterface) {
         super({
@@ -23,26 +31,72 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
     //hook preload scene
     preload(): void {
         this.load.image(Textures.Rock, 'resources/objects/rockSprite.png');
-        this.load.image('tiles', 'maps/tiles.png');
+        this.load.image(Textures.Tiles, 'maps/tiles.png');
-        this.load.tilemapTiledJSON('map', 'maps/map2.json');
+        this.load.tilemapTiledJSON(Textures.Map, 'maps/map2.json');
-        this.load.spritesheet('player',
+        this.load.spritesheet(Textures.Player,
             'resources/characters/pipoya/Male 01-1.png',
             { frameWidth: 32, frameHeight: 32 }
         );
-    }
 
-    //hook initialisation
+        getPlayerAnimations().forEach(d => {
-    init(){}
+            this.anims.create({
+                key: d.key,
+                frames: this.anims.generateFrameNumbers(d.frameModel, { start: d.frameStart, end: d.frameEnd }),
+                frameRate: d.frameRate,
+                //repeat: d.repeat
+            });
+        });
+    }
 
     //hook create scene
     create(): void {
-        //create map manager
+        this.userInputManager = new UserInputManager(this);
-        this.MapManager = new MapManager(this);
+
+        //create entities
+        this.player = new Player(this, 400, 400);
+        this.rock = this.physics.add.sprite(200, 400, Textures.Rock, 26).setImmovable(true);
+        this.physics.world.addCollider(this.player, this.rock, (player: Player, rock) => {
+            rock.destroy();
+        });
+        
+        //create map
+        let currentMap = this.add.tilemap(Textures.Map);
+        let terrain = currentMap.addTilesetImage(Textures.Tiles, "tiles");
+        let bottomLayer = currentMap.createStaticLayer("Calque 1", [terrain], 0, 0).setDepth(-1);
+        let topLayer =  currentMap.createStaticLayer("Calque 2", [terrain], 0, 0);
+        this.physics.world.setBounds(0,0, currentMap.widthInPixels, currentMap.heightInPixels);
+        
+        this.physics.add.collider(this.player, topLayer);
+        topLayer.setCollisionByProperty({collides:true});
+
+        
+        this.cameras.main.startFollow(this.player);
+
+        
+        
+        //debug code
+        //debug code to see the collision hitbox of the object in the top layer
+        topLayer.renderDebug(this.add.graphics(),{
+            tileColor: null, //non-colliding tiles
+            collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles,
+            faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges
+        })
+        
+        // debug code to get a tile properties by clicking on it
+        this.input.on("pointerdown", (pointer: Phaser.Input.Pointer)=>{
+            //pixel position to tile position
+            let tile = currentMap.getTileAt(currentMap.worldToTileX(pointer.worldX), currentMap.worldToTileY(pointer.worldY));
+            if(tile){
+                console.log(tile);
+            }
+        });
     }
 
     //hook update
     update(dt: number): void {
-        this.MapManager.update();
+        let eventList = this.userInputManager.getEventListForGameTick();
+        
+        this.player.move(eventList);
     }
 
     sharedUserPosition(data: []): void {

front/src/Phaser/Game/MapManager.ts

@@ -1,66 +0,0 @@
-import {CameraManager, CameraManagerInterface} from "./CameraManager";
-import {RESOLUTION} from "../../Enum/EnvironmentVariable";
-import {Player} from "../Player/Player";
-import {Rock} from "../Rock/Rock";
-import {GameSceneInterface} from "./GameScene";
-import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
-
-export interface MapManagerInterface {
-    Map: Phaser.Tilemaps.Tilemap;
-    Terrain: Phaser.Tilemaps.Tileset;
-    Camera: CameraManagerInterface;
-    Scene: GameSceneInterface;
-    userInputManager: UserInputManager;
-    update(): void;
-}
-export class MapManager implements MapManagerInterface{
-    Terrain : Phaser.Tilemaps.Tileset;
-    Camera: CameraManagerInterface;
-    CurrentPlayer: Player;
-    Scene: GameSceneInterface;
-    Map: Phaser.Tilemaps.Tilemap;
-    startX = (window.innerWidth / 2) / RESOLUTION;
-    startY = (window.innerHeight / 2) / RESOLUTION;
-    userInputManager: UserInputManager;
-    private rock: Rock;
-
-    constructor(scene: GameSceneInterface){
-        this.Scene = scene;
-
-        //initalise map
-        this.Map = this.Scene.add.tilemap("map");
-        this.Terrain = this.Map.addTilesetImage("tiles", "tiles");
-        this.Map.createStaticLayer("tiles", "tiles");
-        this.Map.createStaticLayer("Calque 1", [this.Terrain], 0, 0);
-        this.Map.createStaticLayer("Calque 2", [this.Terrain], 0, 0);
-
-        //initialise camera
-        this.Camera = new CameraManager(this.Scene, this.Scene.cameras.main, this);
-        this.userInputManager = new UserInputManager(this.Scene);
-        //initialise player
-        this.CurrentPlayer = new Player(
-            this.Scene,
-            this.startX,
-            this.startY,
-            this.Camera,
-            this
-        );
-        this.CurrentPlayer.initAnimation();
-        this.rock = new Rock(
-            this.Scene,
-            100,
-            300,
-        );
-        //this.rock.set()
-    }
-
-    update() : void {
-        let activeEvents = this.userInputManager.getEventListForGameTick();
-        
-        this.CurrentPlayer.move(activeEvents);
-        
-        /*if (activeEvents.get(UserInputEvent.Interact)) {
-            
-        }*/
-    }
-}

front/src/Phaser/Player/Animation.ts

@@ -1,7 +1,10 @@
+import {Textures} from "../Game/GameScene";
+import {PlayableCaracter} from "../Entity/PlayableCaracter";
+
 interface AnimationData {
     key: string;
     frameRate: number;
-    repeat: number;
+    //repeat: number;
     frameModel: string; //todo use an enum
     frameStart: number;
     frameEnd: number;
@@ -15,42 +18,39 @@ export enum PlayerAnimationNames {
     None = 'none',
 }
 
-export const getPlayerAnimations = (PlayerValue : string): AnimationData[] => {
+export const getPlayerAnimations = (): AnimationData[] => {
     return [{
         key: PlayerAnimationNames.WalkDown,
-        frameModel: PlayerValue,
+        frameModel: Textures.Player,
         frameStart: 0,
         frameEnd: 2,
         frameRate: 10,
-        repeat: -1
+        //repeat: -1
     }, {
         key: PlayerAnimationNames.WalkLeft,
-        frameModel: PlayerValue,
+        frameModel: Textures.Player,
         frameStart: 3,
         frameEnd: 5,
         frameRate: 10,
-        repeat: -1
+        //repeat: -1
     }, {
         key: PlayerAnimationNames.WalkRight,
-        frameModel: PlayerValue,
+        frameModel: Textures.Player,
         frameStart: 6,
         frameEnd: 8,
         frameRate: 10,
-        repeat: -1
+        //repeat: -1
     }, {
         key: PlayerAnimationNames.WalkUp,
-        frameModel: PlayerValue,
+        frameModel: Textures.Player,
         frameStart: 9,
         frameEnd: 11,
         frameRate: 10,
-        repeat: -1
+        //repeat: -1
     }];
 };
 
-export const playAnimation = (Player : Phaser.GameObjects.Sprite, direction : string) => {
+export const playAnimation = (Player : PlayableCaracter, direction : string) => {
-    if (!Player.anims.currentAnim || Player.anims.currentAnim.key !== direction) {
+    //if (direction === 'none') return;
-        Player.anims.play(direction);
+    //Player.play(direction, true);
-    } else if (direction === PlayerAnimationNames.None && Player.anims.currentAnim) {
-        Player.anims.currentAnim.destroy();
-    }
 };

front/src/Phaser/Player/Player.ts

@@ -1,112 +1,44 @@
-import {MapManagerInterface} from "../Game/MapManager";
 import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "./Animation";
-import {GameSceneInterface} from "../Game/GameScene";
+import {GameSceneInterface, Textures} from "../Game/GameScene";
 import {ConnexionInstance} from "../Game/GameManager";
-import {CameraManagerInterface} from "../Game/CameraManager";
 import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
+import {PlayableCaracter} from "../Entity/PlayableCaracter";
 
-export class Player extends Phaser.GameObjects.Sprite{
+export class Player extends PlayableCaracter{
-    MapManager : MapManagerInterface;
+    
-    PlayerValue : string;
+    constructor(scene: Phaser.Scene, x: number, y: number) {
-    CameraManager: CameraManagerInterface;
+        super(scene, x, y, Textures.Player, 26);
-
+        this.setSize(32, 32); //edit the hitbox to better match the caracter model
-    constructor(
-        Scene : GameSceneInterface,
-        x : number,
-        y : number,
-        CameraManager: CameraManagerInterface,
-        MapManager: MapManagerInterface,
-        PlayerValue : string = "player"
-    ) {
-        super(Scene, x, y, PlayerValue);
-        this.PlayerValue = PlayerValue;
-        Scene.add.existing(this);
-        this.MapManager = MapManager;
-        this.CameraManager = CameraManager;
-    }
-
-
-    initAnimation(){
-        getPlayerAnimations(this.PlayerValue).forEach(d => {
-            this.scene.anims.create({
-                key: d.key,
-                frames: this.scene.anims.generateFrameNumbers(d.frameModel, { start: d.frameStart, end: d.frameEnd }),
-                frameRate: d.frameRate,
-                repeat: d.repeat
-            });
-        })
     }
 
     move(activeEvents: ActiveEventList){
-        //if user client on shift, camera and player speed
+        let speed = activeEvents.get(UserInputEvent.SpeedUp) ? 500 : 100;
-        let speedMultiplier = activeEvents.get(UserInputEvent.SpeedUp) ? 5 : 1;
         let haveMove = false;
         let direction = null;
 
         if(activeEvents.get(UserInputEvent.MoveUp)){
-            if(!this.CanMoveUp()){
+            this.setVelocity(0, -speed)
-                return;
-            }
             playAnimation(this, PlayerAnimationNames.WalkUp);
-            this.setY(this.y - (2 * speedMultiplier));
+        } else if(activeEvents.get(UserInputEvent.MoveLeft)){
-            haveMove = true;
+            this.setVelocity(-speed, 0)
-            direction = PlayerAnimationNames.WalkUp;
+        } else if(activeEvents.get(UserInputEvent.MoveDown)){
-        }
-        if(activeEvents.get(UserInputEvent.MoveLeft)){
-            if(!this.CanMoveLeft()){
-                return;
-            }
-            playAnimation(this, PlayerAnimationNames.WalkLeft);
-            this.setX(this.x - (2 * speedMultiplier));
-            haveMove = true;
-            direction = PlayerAnimationNames.WalkLeft;
-        }
-        if(activeEvents.get(UserInputEvent.MoveDown)){
-            if(!this.CanMoveDown()){
-                return;
-            }
             playAnimation(this, PlayerAnimationNames.WalkDown);
-            this.setY(this.y + (2 * speedMultiplier));
+            this.setVelocity(0, speed)
-            haveMove = true;
+        } else if(activeEvents.get(UserInputEvent.MoveRight)){
-            direction = PlayerAnimationNames.WalkDown;
+            this.setVelocity(speed, 0)
-        }
+        } else {
-        if(activeEvents.get(UserInputEvent.MoveRight)){
+            this.setVelocity(0, 0)
-            if(!this.CanMoveRight()){
-                return;
-            }
-            playAnimation(this, PlayerAnimationNames.WalkRight);
-            this.setX(this.x + (2 * speedMultiplier));
-            haveMove = true;
-            direction = PlayerAnimationNames.WalkRight;
-        }
-        if(!haveMove){
             playAnimation(this, PlayerAnimationNames.None);
-        }else{
-            this.sharePosition(direction);
         }
-
-        this.CameraManager.moveCamera(this);
     }
 
-    private sharePosition(direction : string){
+    stop() {
+        this.setVelocity(0, 0)
+    }
+
+    /*private sharePosition(direction : string){
         if(ConnexionInstance) {
             ConnexionInstance.sharePosition((this.scene as GameSceneInterface).RoomId, this.x, this.y, direction);
         }
-    }
+    }*/
-
-    private CanMoveUp(){
-        return this.y > 0;
-    }
-
-    private CanMoveLeft(){
-        return this.x > 0;
-    }
-
-    private CanMoveDown(){
-        return this.MapManager.Map.heightInPixels > this.y;
-    }
-
-    private CanMoveRight(){
-        return this.MapManager.Map.widthInPixels > this.x;
-    }
 }

front/src/Phaser/Rock/Rock.ts

@@ -1,28 +0,0 @@
-import {GameSceneInterface, Textures} from "../Game/GameScene";
-import {CameraManagerInterface} from "../Game/CameraManager";
-import {MapManagerInterface} from "../Game/MapManager";
-
-export class Rock extends Phaser.GameObjects.Image {
-    private isMoving: boolean;
-
-    constructor(
-        Scene : GameSceneInterface,
-        x : number,
-        y : number,
-    ) {
-        super(Scene, x, y, Textures.Rock);
-        Scene.add.existing(this);
-        this.isMoving = false;
-    }
-    
-    push() {
-        console.log("the rock is pushed!")
-    }
-    
-    move() {
-        if(!this.isMoving) {
-            return;
-        }
-    }
-    
-}

front/src/index.ts

@@ -13,8 +13,11 @@ const config: GameConfig = {
     scene: gameManager.GameScenes,
     zoom: RESOLUTION,
     physics: {
-        default: 'impact'
+        default: "arcade",
-    },
+        arcade: {
+            debug: true
+        }
+    }
 };
 
 let game = new Phaser.Game(config);