Skip to content

Commit

Permalink
Further cleaning
Browse files Browse the repository at this point in the history
  • Loading branch information
@mipearson
mipearson committed Sep 30, 2018
1 parent f9c23f5 commit e2dba48
Show file tree
Hide file tree
Showing 7 changed files with 172 additions and 137 deletions.
8 changes: 4 additions & 4 deletions src/Tiles.ts → src/assets/Graphics.ts
View file
@@ -1,6 +1,6 @@
import RogueDungeon from "../assets/RogueDungeon.png";
import RoguePlayer from "../assets/RoguePlayer.png";
import Util from "../assets/Util.png";
import RogueDungeon from "../../assets/RogueDungeon.png";
import RoguePlayer from "../../assets/RoguePlayer.png";
import Util from "../../assets/Util.png";

interface Tileset {
width: number;
Expand All @@ -9,7 +9,7 @@ interface Tileset {
indices: any;
}

export default class Tiles {
export default class Graphics {
static readonly dungeon: Tileset = {
width: 16,
height: 16,
Expand Down
67 changes: 67 additions & 0 deletions src/entities/FOV.ts
View file
@@ -0,0 +1,67 @@
import Tiles from "../assets/Graphics";
import Mrpas from "mrpas";

const radius = 7;

export default class FOV {
private layer: Phaser.Tilemaps.DynamicTilemapLayer;
private mrpas: any;
private lastX: number;
private lastY: number;
private width: number;
private height: number;

constructor(
width: number,
height: number,
walls: Array<Array<boolean>>,
map: Phaser.Tilemaps.Tilemap
) {
const utilTiles = map.addTilesetImage("util");

this.layer = map
.createBlankDynamicLayer("Dark", utilTiles, 0, 0)
.fill(Tiles.util.indices.black);

this.mrpas = new Mrpas(width, height, (x: number, y: number) => {
return walls[y] && !walls[y][x];
});

this.lastX = -1;
this.lastY = -1;

this.width = width;
this.height = height;
}

update(tileX: number, tileY: number) {
if (this.lastX == tileX && this.lastY == tileY) {
return;
}
this.lastX = tileX;
this.lastY = tileY;

this.layer.forEachTile(
(t: Phaser.Tilemaps.Tile) => {
t.alpha = t.alpha < 1 ? 0.7 : 1;
},
this,
0,
0,
this.width,
this.height
);

this.mrpas.compute(
tileX,
tileY,
radius,
(x: number, y: number) => {
return this.layer.getTileAt(x, y).alpha < 1;
},
(x: number, y: number) => {
this.layer.getTileAt(x, y).alpha = 0;
}
);
}
}
51 changes: 51 additions & 0 deletions src/entities/Player.ts
View file
@@ -0,0 +1,51 @@
import Phaser from "phaser";
import Graphics from "../assets/Graphics";

const speed = 150;

export default class Player {
public sprite: Phaser.Physics.Arcade.Sprite;
private keys: Phaser.Input.Keyboard.CursorKeys;

constructor(x: number, y: number, scene: Phaser.Scene) {
scene.anims.create({
key: "player-walk",
frames: scene.anims.generateFrameNumbers("player", {
frames: Graphics.player.indices.south
}),
frameRate: 8,
repeat: -1
});

this.sprite = scene.physics.add.sprite(x, y, "player", 0);
this.sprite.setSize(13, 12);
this.sprite.setOffset(9, 16);

this.keys = scene.input.keyboard.createCursorKeys();
}

update() {
const keys = this.keys;
const body = <Phaser.Physics.Arcade.Body>this.sprite.body;

// Stop any previous movement from the last frame
body.setVelocity(0);

// Horizontal movement
if (keys.left!.isDown) {
body.setVelocityX(-speed);
} else if (keys.right!.isDown) {
body.setVelocityX(speed);
}

// Vertical movement
if (keys.up!.isDown) {
body.setVelocityY(-speed);
} else if (keys.down!.isDown) {
body.setVelocityY(speed);
}

// Normalize and scale the velocity so that sprite can't move faster along a diagonal
body.velocity.normalize().scale(speed);
}
}
10 changes: 1 addition & 9 deletions src/main.ts
View file
Expand Up @@ -3,13 +3,7 @@ import ReferenceScene from "./scenes/ReferenceScene";
import DungeonScene from "./scenes/DungeonScene";
import InfoScene from "./scenes/InfoScene";

import Tiles from "./tiles";
import RogueDungeon from "../assets/RogueDungeon.png";
import RoguePlayer from "../assets/RoguePlayer.png";
import DungeonFactory from "dungeon-factory";
import Mrpas from "mrpas";

const game = new Phaser.Game({
new Phaser.Game({
type: Phaser.WEBGL,
// TODO: OnResize
width: window.innerWidth,
Expand All @@ -20,8 +14,6 @@ const game = new Phaser.Game({
// scene: [ReferenceScene]
});

console.log(document.body.offsetWidth);
console.log(document.body.offsetHeight);
function setUpHotReload() {
// @ts-ignore
if (module.hot) {
Expand Down
163 changes: 44 additions & 119 deletions src/scenes/DungeonScene.ts
View file
@@ -1,17 +1,18 @@
import Phaser from "phaser";
import Tiles from "../Tiles";
import Tiles from "../assets/Graphics";
import FOV from "../entities/FOV";
import Player from "../entities/Player";
import DungeonFactory from "dungeon-factory";
import Mrpas from "mrpas";

const worldHeight = 81;
const worldWidth = 81;
const worldTileHeight = 81;
const worldTileWidth = 81;

export default class DungeonScene extends Phaser.Scene {
sprite: Phaser.Physics.Arcade.Sprite | null;
keys: Phaser.Input.Keyboard.CursorKeys | null;

lastX: number;
lastY: number;
player: Player | null;
fov: FOV | null;
map: Phaser.Tilemaps.Tilemap | null;

preload(): void {
this.load.image("dungeon", Tiles.dungeon.file);
Expand All @@ -24,57 +25,53 @@ export default class DungeonScene extends Phaser.Scene {

constructor() {
super("Scene");
this.sprite = null;
this.keys = null;
this.lastX = -1;
this.lastY = -1;
this.player = null;
this.fov = null;
this.map = null;
}

create(): void {
const dungeon = DungeonFactory.generate({
width: worldWidth,
height: worldHeight
width: worldTileWidth,
height: worldTileHeight
}) as { tiles: Array<Array<any>> };

console.log(dungeon);

const walls = dungeon.tiles.map(row =>
row.map(tile => tile.type === "wall")
);

const map = this.make.tilemap({
this.map = this.make.tilemap({
tileWidth: Tiles.dungeon.width,
tileHeight: Tiles.dungeon.height,
width: worldWidth,
height: worldHeight
width: worldTileWidth,
height: worldTileHeight
});

const dungeonTiles = map.addTilesetImage("dungeon");
const utilTiles = map.addTilesetImage("util");
const dungeonTiles = this.map.addTilesetImage("dungeon");

const groundLayer = map
this.map
.createBlankDynamicLayer("Ground", dungeonTiles, 0, 0)
.randomize(
0,
0,
worldWidth,
worldHeight,
worldTileWidth,
worldTileHeight,
Tiles.dungeon.indices.floor.outer
);
const wallLayer = map.createBlankDynamicLayer("Wall", dungeonTiles, 0, 0);
const darkLayer = map
.createBlankDynamicLayer("Dark", utilTiles, 0, 0)
.fill(Tiles.util.indices.black);
this.darkLayer = darkLayer;

const fov = new Mrpas(worldWidth, worldHeight, (x: number, y: number) => {
return walls[y] && !walls[y][x];
});
this.fov = fov;
const wallLayer = this.map.createBlankDynamicLayer(
"Wall",
dungeonTiles,
0,
0
);

this.fov = new FOV(worldTileWidth, worldTileHeight, walls, this.map);

let firstPos = [0, 0];
for (let x = 0; x < worldWidth; x++) {
for (let y = 0; y < worldHeight; y++) {
for (let x = 0; x < worldTileWidth; x++) {
for (let y = 0; y < worldTileHeight; y++) {
const tile = dungeon.tiles[y][x] as any;
if (tile.type === "wall") {
// let idx = 0;
Expand All @@ -90,104 +87,32 @@ export default class DungeonScene extends Phaser.Scene {
}
}

this.cameras.main.setRoundPixels(true);
this.cameras.main.setZoom(2);

this.anims.create({
key: "player-walk",
frames: this.anims.generateFrameNumbers("player", {
frames: Tiles.player.indices.south
}),
frameRate: 8,
repeat: -1
});

this.sprite = this.physics.add.sprite(
firstPos[0] * Tiles.dungeon.width + Tiles.dungeon.width / 2,
firstPos[1] * Tiles.dungeon.height + Tiles.dungeon.height / 2,
"player",
0
this.player = new Player(
this.map.tileToWorldX(firstPos[0]),
this.map.tileToWorldX(firstPos[1]),
this
);

this.cameras.main.setRoundPixels(true);
this.cameras.main.setZoom(2);
this.cameras.main.setBounds(
0,
0,
worldWidth * Tiles.dungeon.width,
worldHeight * Tiles.dungeon.height
worldTileWidth * Tiles.dungeon.width,
worldTileHeight * Tiles.dungeon.height
);
this.cameras.main.startFollow(this.sprite);

this.keys = this.input.keyboard.createCursorKeys();
this.cameras.main.startFollow(this.player.sprite);

wallLayer.setCollisionBetween(0, 256);
this.physics.add.collider(this.sprite, wallLayer);
this.sprite.setSize(13, 12);
this.sprite.setOffset(9, 16);
}

updateFov() {
const x = Math.floor((this.sprite.body.x + 16 / 2) / 16);
const y = Math.floor((this.sprite.body.y + 16 / 2) / 16);

if (this.lastX == x && this.lastY == y) {
return;
}
this.lastX = x;
this.lastY = y;

this.darkLayer.forEachTile(
t => {
t.alpha = t.alpha < 1 ? 0.7 : 1;
},
this,
0,
0,
worldWidth,
worldHeight
);

this.fov.compute(
x,
y,
7,
(x, y) => {
return this.darkLayer.getTileAt(x, y).alpha < 1;
},
(x, y) => {
this.darkLayer.getTileAt(x, y).alpha = 0;
}
);
this.physics.add.collider(this.player.sprite, wallLayer);
}

update() {
const keys = this.keys;
const sprite = this.sprite;
if (!keys || !sprite) {
return;
}
const speed = 150;
const prevVelocity = sprite.body.velocity.clone();

// Stop any previous movement from the last frame
sprite.body.setVelocity(0);

// Horizontal movement
if (keys.left.isDown) {
sprite.body.setVelocityX(-speed);
} else if (keys.right.isDown) {
sprite.body.setVelocityX(speed);
}

// Vertical movement
if (keys.up.isDown) {
sprite.body.setVelocityY(-speed);
} else if (keys.down.isDown) {
sprite.body.setVelocityY(speed);
}
this.player!.update();

// Normalize and scale the velocity so that sprite can't move faster along a diagonal
sprite.body.velocity.normalize().scale(speed);
const playerX = this.map!.worldToTileX(this.player!.sprite.x);
const playerY = this.map!.worldToTileY(this.player!.sprite.y);

this.updateFov();
this.fov!.update(playerX, playerY);
}
}
4 changes: 2 additions & 2 deletions src/scenes/ReferenceScene.ts
View file
@@ -1,7 +1,7 @@
import Phaser from "phaser";
import Tiles from "../Tiles";
import Graphics from "../assets/Graphics";

const tileset = Tiles.dungeon;
const tileset = Graphics.dungeon;

export default class ReferenceScene extends Phaser.Scene {
preload(): void {
Expand Down

0 comments on commit e2dba48

Please sign in to comment.