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

rewrote the app code to more easily allow for collisions

Browse source
This commit is contained in:
kharhamel 2020-04-12 16:12:08 +02:00
parent 241cbd720a
commit 6e27377b07
10 changed files with 139 additions and 268 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
front/dist/maps/map2.json vendored
View file

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

16
front/src/Phaser/Entity/PlayableCaracter.ts Normal file
View file

@ -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)
}
}

8
front/src/Phaser/Entity/Sprite.ts Normal file
View file

@ -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);
}
}

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

@ -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);
}
}
}

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

@ -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.tilemapTiledJSON('map', 'maps/map2.json');
this.load.spritesheet('player',
this.load.image(Textures.Tiles, 'maps/tiles.png');
this.load.tilemapTiledJSON(Textures.Map, 'maps/map2.json');
this.load.spritesheet(Textures.Player,
'resources/characters/pipoya/Male 01-1.png',
{ frameWidth: 32, frameHeight: 32 }
);
}
//hook initialisation
init(){}
getPlayerAnimations().forEach(d => {
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.MapManager = new MapManager(this);
this.userInputManager = new UserInputManager(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 {

66
front/src/Phaser/Game/MapManager.ts
View file

@ -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)) {
}*/
}
}

32
front/src/Phaser/Player/Animation.ts
View file

@ -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) => {
if (!Player.anims.currentAnim || Player.anims.currentAnim.key !== direction) {
Player.anims.play(direction);
} else if (direction === PlayerAnimationNames.None && Player.anims.currentAnim) {
Player.anims.currentAnim.destroy();
}
export const playAnimation = (Player : PlayableCaracter, direction : string) => {
//if (direction === 'none') return;
//Player.play(direction, true);
};

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

@ -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{
MapManager : MapManagerInterface;
PlayerValue : string;
CameraManager: CameraManagerInterface;
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
});
})
export class Player extends PlayableCaracter{
constructor(scene: Phaser.Scene, x: number, y: number) {
super(scene, x, y, Textures.Player, 26);
this.setSize(32, 32); //edit the hitbox to better match the caracter model
}
move(activeEvents: ActiveEventList){
//if user client on shift, camera and player speed
let speedMultiplier = activeEvents.get(UserInputEvent.SpeedUp) ? 5 : 1;
let speed = activeEvents.get(UserInputEvent.SpeedUp) ? 500 : 100;
let haveMove = false;
let direction = null;
if(activeEvents.get(UserInputEvent.MoveUp)){
if(!this.CanMoveUp()){
return;
}
this.setVelocity(0, -speed)
playAnimation(this, PlayerAnimationNames.WalkUp);
this.setY(this.y - (2 * speedMultiplier));
haveMove = true;
direction = PlayerAnimationNames.WalkUp;
}
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;
}
} else if(activeEvents.get(UserInputEvent.MoveLeft)){
this.setVelocity(-speed, 0)
} else if(activeEvents.get(UserInputEvent.MoveDown)){
playAnimation(this, PlayerAnimationNames.WalkDown);
this.setY(this.y + (2 * speedMultiplier));
haveMove = true;
direction = PlayerAnimationNames.WalkDown;
}
if(activeEvents.get(UserInputEvent.MoveRight)){
if(!this.CanMoveRight()){
return;
}
playAnimation(this, PlayerAnimationNames.WalkRight);
this.setX(this.x + (2 * speedMultiplier));
haveMove = true;
direction = PlayerAnimationNames.WalkRight;
}
if(!haveMove){
this.setVelocity(0, speed)
} else if(activeEvents.get(UserInputEvent.MoveRight)){
this.setVelocity(speed, 0)
} else {
this.setVelocity(0, 0)
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;
}
}*/
}

28
front/src/Phaser/Rock/Rock.ts
View file

@ -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;
}
}
}

7
front/src/index.ts
View file

@ -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);