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

Merging

Browse source
This commit is contained in:
David Négrier 2020-04-15 19:30:49 +02:00
parent c42dbc3f95 b7220a6724
commit 1dd66b4998
10 changed files with 156 additions and 77 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);
}
}
}

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

@ -1,9 +1,9 @@
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;
import {ITiledMap} from "../Map/ITiledMap";
export enum Textures {
Rock = 'rock',
@ -23,7 +23,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;
@ -42,9 +41,17 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
//hook preload scene
preload(): void {
this.load.image(Textures.Tiles, 'maps/floortileset.png');
this.load.image(Textures.Tiles2, 'maps/tilesets_deviant_milkian_1.png');
this.load.tilemapTiledJSON(Textures.Map, 'maps/map.json');
let mapUrl = 'maps/map.json';
this.load.on('filecomplete-tilemapJSON-'+Textures.Map, (key: string, type: string, data: any) => {
// Triggered when the map is loaded
// Load tiles attached to the map recursively
let map: ITiledMap = data.data;
map.tilesets.forEach((tileset) => {
let path = mapUrl.substr(0, mapUrl.lastIndexOf('/'));
this.load.image(tileset.name, path + '/' + tileset.image);
})
});
this.load.tilemapTiledJSON(Textures.Map, mapUrl);
this.load.image(Textures.Rock, 'resources/objects/rockSprite.png');
this.load.spritesheet(Textures.Player,
'resources/characters/pipoya/Male 01-1.png',
@ -80,14 +87,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){
@ -101,13 +116,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
});
}
});
}
@ -131,7 +147,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
this,
this.startX,
this.startY,
this.Camera,
);
this.CurrentPlayer.initAnimation();
@ -146,6 +161,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);
}
});
@ -214,7 +230,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
this,
MessageUserPosition.position.x,
MessageUserPosition.position.y,
this.Camera,
);
player.initAnimation();
this.MapPlayers.add(player);

113
front/src/Phaser/Map/ITiledMap.ts Normal file
View file

@ -0,0 +1,113 @@
/**
* Tiled Map Interface
*
* Represents the interface for the Tiled exported data structure (JSON). Used
* when loading resources via Resource loader.
*/
export interface ITiledMap {
width: number;
height: number;
layers: ITiledMapLayer[];
nextobjectid: number;
/**
* Map orientation (orthogonal)
*/
orientation: string;
properties: {[key: string]: string};
/**
* Render order (right-down)
*/
renderorder: string;
tileheight: number;
tilewidth: number;
tilesets: ITiledTileSet[];
version: number;
}
export interface ITiledMapLayer {
data: number[]|string;
height: number;
name: string;
opacity: number;
properties: {[key: string]: string};
encoding: string;
compression?: string;
/**
* Type of layer (tilelayer, objectgroup)
*/
type: string;
visible: boolean;
width: number;
x: number;
y: number;
/**
* Draw order (topdown (default), index)
*/
draworder: string;
objects: ITiledMapObject[];
}
export interface ITiledMapObject {
id: number;
/**
* Tile object id
*/
gid: number;
height: number;
name: string;
properties: {[key: string]: string};
rotation: number;
type: string;
visible: boolean;
width: number;
x: number;
y: number;
/**
* Whether or not object is an ellipse
*/
ellipse: boolean;
/**
* Polygon points
*/
polygon: {x: number, y: number}[];
/**
* Polyline points
*/
polyline: {x: number, y: number}[];
}
export interface ITiledTileSet {
firstgid: number;
image: string;
imageheight: number;
imagewidth: number;
margin: number;
name: string;
properties: {[key: string]: string};
spacing: number;
tilecount: number;
tileheight: number;
tilewidth: number;
transparentcolor: string;
terrains: ITiledMapTerrain[];
tiles: {[key: string]: { terrain: number[] }};
/**
* Refers to external tileset file (should be JSON)
*/
source: string;
}
export interface ITiledMapTerrain {
name: string;
tile: number;
}

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'])
]
};