lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Merge pull request #45 from Kharhamel/camera

Browse source 
Better camera code
This commit is contained in:
grégoire parant 2020-04-13 20:08:33 +02:00 committed by GitHub
parent 751a9f40e5 1774594e76
commit 705617abe7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 31 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.env.template Normal file
View file

@ -0,0 +1 @@
DEBUG_MODE=false

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
.env
.idea
.vagrant
Vagrantfile

1
docker-compose.yaml
View file

@ -13,6 +13,7 @@ services:
front:
image: thecodingmachine/nodejs:12
environment:
DEBUG_MODE: "$DEBUG_MODE"
HOST: "0.0.0.0"
NODE_ENV: development
API_URL: http://api.workadventure.localhost

4
front/src/Enum/EnvironmentVariable.ts
View file

@ -1,9 +1,13 @@
const DEBUG_MODE: boolean = !!process.env.DEBUG_MODE || false;
const API_URL = process.env.API_URL || "http://api.workadventure.localhost";
const ROOM = [process.env.ROOM || "THECODINGMACHINE"];
const RESOLUTION = 2;
const ZOOM_LEVEL = 3/4;
export {
DEBUG_MODE,
API_URL,
RESOLUTION,
ZOOM_LEVEL,
ROOM
}

49
front/src/Phaser/Game/CameraManager.ts
View file

@ -1,49 +0,0 @@
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
import {Player} from "../Player/Player";
import {GameSceneInterface} from "./GameScene";
export interface CameraManagerInterface {
moveCamera(CurrentPlayer : Player) : void;
}
export class CameraManager implements CameraManagerInterface{
Scene : GameSceneInterface;
Camera : Phaser.Cameras.Scene2D.Camera;
constructor(
Scene: GameSceneInterface,
Camera : Phaser.Cameras.Scene2D.Camera,
) {
this.Scene = Scene;
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.Scene.Map.heightInPixels - startY,
right: this.Scene.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);
}
}
}

36
front/src/Phaser/Game/GameScene.ts
View file

@ -1,8 +1,7 @@
import {GameManagerInterface, StatusGameManagerEnum} from "./GameManager";
import {MessageUserPositionInterface} from "../../Connexion";
import {CameraManager, CameraManagerInterface} from "./CameraManager";
import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player";
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
import {DEBUG_MODE, RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
import Tile = Phaser.Tilemaps.Tile;
export enum Textures {
@ -22,7 +21,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
GameManager : GameManagerInterface;
RoomId : string;
Terrain : Phaser.Tilemaps.Tileset;
Camera: CameraManagerInterface;
CurrentPlayer: CurrentGamerInterface;
MapPlayers : Phaser.Physics.Arcade.Group;
Map: Phaser.Tilemaps.Tilemap;
@ -76,14 +74,22 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
//init event click
this.EventToClickOnTile();
//initialise camera
this.Camera = new CameraManager(this, this.cameras.main);
//initialise list of other player
this.MapPlayers = this.physics.add.group({ immovable: true });
//notify game manager can to create currentUser in map
this.GameManager.createCurrentPlayer();
//initialise camera
this.initCamera();
}
//todo: in a dedicated class/function?
initCamera() {
this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
this.cameras.main.startFollow(this.CurrentPlayer);
this.cameras.main.setZoom(ZOOM_LEVEL);
}
addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){
@ -97,13 +103,14 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
//this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name)
});
Layer.setCollisionByProperty({collides: true});
//debug code
//debug code to see the collision hitbox of the object in the top layer
/*Layer.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
});*/
if (DEBUG_MODE) {
//debug code to see the collision hitbox of the object in the top layer
Layer.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
});
}
});
}
@ -127,7 +134,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
this,
this.startX,
this.startY,
this.Camera,
);
this.CurrentPlayer.initAnimation();
@ -142,6 +148,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
//pixel position toz tile position
let tile = this.Map.getTileAt(this.Map.worldToTileX(pointer.worldX), this.Map.worldToTileY(pointer.worldY));
if(tile){
console.log(tile)
this.CurrentPlayer.say("Your touch " + tile.layer.name);
}
});
@ -210,7 +217,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
this,
MessageUserPosition.position.x,
MessageUserPosition.position.y,
this.Camera,
);
player.initAnimation();
this.MapPlayers.add(player);

7
front/src/Phaser/Player/Player.ts
View file

@ -1,7 +1,6 @@
import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "./Animation";
import {GameSceneInterface, Textures} from "../Game/GameScene";
import {ConnexionInstance} from "../Game/GameManager";
import {CameraManagerInterface} from "../Game/CameraManager";
import {MessageUserPositionInterface} from "../../Connexion";
import {ActiveEventList, UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
import {PlayableCaracter} from "../Entity/PlayableCaracter";
@ -9,7 +8,6 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter";
export interface CurrentGamerInterface extends PlayableCaracter{
userId : string;
PlayerValue : string;
CameraManager: CameraManagerInterface;
initAnimation() : void;
moveUser() : void;
say(text : string) : void;
@ -18,7 +16,6 @@ export interface CurrentGamerInterface extends PlayableCaracter{
export interface GamerInterface extends PlayableCaracter{
userId : string;
PlayerValue : string;
CameraManager: CameraManagerInterface;
initAnimation() : void;
updatePosition(MessageUserPosition : MessageUserPositionInterface) : void;
say(text : string) : void;
@ -27,7 +24,6 @@ export interface GamerInterface extends PlayableCaracter{
export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface {
userId: string;
PlayerValue: string;
CameraManager: CameraManagerInterface;
userInputManager: UserInputManager;
constructor(
@ -35,7 +31,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
Scene: GameSceneInterface,
x: number,
y: number,
CameraManager: CameraManagerInterface,
PlayerValue: string = Textures.Player
) {
super(Scene, x, y, PlayerValue, 1);
@ -46,7 +41,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
//set data
this.userId = userId;
this.PlayerValue = PlayerValue;
this.CameraManager = CameraManager;
//the current player model should be push away by other players to prevent conflict
this.setImmovable(false);
@ -96,7 +90,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
this.stop();
}
this.sharePosition(direction);
this.CameraManager.moveCamera(this);
}
private sharePosition(direction: string) {

4
front/src/index.ts
View file

@ -1,7 +1,7 @@
import 'phaser';
import GameConfig = Phaser.Types.Core.GameConfig;
import {GameManager} from "./Phaser/Game/GameManager";
import {RESOLUTION} from "./Enum/EnvironmentVariable";
import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
let gameManager = new GameManager();
@ -15,7 +15,7 @@ const config: GameConfig = {
physics: {
default: "arcade",
arcade: {
debug: true
debug: DEBUG_MODE
}
}
};

2
front/webpack.config.js
View file

@ -29,6 +29,6 @@ module.exports = {
new webpack.ProvidePlugin({
Phaser: 'phaser'
}),
new webpack.EnvironmentPlugin(['API_URL'])
new webpack.EnvironmentPlugin(['API_URL', 'DEBUG_MODE'])
]
};