created movement system

src/game-modules/game/create/animation.ts

@@ -0,0 +1,17 @@
+import { Scene } from "phaser";
+import { AnimationConfig } from "../types";
+
+export default function createAnimation(
+  this: Scene,
+  configs: AnimationConfig[]
+) {
+  configs.forEach((config) => {
+    const { key, frame } = config;
+    this.anims.create({
+      key,
+      frames: this.anims.generateFrameNumbers(frame.name, frame.ways),
+      frameRate: frame.frameRate,
+      repeat: frame.repeat,
+    });
+  });
+}

src/game-modules/game/create/character.ts

@@ -0,0 +1,54 @@
+import { Scene } from "phaser";
+import { AnimationConfig } from "../types";
+import createAnimation from "./animation";
+
+export default class CreateCharacter {
+  actor;
+  scene: Scene;
+
+  constructor(
+    scene: Scene,
+    x: number,
+    y: number,
+    spriteSheet: string,
+    textureFrame: string | number | undefined
+  ) {
+    this.scene = scene;
+    this.actor = scene.physics.add.sprite(x, y, spriteSheet, textureFrame);
+  }
+
+  addAnimation(configs: AnimationConfig[]) {
+    createAnimation.call(this.scene, configs);
+  }
+
+  move(x: number, y: number, speed = 100, accuracy = 10) {
+    const xSide =
+      this.actor.x - x < -accuracy
+        ? "left"
+        : this.actor.x - x > accuracy
+        ? "right"
+        : "stop";
+    const ySide =
+      this.actor.y - y < -accuracy
+        ? "top"
+        : this.actor.y - y > accuracy
+        ? "bottom"
+        : "stop";
+
+    if (xSide === "left") {
+      this.actor.setVelocityX(speed);
+    } else if (xSide === "right") {
+      this.actor.setVelocityX(-speed);
+    } else {
+      this.actor.setVelocityX(0);
+    }
+
+    if (ySide === "top") {
+      this.actor.setVelocityY(speed);
+    } else if (ySide === "bottom") {
+      this.actor.setVelocityY(-speed);
+    } else {
+      this.actor.setVelocityY(0);
+    }
+  }
+}

src/game-modules/game/create/player.ts

@@ -0,0 +1,18 @@
+import { Scene } from "phaser";
+import CreateCharacter from "./character";
+
+export function createPlayer(
+  this: Scene,
+  x: number,
+  y: number,
+  spriteSheet: string,
+  textureFrame: string | number | undefined
+) {
+  return new CreatePlayer(this, x, y, spriteSheet, textureFrame);
+}
+
+export default class CreatePlayer extends CreateCharacter {
+  check() {
+    console.log("actor: ", this);
+  }
+}

src/game-modules/game/create/world.ts

@@ -1,22 +1,61 @@
 import { Scene } from "phaser";
