Add entity rendering

This commit is contained in:
Matthias Schiffer 2016-01-06 08:52:06 +01:00
parent 6ed351b495
commit 4fa246628b
9 changed files with 118 additions and 21 deletions

View file

@ -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()

View 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

View 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
View file

@ -0,0 +1,8 @@
'use strict'
class Entity
constructor: (@name) ->
module.exports = Entity

View file

@ -0,0 +1,8 @@
'use strict'
class EntityPosition
constructor: (@entity, @position, @direction) ->
module.exports = EntityPosition

View file

@ -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
View file

@ -0,0 +1,10 @@
'use strict'
class Position
constructor: (@x, @y) ->
asString: => "#{@x},#{@y}"
module.exports = Position

View file

@ -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

View file

@ -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