Embedded Files
Live coding video: game framework and user interactions
Live coding video: game framework and user interactions
Hi, This time, I will show you in that video what we have done so far. We started from one of the examples from the HTML5 Part 1 course, the one that just use the canvas to draw small monster.So we have a canvas here, and in a function called when the page is loaded in the window.onload callback, we get the canvas, we get the context of the canvas and we called the draw monster function. Here we have got just a function that is called once after the page is loaded and this function just draws the monster using translate, stroke, fillRect and so on. Then, in order to turn this into a small game framework and in order to draw the monster 60 times per seconds, we introduced what is called the black box model for creating JavaScript objects.Instead of having functions, we have got objects. We create an object that is the game framework: game = new GF() with capital letters, this is called a constructor function.In JavaScript, when you start a function with capital letters, it means that it is meant to be use with a new. Then we call just some parts of the game framework that are exposed to an external user. So here we can call game.start but we can not call anything. And in this way to design object, the internals of the game framework that are exposed are located in an object we return at the end of the object.So in the end of the game framework constructor function, we do return start, this is the name of the property we will able to use from the outside, and start here is the name of an internal function. So game.start will call this start function inside the game framework. In this function we do the initialization so we will create a div for displaying the number of frame per seconds, we get the canvas, the context, and we call requestAnimationFrame(mainLoop) in order to start the animation.The mainLoop is a private function inside the game framework because it is not exposed, we do not return its name here so it is a sort of private function.And what do we do in the mainLoop? We clear the canvas, we draw the monster and we call again requestAnimationFrame(mainLoop). In addition, we also measure the frames per seconds taking into account the current time. So in order to measure the number of FPS, we pass the time and we compute deltas in this function here, that is also a private function that has been presented previously in the course.So, this is a very small skeleton and then we can build on that by adding new methods, by adding new properties. The properties are the local variables that are usable only inside the game framework. In the current lesson, we are adding user interaction like detecting the mouse buttons that are pressed, the mouse position or the different keys that can be pressed. You can notice that the diagonal movements are very smooth because we can manage different key presses at the same time and also I can press a key and a button and the monster will move faster.So multiple events are managed using a global status variable, that we called inputStates, and that is checked 60 times per seconds from inside the mainLoop. So the event listeners, the key event listeners and the mouse event listeners will just add properties to this variable. Let me show you how it is done. It is done in the start method that is called when you want to initialize the game framework, we declare the event listener and in case we have got a keydown and if this key is the left arrow for example, we set the left property to the inputStates to left. And in the animation loop, we call a method called updateMonsterPosition that will check for this global inputStates and if the left key is pressed, we will display a message "left key pressed" and we will modify the speed of the monster. And this variable ‘speedX’ is taken into account to increment the x coordinate.And this is how we can get a smooth animation because this updateMonsterPosition is called 60 times per seconds. So if I keep a key pressed, it is not important if the key is repeated, if I have got several keys pressed, because the status of the left key in the inputStates will be unchanged and my monster will keep moving on the left.Take time to look at the code, read slowly the explanation in the page and I will meet you in the next video in which we will add enemies and obstacles and detect collisions.
Make the monster move using the arrow keys, and to increase its speed by pressing a mouse button
Make the monster move using the arrow keys, and to increase its speed by pressing a mouse button
To conclude this topic about events, we will use the arrow keys to move our favorite monster up/down/left/right, and make it accelerate when we press a mouse button while it is moving. Notice that pressing two keys at the same time will make it move diagonally.
Check this online example at JSBin: we've changed very few lines of code from the previous evolution!
Add a JavaScript object to describe the monster
Add a JavaScript object to describe the monster
// The monster!
var monster = {
x:10,
y:10,
speed:1
};
Where monster.x and monster.y define the monster's current position and monster.speed corresponds to the number of pixels the monster will move between animation frames.
Note: this is not the best way to animate objects in a game; we will look at a far better solution - "time based animation" - in another lesson.
We modified the game loop as follows:
We modified the game loop as follows:
var mainLoop = function(time){
// Main function, called each frame
measureFPS(time);
// Clears the canvas
clearCanvas();
// Draws the monster
drawMyMonster(monster.x, monster.y);
// Checks inputs and moves the monster
updateMonsterPosition();
// Calls the animation loop every 1/60th of second
requestAnimationFrame(mainLoop);
};
We moved all the parts that check the input states in the updateMonsterPosition() function:
function updateMonsterPosition() {
monster.speedX = monster.speedY = 0;
// Checks inputStates
if (inputStates.left) {
ctx.fillText("left", 150, 20);
monster.speedX = -monster.speed;
}
if (inputStates.up) {
ctx.fillText("up", 150, 40);
monster.speedY = -monster.speed;
}
if (inputStates.right) {
ctx.fillText("right", 150, 60);
monster.speedX = monster.speed;
}
if (inputStates.down) {
ctx.fillText("down", 150, 80);
monster.speedY = monster.speed;
}
if (inputStates.space) {
ctx.fillText("space bar", 140, 100);
}
if (inputStates.mousePos) {
ctx.fillText("x = " + inputStates.mousePos.x + " y = " +
inputStates.mousePos.y, 5, 150);
}
if (inputStates.mousedown) {
ctx.fillText("mousedown b" + inputStates.mouseButton, 5, 180);
monster.speed = 5;
} else {
// Mouse up
monster.speed = 1;
}
monster.x += monster.speedX;
monster.y += monster.speedY;
}
Explanations:
Explanations:
In this function, we added two properties to the monster object: speedX and speedY which will correspond to the number of pixels we will add to the x and y position of the monster at each new frame of animation.
We first set these to zero (line 2), then depending on the keyboard input states, we set them to a value equal to monster.speed or -monster.speed modified by the keys that are being pressed at the time (lines 4-20).
Finally, we add speedX and speedY pixels to the x and/or y position of the monster (lines 36 and 37).
When the function is called by the game loop, if speedX and/or speedY are non-zero they will change the x and y position of the monster in successive frames, making it move smoothly.
If a mouse button is pressed or released we set the monster.speed value to +5 or to +1. This will make the monster move faster when a mouse button is down, and return to its normal speed when no button is down.
Notice that two arrow keys and a mouse button can be pressed down at the same time. In this situation, the monster will take a diagonal direction and accelerate. This is why it is important to keep all the input states up-to-date, and not to handle single events individually.
Gamepad enhancements
Gamepad enhancements
Let's add the gamepad utility functions from the previous lesson (we tidied them a bit too, removing the code for displaying the progress bars, buttons, etc.), added a gamepad property to the game framework, and added one new call in the game loop for updating the gamepad status:
The new updated mainloop:
var mainLoop = function(time){
//main function, called each frame
measureFPS(time);
// Clear the canvas
clearCanvas();
// gamepad
updateGamePadStatus();
// draw the monster
drawMyMonster(monster.x, monster.y);
// Check inputs and move the monster
updateMonsterPosition();
// Call the animation loop every 1/60th of second
requestAnimationFrame(mainLoop);
};
And here is the updateGamePadStatus function (the inner function calls are to gamepad utility functions detailed in the previous lesson):
function updateGamePadStatus() {
// get new snapshot of the gamepad properties
scangamepads();
// Check gamepad button states
checkButtons(gamepad);
// Check joysticks
checkAxes(gamepad);
}
The checkAxes function updates the left, right, up, down properties of the inputStates object we previously used with key events. Therefore, without changing any code in the updatePlayerPosition function, the monster moves by joystick command!
Page updated
Google Sites
Report abuse