_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #349 from thecodingmachine/customtextures

Browse Source 
Adding custom character textures
This commit is contained in:
David Négrier 2020-10-20 18:30:15 +02:00 committed by GitHub
commit e7f1f06272
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 262 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
back/src/Controller/AuthenticateController.ts
View File

@ -31,7 +31,6 @@ export class AuthenticateController extends BaseController {
res.onAborted(() => {
console.warn('Login request was aborted');
})
const host = req.getHeader('host');
const param = await res.json();
//todo: what to do if the organizationMemberToken is already used?
@ -45,6 +44,7 @@ export class AuthenticateController extends BaseController {
const worldSlug = data.worldSlug;
const roomSlug = data.roomSlug;
const mapUrlStart = data.mapUrlStart;
const textures = data.textures;
const authToken = jwtTokenManager.createJWTToken(userUuid);
res.writeStatus("200 OK");
@ -56,6 +56,7 @@ export class AuthenticateController extends BaseController {
worldSlug,
roomSlug,
mapUrlStart,
textures
}));
} catch (e) {

40
back/src/Controller/IoSocketController.ts
View File

@ -1,4 +1,4 @@
import {ExSocketInterface} from "../Model/Websocket/ExSocketInterface"; //TODO fix import by "_Model/.."
import {CharacterLayer, ExSocketInterface} from "../Model/Websocket/ExSocketInterface"; //TODO fix import by "_Model/.."
import {GameRoomPolicyTypes} from "../Model/GameRoom";
import {PointInterface} from "../Model/Websocket/PointInterface";
import {
@ -18,10 +18,9 @@ import {UserMovesMessage} from "../Messages/generated/messages_pb";
import {TemplatedApp} from "uWebSockets.js"
import {parse} from "query-string";
import {jwtTokenManager} from "../Services/JWTTokenManager";
import {adminApi, fetchMemberDataByUuidResponse} from "../Services/AdminApi";
import {socketManager} from "../Services/SocketManager";
import {adminApi, CharacterTexture, FetchMemberDataByUuidResponse} from "../Services/AdminApi";
import {SocketManager, socketManager} from "../Services/SocketManager";
import {emitInBatch, resetPing} from "../Services/IoSocketHelpers";
import Jwt from "jsonwebtoken";
import {clientEventsEmitter} from "../Services/ClientEventsEmitter";
import {ADMIN_API_TOKEN} from "../Enum/EnvironmentVariable";
@ -159,25 +158,28 @@ export class IoSocketController {
characterLayers = [ characterLayers ];
}
const userUuid = await jwtTokenManager.getUserUuidFromToken(token);
let memberTags: string[] = [];
let memberTextures: CharacterTexture[] = [];
const room = await socketManager.getOrCreateRoom(roomId);
if (!room.anonymous && room.policyType !== GameRoomPolicyTypes.ANONYMUS_POLICY) {
try {
const userData = await adminApi.fetchMemberDataByUuid(userUuid);
memberTags = userData.tags;
if (room.policyType === GameRoomPolicyTypes.USE_TAGS_POLICY && !room.canAccess(memberTags)) {
throw new Error('No correct tags')
}
console.log('access granted for user '+userUuid+' and room '+roomId);
} catch (e) {
console.log('access not granted for user '+userUuid+' and room '+roomId);
throw new Error('Client cannot acces this ressource.')
try {
const userData = await adminApi.fetchMemberDataByUuid(userUuid);
//console.log('USERDATA', userData)
memberTags = userData.tags;
memberTextures = userData.textures;
if (!room.anonymous && room.policyType === GameRoomPolicyTypes.USE_TAGS_POLICY && !room.canAccess(memberTags)) {
throw new Error('No correct tags')
}
//console.log('access granted for user '+userUuid+' and room '+roomId);
} catch (e) {
console.log('access not granted for user '+userUuid+' and room '+roomId);
throw new Error('Client cannot acces this ressource.')
}
// Generate characterLayers objects from characterLayers string[]
const characterLayerObjs: CharacterLayer[] = SocketManager.mergeCharacterLayersAndCustomTextures(characterLayers, memberTextures);
if (upgradeAborted.aborted) {
console.log("Ouch! Client disconnected before we could upgrade it!");
/* You must not upgrade now */
@ -192,8 +194,9 @@ export class IoSocketController {
userUuid,
roomId,
name,
characterLayers,
characterLayers: characterLayerObjs,
tags: memberTags,
textures: memberTextures,
position: {
x: x,
y: y,
@ -233,7 +236,7 @@ export class IoSocketController {
resetPing(client);
//get data information and shwo messages
adminApi.fetchMemberDataByUuid(client.userUuid).then((res: fetchMemberDataByUuidResponse) => {
adminApi.fetchMemberDataByUuid(client.userUuid).then((res: FetchMemberDataByUuidResponse) => {
if (!res.messages) {
return;
}
@ -311,6 +314,7 @@ export class IoSocketController {
client.name = ws.name;
client.tags = ws.tags;
client.textures = ws.textures;
client.characterLayers = ws.characterLayers;
client.roomId = ws.roomId;
return client;

11
back/src/Model/Websocket/ExSocketInterface.ts
View File

@ -3,6 +3,12 @@ import {Identificable} from "./Identificable";
import {ViewportInterface} from "_Model/Websocket/ViewportMessage";
import {BatchMessage, SubMessage} from "../../Messages/generated/messages_pb";
import {WebSocket} from "uWebSockets.js"
import {CharacterTexture} from "../../Services/AdminApi";
export interface CharacterLayer {
name: string,
url: string|undefined
}
export interface ExSocketInterface extends WebSocket, Identificable {
token: string;
@ -10,7 +16,7 @@ export interface ExSocketInterface extends WebSocket, Identificable {
//userId: number; // A temporary (autoincremented) identifier for this user
userUuid: string; // A unique identifier for this user
name: string;
characterLayers: string[];
characterLayers: CharacterLayer[];
position: PointInterface;
viewport: ViewportInterface;
/**
@ -21,5 +27,6 @@ export interface ExSocketInterface extends WebSocket, Identificable {
batchTimeout: NodeJS.Timeout|null;
pingTimeout: NodeJS.Timeout|null;
disconnecting: boolean,
tags: string[]
tags: string[],
textures: CharacterTexture[],
}

20
back/src/Model/Websocket/ProtobufUtils.ts
View File

@ -1,6 +1,11 @@
import {PointInterface} from "./PointInterface";
import {ItemEventMessage, PointMessage, PositionMessage} from "../../Messages/generated/messages_pb";
import {ExSocketInterface} from "_Model/Websocket/ExSocketInterface";
import {
CharacterLayerMessage,
ItemEventMessage,
PointMessage,
PositionMessage
} from "../../Messages/generated/messages_pb";
import {CharacterLayer, ExSocketInterface} from "_Model/Websocket/ExSocketInterface";
import Direction = PositionMessage.Direction;
import {ItemEventMessageInterface} from "_Model/Websocket/ItemEventMessage";
import {PositionInterface} from "_Model/PositionInterface";
@ -89,4 +94,15 @@ export class ProtobufUtils {
return itemEventMessage;
}
public static toCharacterLayerMessages(characterLayers: CharacterLayer[]): CharacterLayerMessage[] {
return characterLayers.map(function(characterLayer): CharacterLayerMessage {
const message = new CharacterLayerMessage();
message.setName(characterLayer.name);
if (characterLayer.url) {
message.setUrl(characterLayer.url);
}
return message;
});
}
}

43
back/src/Services/AdminApi.ts
View File

@ -1,5 +1,6 @@
import {ADMIN_API_TOKEN, ADMIN_API_URL} from "../Enum/EnvironmentVariable";
import Axios from "axios";
import {v4} from "uuid";
export interface AdminApiData {
organizationSlug: string
@ -9,12 +10,21 @@ export interface AdminApiData {
tags: string[]
policy_type: number
userUuid: string
messages?: unknown[]
messages?: unknown[],
textures: CharacterTexture[]
}
export interface fetchMemberDataByUuidResponse {
export interface CharacterTexture {
id: number,
level: number,
url: string,
rights: string
}
export interface FetchMemberDataByUuidResponse {
uuid: string;
tags: string[];
textures: CharacterTexture[];
messages: unknown[];
}
@ -43,16 +53,31 @@ class AdminApi {
return res.data;
}
async fetchMemberDataByUuid(uuid: string): Promise<fetchMemberDataByUuidResponse> {
async fetchMemberDataByUuid(uuid: string): Promise<FetchMemberDataByUuidResponse> {
if (!ADMIN_API_URL) {
return Promise.reject('No admin backoffice set!');
}
const res = await Axios.get(ADMIN_API_URL+'/api/membership/'+uuid,
{ headers: {"Authorization" : `${ADMIN_API_TOKEN}`} }
)
return res.data;
try {
const res = await Axios.get(ADMIN_API_URL+'/api/membership/'+uuid,
{ headers: {"Authorization" : `${ADMIN_API_TOKEN}`} }
)
return res.data;
} catch (e) {
if (e?.response?.status == 404) {
// If we get an HTTP 404, the token is invalid. Let's perform an anonymous login!
console.warn('Cannot find user with uuid "'+uuid+'". Performing an anonymous login instead.');
return {
uuid: v4(),
tags: [],
textures: [],
messages: [],
}
} else {
throw e;
}
}
}
async fetchMemberDataByToken(organizationMemberToken: string): Promise<AdminApiData> {
if (!ADMIN_API_URL) {
return Promise.reject('No admin backoffice set!');
@ -74,7 +99,7 @@ class AdminApi {
)
return res.data;
}
reportPlayer(reportedUserUuid: string, reportedUserComment: string, reporterUserUuid: string) {
return Axios.post(`${ADMIN_API_URL}/api/report`, {
reportedUserUuid,

45
back/src/Services/SocketManager.ts
View File

@ -1,5 +1,5 @@
import {GameRoom} from "../Model/GameRoom";
import {ExSocketInterface} from "../Model/Websocket/ExSocketInterface";
import {CharacterLayer, ExSocketInterface} from "../Model/Websocket/ExSocketInterface";
import {
GroupDeleteMessage,
GroupUpdateMessage,
@ -23,6 +23,7 @@ import {
WebRtcStartMessage,
QueryJitsiJwtMessage,
SendJitsiJwtMessage,
CharacterLayerMessage,
SendUserMessage
} from "../Messages/generated/messages_pb";
import {PointInterface} from "../Model/Websocket/PointInterface";
@ -34,7 +35,7 @@ import {isSetPlayerDetailsMessage} from "../Model/Websocket/SetPlayerDetailsMess
import {GROUP_RADIUS, JITSI_ISS, MINIMUM_DISTANCE, SECRET_JITSI_KEY} from "../Enum/EnvironmentVariable";
import {Movable} from "../Model/Movable";
import {PositionInterface} from "../Model/PositionInterface";
import {adminApi} from "./AdminApi";
import {adminApi, CharacterTexture} from "./AdminApi";
import Direction = PositionMessage.Direction;
import {Gauge} from "prom-client";
import {emitError, emitInBatch} from "./IoSocketHelpers";
@ -54,7 +55,7 @@ export interface AdminSocketData {
users: AdminSocketUsersList,
}
class SocketManager {
export class SocketManager {
private Worlds: Map<string, GameRoom> = new Map<string, GameRoom>();
private sockets: Map<number, ExSocketInterface> = new Map<number, ExSocketInterface>();
private nbClientsGauge: Gauge<string>;
@ -71,7 +72,7 @@ class SocketManager {
help: 'Number of clients per room',
labelNames: [ 'room' ]
});
clientEventsEmitter.registerToClientJoin((clientUUid, roomId) => {
this.nbClientsGauge.inc();
// Let's log server load when a user joins
@ -83,7 +84,7 @@ class SocketManager {
console.log('A user left (', this.sockets.size, ' connected users)');
});
}
getAdminSocketDataFor(roomId:string): AdminSocketData {
const data:AdminSocketData = {
rooms: {},
@ -125,7 +126,7 @@ class SocketManager {
const userJoinedMessage = new UserJoinedMessage();
userJoinedMessage.setUserid(thing.id);
userJoinedMessage.setName(player.name);
userJoinedMessage.setCharacterlayersList(player.characterLayers);
userJoinedMessage.setCharacterlayersList(ProtobufUtils.toCharacterLayerMessages(player.characterLayers));
userJoinedMessage.setPosition(ProtobufUtils.toPositionMessage(player.position));
roomJoinedMessage.addUser(userJoinedMessage);
@ -251,8 +252,7 @@ class SocketManager {
return;
}
client.name = playerDetails.name;
client.characterLayers = playerDetails.characterLayers;
client.characterLayers = SocketManager.mergeCharacterLayersAndCustomTextures(playerDetails.characterLayers, client.textures);
}
handleSilentMessage(client: ExSocketInterface, silentMessage: SilentMessage) {
@ -438,7 +438,7 @@ class SocketManager {
}
userJoinedMessage.setUserid(clientUser.userId);
userJoinedMessage.setName(clientUser.name);
userJoinedMessage.setCharacterlayersList(clientUser.characterLayers);
userJoinedMessage.setCharacterlayersList(ProtobufUtils.toCharacterLayerMessages(clientUser.characterLayers));
userJoinedMessage.setPosition(ProtobufUtils.toPositionMessage(clientUser.position));
const subMessage = new SubMessage();
@ -691,6 +691,33 @@ class SocketManager {
}
return socket;
}
/**
* Merges the characterLayers received from the front (as an array of string) with the custom textures from the back.
*/
static mergeCharacterLayersAndCustomTextures(characterLayers: string[], memberTextures: CharacterTexture[]): CharacterLayer[] {
const characterLayerObjs: CharacterLayer[] = [];
for (const characterLayer of characterLayers) {
if (characterLayer.startsWith('customCharacterTexture')) {
const customCharacterLayerId: number = +characterLayer.substr(22);
for (const memberTexture of memberTextures) {
if (memberTexture.id == customCharacterLayerId) {
characterLayerObjs.push({
name: characterLayer,
url: memberTexture.url
})
break;
}
}
} else {
characterLayerObjs.push({
name: characterLayer,
url: undefined
})
}
}
return characterLayerObjs;
}
}
export const socketManager = new SocketManager();

8
front/src/Connexion/ConnectionManager.ts
View File

@ -21,7 +21,7 @@ class ConnectionManager {
if(connexionType === GameConnexionTypes.register) {
const organizationMemberToken = urlManager.getOrganizationToken();
const data = await Axios.post(`${API_URL}/register`, {organizationMemberToken}).then(res => res.data);
this.localUser = new LocalUser(data.userUuid, data.authToken);
this.localUser = new LocalUser(data.userUuid, data.authToken, data.textures);
localUserStore.saveUser(this.localUser);
const organizationSlug = data.organizationSlug;
@ -34,7 +34,7 @@ class ConnectionManager {
} else if (connexionType === GameConnexionTypes.anonymous || connexionType === GameConnexionTypes.empty) {
const localUser = localUserStore.getLocalUser();
if (localUser && localUser.jwtToken && localUser.uuid) {
if (localUser && localUser.jwtToken && localUser.uuid && localUser.textures) {
this.localUser = localUser;
try {
await this.verifyToken(localUser.jwtToken);
@ -78,12 +78,12 @@ class ConnectionManager {
private async anonymousLogin(): Promise<void> {
const data = await Axios.post(`${API_URL}/anonymLogin`).then(res => res.data);
this.localUser = new LocalUser(data.userUuid, data.authToken);
this.localUser = new LocalUser(data.userUuid, data.authToken, []);
localUserStore.saveUser(this.localUser);
}
public initBenchmark(): void {
this.localUser = new LocalUser('', 'test');
this.localUser = new LocalUser('', 'test', []);
}
public connectToRoomSocket(roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface): Promise<RoomConnection> {

5
front/src/Connexion/ConnexionModels.ts
View File

@ -1,6 +1,7 @@
import {PlayerAnimationNames} from "../Phaser/Player/Animation";
import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
import {SignalData} from "simple-peer";
import {BodyResourceDescriptionInterface} from "../Phaser/Entity/body_character";
export enum EventMessage{
WEBRTC_SIGNAL = "webrtc-signal",
@ -49,7 +50,7 @@ export class Point implements PointInterface{
export interface MessageUserPositionInterface {
userId: number;
name: string;
characterLayers: string[];
characterLayers: BodyResourceDescriptionInterface[];
position: PointInterface;
}
@ -61,7 +62,7 @@ export interface MessageUserMovedInterface {
export interface MessageUserJoined {
userId: number;
name: string;
characterLayers: string[];
characterLayers: BodyResourceDescriptionInterface[];
position: PointInterface
}

16
front/src/Connexion/LocalUser.ts
View File

@ -1,9 +1,11 @@
export interface CharacterTexture {
id: number,
level: number,
url: string,
rights: string
}
export class LocalUser {
public uuid: string;
public jwtToken: string;
constructor(uuid:string, jwtToken: string) {
this.uuid = uuid;
this.jwtToken = jwtToken;
constructor(public readonly uuid:string, public readonly jwtToken: string, public readonly textures: CharacterTexture[]) {
}
}
}

21
front/src/Connexion/RoomConnection.ts
View File

@ -22,7 +22,11 @@ import {
WebRtcSignalToServerMessage,
WebRtcStartMessage,
ReportPlayerMessage,
TeleportMessageMessage, QueryJitsiJwtMessage, SendJitsiJwtMessage, SendUserMessage
TeleportMessageMessage,
QueryJitsiJwtMessage,
SendJitsiJwtMessage,
CharacterLayerMessage,
SendUserMessage
} from "../Messages/generated/messages_pb"
import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
@ -36,6 +40,7 @@ import {
ViewportInterface, WebRtcDisconnectMessageInterface,
WebRtcSignalReceivedMessageInterface,
} from "./ConnexionModels";
import {BodyResourceDescriptionInterface} from "../Phaser/Entity/body_character";
export class RoomConnection implements RoomConnection {
private readonly socket: WebSocket;
@ -169,10 +174,10 @@ export class RoomConnection implements RoomConnection {
}
}
public emitPlayerDetailsMessage(userName: string, characterLayersSelected: string[]) {
public emitPlayerDetailsMessage(userName: string, characterLayersSelected: BodyResourceDescriptionInterface[]) {
const message = new SetPlayerDetailsMessage();
message.setName(userName);
message.setCharacterlayersList(characterLayersSelected);
message.setCharacterlayersList(characterLayersSelected.map((characterLayer) => characterLayer.name));
const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setSetplayerdetailsmessage(message);
@ -277,10 +282,18 @@ export class RoomConnection implements RoomConnection {
if (position === undefined) {
throw new Error('Invalid JOIN_ROOM message');
}
const characterLayers = message.getCharacterlayersList().map((characterLayer: CharacterLayerMessage): BodyResourceDescriptionInterface => {
return {
name: characterLayer.getName(),
img: characterLayer.getUrl()
}
})
return {
userId: message.getUserid(),
name: message.getName(),
characterLayers: message.getCharacterlayersList(),
characterLayers,
position: ProtobufClientUtils.toPointInterface(position)
}
}

36
front/src/Phaser/Entity/Character.ts
View File

@ -61,22 +61,7 @@ export abstract class Character extends Container {
this.sprites = new Map<string, Sprite>();
for (const texture of textures) {
const sprite = new Sprite(scene, 0, 0, texture, frame);
sprite.setInteractive({useHandCursor: true});
this.add(sprite);
this.getPlayerAnimations(texture).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
});
})
// Needed, otherwise, animations are not handled correctly.
this.scene.sys.updateList.add(sprite);
this.sprites.set(texture, sprite);
}
this.addTextures(textures, frame);
/*this.teleportation = new Sprite(scene, -20, -10, 'teleportation', 3);
this.teleportation.setInteractive();
@ -107,6 +92,25 @@ export abstract class Character extends Container {
this.playAnimation(direction, moving);
}
public addTextures(textures: string[], frame?: string | number): void {
for (const texture of textures) {
const sprite = new Sprite(this.scene, 0, 0, texture, frame);
sprite.setInteractive({useHandCursor: true});
this.add(sprite);
this.getPlayerAnimations(texture).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
});
})
// Needed, otherwise, animations are not handled correctly.
this.scene.sys.updateList.add(sprite);
this.sprites.set(texture, sprite);
}
}
private getPlayerAnimations(name: string): AnimationData[] {
return [{
key: `${name}-${PlayerAnimationNames.WalkDown}`,

10
front/src/Phaser/Entity/body_character.ts
View File

@ -1,5 +1,6 @@
import LoaderPlugin = Phaser.Loader.LoaderPlugin;
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "./Character";
import {CharacterTexture} from "../../Connexion/LocalUser";
export interface BodyResourceDescriptionInterface {
name: string,
@ -312,6 +313,15 @@ export const loadAllLayers = (load: LoaderPlugin) => {
}
}
export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => {
const name = 'customCharacterTexture'+texture.id;
load.spritesheet(
name,
texture.url,
{frameWidth: 32, frameHeight: 32}
);
}
export const OBJECTS: Array<PlayerResourceDescriptionInterface> = [
{name:'layout_modes', img:'resources/objects/layout_modes.png'},
{name:'teleportation', img:'resources/objects/teleportation.png'},

3
front/src/Phaser/Game/AddPlayerInterface.ts
View File

@ -1,8 +1,9 @@
import {PointInterface} from "../../Connexion/ConnexionModels";
import {BodyResourceDescriptionInterface} from "../Entity/body_character";
export interface AddPlayerInterface {
userId: number;
name: string;
characterLayers: string[];
characterLayers: BodyResourceDescriptionInterface[];
position: PointInterface;
}

40
front/src/Phaser/Game/GameScene.ts
View File

@ -32,7 +32,7 @@ import {RemotePlayer} from "../Entity/RemotePlayer";
import {Queue} from 'queue-typescript';
import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
import {loadAllLayers, loadObject, loadPlayerCharacters} from "../Entity/body_character";
import {loadAllLayers, loadCustomTexture, loadObject, loadPlayerCharacters} from "../Entity/body_character";
import {CenterListener, layoutManager, LayoutMode} from "../../WebRtc/LayoutManager";
import Texture = Phaser.Textures.Texture;
import Sprite = Phaser.GameObjects.Sprite;
@ -475,7 +475,6 @@ export class GameScene extends ResizableScene implements CenterListener {
if (newValue === undefined) {
this.stopJitsi();
} else {
console.log("JITSI_PRIVATE_MODE", JITSI_PRIVATE_MODE);
if (JITSI_PRIVATE_MODE) {
const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined;
@ -1022,7 +1021,7 @@ export class GameScene extends ResizableScene implements CenterListener {
/**
* Create new player
*/
private doAddPlayer(addPlayerData : AddPlayerInterface) : void {
private async doAddPlayer(addPlayerData : AddPlayerInterface) : Promise<void> {
//check if exist player, if exist, move position
if(this.MapPlayersByKey.has(addPlayerData.userId)){
this.updatePlayerPosition({
@ -1031,6 +1030,20 @@ export class GameScene extends ResizableScene implements CenterListener {
});
return;
}
// Load textures (in case it is a custom texture)
const characterLayerList: string[] = [];
const loadPromises: Promise<void>[] = [];
for (const characterLayer of addPlayerData.characterLayers) {
characterLayerList.push(characterLayer.name);
if (characterLayer.img) {
console.log('LOADING ', characterLayer.name, characterLayer.img)
loadPromises.push(this.loadSpritesheet(characterLayer.name, characterLayer.img));
}
}
if (loadPromises.length > 0) {
this.load.start();
}
//initialise player
const player = new RemotePlayer(
addPlayerData.userId,
@ -1038,7 +1051,7 @@ export class GameScene extends ResizableScene implements CenterListener {
addPlayerData.position.x,
addPlayerData.position.y,
addPlayerData.name,
addPlayerData.characterLayers,
[], // Let's go with no textures and let's load textures when promises have returned.
addPlayerData.position.direction,
addPlayerData.position.moving
);
@ -1046,10 +1059,15 @@ export class GameScene extends ResizableScene implements CenterListener {
this.MapPlayersByKey.set(player.userId, player);
player.updatePosition(addPlayerData.position);
await Promise.all(loadPromises);
player.addTextures(characterLayerList, 1);
//init collision
/*this.physics.add.collider(this.CurrentPlayer, player, (CurrentPlayer: CurrentGamerInterface, MapPlayer: GamerInterface) => {
CurrentPlayer.say("Hello, how are you ? ");
});*/
}
/**
@ -1245,4 +1263,18 @@ export class GameScene extends ResizableScene implements CenterListener {
CoWebsiteManager.closeCoWebsite();
mediaManager.showGameOverlay();
}
private loadSpritesheet(name: string, url: string): Promise<void> {
return new Promise<void>(((resolve, reject) => {
this.load.spritesheet(
name,
url,
{frameWidth: 32, frameHeight: 32}
);
this.load.on('filecomplete-spritesheet-'+name, () => {
console.log('RESOURCE LOADED!');
resolve();
});
}))
}
}

49
front/src/Phaser/Login/CustomizeScene.ts
View File

@ -2,12 +2,13 @@ import {EnableCameraSceneName} from "./EnableCameraScene";
import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {LAYERS, loadAllLayers} from "../Entity/body_character";
import {BodyResourceDescriptionInterface, LAYERS, loadAllLayers, loadCustomTexture} from "../Entity/body_character";
import Sprite = Phaser.GameObjects.Sprite;
import Container = Phaser.GameObjects.Container;
import {gameManager} from "../Game/GameManager";
import {ResizableScene} from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore";
import {PlayerResourceDescriptionInterface} from "../Entity/Character";
export const CustomizeSceneName = "CustomizeScene";
@ -36,6 +37,7 @@ export class CustomizeScene extends ResizableScene {
private selectedLayers: number[] = [0];
private containersRow: Container[][] = [];
private activeRow:number = 0;
private layers: BodyResourceDescriptionInterface[][] = [];
constructor() {
super({
@ -51,6 +53,23 @@ export class CustomizeScene extends ResizableScene {
//load all the png files
loadAllLayers(this.load);
// load custom layers
this.layers = LAYERS;
const localUser = localUserStore.getLocalUser();
const textures = localUser?.textures;
if (textures) {
for (const texture of textures) {
loadCustomTexture(this.load, texture);
const name = 'customCharacterTexture'+texture.id;
this.layers[texture.level].unshift({
name,
img: texture.url
});
}
}
}
create() {
@ -94,7 +113,7 @@ export class CustomizeScene extends ResizableScene {
let i = 0;
for (const layerItem of this.selectedLayers) {
if (layerItem !== undefined) {
layers.push(LAYERS[i][layerItem].name);
layers.push(this.layers[i][layerItem].name);
}
i++;
}
@ -108,7 +127,7 @@ export class CustomizeScene extends ResizableScene {
this.input.keyboard.on('keydown-LEFT', () => this.moveCursorHorizontally(-1));
this.input.keyboard.on('keydown-DOWN', () => this.moveCursorVertically(1));
this.input.keyboard.on('keydown-UP', () => this.moveCursorVertically(-1));
const customCursorPosition = localUserStore.getCustomCursorPosition();
if (customCursorPosition) {
this.activeRow = customCursorPosition.activeRow;
@ -117,34 +136,34 @@ export class CustomizeScene extends ResizableScene {
this.updateSelectedLayer();
}
}
private moveCursorHorizontally(index: number): void {
this.selectedLayers[this.activeRow] += index;
if (this.selectedLayers[this.activeRow] < 0) {
this.selectedLayers[this.activeRow] = 0
} else if(this.selectedLayers[this.activeRow] > LAYERS[this.activeRow].length - 1) {
this.selectedLayers[this.activeRow] = LAYERS[this.activeRow].length - 1
} else if(this.selectedLayers[this.activeRow] > this.layers[this.activeRow].length - 1) {
this.selectedLayers[this.activeRow] = this.layers[this.activeRow].length - 1
}
this.moveLayers();
this.updateSelectedLayer();
this.saveInLocalStorage();
}
private moveCursorVertically(index:number): void {
this.activeRow += index;
if (this.activeRow < 0) {
this.activeRow = 0
} else if (this.activeRow > LAYERS.length - 1) {
this.activeRow = LAYERS.length - 1
} else if (this.activeRow > this.layers.length - 1) {
this.activeRow = this.layers.length - 1
}
this.moveLayers();
this.saveInLocalStorage();
}
private saveInLocalStorage() {
localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers);
}
update(time: number, delta: number): void {
super.update(time, delta);
this.enterField.setVisible(!!(Math.floor(time / 500) % 2));
@ -153,7 +172,7 @@ export class CustomizeScene extends ResizableScene {
/**
* @param x, the layer's vertical position
* @param y, the layer's horizontal position
* @param layerNumber, index of the LAYERS array
* @param layerNumber, index of the this.layers array
* create the layer and display it on the scene
*/
private createCustomizeLayer(x: number, y: number, layerNumber: number): void {
@ -161,7 +180,7 @@ export class CustomizeScene extends ResizableScene {
this.selectedLayers[layerNumber] = 0;
let alpha = 0;
let layerPosX = 0;
for (let i = 0; i < LAYERS[layerNumber].length; i++) {
for (let i = 0; i < this.layers[layerNumber].length; i++) {
const container = this.generateCharacter(300 + x + layerPosX, y, layerNumber, i);
this.containersRow[layerNumber][i] = container;
@ -190,13 +209,13 @@ export class CustomizeScene extends ResizableScene {
const children: Array<Sprite> = new Array<Sprite>();
for (let j = 0; j <= layerNumber; j++) {
if (j === layerNumber) {
children.push(this.generateLayers(0, 0, LAYERS[j][selectedItem].name));
children.push(this.generateLayers(0, 0, this.layers[j][selectedItem].name));
} else {
const layer = this.selectedLayers[j];
if (layer === undefined) {
continue;
}
children.push(this.generateLayers(0, 0, LAYERS[j][layer].name));
children.push(this.generateLayers(0, 0, this.layers[j][layer].name));
}
}
return children;

BIN
maps/characters/tenue-f-jolicode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
maps/characters/tenue-f-vanoix.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
maps/characters/tenue-f.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
maps/characters/tenue-m-jolicode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
maps/characters/tenue-m-vanoix.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
maps/characters/tenue-m.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

7
messages/messages.proto
View File

@ -31,6 +31,11 @@ message SilentMessage {
bool silent = 1;
}
message CharacterLayerMessage {
string url = 1;
string name = 2;
}
/*********** CLIENT TO SERVER MESSAGES *************/
message SetPlayerDetailsMessage {
@ -129,7 +134,7 @@ message GroupDeleteMessage {
message UserJoinedMessage {
int32 userId = 1;
string name = 2;
repeated string characterLayers = 3;
repeated CharacterLayerMessage characterLayers = 3;
PositionMessage position = 4;
}