Game Development Reference
In-Depth Information
3.
Loop through the rows and columns and copy them to the buffer.
4.
Paint the buffer to the canvas.
If the
player.move
variable (which is set to
false
in
checkCollisions
if the player hits a wall) is
true
, we update the
camera.x
and
camera.y
to the
nextX
and
nextY
values for the camera.
Next, we find the
tileCol
and
tileRow
variables. These represent the row and column to start
copying from the
world array
to the
camera.bufferBitmapData
.
Now, we loop through 13 rows and 13 columns of tiles and paint them to the buffer. The 13 rows
start at
tileRow
and run through
tileCol
plus 12. The 13 columns start at
tileCol
and run
through
tileCol
plus 12. Notice the check for a
rowCtr
or
colCtr
that is greater than 50
(
worldRows
or
worldCols
). We do this because when we near the edge of the screen and only
have 12 rows or columns left in the world, we can't build a buffer with 13 columns or rows in the
direction that is near the edge. In this instance, we break from the associated loop.
Next, we find the point that represents the location on the screen to paint the tile and the
rectangle that represents the location on the tile sheet to copy from. Finally, we paint the tile with
a
copyPixels
call to the
camera.bufferBitmapData
.
Once the
bufferBitmapData
is complete, we set the
camer.bufferRect
rectangle to start on the
correct pixel in the first tile. The x value to start at is the remainder of
camera.x / mapTileWidth
and
y
is the remainder of
camera.y / mapTileHeight
. The width and height of the buffer have
already been set at 384
384 and need not change. Finally, we lock our
canvasBitmapData
and
384
bufferBitmapData
to the
canvasBitmapData
starting at
0,0
.
copy the entire 384
The drawPlayer function
The
drawPlayer
function is the core of the player render functionality. It takes care of selecting
and painting the correct frame of animation from the tile sheet to display for the player and also
plays the car sound based on its speed.
1.
If the player is not stopped, we should animate the player (move the wheels by
changing the frame of animation for the car from the time sheet).
2.
If it is OK to animate the player, update the player animation delay based on the
inverse of its
velocity
(the greater the
velocity
the lower the delay between frames).
3.
Update the player's current tile from the
tileSheet
.
4.
Render the player's current tile to the
player.bitmapData
.
5.
Set the player's new x and y coordinates. We also update the
player.worldX
and
player.worldY
values.
6.
Play the car sound faster or slower based on the player's new
velocity
(speed.
In the
checkCollisions
function, we will set the
player.move
to be
true
or
false
based on the
result (or lack thereof) a collision with a wall tile. If the player is able to move, we update the
player attributes.
The
animationDelay
is the number of frames between changes to the player's tile from the tile
sheet. The three car tiles when played forward (or backward) simulate the car's relative speed.
Since the
velocity
and the
number of frames
are both linear, we can use the inverse of the
velocity to calculate the delay.
