Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

229 enhancement minimap #238

Merged
merged 2 commits into from
Aug 23, 2022
Merged

229 enhancement minimap #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0b0824
portal rotate + triangle avatar
valentinMachado Aug 22, 2022
b9714da
magnetism
valentinMachado Aug 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 150 additions & 47 deletions client/assets/localScripts/MiniMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ const udvizType = require('ud-viz');
let udviz = null;

const MINI_MAP_SIZE = 700;
const AVATAR_RADIUS_MIN = 5;
const AVATAR_RADIUS_MAX = 15;
const AVATAR_SIZE_MIN = 15;
const AVATAR_SIZE_MAX = 25;
const MAGNETISM = 2;

module.exports = class MiniMap {
constructor(conf, udvizBundle) {
Expand Down Expand Up @@ -32,8 +33,11 @@ module.exports = class MiniMap {

this.currentDT = 0;

this.portalsPosition = [];
this.portalIcons = [];
this.defaultCanvas = null;

//map is displayed or not
this.displayMiniMap = false;
}

/**
Expand All @@ -49,13 +53,24 @@ module.exports = class MiniMap {
const manager = gameView.getInputManager();
const Command = udviz.Game.Command;

let displayMiniMap = false;
const _this = this;
const ui = this.ui;
const conf = this.conf;

/* Finding the position of the portals and adding them to the array. */
const portalIcons = this.portalIcons;
go.traverse(function (child) {
const lS = child.fetchLocalScripts();
if (lS && lS['portal_sweep']) {
portalIcons.push(new PortalIcon(child.getPosition()));
}
});

//register inputs
manager.addKeyInput('m', 'keydown', function () {
displayMiniMap = !displayMiniMap;
_this.displayMiniMap = !_this.displayMiniMap;

if (displayMiniMap) {
if (_this.displayMiniMap) {
gameView.appendToUI(ui);
} else {
ui.remove();
Expand All @@ -79,6 +94,18 @@ module.exports = class MiniMap {
0
);

//MAGNETISM
_this.portalIcons.forEach(function (icon) {
const posIcon = icon.getPosition();
if (
Math.abs(posIcon.x - teleportPosition.x) < MAGNETISM &&
Math.abs(posIcon.y - teleportPosition.y) < MAGNETISM
) {
teleportPosition.x = posIcon.x;
teleportPosition.y = posIcon.y;
}
});

return new Command({
type: Command.TYPE.TELEPORT,
data: {
Expand All @@ -90,13 +117,31 @@ module.exports = class MiniMap {
});
});

/* Finding the position of the portals and adding them to the array. */
const portalsPosition = this.portalsPosition;
go.traverse(function (child) {
const lS = child.fetchLocalScripts();
if (lS && lS['portal_sweep']) {
portalsPosition.push(child.getPosition());
}
manager.addMouseInput(this.ui, 'mousemove', function (event) {
const x = event.pageX;
const y = event.pageY;

const rect = _this.ui.getBoundingClientRect();
const ratioX = (x - rect.left) / (rect.right - rect.left);
const ratioY = 1 - (y - rect.top) / (rect.bottom - rect.top);

const positionMouse = new udviz.THREE.Vector3(
(ratioX - 0.5) * conf.mini_map_size,
(ratioY - 0.5) * conf.mini_map_size,
0
);

_this.portalIcons.forEach(function (icon) {
const posIcon = icon.getPosition();
if (
Math.abs(posIcon.x - positionMouse.x) < MAGNETISM &&
Math.abs(posIcon.y - positionMouse.y) < MAGNETISM
) {
icon.setHover(true);
} else {
icon.setHover(false);
}
});
});
}

Expand Down Expand Up @@ -261,54 +306,53 @@ module.exports = class MiniMap {
'Studios'
);

//PORTAL spirals

const drawSpiral = function (pos) {
ctx.beginPath();
ctx.strokeStyle = 'red';

const a = 0.5;
const b = 0.5;
for (let i = 0; i < 150; i++) {
const angle = 0.1 * i;
const xSpiral = pos.x + (a + b * angle) * Math.cos(angle);
const ySpiral = pos.y + (a + b * angle) * Math.sin(angle);
ctx.lineTo(xSpiral, ySpiral);
}
ctx.stroke();
};

this.portalsPosition.forEach(function (pos) {
const posPortal = {
x: MINI_MAP_SIZE * 0.5 + pos.x / pixelSize,
y: MINI_MAP_SIZE * 0.5 - pos.y / pixelSize,
};
drawSpiral(posPortal);
});

//draw instruction teleport
ctx.save();
ctx.font = '20px Arial';
ctx.fillStyle = 'red';
ctx.fillText('Cliquez sur les', 20, 20);
ctx.fillText('pour vous teleporter dans la salle voulu.', 180, 20);
ctx.restore();
drawSpiral({
this.drawSpiral(ctx, {
x: 163,
y: 10,
});

return defaultCanvas;
}

drawSpiral(destCtx, pos, theta = 0, hover = false) {
destCtx.beginPath();

if (hover) {
destCtx.strokeStyle = 'green';
} else {
destCtx.strokeStyle = 'red';
}

destCtx.lineWidth = 1;

const a = 0.5;
const b = 0.5;
for (let i = 0; i < 150; i++) {
const angle = 0.1 * i;
const xSpiral = pos.x + (a + b * angle) * Math.cos(angle + theta);
const ySpiral = pos.y + (a + b * angle) * Math.sin(angle + theta);
destCtx.lineTo(xSpiral, ySpiral);
}
destCtx.stroke();
}

/**
* It draws the mini-map, and then draws the avatar on top of it
* @returns A function that takes in two arguments, go and localCtx.
*/
tick() {
const go = arguments[0];
const localCtx = arguments[1];
if (!this.defaultCanvas) return;
const _this = this;

if (!this.defaultCanvas || !this.displayMiniMap) return;
//write
const destCtx = this.ui.getContext('2d');
destCtx.drawImage(this.defaultCanvas, 0, 0);
Expand All @@ -319,22 +363,21 @@ module.exports = class MiniMap {
const avatarGO = go
.computeRoot()
.find(localCtx.getGameView().getUserData('avatarUUID'));
const pixelSize = this.conf.mini_map_size / MINI_MAP_SIZE;
if (avatarGO) {
const avatarPos = avatarGO.getPosition();
const pixelSize = this.conf.mini_map_size / MINI_MAP_SIZE;

const radius =
AVATAR_RADIUS_MIN +
(AVATAR_RADIUS_MAX - AVATAR_RADIUS_MIN) *
const size =
AVATAR_SIZE_MIN +
(AVATAR_SIZE_MAX - AVATAR_SIZE_MIN) *
Math.abs(Math.cos(this.currentDT));

const avatarPosCanvas = {
const c = {
x: MINI_MAP_SIZE * 0.5 + avatarPos.x / pixelSize,
y: MINI_MAP_SIZE * 0.5 - avatarPos.y / pixelSize,
};
/* Drawing the avatar on the mini map. Set its color thanks to the render color */
const avatarColor = avatarGO.getComponent('Render').color;
destCtx.beginPath();
destCtx.fillStyle =
'rgb(' +
avatarColor.r * 255 +
Expand All @@ -343,9 +386,50 @@ module.exports = class MiniMap {
',' +
avatarColor.b * 255 +
')';
destCtx.arc(avatarPosCanvas.x, avatarPosCanvas.y, radius, 0, Math.PI * 2);

const rotation = -avatarGO.getRotation().z - Math.PI;
const cos = Math.cos(rotation);
const sin = Math.sin(rotation);

const xRot = function (x, y) {
return x * cos - y * sin;
};

const yRot = function (x, y) {
return y * cos + x * sin;
};

//draw triangle
const ratioTriangle = 0.6;
destCtx.beginPath();
destCtx.moveTo(
c.x + xRot(-size * 0.5, -size * ratioTriangle),
c.y + yRot(-size * 0.5, -size * ratioTriangle)
);
destCtx.lineTo(
c.x + xRot(size * 0.5, -size * ratioTriangle),
c.y + yRot(size * 0.5, -size * ratioTriangle)
);
destCtx.lineTo(
c.x + xRot(0, size * ratioTriangle),
c.y + yRot(0, size * ratioTriangle)
);
destCtx.closePath();
destCtx.fill();
}

//icons
//PORTAL spirals

this.portalIcons.forEach(function (icon) {
const pos = icon.getPosition();

const posPortal = {
x: MINI_MAP_SIZE * 0.5 + pos.x / pixelSize,
y: MINI_MAP_SIZE * 0.5 - pos.y / pixelSize,
};
_this.drawSpiral(destCtx, posPortal, _this.currentDT, icon.isHover());
});
}

/**
Expand All @@ -366,3 +450,22 @@ module.exports = class MiniMap {
});
}
};

class PortalIcon {
constructor(position) {
this.position = position;
this.hover = false;
}

getPosition() {
return this.position;
}

isHover() {
return this.hover;
}

setHover(value) {
this.hover = value;
}
}
2 changes: 0 additions & 2 deletions client/assets/localScripts/PlacePostIt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,4 @@ module.exports = class PlacePostIt {
const scriptStaticObject = go.fetchLocalScripts()['static_object'];
return scriptStaticObject.getObject();
}

tick() {}
};