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

WIP: testing new resolution config

Browse source
This commit is contained in:
kharhamel 2021-04-21 18:01:26 +02:00
parent 5dc2f0ac47
commit 6a2326c4b3
6 changed files with 38 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,8 +10,8 @@ const TURN_USER: string = process.env.TURN_USER || '';
const TURN_PASSWORD: string = process.env.TURN_PASSWORD || '';
const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
const JITSI_PRIVATE_MODE : boolean = process.env.JITSI_PRIVATE_MODE == "true";
const RESOLUTION = 2;
const ZOOM_LEVEL = 1/*3/4*/;
const RESOLUTION = 1 / window.devicePixelRatio;
const ZOOM_LEVEL = 2 * window.devicePixelRatio/*3/4*/;
const POSITION_DELAY = 200; // Wait 200ms between sending position events
const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player
export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;

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

@ -52,6 +52,7 @@ import {connectionManager} from "../../Connexion/ConnectionManager";
import {RoomConnection} from "../../Connexion/RoomConnection";
import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
import {userMessageManager} from "../../Administration/UserMessageManager";
import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js';
import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
import {ResizableScene} from "../Login/ResizableScene";
import {Room} from "../../Connexion/Room";
@ -174,6 +175,7 @@ export class GameScene extends ResizableScene implements CenterListener {
private messageSubscription: Subscription|null = null;
private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
private originalMapUrl: string|undefined;
private cursorKeys: any;
constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
super({
@ -192,7 +194,7 @@ export class GameScene extends ResizableScene implements CenterListener {
})
this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
this.connectionAnswerPromiseResolve = resolve;
})
});
}
//hook preload scene
@ -355,6 +357,8 @@ export class GameScene extends ResizableScene implements CenterListener {
//hook create scene
create(): void {
const mouseWheelToUpDown = new MouseWheelToUpDown(this);
this.cursorKeys = mouseWheelToUpDown.createCursorKeys();
gameManager.gameSceneIsCreated(this);
urlManager.pushRoomIdToUrl(this.room);
this.startLayerName = urlManager.getStartLayerNameFromUrl();
@ -1041,8 +1045,8 @@ ${escapedMessage}
//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, true);
this.updateCameraOffset();
this.cameras.main.setZoom(ZOOM_LEVEL);
}
addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){
@ -1180,6 +1184,12 @@ ${escapedMessage}
* @param delta The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate.
*/
update(time: number, delta: number) : void {
if (this.cursorKeys.up.isDown) {
this.cameras.main.zoom *= 1.2;
} else if(this.cursorKeys.down.isDown) {
this.cameras.main.zoom *= 0.8;
}
mediaManager.setLastUpdateScene();
this.currentTick = time;
this.CurrentPlayer.moveUser(delta);
@ -1424,10 +1434,8 @@ ${escapedMessage}
let yCenter = (array.yEnd - array.yStart) / 2 + array.yStart;
// Let's put this in Game coordinates by applying the zoom level:
xCenter /= ZOOM_LEVEL * RESOLUTION;
yCenter /= ZOOM_LEVEL * RESOLUTION;
this.cameras.main.startFollow(this.CurrentPlayer, true, 1, 1, xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2);
this.cameras.main.setFollowOffset(xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2);
}
public onCenterChange(): void {

17
front/src/Phaser/Login/EnableCameraScene.ts
View file

@ -3,12 +3,13 @@ import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {mediaManager} from "../../WebRtc/MediaManager";
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
import {RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
import {SoundMeter} from "../Components/SoundMeter";
import {SoundMeterSprite} from "../Components/SoundMeterSprite";
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager";
import MouseWheelToUpDown from "phaser3-rex-plugins/plugins/mousewheeltoupdown.js";
export const EnableCameraSceneName = "EnableCameraScene";
enum LoginTextures {
@ -39,6 +40,7 @@ export class EnableCameraScene extends Phaser.Scene {
private repositionCallback!: (this: Window, ev: UIEvent) => void;
private mobileTapRectangle!: Rectangle;
private cursorKeys!: any;
constructor() {
super({
key: EnableCameraSceneName
@ -59,10 +61,14 @@ export class EnableCameraScene extends Phaser.Scene {
if (touchScreenManager.supportTouchScreen) {
new PinchManager(this);
}
//this.scale.setZoom(ZOOM_LEVEL);
//Phaser.Display.Align.In.BottomCenter(this.pressReturnField, zone);
const mouseWheelToUpDown = new MouseWheelToUpDown(this);
this.cursorKeys = mouseWheelToUpDown.createCursorKeys();
this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
this.textField = new TextField(this, this.scale.width / 2, 20, 'Turn on your camera and microphone');
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Touch here\n\n or \n\nPress enter to start');
this.pressReturnField = new TextField(this, this.scale.width / 2, this.scale.height - 30, 'Touch here\n\n or \n\nPress enter to start');
// For mobile purposes - we need a big enough touchable area.
this.mobileTapRectangle = this.add
.rectangle(
@ -247,6 +253,11 @@ export class EnableCameraScene extends Phaser.Scene {
update(time: number, delta: number): void {
this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
if (this.cursorKeys.up.isDown) {
this.cameras.main.zoom *= 1.2;
} else if(this.cursorKeys.down.isDown) {
this.cameras.main.zoom *= 0.8;
}
this.soundMeterSprite.setVolume(this.soundMeter.getVolume());

1
front/src/Phaser/UserInput/UserInputManager.ts
View file

@ -2,6 +2,7 @@ import { Direction } from "../../types";
import {GameScene} from "../Game/GameScene";
import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {MobileJoystick} from "../Components/MobileJoystick";
import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js';
interface UserInputManagerDatum {
keyInstance: Phaser.Input.Keyboard.Key;

7
front/src/index.ts
View file

@ -71,11 +71,12 @@ switch (phaserMode) {
const config: GameConfig = {
type: mode,
title: "WorkAdventure",
width: width / RESOLUTION,
height: height / RESOLUTION,
width: width / 2,
height: height / 2,
parent: "game",
zoom: 2,
scene: [EntryScene, LoginScene, SelectCharacterScene, SelectCompanionScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene],
zoom: RESOLUTION,
resolution: window.devicePixelRatio / 2,
fps: fps,
dom: {
createContainer: true

4
front/src/rex-plugins.d.ts vendored
View file

@ -3,6 +3,10 @@ declare module 'phaser3-rex-plugins/plugins/virtualjoystick.js' {
const content: any; // eslint-disable-line
export default content;
}
declare module 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js' {
const content: any; // eslint-disable-line
export default content;
}
declare module 'phaser3-rex-plugins/plugins/gestures-plugin.js' {
const content: any; // eslint-disable-line
export default content;