summaryrefslogtreecommitdiff
path: root/client/src/akkamon/scenes
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/akkamon/scenes')
-rw-r--r--client/src/akkamon/scenes/AkkamonWorldScene.ts23
-rw-r--r--client/src/akkamon/scenes/BootScene.ts39
-rw-r--r--client/src/akkamon/scenes/DemoScene.ts132
-rw-r--r--client/src/akkamon/scenes/Pack.ts1
-rw-r--r--client/src/akkamon/scenes/UIElement.ts3
-rw-r--r--client/src/akkamon/scenes/UIScene.ts119
6 files changed, 198 insertions, 119 deletions
diff --git a/client/src/akkamon/scenes/AkkamonWorldScene.ts b/client/src/akkamon/scenes/AkkamonWorldScene.ts
new file mode 100644
index 0000000..b9cfc20
--- /dev/null
+++ b/client/src/akkamon/scenes/AkkamonWorldScene.ts
@@ -0,0 +1,23 @@
+import Phaser from 'phaser';
+
+import { client } from '../../app';
+
+export let eventsCenter = new Phaser.Events.EventEmitter();
+
+export class AkkamonWorldScene extends Phaser.Scene {
+ static readonly TILE_SIZE = 32;
+
+ map?: Phaser.Tilemaps.Tilemap;
+
+ client = client;
+
+ eventsCenter = eventsCenter;
+
+ public spawnPointTilePos?: {
+ x: number,
+ y: number
+ };
+
+ spawnPoint: Phaser.Types.Tilemaps.TiledObject | undefined;
+
+}
diff --git a/client/src/akkamon/scenes/BootScene.ts b/client/src/akkamon/scenes/BootScene.ts
new file mode 100644
index 0000000..4642584
--- /dev/null
+++ b/client/src/akkamon/scenes/BootScene.ts
@@ -0,0 +1,39 @@
+import Phaser from 'phaser';
+
+import { AkkamonWorldScene } from './AkkamonWorldScene';
+
+export class BootScene extends AkkamonWorldScene {
+ constructor() {
+ super('BootScene')
+ }
+
+ init(): void {
+ }
+
+ preload(): void {
+ this.load.image("tiles", "assets/tilesets/akkamon-demo-extruded.png");
+ // load from json!
+ this.load.tilemapTiledJSON("map", "assets/tilemaps/akkamon-demo-tilemap.json");
+
+ // An atlas is a way to pack multiple images together into one texture. I'm using it to load all
+ // the player animations (walking left, walking right, etc.) in one image. For more info see:
+
+ // https://labs.phaser.io/view.html?src=src/animation/texture%20atlas%20animation.js
+ // If you don't use an atlas, you can do the same thing with a spritesheet, see:
+ // https://labs.phaser.io/view.html?src=src/animation/single%20sprite%20sheet.js
+ this.load.atlas("atlas",
+ "assets/atlas/atlas.png",
+ "assets/atlas/atlas.json");
+
+ this.load.image("menu", "assets/images/pMenu.png");
+ this.load.image("menupicker", "assets/images/menupicker.png");
+ }
+
+ create(): void {
+ this.scene
+ .launch('DemoScene')
+ .launch('AkkamonUI')
+ .remove()
+ }
+}
+
diff --git a/client/src/akkamon/scenes/DemoScene.ts b/client/src/akkamon/scenes/DemoScene.ts
index c301457..b9a230a 100644
--- a/client/src/akkamon/scenes/DemoScene.ts
+++ b/client/src/akkamon/scenes/DemoScene.ts
@@ -1,146 +1,54 @@
import Phaser from 'phaser';
-import { PlayerSprite } from './sprite';
-import { GridControls } from './GridControls';
-import { GridPhysics } from './GridPhysics';
-import { Direction } from './Direction';
+import { AkkamonWorldScene } from './AkkamonWorldScene';
-import { RemotePlayerEngine } from './RemotePlayerEngine';
-
-import { UIControls } from './uiControls';
-
-import { akkamonClient } from './app';
-
-export default class AkkamonStartScene extends Phaser.Scene
+export class DemoScene extends AkkamonWorldScene
{
-
- static readonly TILE_SIZE = 32;
-
- private gridPhysics?: GridPhysics
- private gridControls?: GridControls
-
- private remotePlayerEngine?: RemotePlayerEngine
-
- public spawnPointTilePos?: {
- x: number,
- y: number
- };
-
- directionToAnimation: {
- [key in Direction]: string
- } = {
- [Direction.UP]: "misa-back-walk",
- [Direction.DOWN]: "misa-front-walk",
- [Direction.LEFT]: "misa-left-walk",
- [Direction.RIGHT]: "misa-right-walk",
- [Direction.NONE]: "misa-front-walk"
- }
-
- spawnPoint: Phaser.Types.Tilemaps.TiledObject | undefined;
-
-
constructor ()
{
- super('akkamonStartScene');
- }
-
- preload ()
- {
- this.load.image("tiles", "assets/tilesets/akkamon-demo-extruded.png");
- // load from json!
- this.load.tilemapTiledJSON("map", "assets/tilemaps/akkamon-demo-tilemap.json");
-
- // An atlas is a way to pack multiple images together into one texture. I'm using it to load all
- // the player animations (walking left, walking right, etc.) in one image. For more info see:
-
- // https://labs.phaser.io/view.html?src=src/animation/texture%20atlas%20animation.js
- // If you don't use an atlas, you can do the same thing with a spritesheet, see:
- // https://labs.phaser.io/view.html?src=src/animation/single%20sprite%20sheet.js
- this.load.atlas("atlas",
- "assets/atlas/atlas.png",
- "assets/atlas/atlas.json");
+ super('DemoScene');
}
-
create ()
{
- const map = this.make.tilemap({ key: "map" });
+ this.map = this.make.tilemap({ key: "map" });
// Parameters are the name you gave the tileset in Tiled and then the key of the tileset image in
// Phaser's cache (i.e. the name you used in preload)
- const tileset = map.addTilesetImage("akkamon-demo-extruded", "tiles");
+ const tileset = this.map.addTilesetImage("akkamon-demo-extruded", "tiles");
// Parameters: layer name (or index) from Tiled, tileset, x, y
- const belowLayer = map.createLayer("Below Player", tileset, 0, 0);
- const worldLayer = map.createLayer("World", tileset, 0, 0);
- const aboveLayer = map.createLayer("Above Player", tileset, 0, 0);
+ const belowLayer = this.map.createLayer("Below Player", tileset, 0, 0);
+ const worldLayer = this.map.createLayer("World", tileset, 0, 0);
+ const aboveLayer = this.map.createLayer("Above Player", tileset, 0, 0);
// By default, everything gets depth sorted on the screen in the order we created things. Here, we
// want the "Above Player" layer to sit on top of the player, so we explicitly give it a depth.
// Higher depths will sit on top of lower depth objects.
aboveLayer.setDepth(10);
- this.spawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point");
-
- //this.createPlayerAnimation(Direction.UP);
-
-
- // Create a sprite with physics enabled via the physics system. The image used for the sprite has
- // a bit of whitespace, so I'm using setSize & setOffset to control the size of the player's body.
+ this.spawnPoint = this.map.findObject("Objects", obj => obj.name === "Spawn Point");
var tilePos = new Phaser.Math.Vector2(
- Math.floor(this.spawnPoint.x! / AkkamonStartScene.TILE_SIZE),
- Math.floor(this.spawnPoint.y! / AkkamonStartScene.TILE_SIZE),
+ Math.floor(this.spawnPoint.x! / AkkamonWorldScene.TILE_SIZE),
+ Math.floor(this.spawnPoint.y! / AkkamonWorldScene.TILE_SIZE),
);
this.spawnPointTilePos = tilePos;
- let player = new PlayerSprite({
- scene: this,
- tilePos: tilePos,
- texture: this.textures.get("atlas"),
- frame: "misa-front",
- });
-
- this.gridPhysics = new GridPhysics(player, map);
- this.gridControls = new GridControls(
- this.input,
- this.gridPhysics
+ this.client.requestInitPlayerSprite(
+ this
);
- this.remotePlayerEngine = new RemotePlayerEngine(this);
- akkamonClient.setRemotePlayerEngine(this.remotePlayerEngine);
-
- this.createPlayerAnimation(Direction.LEFT, 0, 3);
- this.createPlayerAnimation(Direction.RIGHT, 0, 3);
- this.createPlayerAnimation(Direction.UP, 0, 3);
- this.createPlayerAnimation(Direction.DOWN, 0, 3);
-
- // Phaser supports multiple cameras, but you can access the default camera like this:
- const camera = this.cameras.main;
- camera.startFollow(player);
- camera.roundPixels = true;
- camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
+ let akey = this.input.keyboard.addKey('a');
+ akey.on('down', () => {
+ this.input.keyboard.enabled = false;
+ this.eventsCenter.emit('open-menu');
+ // this.client.disableGridControls();
+ });
}
update(time: number, delta: number) {
- this.gridControls!.update();
- this.gridPhysics!.update(delta);
- this.remotePlayerEngine!.update(delta);
+ this.client.updateScene(delta);
}
- private createPlayerAnimation(direction: Direction, start: number, end: number) {
- this.anims.create({
- key: direction, // "misa-left-walk",
- frames: this.anims.generateFrameNames("atlas", { prefix: this.directionToAnimation[direction] + ".", start: start, end: end, zeroPad: 3 }),
- frameRate: 10,
- repeat: -1
- });
-
-// anims.create({
-// key: "misa-left-walk",
-// frames: anims.generateFrameNames("atlas", { prefix: "misa-left-walk.", start: 0, end: 3, zeroPad: 3 }),
-// frameRate: 10,
-// repeat: -1
-
- }
}
diff --git a/client/src/akkamon/scenes/Pack.ts b/client/src/akkamon/scenes/Pack.ts
new file mode 100644
index 0000000..a89c860
--- /dev/null
+++ b/client/src/akkamon/scenes/Pack.ts
@@ -0,0 +1 @@
+import assets from './Assets';
diff --git a/client/src/akkamon/scenes/UIElement.ts b/client/src/akkamon/scenes/UIElement.ts
new file mode 100644
index 0000000..f48827d
--- /dev/null
+++ b/client/src/akkamon/scenes/UIElement.ts
@@ -0,0 +1,3 @@
+export enum UIElement {
+ MAIN_MENU = "main-menu"
+}
diff --git a/client/src/akkamon/scenes/UIScene.ts b/client/src/akkamon/scenes/UIScene.ts
index 3dc7ee9..de415f8 100644
--- a/client/src/akkamon/scenes/UIScene.ts
+++ b/client/src/akkamon/scenes/UIScene.ts
@@ -1,20 +1,125 @@
-import { UIControls } from './uiControls';
+import { Direction } from '../render/Direction';
+import { eventsCenter } from '../../akkamon/scenes/AkkamonWorldScene';
-export class AkkamonUI extends Phaser.Scene
+class MenuText extends Phaser.GameObjects.Text {
+ constructor(scene: Phaser.Scene, group: Phaser.GameObjects.Group, x: number, y: number, text: string) {
+ let style: Phaser.Types.GameObjects.Text.TextStyle = {
+ fontFamily: 'Courier',
+ fontSize: '16px',
+ fontStyle: '',
+ backgroundColor: undefined,
+ color: '#000000',
+ stroke: '#000000',
+ strokeThickness: 0,
+ align: 'left', // 'left'|'center'|'right'|'justify'
+ }
+ super(scene, x, y, text, style);
+ scene.add.existing(this);
+ group.add(this);
+ }
+}
+
+interface AkkamonMenu {
+}
+
+class Menu extends Phaser.GameObjects.Image implements AkkamonMenu {
+
+ private buttons?: Array<MenuText>;
+
+ private buttonSelector?: Phaser.GameObjects.Image;
+
+ private selectedButton?: string;
+
+ private index?: number;
+
+ public group?: Phaser.GameObjects.Group;
+
+ constructor(scene: Phaser.Scene) {
+ const { width, height } = scene.scale;
+ super(scene, width * 0.95, height * 0.05, "menu")
+ this.setOrigin(1,0)
+ this.setVisible(true)
+ this.setDisplaySize(296, 400)
+
+ this.group = new Phaser.GameObjects.Group(scene);
+
+ scene.add.existing(this);
+ this.group.add(this);
+
+ this.buttons = new Array();
+
+ this.setMainButtons();
+
+ this.buttonSelector = scene.add.image(
+ this.x - this.displayWidth + 40,
+ this.buttons![0].y + 7,
+ "menupicker")
+ .setDisplaySize(20,33)
+ .setOrigin(0.5,0.5);
+ this.group.add(this.buttonSelector);
+
+ this.index = 0;
+ this.selectedButton = this.buttons[0].text;
+ }
+
+ resetPicker() {
+ this.buttonSelector!
+ .setPosition(this.x - this.displayWidth + 40,
+ this.buttons![0].y + 7);
+ }
+
+ setMainButtons() {
+ this.buttons!.push(new MenuText(this.scene, this.group!, this.x - 150, this.y + 40, 'POKéDEX'));
+ this.buttons!.push(new MenuText(this.scene, this.group!, this.x - 150, this.y + 140, 'POKéMON'));
+ this.buttons!.push(new MenuText(this.scene, this.group!, this.x - 150, this.y + 240, 'PHONE'));
+ this.buttons!.push(new MenuText(this.scene, this.group!, this.x - 150, this.y + 340, 'CLOSE'));
+ }
+
+ clearButtons() {
+ this.buttons = new Array();
+ }
+
+ selectButton(direction: Direction) {
+ if (direction === Direction.UP && this.index! !== 0) {
+ this.buttonSelector!
+ .setPosition(this.buttonSelector!.x, this.buttonSelector!.y - 100)
+ this.index! -= 1;
+ } else if (direction === Direction.DOWN && this.index !== this.buttons!.length - 1) {
+ this.buttonSelector!
+ .setPosition(this.buttonSelector!.x, this.buttonSelector!.y + 100)
+ this.index! += 1;
+ }
+
+ this.selectedButton = this.buttons![this.index!].text;
+ }
+}
+
+export class UIScene extends Phaser.Scene
{
- private uiControls: UIControls;
+ // private uiControls: UIControls;
+
+ private cursors?: Phaser.Types.Input.Keyboard.CursorKeys;
+
+ private menu?: Menu;
constructor ()
{
super('AkkamonUI');
}
- preload() {
- }
-
create () {
- this.uiControls = new UIControls(this.input);
+ //this.uiControls = new UIControls(this.input);
+
+
+ this.menu = new Menu(this);
+ this.menu.group!.setVisible(false);
+
+ eventsCenter.on('open-menu', () =>
+ {
+ this.menu!.group!.setVisible(true);
+ });
+
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-12 08:47:30 +0000