Vampire Attack was a simple Halloween game I wrote in Flash a long time ago. This revision of the game is just like the original Flash version except that instead of having 13 waves of attacks, I opted for an infinite attack with the spawn rate of the bats slowly growing until it becomes overwhelming. The big concern I had with porting the game is that the current versions of my SLL library do not support rotation. This meant I had to decide between using a library like Create.js that does support rotating sprites, adding that feature to SLL, or writing the game from scratch. Obviously the third option would be insane, so that is what I opted to do. In my defense, that was not my original plan it is just what ended up happening.
My thoughts
when starting on this game was to play around with rotation to see how it
worked and if it was not going to be overly complicated then I would
incorporate it into SLL but in the unlikely even if it was going to be overly
complicated then use Create.js as a last resort as this Is a personal project
so my NIH Syndrome is welcome here. I had never played with rotation but
recalled reading about it in the canvas specifications. The problem with the WHATWG
documentation (https://html.spec.whatwg.org/multipage/canvas.html ) is that trivial things, such as
rotation as it turns out, tends to be made to sound far more complicated than
they are and finding out trivial things, such as how to set the origin that the
rotation revolves around, tend not to be trivial to find. Perhaps it is just
me, but translate(x,y) is not the obvious way to change the origin of rotation.
I suppose it does make sense in a mathematical sense, but I am a programmer
because I am not great at mathematics (and all of the problems I am having in
Graduate School are due to my lack of math skills). Needless to say I started
playing around with trying to rotate a rectangle as shown in the code below.
Really, not very difficult. You just set the translation to your origin point
then set the rotation (in radians) and then draw the object relative to the new
origin.
ctx.fillStyle="#F00";
ctx.fillRect(50,50,50,50);
ctx.translate(75,75)
ctx.rotate(Math.PI/4);
ctx.fillStyle='#00F';
ctx.fillRect(-25,-25,50,50);
ctx.restore();
Once I
figured out how to rotate a rectangle properly, I wanted to get the code
working with images. As I already knew
that for the game’s graphics I was just going to use the Flash game’s assets
that were exported as an image map so I just needed to modify the json code to
use my own vastly condensed format. My older Halloween Liche port had the code
to handle the format already so to speed up testing I just used the code from
this. I quickly had bats on the screen and a rotating player. Implementing
shooting and moving bats was not hard and the next thing I knew, there was a
nearly finished game.
A bit of fine tuning and we have our Halloween game for this year completed. The source code is being added to my repository at https://github.com/BillySpelchan/BlazingPorts . Enjoy.
