diff --git a/public/client.js b/public/client.js index 346e518..b6adaf7 100644 --- a/public/client.js +++ b/public/client.js @@ -4,28 +4,34 @@ import { Tween } from '@tweenjs/tween.js' const global = (0,eval)('this') const scene = new THREE.Scene() const raycaster = new THREE.Raycaster() -const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000) +const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000) const renderer = new THREE.WebGLRenderer() const backgroundColor = new THREE.Color().setHex(0x112233) scene.background = backgroundColor renderer.setSize(window.innerWidth, window.innerHeight) renderer.setAnimationLoop(render) -camera.position.set(5, -12, 20) -camera.rotation.set((56 / 180) * Math.PI, 0, 0) -camera.zoom += 0.4 +const cameraOffsetX = 0 +const cameraOffsetY = -13.5 +const cameraOffsetZ = 20 +camera.position.set(cameraOffsetX, cameraOffsetY, cameraOffsetZ) +camera.rotation.set((34 / 180) * Math.PI, 0, 0) +camera.zoom += 0.2 camera.updateProjectionMatrix() camera.layers.enable(1) camera.layers.enable(2) -const entityMaterial = new THREE.MeshToonMaterial({ color: 0xffffff }) +// const entityMaterial = new THREE.MeshToonMaterial({ color: 0xffffff }) const projectileMaterial = new THREE.MeshToonMaterial({ color: 0xcccccc }) const terrainMaterial = new THREE.MeshToonMaterial({ color: 0xffd700 }) const opacity = 0.3 const teamMaterials = { - blue: new THREE.MeshToonMaterial({ color: 0x4444ff, transparent: true, opacity }), + blue: new THREE.MeshToonMaterial({ color: 0x4444ff }), + blueTransparent: new THREE.MeshToonMaterial({ color: 0x4444ff, transparent: true, opacity }), neutral: new THREE.MeshToonMaterial({ color: 0x22dd22, transparent: true, opacity }), - red: new THREE.MeshToonMaterial({ color: 0xff4444, transparent: true, opacity }), + red: new THREE.MeshToonMaterial({ color: 0xff4444 }), + redTransparent: new THREE.MeshToonMaterial({ color: 0xff4444, transparent: true, opacity }), projectile: new THREE.MeshToonMaterial({ color: 0xff00ff, transparent: true, opacity }), + range: new THREE.MeshToonMaterial({ color: 0x00ffff, transparent: true, opacity: opacity / 2 }), } const minimapCamera = new THREE.OrthographicCamera(-10, 10, 10, -10) @@ -78,35 +84,32 @@ function followCamera() { const entity = entities[playerId] if (entity == null) { return } - const offsetX = 0 - const offsetY = -28 + const distanceX = Math.abs((entity.position.x + cameraOffsetX) - camera.position.x) + const distanceY = Math.abs((entity.position.y + cameraOffsetY) - camera.position.y) - const distanceX = Math.abs((entity.position.x + offsetX) - camera.position.x) - const distanceY = Math.abs((entity.position.y + offsetY) - camera.position.y) - - camera.position.z = 20 + camera.position.z = cameraOffsetZ if (distanceX > 0.01) { - if (entity.position.x + offsetX > camera.position.x) { + if (entity.position.x + cameraOffsetX > camera.position.x) { camera.position.x += cameraSpeed * distanceX } - if (entity.position.x + offsetX < camera.position.x) { + if (entity.position.x + cameraOffsetX < camera.position.x) { camera.position.x -= cameraSpeed * distanceX } } else if (distanceX != 0) { - camera.position.x = entity.position.x + offsetX + camera.position.x = entity.position.x + cameraOffsetX } if (distanceY > 0.01) { - if (entity.position.y + offsetY > camera.position.y) { + if (entity.position.y + cameraOffsetY > camera.position.y) { camera.position.y += cameraSpeed * distanceY } - if (entity.position.y + offsetY < camera.position.y) { + if (entity.position.y + cameraOffsetY < camera.position.y) { camera.position.y -= cameraSpeed * distanceY } } else if (distanceY != 0) { - camera.position.y = entity.position.y + offsetY + camera.position.y = entity.position.y + cameraOffsetY } } @@ -124,7 +127,7 @@ function cameraMovement() { else if (keysDown.ArrowDown) { camera.position.y -= cameraSpeed } if (keysDown.Space) { - camera.position.set(entities[playerId].position.x, entities[playerId].position.y - 28, 20) + camera.position.set(entities[playerId].position.x + cameraOffsetX, entities[playerId].position.y + cameraOffsetY, cameraOffsetZ) } } @@ -247,6 +250,7 @@ function connectWebSocket() { entity = entities[e.id] } else { + const entityMaterial = teamMaterials[e.team] entity = new THREE.Mesh(new THREE.CylinderGeometry(e.visualRadius / 100, e.visualRadius / 100, e.height / 50), entityMaterial) entity.rotation.x = Math.PI / 2 entity.userData.type = 'entity' @@ -267,14 +271,26 @@ function connectWebSocket() { hp.layers.set(1) maxHp.add(hp) - const teamMaterial = teamMaterials[e.team] - const teamMarker = new THREE.Mesh(new THREE.CylinderGeometry((e.radius + 2) / 100, (e.radius + 2) / 100, 1), teamMaterial) + const teamMaterial = teamMaterials[`${e.team}Transparent`] + const teamMarker = new THREE.Mesh(new THREE.CylinderGeometry((e.radius) / 100, (e.radius) / 100, 1), teamMaterial) const teamMarkerSize = 4000 teamMarker.scale.y = e.height / teamMarkerSize teamMarker.position.y = (e.height / (teamMarkerSize * 2)) - (e.height / 100) - entity.rotation.x = Math.PI / 2 + teamMarker.position.y += 0.01 + teamMarker.layers.set(1) entity.add(teamMarker) + if (e.id == playerId) { + const rangeMaterial = teamMaterials['range'] + const rangeSize = state.abilities.find((it) => it.id == e.abilities.at(0))?.range ?? 0 + const rangeMarker = new THREE.Mesh(new THREE.CylinderGeometry((rangeSize) / 100, (rangeSize) / 100, 1), rangeMaterial) + const rangeMarkerSize = 4000 + rangeMarker.scale.y = e.height / rangeMarkerSize + rangeMarker.position.y = (e.height / (rangeMarkerSize * 2)) - (e.height / 100) + rangeMarker.layers.set(1) + entity.add(rangeMarker) + } + entities[e.id] = entity } @@ -318,6 +334,7 @@ function connectWebSocket() { const teamMarkerSize = 4000 teamMarker.scale.y = p.height / teamMarkerSize teamMarker.position.y = (p.height / (teamMarkerSize * 2)) - (p.height / 100) + teamMarker.position.y += 0.01 teamMarker.layers.set(2) projectile.add(teamMarker) diff --git a/src/index.js b/src/index.js index e867b1f..f168982 100644 --- a/src/index.js +++ b/src/index.js @@ -116,14 +116,24 @@ function laneScenario() { game.spawnEntity(new Entity(Template.minion(Team.red, { ranged: false, route: redRoute }))) } - // if ([(3 * game.tickRate), (4 * game.tickRate), (5 * game.tickRate)].includes(game.currentTick % (30 * game.tickRate))) { - // game.spawnEntity(new Entity(Template.minion(Team.blue, { ranged: true, route: blueRoute }))) - // game.spawnEntity(new Entity(Template.minion(Team.red, { ranged: true, route: redRoute }))) - // } + if ([(3 * game.tickRate), (4 * game.tickRate), (5 * game.tickRate)].includes(game.currentTick % (30 * game.tickRate))) { + game.spawnEntity(new Entity(Template.minion(Team.blue, { ranged: true, route: blueRoute }))) + game.spawnEntity(new Entity(Template.minion(Team.red, { ranged: true, route: redRoute }))) + } } - game.logic = gameLogic + // game.logic = gameLogic - player1.abilities[0] = 'melee_attack' + player2.teleport(new Vector2(100, 100)) + player2.logic = function patrolLogic() { + const entity = this + if (entity.position.x < 100) { entity.memory.patrolReverse = false } + if (entity.position.x > 1900) { entity.memory.patrolReverse = true } + const goal = entity.memory.patrolReverse ? new Vector2(50, 100) : new Vector2(1950, 100) + + entity.moveAction(goal) + } + + // player1.abilities[0] = 'melee_attack' } app.listen(port, () => {