thayol/instructions-clear
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add range indicator

Browse Source
This commit is contained in:
Thayol
2025-01-18 09:42:16 +09:00
parent 8e95bc141c
commit b4162d4e39
2 changed files with 56 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/client.js
+40 -23
View File
@@ -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)
src/index.js
+16 -6
View File
@@ -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, () => {