codecombat/app/lib/surface/Camera.coffee

316 lines
12 KiB
CoffeeScript
Raw Normal View History

2014-01-03 13:32:13 -05:00
CocoClass = require 'lib/CocoClass'
# If I were the kind of math major who remembered his math, this would all be done with matrix transforms.
r2d = (radians) -> radians * 180 / Math.PI
d2r = (degrees) -> degrees / 180 * Math.PI
MAX_ZOOM = 8
MIN_ZOOM = 0.1
2014-01-03 13:32:13 -05:00
DEFAULT_ZOOM = 2.0
DEFAULT_TARGET = {x:0, y:0}
DEFAULT_TIME = 1000
2014-05-12 16:28:46 -04:00
STANDARD_ZOOM_WIDTH = 924
STANDARD_ZOOM_HEIGHT = 589
2014-01-03 13:32:13 -05:00
# You can't mutate any of the constructor parameters after construction.
# You can only call zoomTo to change the zoom target and zoom level.
module.exports = class Camera extends CocoClass
@PPM: 10 # pixels per meter
@MPP: 0.1 # meters per pixel; should match @PPM
bounds: null # list of two surface points defining the viewable rectangle in the world
2014-01-03 13:32:13 -05:00
# or null if there are no bounds
# what the camera is pointed at right now
target: DEFAULT_TARGET
zoom: DEFAULT_ZOOM
# properties for tracking going between targets
oldZoom: null
newZoom: null
oldTarget: null
newTarget: null
tweenProgress: 0.0
instant: false
# INIT
subscriptions:
'camera-zoom-in': 'onZoomIn'
'camera-zoom-out': 'onZoomOut'
'surface:mouse-scrolled': 'onMouseScrolled'
'level:restarted': 'onLevelRestarted'
'sprite:mouse-down': 'onMouseDown'
'sprite:dragged': 'onMouseDragged'
2014-03-01 15:43:37 -05:00
'camera-zoom-to': 'onZoomTo'
2014-01-03 13:32:13 -05:00
constructor: (@canvasWidth, @canvasHeight, angle=Math.asin(0.75), hFOV=d2r(30)) ->
super()
2014-05-12 16:28:46 -04:00
@offset = {x: 0, y: 0}
2014-01-03 13:32:13 -05:00
@calculateViewingAngle angle
@calculateFieldOfView hFOV
@calculateAxisConversionFactors()
2014-05-12 16:28:46 -04:00
@calculateMinMaxZoom()
2014-01-03 13:32:13 -05:00
@updateViewports()
2014-05-12 16:28:46 -04:00
onResize: (newCanvasWidth, newCanvasHeight) ->
@canvasScaleFactorX = newCanvasWidth / @canvasWidth
@canvasScaleFactorY = newCanvasHeight / @canvasHeight
2014-01-03 13:32:13 -05:00
calculateViewingAngle: (angle) ->
# Operate on open interval between 0 - 90 degrees to make the math easier
epsilon = 0.000001 # Too small and numerical instability will get us.
@angle = Math.max(Math.min(Math.PI / 2 - epsilon, angle), epsilon)
if @angle isnt angle and angle isnt 0 and angle isnt Math.PI / 2
console.log "Restricted given camera angle of #{r2d(angle)} to #{r2d(@angle)}."
calculateFieldOfView: (hFOV) ->
# http://en.wikipedia.org/wiki/Field_of_view_in_video_games
epsilon = 0.000001 # Too small and numerical instability will get us.
@hFOV = Math.max(Math.min(Math.PI - epsilon, hFOV), epsilon)
if @hFOV isnt hFOV and hFOV isnt 0 and hFOV isnt Math.PI
console.log "Restricted given horizontal field of view to #{r2d(hFOV)} to #{r2d(@hFOV)}."
@vFOV = 2 * Math.atan(Math.tan(@hFOV / 2) * @canvasHeight / @canvasWidth)
if @vFOV > Math.PI
console.log "Vertical field of view problem: expected canvas not to be taller than it is wide with high field of view."
@vFOV = Math.PI - epsilon
calculateAxisConversionFactors: ->
@y2x = Math.sin @angle # 1 unit along y is equivalent to y2x units along x
@z2x = Math.cos @angle # 1 unit along z is equivalent to z2x units along x
@z2y = @z2x / @y2x # 1 unit along z is equivalent to z2y units along y
@x2y = 1 / @y2x # 1 unit along x is equivalent to x2y units along y
@x2z = 1 / @z2x # 1 unit along x is equivalent to x2z units along z
@y2z = 1 / @z2y # 1 unit along y is equivalent to y2z units along z
# CONVERSIONS AND CALCULATIONS
worldToSurface: (pos) ->
x = pos.x * Camera.PPM
y = -pos.y * @y2x * Camera.PPM
if pos.z
y -= @z2y * @y2x * pos.z * Camera.PPM
{x: x, y: y}
surfaceToCanvas: (pos) ->
{x: (pos.x - @surfaceViewport.x) * @zoom, y: (pos.y - @surfaceViewport.y) * @zoom}
canvasToScreen: (pos) ->
2014-05-12 16:28:46 -04:00
{x: pos.x * @canvasScaleFactorX, y: pos.y * @canvasScaleFactorY}
2014-01-03 13:32:13 -05:00
screenToCanvas: (pos) ->
2014-05-12 16:28:46 -04:00
{x: pos.x / @canvasScaleFactorX, y: pos.y / @canvasScaleFactorY}
2014-01-03 13:32:13 -05:00
canvasToSurface: (pos) ->
{x: pos.x / @zoom + @surfaceViewport.x, y: pos.y / @zoom + @surfaceViewport.y}
surfaceToWorld: (pos) ->
{x: pos.x * Camera.MPP, y: -pos.y * Camera.MPP * @x2y, z: 0}
canvasToWorld: (pos) -> @surfaceToWorld @canvasToSurface pos
worldToCanvas: (pos) -> @surfaceToCanvas @worldToSurface pos
worldToScreen: (pos) -> @canvasToScreen @worldToCanvas pos
surfaceToScreen: (pos) -> @canvasToScreen @surfaceToCanvas pos
screenToSurface: (pos) -> @canvasToSurface @screenToCanvas pos
screenToWorld: (pos) -> @surfaceToWorld @screenToSurface pos
cameraWorldPos: ->
# I tried to figure out the math for how much of @vFOV is below the midpoint (botFOV) and how much is above (topFOV), but I failed.
# So I'm just making something up. This would give botFOV 20deg, topFOV 10deg at @vFOV 30deg and @angle 45deg, or an even 15/15 at @angle 90deg.
botFOV = @x2y * @vFOV / (@y2x + @x2y)
topFOV = @y2x * @vFOV / (@y2x + @x2y)
botDist = @worldViewport.height / 2 * Math.sin(@angle) / Math.sin(botFOV)
z = botDist * Math.sin(@angle + botFOV)
x: @worldViewport.cx, y: @worldViewport.cy - z * @z2y, z: z
distanceTo: (pos) ->
# Get the physical distance in meters from the camera to the given world pos.
cpos = @cameraWorldPos()
dx = pos.x - cpos.x
dy = pos.y - cpos.y
dz = (pos.z or 0) - cpos.z
Math.sqrt dx * dx + dy * dy + dz * dz
distanceRatioTo: (pos) ->
# Get the ratio of the distance to the given world pos over the distance to the center of the camera view.
cpos = @cameraWorldPos()
dy = @worldViewport.cy - cpos.y
camDist = Math.sqrt(dy * dy + cpos.z * cpos.z)
return @distanceTo(pos) / camDist
# Old method for flying things below; could re-integrate this
## Because none of our maps are designed to get smaller with distance along the y-axis, we'll only use z, as if we were looking straight down, until we get high enough. Based on worldPos.z, we gradually shift over to the more-realistic scale. This is pretty hacky.
#ratioWithoutY = dz * dz / (cPos.z * cPos.z)
#zv = Math.min(Math.max(0, worldPos.z - 5), cPos.z - 5) / (cPos.z - 5)
#zv * ratioWithY + (1 - zv) * ratioWithoutY
# SUBSCRIPTIONS
onZoomIn: (e) -> @zoomTo @target, @zoom * 1.15, 300
onZoomOut: (e) -> @zoomTo @target, @zoom / 1.15, 300
onMouseScrolled: (e) ->
ratio = 1 + 0.05 * Math.sqrt(Math.abs(e.deltaY))
ratio = 1 / ratio if e.deltaY > 0
newZoom = @zoom * ratio
if e.screenPos and not @focusedOnSprite()
# zoom based on mouse position, adjusting the target so the point under the mouse stays the same
mousePoint = @screenToSurface(e.screenPos)
ratioPosX = (mousePoint.x - @surfaceViewport.x) / @surfaceViewport.width
ratioPosY = (mousePoint.y - @surfaceViewport.y) / @surfaceViewport.height
newWidth = @canvasWidth / newZoom
newHeight = @canvasHeight / newZoom
newTargetX = mousePoint.x - (newWidth * ratioPosX) + (newWidth / 2)
newTargetY = mousePoint.y - (newHeight * ratioPosY) + (newHeight / 2)
2014-05-12 16:28:46 -04:00
target = {x: newTargetX, y: newTargetY}
else
target = @target
@zoomTo target, newZoom, 0
onMouseDown: (e) ->
return if @dragDisabled
@lastPos = {x: e.originalEvent.rawX, y: e.originalEvent.rawY}
onMouseDragged: (e) ->
return if @dragDisabled
target = @boundTarget(@target, @zoom)
2014-05-12 16:28:46 -04:00
newPos =
x: target.x + (@lastPos.x - e.originalEvent.rawX) / @zoom
y: target.y + (@lastPos.y - e.originalEvent.rawY) / @zoom
@zoomTo newPos, @zoom, 0
@lastPos = {x: e.originalEvent.rawX, y: e.originalEvent.rawY}
Backbone.Mediator.publish 'camera:dragged'
2014-01-03 13:32:13 -05:00
onLevelRestarted: ->
@setBounds(@firstBounds, false)
2014-01-03 13:32:13 -05:00
# COMMANDS
setBounds: (worldBounds, updateZoom=true) ->
2014-01-03 13:32:13 -05:00
# receives an array of two world points. Normalize and apply them
@firstBounds = worldBounds unless @firstBounds
@bounds = @normalizeBounds(worldBounds)
2014-05-12 16:28:46 -04:00
@calculateMinMaxZoom()
@updateZoom true if updateZoom
@target = @currentTarget unless @focusedOnSprite()
2014-01-03 13:32:13 -05:00
normalizeBounds: (worldBounds) ->
return null unless worldBounds
top = Math.max(worldBounds[0].y, worldBounds[1].y)
left = Math.min(worldBounds[0].x, worldBounds[1].x)
bottom = Math.min(worldBounds[0].y, worldBounds[1].y)
right = Math.max(worldBounds[0].x, worldBounds[1].x)
bottom -= 1 if top is bottom
right += 1 if left is right
p1 = @worldToSurface({x:left, y:top})
p2 = @worldToSurface({x:right, y:bottom})
{x:p1.x, y:p1.y, width:p2.x-p1.x, height:p2.y-p1.y}
2014-05-12 16:28:46 -04:00
calculateMinMaxZoom: ->
2014-01-03 13:32:13 -05:00
# Zoom targets are always done in Surface coordinates.
2014-05-12 16:28:46 -04:00
@maxZoom = MAX_ZOOM
return @minZoom = MIN_ZOOM unless @bounds
2014-01-03 13:32:13 -05:00
@minZoom = Math.max @canvasWidth / @bounds.width, @canvasHeight / @bounds.height
2014-05-12 16:28:46 -04:00
if @zoom
@zoom = Math.max @minZoom, @zoom
@zoom = Math.min @maxZoom, @zoom
2014-01-03 13:32:13 -05:00
zoomTo: (newTarget=null, newZoom=1.0, time=1500) ->
# Target is either just a {x, y} pos or a display object with {x, y} that might change; surface coordinates.
time = 0 if @instant
2014-05-12 16:28:46 -04:00
newTarget ?= {x: 0, y: 0}
2014-02-12 15:41:41 -05:00
newTarget = (@newTarget or @target) if @locked
2014-05-12 16:28:46 -04:00
newZoom = Math.max newZoom, @minZoom
newZoom = Math.min newZoom, @maxZoom
thangType = @target?.sprite?.thangType
if thangType
2014-05-12 16:28:46 -04:00
@offset = _.clone(thangType.get('positions')?.torso or {x: 0, y: 0})
scale = thangType.get('scale') or 1
@offset.x *= scale
@offset.y *= scale
else
2014-05-12 16:28:46 -04:00
@offset = {x: 0, y: 0}
2014-01-03 13:32:13 -05:00
return if @zoom is newZoom and newTarget is newTarget.x and newTarget.y is newTarget.y
@finishTween(true)
if time
@newTarget = newTarget
@oldTarget = @boundTarget(@target, @zoom)
@oldZoom = @zoom
@newZoom = newZoom
@tweenProgress = 0.01
createjs.Tween.get(@)
.to({tweenProgress: 1.0}, time, createjs.Ease.getPowOut(4))
2014-02-12 15:41:41 -05:00
.call @finishTween
2014-01-03 13:32:13 -05:00
else
@target = newTarget
@zoom = newZoom
@updateZoom true
focusedOnSprite: ->
return @target?.name
2014-01-03 13:32:13 -05:00
finishTween: (abort=false) =>
createjs.Tween.removeTweens(@)
return unless @newTarget
unless abort is true
2014-01-03 13:32:13 -05:00
@target = @newTarget
@zoom = @newZoom
@newZoom = @oldZoom = @newTarget = @newTarget = @tweenProgress = null
@updateZoom true
updateZoom: (force=false) ->
# Update when we're focusing on a Thang, tweening, or forcing it, unless we're locked
return if (not force) and (@locked or (not @newTarget and not @focusedOnSprite()))
2014-01-03 13:32:13 -05:00
if @newTarget
t = @tweenProgress
@zoom = @oldZoom + t * (@newZoom - @oldZoom)
[p1, p2] = [@oldTarget, @boundTarget(@newTarget, @newZoom)]
target = @target = x: p1.x + t * (p2.x - p1.x), y: p1.y + t * (p2.y - p1.y)
else
target = @boundTarget @target, @zoom
return if not force and _.isEqual target, @currentTarget
@currentTarget = target
@updateViewports target
Backbone.Mediator.publish 'camera:zoom-updated', camera: @, zoom: @zoom, surfaceViewport: @surfaceViewport
boundTarget: (pos, zoom) ->
# Given an {x, y} in Surface coordinates, return one that will keep our viewport on the Surface.
return pos unless @bounds
marginX = (@canvasWidth / zoom / 2)
marginY = (@canvasHeight / zoom / 2)
x = Math.min(Math.max(marginX + @bounds.x, pos.x + @offset.x), @bounds.x + @bounds.width - marginX)
y = Math.min(Math.max(marginY + @bounds.y, pos.y + @offset.y), @bounds.y + @bounds.height - marginY)
2014-01-03 13:32:13 -05:00
{x: x, y: y}
updateViewports: (target) ->
target ?= @target
sv = width: @canvasWidth / @zoom, height: @canvasHeight / @zoom, cx: target.x, cy: target.y
sv.x = sv.cx - sv.width / 2
sv.y = sv.cy - sv.height / 2
@surfaceViewport = sv
wv = @surfaceToWorld sv # get x and y
wv.width = sv.width * Camera.MPP
wv.height = sv.height * Camera.MPP * @x2y
wv.cx = wv.x + wv.width / 2
wv.cy = wv.y + wv.height / 2
@worldViewport = wv
lock: ->
@target = @currentTarget
@locked = true
unlock: ->
@locked = false
2014-02-11 17:58:45 -05:00
destroy: ->
2014-02-12 15:41:41 -05:00
createjs.Tween.removeTweens @
super()
2014-03-01 15:43:37 -05:00
onZoomTo: (pos, time) ->
2014-05-12 16:28:46 -04:00
@zoomTo @worldToSurface(pos), @zoom, time