So far up to tutorial 3 we have been using vector graphics. Vector graphics are great and all but what if we could use an image – well the world would be our oyster.
I’ll be the first to admit that I’m not the worlds best artist and I think that my graphics for this tutorial back me up on this. We are going to use the following image of a space craft as the graphic for our craft within the tutorial:
Changes to Player.js
We haven’t really changed much. The draw is significantly simplified and the update has a few twiddles to make the bounding make sense. The only real major design decision was to make sure that the centre of the image was the “this.loc” location.
Changes to Draw()
In order to draw an image and rotate it we first have to move the centre of the drawing context (ctx in our code) to be the centre point around which we want to rotate. We do this by translating our location to this point. We then apply the rotation and draw the image relative to our location (the center of the picture is now at 0,0 so we need to draw at (-(imageWidth/2),-(imageHeight/2)). Simple really.
Changes to Update()
Because we have changed the center point of the graphic to centre we need to make sure that we are boundary checking based on the fact that our bounds are now 1/2 of the image size away from the location point (before we used to just go half off the screen but i think we’re ready to stay in bounds now ).
As usual if there’s anything else you’d like to know about the code then please feel free to comment. I can also do tutorials to order so if you want me to cover a particular topic then let me know that too. 🙂