The object is to drag the viewport along the bitmap to give a moving background effect. We're keeping this example to a simple bitmap scroll. When you get the hang of this your renderGamConsole() function we wrote in tutorial 01 can be modified to draw sprites on multiple layers with different sprite velocities. This method rendering is called parallax scrolling. You can render clouds or a star field on the first plane of animation to giving a motion feel. Then draw a slower scrolling city scape in the background as you have a spaceship battle aliens. This method of drawing sprites and backgrounds on multiple layers is called parallax scrolling. For now we're going to focus on a simple background scroll. You can see in our screen shot from the Capcom game, Alien vs. Predators, that we have the background drawn first, then the Lt. Linn sprite and the alien boss, then the sprite health bars are drawn. There are about 3 layers of animation is the screen grab. So when we render this we will draw the background layer first, the sprite layer(s) next, and then the status bar sprites last so they are foremost in the screen. Giving the feel of depth in the final rendering.
Code Cleanup
If you have been following along from tutorial 01 you'll notice I did a quick code cleanup. I separated functions and moved around some of the logic so it's easier to understand as we work on tutorial 02. There are basically only two new function calls in this code, checkgameConsoleInputDevice() and updatePlayer(). I added these two functions so we can manually control the bitmap scrolling using the input from a keyboard with the right and left arrow keys. I am using the jQuery library for keyboard input. This can actually change as I experiment and find which library works best with input to mobile devices and computers as well. For now we're just up and running with jQuery.
The keyboard code using jQuery is here.
Source Listing 1. Checking the game console input devices.
Source Listing 1. Checking the game console input devices.
// function: checkGameConsoleInputDevice
// description:
// jQuery routine to check the keyboard
// input.
//
function checkGameConsoleInputDevice() {
$(document).keydown(function(evt) {
if (evt.keyCode == 39) {
if (bgx < 380) {
gamePadMove = 'RIGHT';
//bgx++;
}
} else if (evt.keyCode == 37){
if (bgx > 0) {
gamePadMove = 'LEFT';
//bgx--;
}
}
});
$(document).keyup(function(evt) {
if (evt.keyCode == 39) {
gamePadMove = 'NONE';
} else if (evt.keyCode == 37){
gamePadMove = 'NONE';
}
});
}
// END checkGameConsoleInputDevice
As you can see, the checkGameConsole() function is the basics for running a game pad or controller. We don't care if it is arrow icons on a mobile device or right and left arrows on a keyboard. This is the skeleton of our final function for checking the input values on our game console. I am setting flags if the game pad was pressed or in this simple case if the right or left arrow was pressed. These values are passed on to the game for updating the values in the game.
In function updatePlayer(), we listen for the gamePadMove flags to be set. When we act on the flag needing update, we then reset the flag.
Source Listing 2. Updating the gmae position
// function: updatePlayer
// description:
// based on the input from
// checkGameConsoleInputDevice
// update the player position.
//
function updatePlayer() {
if (gamePadMove == 'RIGHT') {
bgx += 5;
gamePadMove = 'NONE';
}
if (gamePadMove == 'LEFT') {
bgx -= 5;
gamePadMove = 'NONE';
}
// end switch gamePadMove
}
// END updatePlayer
The bgx variable is a global variable used to identify the current x-position of the origin x-component of the viewport. So as the viewport slides back and forth over the background we update the bgx variable. Essentially, this is the bottom-left corner of the viewport rectangle as slide across the bitmap.
Scrolling Background
Now we get to the topic of interest, scrolling the background. We are going to scroll the background to the right or to the left based on user input. Now that our background is non-static and it moves, we need to update how we render the bitmap in renderGameConsole() function.
Source Listing 3. Changes for scrolling bitmaps.
Source Listing 3. Changes for scrolling bitmaps.
// function: renderGameConsole
// description:
// draws the content to the
// game console canvas.
//
function renderGameConsole() {
// gc_context.drawImage(img_elem, srcx, srcy, srcwidth, srcheight, dx, dy, dw, dh);
// draw the background first
try {
gc_context.drawImage(background, bgx, bgy, width, height, 0, 0, gc_canvas.width, gc_canvas.height);
}
catch (e) {
};
}
// END renderGameConsole
Running the Code in Your Sandbox
You'll need to copy the code below and paste it into an editor. Save the file as tutorial_02.html. Your development environment should be a simple directory, with one subdirectory, called img. Place the background art file into this directory. Your setup should look like this.
Source Listing 4. The whole tamale!
<html>
<title>retrogamecode tutorial 02 scrolling background</title>
<head>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/
// http://www.retrogamecode.blogspot.com
// author: michael norton
//------------------------------------------
// Global Variables Declarations
//------------------------------------------
var gc_canvas; // 'gc' 'game console'
var gc_context; // context
var width = 592, height = 448; // game console viewport width and height
var background; // image asset background
var bgwidth, bgheight; // background width and height
var bgx, bgy; // background source x and y used for blitting
var gamePadMove; // game console device input
//------------------------------------------
// Functions
//------------------------------------------
// Game Console Functions
// function: initGameConsoleCanvas
// description:
// initialize the canvas element
// and the drawing context API
// components.
//
function initGameConsoleCanvas() {
gc_canvas = document.createElement( 'canvas' );
gc_context = gc_canvas.getContext( '2d' );
gc_canvas.width = width;
gc_canvas.height = height;
document.body.appendChild( gc_canvas );
}
// END init
// function: clearGameConsole
// description:
// clears the game console before each
// call to renderGameConsole.
//
function clearGameConsole(){
gc_context.fillStyle = '#f0e7f9';
gc_context.clearRect(0, 0, width, height);
gc_context.beginPath();
gc_context.rect(0, 0, width, height);
gc_context.closePath();
gc_context.fill();
}
// END clearGameConsole
// function: renderGameConsole
// description:
// draws the content to the
// game console canvas.
//
function renderGameConsole() {
// gc_context.drawImage(img_elem, srcx, srcy, srcwidth, srcheight, dx, dy, dw, dh);
// draw the background first
try {
gc_context.drawImage(background, bgx, bgy, width, height, 0, 0, gc_canvas.width, gc_canvas.height);
}
catch (e) {
};
}
// END renderGameConsole
// function: checkGameConsoleInputDevice
// description:
// jQuery routine to check the keyboard
// input.
//
function checkGameConsoleInputDevice() {
$(document).keydown(function(evt) {
if (evt.keyCode == 39) {
if (bgx < 380) {
gamePadMove = 'RIGHT';
//bgx++;
}
} else if (evt.keyCode == 37){
if (bgx > 0) {
gamePadMove = 'LEFT';
//bgx--;
}
}
});
$(document).keyup(function(evt) {
if (evt.keyCode == 39) {
gamePadMove = 'NONE';
} else if (evt.keyCode == 37){
gamePadMove = 'NONE';
}
});
}
// END checkGameConsoleInputDevice
// Game specific functions
// function: loadImageAssets
// description:
// loads the background art file
// from local disk.
function loadImageAssets(){
background = new Image()
background.src = "file:img/Level_1_warehouse.png"
// background pixel dimensions
bgwidth = 977;
bgheight = 478;
// initialize background source blitting x and y
bgx = 0;
bgy = 0;
}
// END loadImageAssets
// function: updatePlayer
// description:
// based on the input from
// checkGameConsoleInputDevice
// update the player position.
//
function updatePlayer() {
if (gamePadMove == 'RIGHT') {
bgx += 5;
gamePadMove = 'NONE';
}
if (gamePadMove == 'LEFT') {
bgx -= 5;
gamePadMove = 'NONE';
}
// end switch gamePadMove
}
// END updatePlayer
// function: animate
// description:
// this is the main game lopp
// function. It calls itself
// recursively.
function animate() {
requestAnimFrame( animate );
updatePlayer();
clearGameConsole();
renderGameConsole();
checkGameConsoleInputDevice();
}
// END animate
// main game loop
initGameConsoleCanvas();
loadImageAssets();
animate();
</script>
</body>
</html>
No comments:
Post a Comment