November 5, 2015 Log No. 584
Your Granny’s SHMUP
So in between tossing my book all over the Southwestern US, I was actually engaged in productive coding activity. Not so much in the single-page app vein this time though: I decided to modify my pretty poor excuse of an Asteroids game into something that actually resembled a game. Hence Bullet Hell, a SHMUP (shoot-em-up)!
But a pretty simple/not-insane SHMUP such that your grandmother probably could play it without tearing her hair out. Yes I really aim to please all demographics.
Yet even so, over the course of the past week and a half while making this game, I learned/refreshed on a lot of concepts, and oftentimes applied them to Javascript for the first time. Inheritance trees, sound effects using the audio tag, preloading, sprite animations–all things I got to play with. It was a good time! And, I am not ashamed to admit, at first the code was all done using setTimeouts and setIntervals, so I had to do a refactor midway through (things were, unsurprisingly, getting laggy) to translate the main game loop to 60 FPS with requestAnimationFrame. Yes, the game runs at 60 FPS. It’s a real game now. Basically on par with GTA.
And slowly, as more “real” game effects got added in (everything I, as an avid consumer of games, knew a game should have), this thing started to resemble that which it was designed after. The last touch was today, with the scrolling background animation. I’m actually kinda proud of how that logic came together (ok it wasn’t that complicated): since my background is a repeated tile of 1 image (because my canvas size is determined by the window), to achieve the seamless scroll I had to first create the right tile “frame” from my bg image in a temporary canvas, and then createPattern with THAT and fill my main canvas with it. Totally clear explanation, I know. The code does a better job:
var img = window.BHGame.Resources.get('img/bg.png');
// "scrolling" bg here
var tempCtxt = tempCanvas.getContext('2d');
this.bg_y = this.bg_y - this.bg_speed;
if(this.bg_y <= 0){
this.bg_y = 400;
};
tempCtxt.drawImage(img,
0, tempCanvas.height - this.bg_y,
tempCanvas.width, tempCanvas.height);
tempCtxt.drawImage(img,
0, -this.bg_y,
tempCanvas.width, tempCanvas.height);
var pattern = ctxt.createPattern(tempCanvas, 'repeat');
ctxt.fillStyle = pattern;
ctxt.fillRect(0, 0, Game.DIM_X, Game.DIM_Y);
And the effect really adds a ton to the game feel overall. So happy how that turned out! The game is by no means finished though, just MVP at the moment. Still, it's come a long way.
Discussion Jump to comment form