Add entity rendering
This commit is contained in:
parent
6ed351b495
commit
4fa246628b
9 changed files with 118 additions and 21 deletions
|
@ -2,19 +2,20 @@
|
|||
|
||||
require './style.css'
|
||||
|
||||
window._ = require 'lodash'
|
||||
|
||||
Map = require './model/Map'
|
||||
MapView = require './view/MapView'
|
||||
MapData = require './model/MapData'
|
||||
MapContext = require './control/MapContext'
|
||||
|
||||
|
||||
mapView = null
|
||||
mapContext = null
|
||||
|
||||
|
||||
window.onload = ->
|
||||
xhr = new XMLHttpRequest()
|
||||
xhr.onload = ->
|
||||
mapDef = new Map(JSON.parse this.responseText)
|
||||
mapView = new MapView mapDef
|
||||
mapDef = new MapData(JSON.parse this.responseText)
|
||||
mapContext = new MapContext mapDef
|
||||
|
||||
xhr.open 'GET', 'resources/map/test.json', true
|
||||
xhr.send()
|
||||
|
|
29
src/control/MapContext.coffee
Normal file
29
src/control/MapContext.coffee
Normal file
|
@ -0,0 +1,29 @@
|
|||
'use strict'
|
||||
|
||||
|
||||
Direction = require '../model/Direction'
|
||||
Entity = require '../model/Entity'
|
||||
EntityPosition = require '../model/EntityPosition'
|
||||
Position = require '../model/Position'
|
||||
|
||||
MapView = require '../view/MapView'
|
||||
|
||||
|
||||
class MapContext
|
||||
constructor: (@map) ->
|
||||
@entities = {}
|
||||
|
||||
@playerEntity = new EntityPosition(
|
||||
new Entity('square'),
|
||||
new Position(8, 8),
|
||||
Direction.EAST)
|
||||
|
||||
@addEntity(@playerEntity)
|
||||
|
||||
@mavView = new MapView @map, @entities
|
||||
|
||||
addEntity: (entity) =>
|
||||
@entities[entity.position.asString()] = entity
|
||||
|
||||
|
||||
module.exports = MapContext
|
13
src/model/Direction.coffee
Normal file
13
src/model/Direction.coffee
Normal file
|
@ -0,0 +1,13 @@
|
|||
'use strict'
|
||||
|
||||
|
||||
Direction =
|
||||
NORTH: 0
|
||||
EAST: 1
|
||||
SOUTH: 2
|
||||
WEST: 3
|
||||
|
||||
reverse: (d) -> (d+2)%4
|
||||
|
||||
|
||||
module.exports = Direction
|
8
src/model/Entity.coffee
Normal file
8
src/model/Entity.coffee
Normal file
|
@ -0,0 +1,8 @@
|
|||
'use strict'
|
||||
|
||||
|
||||
class Entity
|
||||
constructor: (@name) ->
|
||||
|
||||
|
||||
module.exports = Entity
|
8
src/model/EntityPosition.coffee
Normal file
8
src/model/EntityPosition.coffee
Normal file
|
@ -0,0 +1,8 @@
|
|||
'use strict'
|
||||
|
||||
|
||||
class EntityPosition
|
||||
constructor: (@entity, @position, @direction) ->
|
||||
|
||||
|
||||
module.exports = EntityPosition
|
|
@ -1,8 +1,9 @@
|
|||
'use strict'
|
||||
|
||||
class Map
|
||||
|
||||
class MapData
|
||||
constructor: (data) ->
|
||||
{@tiles, @collition, @layers} = data
|
||||
|
||||
|
||||
module.exports = Map
|
||||
module.exports = MapData
|
10
src/model/Position.coffee
Normal file
10
src/model/Position.coffee
Normal file
|
@ -0,0 +1,10 @@
|
|||
'use strict'
|
||||
|
||||
|
||||
class Position
|
||||
constructor: (@x, @y) ->
|
||||
|
||||
asString: => "#{@x},#{@y}"
|
||||
|
||||
|
||||
module.exports = Position
|
|
@ -1,12 +1,13 @@
|
|||
'use strict'
|
||||
|
||||
_ = require 'lodash'
|
||||
|
||||
module.exports =
|
||||
mapPromises: (promises) ->
|
||||
_.reduce promises, ((seq, v, k) ->
|
||||
seq.then (acc) ->
|
||||
v.then (r) ->
|
||||
acc[k] = r
|
||||
acc
|
||||
), Promise.resolve {}
|
||||
p = []
|
||||
ret = {}
|
||||
|
||||
for own k, v of promises
|
||||
do (k, v) ->
|
||||
p.push(v.then (r) -> ret[k] = r)
|
||||
|
||||
Promise.all(p).then -> ret
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
'use strict'
|
||||
|
||||
_ = require 'lodash'
|
||||
util = require '../util'
|
||||
|
||||
|
||||
|
@ -19,12 +18,20 @@ loadImage = (url) ->
|
|||
loadImages = (imgs) ->
|
||||
util.mapPromises(_.mapValues imgs, loadImage)
|
||||
|
||||
loadTiles = (tileDef) ->
|
||||
loadImages(_.mapValues tileDef, (t) -> "resources/sprite/tile/#{t.file}.png")
|
||||
loadTiles = (tiles) ->
|
||||
loadImages(_.mapValues tiles, (t) -> "resources/sprite/tile/#{t.file}.png")
|
||||
|
||||
loadEntities = (entities) ->
|
||||
p = {}
|
||||
for e in entities
|
||||
do (e) ->
|
||||
p[e.entity.name] = loadImage "resources/sprite/entity/#{e.entity.name}.png"
|
||||
|
||||
util.mapPromises p
|
||||
|
||||
|
||||
class MapView
|
||||
constructor: (@map) ->
|
||||
constructor: (@map, @entities) ->
|
||||
@redrawPending = false
|
||||
|
||||
@canvas = document.createElement 'canvas'
|
||||
|
@ -36,22 +43,38 @@ class MapView
|
|||
window.addEventListener 'resize', @setSize
|
||||
@setSize()
|
||||
|
||||
@ready = loadTiles(@map.tiles).then (tiles) =>
|
||||
tilesReady = loadTiles(@map.tiles).then (tiles) =>
|
||||
@tiles = tiles
|
||||
|
||||
entitiesReady = loadEntities(_.values @entities).then (entities) =>
|
||||
@entitySprites = entities
|
||||
|
||||
tilesReady.then(entitiesReady).then =>
|
||||
@redraw()
|
||||
return
|
||||
|
||||
drawTile: (x, y, tile) =>
|
||||
return unless tile
|
||||
|
||||
@ctx.drawImage(tile, x, y)
|
||||
@ctx.drawImage tile, x, y
|
||||
|
||||
drawEntity: (e) =>
|
||||
sprite = @entitySprites[e.entity.name]
|
||||
return unless sprite
|
||||
|
||||
@ctx.drawImage(
|
||||
sprite,
|
||||
e.direction*tileSize, 0,
|
||||
tileSize, tileSize,
|
||||
e.position.x*tileSize, e.position.y*tileSize,
|
||||
tileSize, tileSize)
|
||||
|
||||
draw: =>
|
||||
@redrawPending = false
|
||||
|
||||
@ctx.clearRect 0, 0, @canvas.width, @canvas.height
|
||||
|
||||
return unless @tiles
|
||||
return unless @tiles and @entitySprites
|
||||
|
||||
for layer in @map.layers
|
||||
y = 0
|
||||
|
@ -65,6 +88,9 @@ class MapView
|
|||
|
||||
y += tileSize
|
||||
|
||||
for e in _.values @entities
|
||||
@drawEntity e
|
||||
|
||||
redraw: =>
|
||||
unless @redrawPending
|
||||
@redrawPending = true
|
||||
|
|
Reference in a new issue