Today Jason helped me get the character moving. Teleporting is probably a more appropriate term but it's the start of great things to come. Really quickly before I get into this post I want to make a quick mention of this game called Onslaught. It was this game that really made me believe HTML5 was a valid way to make a game. Well Onsluaght and BrowswerQuest. The tutorial that Lost Decade games put together for how Onslaught works is how Nomad Axe started and continues to grow. That tutorial convinced me it would be easy enough to learn to make a game run in a browser. Sure there are a lot of other games as well but from a reachable stand point of my capabilities those two games made me think making a game was obtainable.

Back to the post. When we last left off I had used the canvas to display an image that didn't do much other than show up in the middle of the screen. Still following HughSK's slides, I installed another node module called raf which stands for Request Animation Frame. You can read more about it here. As the name implies raf is used for animating. Request Animation Frame is partly a timer. At about 60 times per second raf will request that the browser calls a function that I specify to update an animation. In this case that function is 'draw'. The draw function first repaints the canvas white and then paints a hero image based on x and y data provided by a mouse click. The reason the canvas needs to be repainted is because other wise you would be able to see everytime the character was painted. In Hugh's demo this is represented by a streaking effect caused by an image being animated from one side of the screen to another. For Nomad Axe it looks like the player character is being stamped down everytime you click.

Here is how the draw function looked before we hooked up mouse events.

    function draw() {
          ctx.fillStyle = '#ffffff'
          ctx.fillRect(0, 0, canvas.width, canvas.height)
          x += 80
          y += 70
          x = x % canvas.width
          y = y % canvas.height
          ctx.drawImage(image, x, y)
    }

If you comment out the first two lines inside the draw function you will see the streaking effect. That's why the draw function must repaint the canvas everytime it is called. Repainting the canvas will ultimately create the desired animation effect. Of course this all happens so fast you can't see it. You will jsut see the image changing location instantly.

There is a free book online called Dive Into HTML5 and it helps explain how the canvas works and how images are drawn or painted using the canvas.

As for tracking the mouse inputs, that is made possible by using 'el.addEventListener'. You can read about how to use it here but I will explain how it's being used currently in Nomad Axe. For starters addEventLitsener is a method on a target DOM element, it needs an event type and a listener which is a javascript function in our case. The target is the canvas, the event type is a string called 'click,' and the listener is the function called click. The function click sets the values x and y to that of the mouse click and then those values are used in the draw function.

That about covers it for now. The click to move mechanic will be scrapped momentarily and key bindings will be used in place. That will be easier to set up the sprite animations at first which will help me get to play testing sooner. Next up, trying to animate the sprite using another node module called mousetrap.

Nomad Axe in it's current state:

    var domready = require('domready')
    var loaded = require('image-loaded')
    var raf = require('raf')

    domready(function(){
      console.log('dom loaded')

      var canvas = document.querySelector('canvas')
      var ctx = canvas.getContext('2d')

      canvas.height = document.height
      canvas.width = document.width

      canvas.addEventListener('click', click)

      raf(canvas).on('data', draw)

      var image = document.createElement('img')
      image.src = '/images/hero.png'

      var ready = false

      loaded(image, function(err){
          if (err) return console.error(err)
          ready = true
      })

      var x = canvas.width/2
      var y = canvas.height/2

      function draw() {
          ctx.fillStyle = '#ffffff'
          ctx.fillRect(0, 0, canvas.width, canvas.height)
          ctx.drawImage(image, x, y)
     }

      function click(event) {
        x = event.x
        y = event.y
      }

    })