add range indicator

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)
+const cameraOffsetX = 0
-camera.rotation.set((56 / 180) * Math.PI, 0, 0)
+const cameraOffsetY = -13.5
-camera.zoom += 0.4
+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 distanceX = Math.abs((entity.position.x + cameraOffsetX) - camera.position.x)
-  const offsetY = -28
+  const distanceY = Math.abs((entity.position.y + cameraOffsetY) - camera.position.y)
 
-  const distanceX = Math.abs((entity.position.x + offsetX) - camera.position.x)
+  camera.position.z = cameraOffsetZ
-  const distanceY = Math.abs((entity.position.y + offsetY) - camera.position.y)
-
-  camera.position.z = 20
   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 teamMaterial = teamMaterials[`${e.team}Transparent`]
-        const teamMarker = new THREE.Mesh(new THREE.CylinderGeometry((e.radius + 2) / 100, (e.radius + 2) / 100, 1), teamMaterial)
+        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)
 

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))) {
+    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.blue, { ranged: true, route: blueRoute })))
-    //   game.spawnEntity(new Entity(Template.minion(Team.red, { ranged: true, route: redRoute })))
+      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, () => {