Skip to content

Commit

Permalink
feat: use canvasengine
Browse files Browse the repository at this point in the history
  • Loading branch information
RSamaium committed Jan 8, 2025
1 parent c400808 commit 88e2f8a
Show file tree
Hide file tree
Showing 33 changed files with 18,051 additions and 1,399 deletions.
7 changes: 4 additions & 3 deletions packages/client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,19 @@
},
"author": "Samuel Ronce",
"devDependencies": {
"@canvasengine/compiler": "2.0.0-beta.5",
"@canvasengine/compiler": "2.0.0-beta.7",
"@rpgjs/types": "workspace:*",
"typescript": "^5.3.3",
"vite": "^6.0.7"
},
"dependencies": {
"@canvasengine/presets": "2.0.0-beta.5",
"@canvasengine/presets": "2.0.0-beta.7",
"@rpgjs/common": "workspace:*",
"@rpgjs/tiled": "workspace:*",
"@signe/di": "^1.0.2",
"@signe/sync": "^1.0.3",
"buffer": "^6.0.3",
"canvasengine": "2.0.0-beta.5",
"canvasengine": "2.0.0-beta.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"simple-room-client": "^3.0.1"
Expand Down
73 changes: 41 additions & 32 deletions packages/client/src/GameEngine.ts
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,58 @@
import { GameSide, RpgCommonGame, RpgCommonPlayer } from "@rpgjs/common";
import { ComputedSignal, computed, signal } from "canvasengine";
import { load, sync, users } from "@signe/sync";

class GameObject {
position = {
x: signal(0),
y: signal(0),
};
@sync() direction = signal(0);
@sync() graphics = signal([]);
}

class Scene {
@sync(GameObject) users = signal({});
}

export class GameEngineClient extends RpgCommonGame {
scene = new Scene();
playerId = signal("");
session = signal("");
objects = signal<any[]>([]);
player: ComputedSignal<RpgCommonPlayer | null> = computed(() => this.objects().find(object => object.id == this.playerId()))

player: ComputedSignal<RpgCommonPlayer | null> = computed(
() => this.objects()[this.playerId()]
);
animationX: any;
animationY: any;
lastObjects = {
users: {},
};

initialize() {
super.initialize(GameSide.Client);
}

async updateObject(obj) {
const { playerId: id, params, localEvent, paramsChanged, isShape } = obj;
const findObject = this.objects().find((o: any) => o.id == id);
if (!findObject) {
const value = {
id,
...params,
x: signal(params.position?.x ?? params.x),
y: signal(params.position?.y ?? params.y),
direction: signal(params.direction),
}
this.objects.mutate((objs) =>
objs.push(value)
);
// await this.physicScene.addObject(value, {
// x: value.x(),
// y: value.y(),
// width: 32,
// height: 32,
// });
} else {
if (paramsChanged.position?.x) {
// TODO
}
if (paramsChanged.position?.y) {
// TODO
}
if (paramsChanged.direction !== undefined) {
findObject.direction.set(paramsChanged.direction);
sync(obj, allData) {
if (!allData) return;

const _allData = structuredClone(allData)

for (const key in this.lastObjects.users) {
if (!(key in allData.users)) {
_allData.users[key] = "$delete";
}
}

load(this.scene, _allData, true);

this.lastObjects = allData;
}

get objects() {
return this.scene.users;
}

getScene() {
return this.scene;
}
}
35 changes: 2 additions & 33 deletions packages/client/src/Renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,60 +18,29 @@ export type Scenes = {

export class RpgRenderer {
private options!: RpgClientEntryPointOptions
private canvasEl: HTMLElement;
private selector: HTMLElement;
private currentSceneName = signal("");
private currentSceneData = signal({});
private scenes = {};
currentSceneName = signal("");
currentSceneData = signal(null);

width = signal(800);
height = signal(600);

public guiEl: HTMLDivElement;

constructor(private context: Context) {
this.options = inject(context, ConfigToken)
}

/** @internal */
init(scenes: Scenes): Promise<void> {
// this.scenes = {
// map: SceneMap,
// ...scenes,
// };
return this.onDOMLoaded();
}

/** @internal */
async onDOMLoaded(): Promise<void> {
this.selector = document.body.querySelector(this.options?.selector ?? "#rpg") as HTMLElement;

await bootstrapCanvas(this.selector , Canvas);

// await h(
// Canvas,
// {
// canvasEl: this.canvasEl,
// selector: this.options.selector,
// width: this.width,
// height: this.height
// },
// cond(
// computed(() => this.currentSceneName()),
// () => {
// const name = this.currentSceneName();
// const sceneFn = this.scenes[name];
// if (!sceneFn) {
// throw new Error(`Scene ${name} not found`);
// }
// return sceneFn(this.currentSceneData);
// }
// )
// );
}

loadScene(sceneName: string, data: any) {
console.log(sceneName, data)
this.currentSceneData.set(data);
this.currentSceneName.set(sceneName);
}
Expand Down
71 changes: 35 additions & 36 deletions packages/client/src/RpgClientEngine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ export class RpgClientEngine {

this.addSpriteSheet(this.options.spritesheets);

this.gameEngine.initialize()
await this.renderer.init();
const { maxFps } = this.options

Expand Down Expand Up @@ -211,42 +212,40 @@ export class RpgClientEngine {
roomId: string;
resetProps: string[];
}) => {
if (!val.data) {
return;
}
const change = (prop, root = val, localEvent = false) => {
const list = root.data[prop];
const partial = root.partial[prop];
const isShape = prop == "shapes";
if (!partial) {
return;
}
if (val.resetProps.indexOf(prop) != -1) {
// todo
}
for (let key in partial) {
const obj = list[key];
const paramsChanged = partial ? partial[key] : undefined;

if (obj == null || obj.deleted) {
// todo
continue;
}

if (!obj) continue;

this.gameEngine.updateObject({
playerId: key,
params: obj,
localEvent,
paramsChanged,
isShape,
});
}
};
change("users");
change("events");
change("shapes");
this.gameEngine.sync(val.partial, val.data)
// const change = (prop, root = val, localEvent = false) => {
// const list = root.data[prop];
// const partial = root.partial[prop];
// const isShape = prop == "shapes";
// if (!partial) {
// return;
// }
// if (val.resetProps.indexOf(prop) != -1) {
// // todo
// }
// for (let key in partial) {
// const obj = list[key];
// const paramsChanged = partial ? partial[key] : undefined;

// if (obj == null || obj.deleted) {
// // todo
// continue;
// }

// if (!obj) continue;

// this.gameEngine.updateObject({
// playerId: key,
// params: obj,
// localEvent,
// paramsChanged,
// isShape,
// });
// }
// };
// change("users");
// change("events");
// change("shapes");
}
);
}
Expand Down
40 changes: 0 additions & 40 deletions packages/client/src/Scenes/Map.ts
View file

This file was deleted.

64 changes: 0 additions & 64 deletions packages/client/src/components/Character.ts
View file

This file was deleted.

Loading

0 comments on commit 88e2f8a

Please sign in to comment.