Skip to content
This repository has been archived by the owner on Jun 18, 2022. It is now read-only.

Commit

Permalink
wip: try rendering with circles
Browse files Browse the repository at this point in the history
  • Loading branch information
@blacha
blacha committed Mar 21, 2021
1 parent 1078e9f commit d4e97df
Show file tree
Hide file tree
Showing 11 changed files with 768 additions and 120 deletions.
5 changes: 4 additions & 1 deletion package.json
View file
Expand Up @@ -52,9 +52,12 @@
"fs-extra": "^7.0.1",
"mithril": "^1.1.6",
"parse-ms": "^2.1.0",
"pixi.js": "^6.0.0",
"pretty-json-log": "^0.3.1",
"promise-queue": "^2.2.5",
"remove": "^0.1.5",
"source-map-support": "^0.5.10",
"ulid": "^2.3.0"
"ulid": "^2.3.0",
"yarn": "^1.22.10"
}
}
91 changes: 91 additions & 0 deletions src/hud/index.ts
View file
Expand Up @@ -8,6 +8,8 @@ import { PlayerView } from './view/player';
import { WS } from './socket';
import { SpriteSheet } from './maprender/sprite';
import { Logger } from '../util/log';
import { GameStateJson } from '@diablo2/core';
import { LogMessage } from 'bblog';

