gmr - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

behavior.js

 export default (name, initObj, initFn, ...extend) => {
   let behaviorObj = {...initObj}
 
-  const attach = sprite => {
+  const attach = (sprite, ...props) => {
     extend.forEach(b => b.attach(sprite))
@@ -14,3 +14,3 @@ sprite.addBehavior(name, () => detatch(sprite))
     })
-    if(initFn) initFn(sprite)
+    if(initFn) initFn(sprite, ...props)
   }
@@ -17,0 +17,0 @@

canvas.js

@@ -9,5 +9,5 @@ export default (constant, imgManager) => {
 
-  const drawOutline = (x, y, w, h) => {
+  const drawOutline = (color, x, y, w, h) => {
     ctx.save()
-    ctx.strokeStyle = 'red'
+    ctx.strokeStyle = color
     ctx.strokeRect(x, y, w, h)
@@ -28,2 +28,10 @@ ctx.stroke()
   }
+
+  const drawRect = (color, x, y, w, h) => {
+    ctx.save()
+    ctx.fillStyle = color
+    ctx.fillRect(x, y, w, h)
+    ctx.stroke()
+    ctx.restore()
+  }
   
@@ -43,4 +51,4 @@ const inReverse = (fn) => {
     clear,
-    drawOutline, drawImg, inReverse
+    drawOutline, drawImg, inReverse, drawRect
   }
 }

gmr.js

@@ -18,3 +18,3 @@ import gmrCamera from './camera.js'
   ui.classList.add('gmr-ui')
-  container.appendChild( imgManager.el )
+  document.body.insertBefore( imgManager.el, document.querySelector('app') )
   container.appendChild( canvas.el )
@@ -36,3 +36,3 @@ container.appendChild( ui )
     currentScene = scene
-    imgManager.switchScene( scene )
+    // imgManager.switchScene( scene )
     imgManager.onSceneLoad(() => {
@@ -78,2 +78,11 @@ renderLoop.render(() => {
 
+  const start = () => imgManager.sceneLoad()
+
+  const off = renderLoop.off
+  const on = renderLoop.on
+  const delay = renderLoop.delay
+
+  const setResolution = (x, y) =>  constant.RESOLUTION = [x, y]
+  const setFPS = fps =>  constant.FRAMES_PER_SECOND = fps
+
   return {
@@ -86,7 +95,8 @@ container, canvas, imgManager, ui, constant,
     behavior: gmrBehavior, ...keyManager,
-    zoom, pan, cameraPosition
+    zoom, pan, cameraPosition,
+    start, off, on, delay,
+    setResolution, setFPS
   }
 }
 
-
 export default setup
@@ -93,0 +103,0 @@

img-manager.js

 import loadScreen from "./load-screen.js"
 
-let el
+ let el
 
 export default () => {
-  if(!el) {
+  if(!el){
     el = document.createElement('div')
@@ -13,5 +13,8 @@ el.classList.add('gmr-img-manager')
   let loading = 0
+  let loadedImgs = []
   let onImgLoadFN, onSceneLoadFN
 
-  const onSceneLoad = fn => onSceneLoadFN = fn
+  const onSceneLoad = fn => {
+    onSceneLoadFN = fn
+  }
   const onImgLoad = fn => onImgLoadFN = fn
@@ -21,3 +24,3 @@ const getExpected = () => expected
   const sceneLoad = (...props) => onSceneLoadFN(...props)
-  const imgLoad = (...props) => onImgLoadFN(...props)
+  const imgLoad = (...props) => onImgLoadFN ? onImgLoadFN(...props) : null
   const reset = () => {
@@ -43,4 +46,11 @@ onSceneLoadFN = undefined
   const loadImg = (...srcArray) => {
-    loadScreen(onImgLoad)
-    const filteredSrcArray = [...new Set(srcArray)]
+    // loadScreen(onImgLoad)
+    let filteredSrcArray = [...new Set(srcArray)]
+    filteredSrcArray = filteredSrcArray.filter(src => !el.querySelector(`[src="${src}"]`))
+    filteredSrcArray = filteredSrcArray.filter(src => loadedImgs.indexOf(src) === -1)
+    // console.log('loadImg', filteredSrcArray)
+    if(filteredSrcArray.length === 0) {
+      sceneLoad()
+      return null
+    }
     expected += filteredSrcArray.length
@@ -50,2 +60,3 @@ filteredSrcArray.forEach(src => {
       img.src = src
+      loadedImgs.push(src)
       img.onload = () => {
@@ -52,0 +63,0 @@ loading++

key-manager.js

@@ -10,2 +10,3 @@ export default (CONSTANT) => {
   let keyObj = {}
+  let keyUpObj = {}
 
@@ -16,31 +17,20 @@ const addKeyFn = (key, fn) => keyObj[key] = fn
 
+  const addKeyUpFn = (key, fn) => keyUpObj[key] = fn
+  const removeKeyUpFn = key => delete keyUpObj[key]
+  const clearKeyUpFn = () => keyUpObj = {}
+
+  let events = []
   const startKeyListener = () => {
-    onkeydown = event => {
-      if(event.key === CONSTANT.MOVEMENT_KEY.LEFT) 
-        key.left = true
-      else if(event.key === CONSTANT.MOVEMENT_KEY.RIGHT) 
-        key.right = true
-      else if(event.key === CONSTANT.MOVEMENT_KEY.UP) 
-        key.up = true
-      else if(event.key === CONSTANT.MOVEMENT_KEY.DOWN) 
-        key.down = true
-      else if(event.key === CONSTANT.MOVEMENT_KEY.DOWN) 
-        key.down = true
-      else 
-        Object.keys(keyObj).forEach(key => {
-          if(event.key === key) keyObj[key]()
-        })
-    }
-    
-    onkeyup = event => {
-      if(event.key === CONSTANT.MOVEMENT_KEY.LEFT) 
-        key.left = false
-      if(event.key === CONSTANT.MOVEMENT_KEY.RIGHT) 
-        key.right = false
-      if(event.key === CONSTANT.MOVEMENT_KEY.UP) 
-        key.up = false
-      if(event.key === CONSTANT.MOVEMENT_KEY.DOWN) 
-        key.down = false
-    }
+    clearKeyListener()
+    events.push(
+      e => keyObj[e.key] ? keyObj[e.key]() : null, 
+      e => keyUpObj[e.key] ? keyUpObj[e.key]() : null
+    )
+    addEventListener('keydown', events[0]),
+    addEventListener('keyup', events[1])
   }
+  const clearKeyListener = () => {
+    events.forEach((e, i) => removeEventListener(i?'keyup':'keydown', events[i]))
+    events = []
+  }
 
@@ -55,4 +45,5 @@ const isMoveActive = () => (key.up || key.down || key.left || key.right)
     isMoveActive, addKeyFn, removeKeyFn, 
-    clearKeyFn 
+    clearKeyFn, addKeyUpFn, removeKeyUpFn,
+    clearKeyUpFn
   }
 }

load-screen.js

@@ -10,3 +10,3 @@ const el = document.createElement('div')
 
-document.body.appendChild(el)
+// document.body.appendChild(el)
 
@@ -13,0 +13,0 @@ export default onImgLoad => {

package.json

 {
   "name": "gmr",
-  "version": "0.2.0",
-  "description": "js 2d canvas engine",
+  "version": "0.2.1",
+  "description": "JS 2d canvas engine",
   "main": "gmr.js",
@@ -6,0 +6,0 @@ "scripts": {

render-loop.js

@@ -0,1 +1,2 @@
+import guid from './guid.js'
 
@@ -5,2 +6,4 @@ const setup = (constant) => {
   let renderFN
+  let delays = []
+  let loopId
 
@@ -10,2 +13,3 @@ const onRender = fn => renderFN = fn
   const render = fn => {
+    loopId = guid()
     isOn = true
@@ -15,31 +19,54 @@ renderFN = fn
       () => renderFN(),
-      () => isOn,
-      constant
+      () => {return {isOn, loopId}},
+      constant, 
+      () => delays,
+      filterDelays
     )
   }
-  const off = () => isOn = false
+  const off = () => {
+    isOn = false
+    loopId = undefined
+  }
+  const filterDelays = () => delays = delays.filter(obj => obj.i < obj.frames)
+  const on = () => {
+    isOn = true
+    onRenderLoop(
+      () => renderFN(),
+      () => {return {isOn, loopId}},
+      constant,
+      () => delays,
+      filterDelays
+    )
+  }
+  const delay = (frames, fn) => delays.push({i: 0, frames, fn})
 
   return {
-    onRender, setOn, render, off
+    onRender, setOn, render, off, on, delay
   }
 }
 
-const onRenderLoop = (getFn, isRendering, constant) => {
-  const render = () => {
-    if(isRendering()){
+const onRenderLoop = (getFn, isRendering, constant, getDelays, filterDelays) => {
+  const render = (loopId) => {
+    if(isRendering().isOn && isRendering().loopId === loopId){
       const framerate = 1000 / constant.FRAMES_PER_SECOND
       const delta = Date.now()
       getFn()
+      getDelays().forEach(obj => {
+        obj.i++
+        if(obj.i >= obj.frames)
+          obj.fn()
+      })
+      filterDelays()
       const deltaTime = Date.now() - delta
       if ((deltaTime >= framerate)) 
-          requestAnimationFrame(render)
+          requestAnimationFrame(() => render(loopId))
       else setTimeout(
-        () => requestAnimationFrame(render), 
+        () => requestAnimationFrame(() => render(loopId)), 
         framerate - deltaTime
       )
     }
-  }
-  render()
+  } 
+  render(isRendering().loopId)
 }
 
 export default setup

scene.js

@@ -34,4 +34,5 @@ export default (constant, imgManager, init) => {
     const load = engine => {
+      let imgAr = []
       sprites.forEach(sprite => {
-        sprite.load(engine)
+        sprite.load(engine, imgAr)
       })
@@ -42,5 +43,7 @@ Object.values(prefabs).forEach(prefab =>
           ar.shift()
-          imgManager.loadImg(...ar)
+          imgAr.push(...ar)
         })
       )
+
+      imgManager.loadImg(...imgAr)
       onresize = () => sprites.forEach(sprite => sprite.updateUI())
@@ -47,0 +50,0 @@ }

sprite.js

@@ -11,2 +11,5 @@ export default (constant, canvas, ui, camera) => {
   let loop = false
+  let background = false
+  let backgroundColor = '#000000'
+  let hide = false
 
@@ -37,2 +40,4 @@ // animation
 
+  const setHide = v => hide = v
+
   // behavior
@@ -51,2 +56,3 @@
   let sprites = []
+  const children = () => sprites
   const addSprite = sprite => {
@@ -67,8 +73,8 @@ sprites.push(sprite)
 
-  const load = engine => {
+  const load = (engine, imgAr) => {
     Object.values(animations).forEach(imgArray =>
-      engine.loadImg( ...imgArray )
+      imgAr.push( ...imgArray )
     )
     sprites.forEach(sprite => {
-      sprite.load( engine )
+      sprite.load( engine, imgAr )
     })
@@ -78,5 +84,6 @@ }
   const render = engine => {
-    if(!flipped)
-      engine.drawImg(
-        animations[currentAnimation][index],
+    if(hide) return null
+    if(background){
+      engine.drawRect(
+        backgroundColor,
         bounds.x * camera.getZoom() + camera.getPosition().x,
@@ -87,13 +94,24 @@ bounds.y * camera.getZoom() + camera.getPosition().y,
       )
-    else
-      engine.inReverse(() => {
+    }
+    if(animations[currentAnimation]){
+      if(!flipped)
         engine.drawImg(
           animations[currentAnimation][index],
-          -bounds.x * camera.getZoom() - camera.getPosition().x,
+          bounds.x * camera.getZoom() + camera.getPosition().x,
           bounds.y * camera.getZoom() + camera.getPosition().y,
           bounds.width * camera.getZoom(),
-          bounds.height * camera.getZoom(),
-          true
+          bounds.height * camera.getZoom()
         )
-      })
+      else
+        engine.inReverse(() => {
+          engine.drawImg(
+            animations[currentAnimation][index],
+            -bounds.x * camera.getZoom() - camera.getPosition().x,
+            bounds.y * camera.getZoom() + camera.getPosition().y,
+            bounds.width * camera.getZoom(),
+            bounds.height * camera.getZoom(),
+            true
+          )
+        })
+    }
     if(outline){
@@ -113,7 +131,9 @@ engine.drawOutline(
   const postRender = () => {
-    index++
-    if(index >= animations[currentAnimation].length ){
-      index = 0
-      if(!loop)
-        animationPriority = 0
+    if(animations[currentAnimation]){
+      index++
+      if(index >= animations[currentAnimation].length ){
+        index = 0
+        if(!loop)
+          animationPriority = 0
+      }
     }
@@ -135,4 +155,10 @@ sprites.forEach(sprite => sprite.postRender())
   const move = (x, y) => {
-    bounds.x += x
-    bounds.y += y
+    if(getParent() && getParent().isSprite){
+      offset.x += x
+      offset.y += y
+    }
+    else{
+      bounds.x += x
+      bounds.y += y
+    }
     updateSpriteBounds()
@@ -214,2 +240,6 @@ checkBounds()
   const setOutline = b => outline = b
+  const setBackground = (b, color) => {
+    background = b
+    if(b && color) backgroundColor = color
+  }
   
@@ -246,6 +276,6 @@ // ui
       const offset = {
-        x: (el.getAttribute('offset-x') || 0),
-        y: (el.getAttribute('offset-y') || 0),
-        width: (el.getAttribute('offset-width') || 0),
-        height: (el.getAttribute('offset-height') || 0)
+        x: parseInt(el.getAttribute('offset-x') || '0'),
+        y: parseInt(el.getAttribute('offset-y') || '0'),
+        width: parseInt(el.getAttribute('offset-width') || '0'),
+        height: parseInt(el.getAttribute('offset-height') || '0')
       }
@@ -256,2 +286,5 @@ el.style.top = scale(0, bounds.y + offset.y).y  * camera.getZoom() + scale(0, camera.getPosition().y).y + 'px'
       el.style.height = scale(0, bounds.height + offset.height).y  * camera.getZoom() + 'px'
+      if(hide){
+        el.classList.add('d-none')
+      }
     })
@@ -278,2 +311,3 @@ sprites.forEach(sprite => sprite.updateUI())
   const destroy = () => {
+    clearUI()
     if(parent && parent.removeSprite) parent.removeSprite(exportable)
@@ -283,10 +317,11 @@ parent = undefined
 
-  const exportable = {
+  const exportable = { isSprite: true,
     setAnimation, addAnimation, load, render,
     postRender, move, flip, getBounds, checkBounds,
-    setOutline, addBehavior, removeBehavior,
+    setOutline, setBackground, addBehavior, removeBehavior,
     setBounds, setPosition, setSize, getCenter,
     trackUI, updateUI, getUI, clearUI,
     getSize, getPosition, isTouching, setParent, destroy,
-    addSprite, removeSprite, setOffset, getParent, getOffset
+    addSprite, removeSprite, setOffset, getParent, getOffset,
+    children, setHide
   }
@@ -293,0 +328,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22144

increased by13.44%

Number of package files

13

increased by8.33%

Lines of code

721

increased by13.01%

No dependency changes