-
-export default function createWorld(
+import { SimpleObject } from "../types";
+export function creator(
   this: Scene,
   showWorld: boolean,
-  grid: string, //gridName
-  img: string, //imgName
+  gridName: string,
+  imgName: string,
   size: number
 ) {
   const gridTileMap = this.make.tilemap({
-    key: grid,
+    key: gridName,
     tileHeight: size,
     tileWidth: size,
   });
 
   const gridTileSet = showWorld
-    ? gridTileMap.addTilesetImage(img, undefined, size, size)
+    ? gridTileMap.addTilesetImage(imgName, undefined, size, size)
     : null;
 
   // @ts-ignore: Unreachable code error
-  const gridLayer = gridTileMap.createStaticLayer(0, gridTileSet, 0, 0); //createStaticLayer exists but is not described
+  return gridTileMap.createStaticLayer(0, gridTileSet, 0, 0); //createStaticLayer exists but is not described
+}
+
+export default class World {
+  world: Phaser.Tilemaps.Tilemap;
+  scene: Scene;
+  objects: {
+    [key: string]: Phaser.GameObjects.Image;
+  };
+
+  constructor(
+    scene: Scene,
+    showWorld: boolean,
+    gridName: string,
+    imgName: string,
+    size: number
+  ) {
+    this.scene = scene;
+    this.world = creator.call(scene, showWorld, gridName, imgName, size);
+    this.objects = {};
+  }
+
+  addSimpleObjects(configs: SimpleObject[]) {
+    configs.forEach((config) => {
+      const { x, y, imgName, name } = config;
+      debugger;
+      this.objects[name] = this.scene.add.image(x, y, imgName);
+    });
+  }
+}
+
+export function createWorld(
+  this: Scene,
+  showWorld: boolean,
+  gridName: string,
+  imgName: string,
+  size: number
+) {
+  console.log("🚀 ~  ~ this", this);
+  return new World(this, showWorld, gridName, imgName, size);
 }

src/game-modules/game/index.ts

@@ -1,20 +1,28 @@
-import Character from "./base/character";
-import createWorld from "./create/world";
+import { createWorld } from "./create/world";
 import { Scene } from "phaser";
 import { preloadData } from "./load/preload";
 import { CreateGameTypes, LoadGameTypes } from "./types";
+import { createPlayer } from "./create/player";
+import createAnimation from "./create/animation";
 
 export default class Game {
   scene: Scene;
   create: CreateGameTypes;
   load: LoadGameTypes;
+
   constructor(scene: Scene) {
     this.scene = scene;
     this.create = {
       world: createWorld.bind(this.scene),
+      player: createPlayer.bind(this.scene),
+      animation: createAnimation.bind(this.scene),
     };
     this.load = {
       preload: preloadData.bind(this.scene),
     };
   }
+
+  addListeners(event: string | symbol, callBack: () => void) {
+    this.scene.input.on(event, callBack);
+  }
 }

src/game-modules/game/load/preload.ts

@@ -5,7 +5,9 @@ export function preloadData(this: Scene, data: PreloadTypes[]) {
   data.forEach((unit) => {
     const { method, data } = unit;
 
-    // @ts-ignore: Unreachable code error
-    this.load[method](...data);
+    data.forEach((content) => {
+      // @ts-ignore: Unreachable code error
+      const result = this.load[method](...content);
+    });
   });
 }

src/game-modules/game/types.ts

@@ -1,12 +1,48 @@
+import CreatePlayer from "./create/player";
+import World from "./create/world";
+
 export interface PreloadTypes {
   method: string;
   data: any[];
 }
 
 export interface CreateGameTypes {
-  world: (showWorld: boolean, grid: string, img: string, size: number) => void;
+  world: (
+    showWorld: boolean,
+    gridName: string,
+    imgName: string,
+    size: number
+  ) => World;
+  player: (
+    x: number,
+    y: number,
+    spriteSheet: string,
+    textureFrame: string | number | undefined
+  ) => CreatePlayer;
+  animation: (config: AnimationConfig[]) => void;
 }
 
 export interface LoadGameTypes {
   preload: (data: PreloadTypes[]) => void;
 }
+
+interface Ways {
+  start: number;
+  end: number;
+}
+export interface AnimationConfig {
+  key: string;
+  frame: {
+    name: string;
+    ways: Ways;
+    frameRate: number;
+    repeat: number;
+  };
+}
+
+export interface SimpleObject {
+  x: number;
+  y: number;
+  imgName: string;
+  name: string;
+}

src/game-modules/service/config.ts

@@ -1,11 +1,21 @@
 import ExampleScene from "./scenes/exampleScene";
 
+const groundSpriteSize = 32;
+const minGroundNumber = 15;
+const size = groundSpriteSize * minGroundNumber;
+
 export const config = {
   type: Phaser.AUTO,
   parent: "game-box",
-  width: 480,
-  height: 480,
+  width: size,
+  height: size,
   scene: [ExampleScene],
   backgroundColor: 0x14003b,
   // transparent: true
+  physics: {
+    default: "arcade",
+    arcade: {
+      debug: true,
+    },
+  },
 };

src/game-modules/service/scenes/exampleScene/callBacks/cursorMove.ts

@@ -0,0 +1,7 @@
+export default function cursorMove(
+  cursor: Phaser.GameObjects.Image,
+  x: number,
+  y: number
+) {
+  cursor.setPosition(x, y);
+}

src/game-modules/service/scenes/exampleScene/callBacks/playerMove.ts

@@ -0,0 +1,10 @@
+import ExampleScene from "../index";
+
+export default function playerMove(scene: ExampleScene) {
+  if (scene.player.actor.x !== scene.world.objects["cursor"].x) {
+    const coordinateX = scene.world.objects["cursor"].x;
+    const coordinateY = scene.world.objects["cursor"].y;
+
+    scene.player.move(coordinateX, coordinateY, 100, 5);
+  }
+}

src/game-modules/service/scenes/exampleScene/configs/animations.ts

@@ -0,0 +1,41 @@
+import { AnimationConfig } from "../../../../game/types";
+
+const playerGoFrames = {
+  ways: {
+    start: 0,
+    end: 3,
+  },
+  frameRate: 6,
+  repeat: -1,
+};
+
+export const playerAnims: AnimationConfig[] = [
+  {
+    key: "playerGoUp",
+    frame: {
+      ...playerGoFrames,
+      name: "playerUp",
+    },
+  },
+  {
+    key: "playerGoDown",
+    frame: {
+      ...playerGoFrames,
+      name: "playerDown",
+    },
+  },
+  {
+    key: "playerGoLeft",
+    frame: {
+      ...playerGoFrames,
+      name: "playerLeft",
+    },
+  },
+  {
+    key: "playerGoRight",
+    frame: {
+      ...playerGoFrames,
+      name: "playerRight",
+    },
+  },
+];

src/game-modules/service/scenes/exampleScene/configs/objects.ts

@@ -0,0 +1,10 @@
+import { SimpleObject } from "../../../../game/types";
+
+export const objects: SimpleObject[] = [
+  {
+    x: 32 * 5, //center default
+    y: 32 * 5,
+    imgName: "cursor",
+    name: "cursor",
+  },
+];

src/game-modules/service/scenes/exampleScene/configs/preloadData.ts

@@ -0,0 +1,44 @@
+import { PreloadTypes } from "../../../../game/types";
+
+const playerData = {
+  frame: {
+    frameWidth: 20,
+    frameHeight: 45,
+    startFrame: 0,
+    endFrame: 3,
+  },
+  path: "game/assets/img/exampleScene/characters/player/",
+};
+
+const data: PreloadTypes[] = [
+  {
+    method: "image",
+    data: [
+      ["exampleGrassTile", "game/assets/img/exampleScene/grass.png"],
+      ["cursor", "game/assets/img/general/cursor.png"],
+    ],
+  },
+  {
+    method: "tilemapCSV",
+    data: [["exampleGrid", "game/assets/grids/exampleScene/grass.csv"]],
+  },
+  {
+    method: "spritesheet",
+    data: [
+      ["playerLeft", `${playerData.path}p_left.png`, playerData.frame],
+      ["playerRight", `${playerData.path}p_right.png`, playerData.frame],
+      [
+        "playerDown",
+        `${playerData.path}p_down.png`,
+        { ...playerData.frame, frameHeight: 44 },
+      ],
+      [
+        "playerUp",
+        `${playerData.path}p_up.png`,
+        { ...playerData.frame, frameHeight: 44 },
+      ],
+    ],
+  },
+];
+
+export default data;