export const HtmlView = {
view() {
Expand All @@ -29,6 +31,95 @@ document.addEventListener('DOMContentLoaded', async () => {
// State.game = { map: { id: 1240694333, difficulty: 0 } };
m.mount(document.getElementById('main'), HtmlView);
WS.start('ws://localhost:40510');

// const state: GameStateJson = {
// id: '01f169wned4dz0zg7pc2fx636x',
// createdAt: 1616193148365,
// player: {
// id: 1,
// type: 'player',
// name: 'SomeNameHere',
// x: 4620,
// y: 5582,
// updatedAt: 1616193224167,
// life: -1,
// xp: { current: 428059834, start: 428059834, diff: 0 },
// level: 74,
// },
// map: { id: 1711250936, act: 0, difficulty: 0, isHardcore: true },
// objects: [],
// units: [
// {
// type: 'npc',
// id: 1,
// name: 'Guard',
// life: 128,
// x: 4829,
// y: 5681,
// code: 338,
// flags: {},
// updatedAt: 1616195136956,
// enchants: [],
// },
// {
// type: 'npc',
// id: 7,
// name: 'Charsi',
// life: 128,
// x: 4824,
// y: 5644,
// code: 154,
// flags: {},
// updatedAt: 1616195138558,
// enchants: [],
// },
// {
// type: 'npc',
// id: 5,
// name: 'Gheed',
// life: 128,
// x: 4825,
// y: 5706,
// code: 147,
// flags: {},
// updatedAt: 1616195143356,
// enchants: [],
// },
// {
// type: 'npc',
// id: 13,
// name: 'Warriv',
// life: 128,
// x: 4865,
// y: 5660,
// code: 155,
// flags: {},
// updatedAt: 1616195144715,
// enchants: [],
// },
// ],
// items: [],
// kills: [
// { name: 'Zombie', code: 5, total: 2 },
// { name: 'Quill Rat', code: 63, total: 1 },
// ],
// };
// Logger.addStream({
// setLevel(level) {
// this.level = level;
// },
// write(msg: LogMessage) {
// const mObj = { ...msg };
// delete mObj.pid;
// delete mObj.msg;
// delete mObj.time;
// delete mObj.hostname;
// delete mObj.v;

// console.log(msg.time.toISOString(), msg.msg, JSON.stringify(mObj));
// },
// });
// State.update(state);
});

Logger['streams'] = [];
15 changes: 4 additions & 11 deletions src/hud/maprender/map.layer.collision.ts
View file
@@ -1,4 +1,3 @@
// http://localhost:5000/act/2/683484276/1
import { AreaUtil } from '../../core/area';
import { D2Map, D2MapObject } from '../../core/map';
import { MapExtents, MapRenderer } from './map.render';
Expand All @@ -12,7 +11,7 @@ export class MapLayerCollision {

render(ctx: CanvasRenderingContext2D, extent: MapExtents): D2MapObject[] {
const objects = [];
for (const map of Object.values(this.base.maps)) {
for (const map of this.base.maps.values()) {
const startTime = Date.now();

const act = AreaUtil.getAct(map.id);
Expand All @@ -26,7 +25,7 @@ export class MapLayerCollision {
return objects;
}

renderMap(mapInfo: D2Map, ctx: CanvasRenderingContext2D, extent: MapExtents, objects: D2MapObject[]) {
renderMap(mapInfo: D2Map, ctx: CanvasRenderingContext2D, extent: MapExtents, objects: D2MapObject[]): void {
ctx.fillStyle = 'white';
const map = mapInfo.map;

Expand All @@ -45,16 +44,11 @@ export class MapLayerCollision {
const xCount = line[i];

fill = !fill;
if (!fill) {
// for (let xOffset = 0; xOffset <= xCount; xOffset++) {
ctx.fillRect(x, y, xCount, size);
}
if (!fill) ctx.fillRect(x, y, xCount, size);
x = x + xCount;
}
const xMax = mapInfo.offset.x - extent.min.x + mapInfo.size.width;
if (fill && x < xMax) {
ctx.fillRect(x, y, xMax - x, size);
}
if (fill && x < xMax) ctx.fillRect(x, y, xMax - x, size);
}
for (const object of mapInfo.objects) {
objects.push({
Expand All @@ -63,6 +57,5 @@ export class MapLayerCollision {
y: object.y + mapInfo.offset.y,
});
}
// console.timeEnd('RenderMap:' + toHexString(mapInfo.id)); // tslint:disable-line
}
}
43 changes: 20 additions & 23 deletions src/hud/maprender/map.layer.object.ts
View file
Expand Up @@ -3,7 +3,7 @@ import { D2MapObject, D2Map } from '../../core/map';
import { MapExtents, MapRenderer } from './map.render';
import { GameObjectClasses, GameObjectClass } from '../../core/object.type';
import { GameObject } from '../../core/object';
import { Sprites, SpriteSheet } from './sprite';
import { CanvasText, Sprites, SpriteSheet } from './sprite';
import { NpcCode, NpcUtil } from '../../core/npc';
import { NpcJson, ItemJson } from '@diablo2/core';
import { NpcName } from '../../core/npc.name';
Expand Down Expand Up @@ -105,12 +105,12 @@ export class MapLayerObject {
if (!this.base.inBounds(drawX, drawY)) {
if (obj.id === NpcCode.Summoner || obj.id === NpcCode.Izual) {
const bWp = this.getBoundedDraw(drawX, drawY);
Sprites.MonsterBoss.draw(ctx, this.sheet, bWp.x, bWp.y, 18);
Sprites.MonsterBoss.draw(ctx, this.sheet, bWp.x, bWp.y, 32);
}
return;
}
// console.log('Draw', obj, NpcName[obj.id]);
Sprites.Unkown.draw(ctx, this.sheet, drawX, drawY, 18);
console.log('Draw', obj, NpcName[obj.id]);
Sprites.Unknown.draw(ctx, drawX, drawY, 8);
}

renderObject(ctx: CanvasRenderingContext2D, extent: MapExtents, obj: D2MapObject): void {
Expand All @@ -123,11 +123,11 @@ export class MapLayerObject {
if (this.base.inBounds(drawX, drawY)) {
this.drawObject(ctx, extent, drawX, drawY, obj);
if (this.debugObjects) {
ctx.font = '16px "Roboto condensed"';
ctx.fillStyle = 'red';
ctx.strokeStyle = 'black';
ctx.strokeText(obj.name, drawX, drawY);
ctx.fillText(obj.name, drawX, drawY);
// ctx.font = '16px "Roboto condensed"';
// ctx.fillStyle = 'red';
// ctx.strokeStyle = 'black';
// ctx.strokeText(obj.name, drawX, drawY);
// ctx.fillText(obj.name, drawX, drawY);
}
} else {
const objType = GameObjectClasses[obj.id];
Expand Down Expand Up @@ -158,14 +158,10 @@ export class MapLayerObject {
drawObject(ctx: CanvasRenderingContext2D, extent: MapExtents, drawX: number, drawY: number, obj: D2MapObject): void {
const objType = GameObjectClasses[obj.id];
if (objType === GameObjectClass.SHRINE) {
ctx.font = '14px "Roboto condensed"';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = 'rgba(200,0,200,0.87)';
ctx.strokeStyle = 'rgba(255,255,255,0.87)';
ctx.strokeText(obj.name, drawX, drawY - 3);
ctx.fillText(obj.name, drawX, drawY - 3);
return Sprites.Shrine.draw(ctx, this.sheet, drawX, drawY, 16);
CanvasText.draw(ctx, drawX, drawY - 10, obj.name, { size: 14 });

if (obj.name === 'Well') return Sprites.Well.draw(ctx, drawX, drawY, 8);
return Sprites.Shrine.draw(ctx, drawX, drawY, 8);
}

if (objType === GameObjectClass.WAYPOINT) {
Expand All @@ -185,7 +181,7 @@ export class MapLayerObject {
}

renderPlayer(ctx: CanvasRenderingContext2D): void {
Sprites.Player.draw(ctx, this.sheet, this.base.size.width / 2, this.base.size.height / 2);
Sprites.Player.draw(ctx, this.base.size.width / 2, this.base.size.height / 2, 16);
}

renderNpcs(ctx: CanvasRenderingContext2D, units: UnitJson[]): void {
Expand All @@ -194,7 +190,6 @@ export class MapLayerObject {
for (const unit of units) {
if (unit.type === 'player') continue;
if (NpcUtil.isUseless(unit.code)) continue;
if (NpcUtil.isTownFolk(unit.code)) continue;
const npcRet = this.drawNpc(ctx, unit, extent);
if (npcRet) lastDraw.push(npcRet);
}
Expand All @@ -218,9 +213,11 @@ export class MapLayerObject {
const drawX = npc.x - extent.min.x;
const drawY = npc.y - extent.min.y;

// if (npc.uid === State.game.player.mercId) {
// Sprites.Merc.draw(ctx, this.sheet, drawX, drawY, 12);
// } else
if (NpcUtil.isTownFolk(npc.code)) {
CanvasText.draw(ctx, drawX, drawY - 10, npc.name, { size: 12, color: 'green', stroke: 0 });
return Sprites.TownsFolk.draw(ctx, drawX, drawY, 16);
}

if (npc.name === 'Hydra') {
return Sprites.PlayerHydra.draw(ctx, this.sheet, drawX, drawY, 12);
}
Expand Down Expand Up @@ -258,7 +255,7 @@ export class MapLayerObject {
return npc;
}

Sprites.Unkown.draw(ctx, this.sheet, drawX, drawY);
Sprites.Unknown.draw(ctx, drawX, drawY);

// Sprites.MonsterNormal.draw(ctx,this.sheet, this.sheet, drawX, drawY);
}
Expand Down
25 changes: 17 additions & 8 deletions src/hud/maprender/map.render.ts
View file
Expand Up @@ -4,6 +4,7 @@ import { AreaUtil } from '../../core/area';
import { D2Map } from '../../core/map';
import { Point, Size } from '../../core/size';
import { Logger } from '../../util/log';
import { State } from '../state';
import { MapLayerCollision } from './map.layer.collision';
import { MapLayerObject } from './map.layer.object';
import { SpriteSheet } from './sprite';
Expand All @@ -15,30 +16,38 @@ export interface MapExtents {
}

export class MapRenderer {
center = { x: 0, y: 0 };
size = { width: 768, height: 768 };
act: Act = null;
size = { width: 2048, height: 2048 };

maps: { [key: string]: D2Map };
maps = new Map<number, D2Map>();

layerCollision: MapLayerCollision;
layerObject: MapLayerObject;

log: Log;
state: State;

get act(): Act {
return State.game.map.act;
}
get center(): Point {
const player = State.game.player;
return { x: player.x, y: player.y };
}

constructor(maps: { [key: string]: D2Map }, size: Size, sprites: SpriteSheet) {
this.maps = maps;
this.maps.clear();
for (const map of Object.values(maps)) this.maps.set(map.id, map);
this.size = size;

this.layerCollision = new MapLayerCollision(this);
this.layerObject = new MapLayerObject(this, sprites);
}

/** List of maps currently in view */
get currentMaps(): D2Map[] {
get current(): D2Map[] {
const extent = this.extent;
const maps = [];
for (const map of Object.values(this.maps)) {
for (const map of this.maps.values()) {
const act = AreaUtil.getAct(map.id);
if (act !== this.act) continue;
if (this.isMapInBounds(map, extent)) maps.push(map);
Expand All @@ -47,7 +56,7 @@ export class MapRenderer {
}

getMapById(id: number): D2Map {
return this.maps[id];
return this.maps.get(id);
}

render(ctx: CanvasRenderingContext2D): void {
Expand Down

0 comments on commit d4e97df

Please sign in to comment.