pdf to image c# open source : Exporting data from excel to pdf form SDK application API wpf html winforms sharepoint fulton_fulton55-part568

CHAPTER 9
Canvas Games: Part II
Geo Blaster Basic was constructed using pure paths for drawing. In its creation, we began
to cover some game-application-related topics, such as basic collision detection and
state machines. In this chapter, we focus on using bitmaps and tile sheets for our game
graphics, and we add sound, using techniques introduced in Chapter 7.
Along the way, we update the FrameRateCounter from Chapter 8 by adding in a step
timer. We also examine how we can eliminate the use of a tile sheet for rotations by
precreating an array of imageData instances using the getImageData() and putImage
Data() Canvas functions.
In the second half of this chapter, we create another small turn-based strategy game
using bitmaps. This game is roughly based on the classic computer game, Daleks.
Geo Blaster Extended
We create a new game, Geo Blaster Extended, by adding bitmaps and sound to the Geo
Blaster Basic game from Chapter 8. Much of the game logic is the same, but adding
bitmaps to replace paths enables us to optimize the game for rendering. Optimized
rendering is very important when you are targeting limited-processor devices, such as
mobile phones. We also add sound to Geo Blaster Extended and apply an object pool to
the particles used for game explosions. Figure 9-1 shows an example screen of the fin‐
ished game.
529
Exporting data from excel to pdf form - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extract table data from pdf to excel; extracting data from pdf into excel
Exporting data from excel to pdf form - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
how to flatten a pdf form in reader; can reader edit pdf forms
Figure 9-1. Geo Blaster Extended
First, let’s look at the tile sheets we will use for our new game.
Geo Blaster Tile Sheet
In Chapter 4, we examined applying bitmap graphics to the canvas, and we explored
using tile sheet methods to render images. In Chapter 8, we drew all our game graphics
as paths and transformed them on the fly. In this chapter, we apply the concepts from
Chapter 4 to optimizing the rendering of the Geo Blaster Basic game. We do this by
prerendering all our game graphics and transformations as bitmaps. We then use these
bitmaps instead of paths and the immediate-mode transformations that were necessary
in Chapter 8 to create Geo Blaster Extended.
Figure 9-2 shows one of the tile sheets we use for this game (ship_tiles.png).
These tiles are the 36 rotations for our player ship. We are canning the rotations in a tile
sheet to avoid spending processor cycles transforming them on each frame tick as we
draw them to the canvas.
Figure 9-2. The ship_tiles.png tile sheet
530  |  Chapter 9: Canvas Games: Part II
How to C#: Basic SDK Concept of XDoc.PDF for .NET
C# programmers can convert Word, Excel, PowerPoint Tiff annotation creating, deleting, modifying, importing, exporting, and so from file or query data and save
pdf form data extraction; extract data from pdf file to excel
VB.NET PDF: Basic SDK Concept of XDoc.PDF
NET programmers can convert Word, Excel, PowerPoint Tiff annotation creating, deleting, modifying, importing, exporting, and so from file or query data and save
exporting data from pdf to excel; extract data from pdf file
Figure  9-3 shows a second set of tiles for the ship with the thruster firing
(ship_tiles2.png). We use this set to depict the ship when the user is pressing the up
arrow key.
Figure 9-3. The ship_tiles2.png tile sheet
The next three sets of tiles are for the rocks the player will destroy. We have three sheets
for  these:  largerocks.png  (Figure 9-4),  mediumrocks.png  (Figure 9-5),  and  small
rocks.png (Figure 9-6).
Figure 9-4. The largerocks.png tile sheet
Figure 9-5. The mediumrocks.png tile sheet
Figure 9-6. The smallrocks.png tile sheet
These three tile sheets need to be only five tiles each. Because the rock is a square, we
can simply repeat the five frames to simulate rotation in either the clockwise or coun‐
terclockwise direction.
The  saucer  that attempts to shoot the  player  is a  single tile,  saucer.png,  shown  in
Figure 9-7.
Figure 9-7. The saucer.png tile
Geo Blaster Extended  |  531
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
PDF Library in C#.NET Class. Best C#.NET PDF to Microsoft Office Word converter SDK for exporting PDF to Word in Visual Studio .NET.
extract pdf form data to xml; extract pdf data into excel
C# PDF Convert to SVG SDK: Convert PDF to SVG files in C#.net, ASP
without quality loss. C# sample code for quick integration in .NET framework program for exporting PDF from SVG. In some situations
extract data from pdf table; pdf data extraction open source
Finally, parts.png (Figure 9-8) is a tiny 8×2 tile sheet that contains four 2×2 particle tiles.
These are used for the explosions and missiles the player and the saucer fire.
Figure 9-8. The parts.png tile sheet
You cannot see the colors in a black-and-white printed book, but you can view them by
downloading the files from this book’s website. The first tile is green, and it is used for
the small rock and saucer explosions. The second tile is light blue, and it depicts the
player’s missiles and the player explosion. The third tile is reddish pink (salmon, if you
will), and it illustrates the large rock explosions. The final, purple tile is used for the
medium rock explosions.
Now that we have our tiles in place, let’s look at the methods we’ll use to transform Geo
Blaster Basic’s immediate-mode path, rendering it to Geo Blaster Extended’s tile-based
bitmap.
Refresher: Calculating the tile source location
In Chapter 4, we examined the method to calculate a tile’s location on a tile sheet if we
know the single-dimension ID of that tile. Let’s briefly look back at this, because it is
reused to render all the tiles for the games in this chapter.
Given that we have a tile sheet such as ship_tiles.png, we can locate the tile we want to
display with a simple math trick.
ship_tiles.png is a 36-tile animation with the player ship starting in the 0-degree angle,
or pointing-right direction. Each of the remaining 35 tiles displays the ship rotating in
10-degree increments.
If we would like to display tile 19 (the ship pointing to the left, or in the 190-degree
angle), we first need to find the x and y coordinates for the top-left corner of the tile by
calculating sourceX and sourceY.
Here is pseudocode for the sourceX calculation:
sourceX = integer(current_frame_index modulo
the_number_columns_in_the_tilesheet* tile_width
The modulo (%) operator returns the remainder of the division calculation. Following
is the actual code (with variables replaced with literals) we use for this calculation:
var sourceX = Math.floor(19 % 10*32;
The result is x = 9*32 = 288;.
532  |  Chapter 9: Canvas Games: Part II
C# PDF Convert to Text SDK: Convert PDF to txt files in C#.net
Free evaluation library for exporting PDF to Text in both C#.NET WinForms application and ASP.NET WebForms. RasterEdge.XDoc.Excel.dll. RasterEdge.XDoc.PDF.dll.
pdf data extraction; vb extract data from pdf
C# Create PDF from images Library to convert Jpeg, png images to
Create PDF from images in both .NET WinForms and ASP.NET application. .NET converter control for exporting high quality PDF from images in C#.NET.
filling out pdf forms with reader; online form pdf output
The calculation for the sourceY value is similar, except we divide rather than use the
modulo operator:
sourceY = integer(current_frame_index divided by
the_number_columns_in_the_tilesheet*tile_height
Here’s the actual code we use for this calculation:
var sourceY = Math.floor(19 / 10*32;
This works out to y = 1*32 = 32;. Therefore, the top-left location on the ship_tiles.png
from which to start copying pixels is 288,32.
To copy this to the canvas, we use this statement:
context.drawImage(shipTilessourceXsourceY,32,32,player.x,player.y,32,32);
In Chapter 8, we needed quite a lot of code to draw and translate the player ship at the
current rotation. When we use a tile sheet, this code is reduced considerably.
Here  is the code we use to  render the player ship.  It replaces  the renderPlayer()
function in Example 8-12 in Chapter 8:
function renderPlayerShip(x,y,rotationscale) {
//transformation
context.save(); //save current state in stack
context.globalAlpha = parseFloat(player.alpha);
var angleInRadians = rotation * Math.PI / 180;
var sourceX = Math.floor((player.rotation/10% 10) * 32;
var sourceY = Math.floor((player.rotation/10/10) *32;
if (player.thrust){
context.drawImage(shipTiles2sourceXsourceY32, 32,
player.x,player.y,32,32);
}else{
context.drawImage(shipTilessourceXsourceY32, 32,
player.x,player.y,32,32);
}
//restore context
context.restore(); //pop old state on to screen
context.globalAlpha = 1;
}
You  can  find  the  entire  source  code  for  Geo  Blaster  Extended
(Example A-2) in Appendix A.
Geo Blaster Extended  |  533
VB.NET PDF - Convert PDF with VB.NET WPF PDF Viewer
Data. Data: Auto Fill-in Field Data. Field: Insert PDF, VB.NET Word, VB.NET Excel, VB.NET part illustrates some conversion tabs and features for PDF exporting.
extract data from pdf to excel online; exporting pdf form to excel
C# WPF PDF Viewer SDK to convert and export PDF document to other
Data. Data: Auto Fill-in Field Data. Field: Insert PDF, VB.NET Word, VB.NET Excel, VB.NET part illustrates some conversion tabs and features for PDF exporting.
java read pdf form fields; how to save filled out pdf form in reader
The renderPlayer() function divides the player.rotation by 10 to determine which
of the 36 tiles in the shipTiles image instance to display on the canvas. If the player is
in thrust mode, the shipTiles2 image is used instead of shipTiles.
This works because we have set the ship to rotate by 10 degrees with each press of the
left or right arrow key. In the Chapter 8 version of the game, we set this to 5 degrees. If
we had created a 72-frame tile sheet, with the player ship rotated in 5-degree increments,
we could have kept the player.rotationalVelocity at 5. For Geo Blaster Extended,
we drew only 36 tiles for the player ship, so we are using the value 10 for the rotational
velocity. We certainly could use 72 or even 360 frames for the player ship rotation tiles.
This is limited only by creative imagination (and patience with a drawing tool).
Let’s  look  at  the rotationalVelocity  value  assigned  earlier  in  the gameStateNew
Game() function:
function gameStateNewGame(){
ConsoleLog.log("gameStateNewGame")
//setup new game
level = 0;
score = 0;
playerShips = 3;
player.maxVelocity = 5;
player.width = 32;
player.height = 32;
player.halfWidth = 16;
player.halfHeight = 16;
player.hitWidth = 24;
player.hitHeight = 24;
player.rotationalVelocity = 10; //how many degrees to turn the ship
player.thrustAcceleration = .05;
player.missileFrameDelay = 5;
player.thrust = false;
player.alpha = 1;
player.rotation = 0;
player.x = 0;
player.y = 0;
fillBackground();
renderScoreBoard();
switchGameState(GAME_STATE_NEW_LEVEL)
}
Other new player attributes
Along with the change in the rotational velocity, we have also modified the player’s width
and height attributes. These are both now 32, which is the same as the tile width and
height. If you look at the first frame of the ship_tiles.png tile sheet, you see that the player
ship does not fill the entire 32×32 tile. It is centered in the middle, taking up roughly
24×24 of the tile, which leaves enough space around the edges of the tile to eliminate
534  |  Chapter 9: Canvas Games: Part II
C# PDF Convert to Images SDK: Convert PDF to png, gif images in C#
NET. Support exporting PDF to multiple image forms, including Jpg, Png, Bmp, Gif, Tiff, Bitmap, .NET Graphics, and REImage. Support
extract pdf form data to xml; pdf data extraction tool
VB.NET Create PDF from images Library to convert Jpeg, png images
REImage. .NET converter control for exporting high quality PDF from images. Turn multiple image formats into one or multiple PDF file.
can reader edit pdf forms; extracting data from pdf forms to excel
clipping when the ship is rotated. We also used this concept when we created the rock
rotations.
The extra pixels of padding added to eliminate clipping during frame rotation pose a
small problem for collision detection. In the Chapter 8 version of the game, we used the
width and height values for bounding box collision detection. We will not use those
values in this new version because we have created two new variables to use for collision
detection: hitWidth and hitHeight. Instead of setting these values to 32, they are 24.
This new, smaller value makes our collision detection more accurate than if we used the
entire tile width and height.
The new boundingBoxCollide() algorithm
All the other game objects also have new hitWidth and hitHeight attributes. We modify
the boundingBoxCollide() function from Geo Blaster Basic to use these new values for
all collision testing:
function boundingBoxCollide(object1object2) {
var left1 = object1.x;
var left2 = object2.x;
var right1 = object1.x + object1.hitWidth;
var right2 = object2.x + object2.hitWidth;
var top1 = object1.y;
var top2 = object2.y;
var bottom1 = object1.y + object1.hitHeight;
var bottom2 = object2.y + object2.hitHeight;
if (bottom1 < top2return(false);
if (top1 > bottom2return(false);
if (right1 < left2) return(false);
if (left1 > right2return(false);
return(true);
}
Next, we take a quick look at how we use these same ideas to render the rest of the game
objects with the new tile sheets.
Rendering the Other Game Objects
The rocks, saucers, missiles, and particles are all rendered in a manner similar to the
method implemented for the player ship. Let’s first look at the code for the saucer’s
render function.
Geo Blaster Extended  |  535
Rendering the saucers
The saucers do not have a multiple-cell tile sheet, but to be consistent, we render them
as though they do. This allows us to add more animation tiles for the saucers later:
function renderSaucers() {
var tempSaucer = {};
var saucerLength = saucers.length-1;
for (var saucerCtr=saucerLength;saucerCtr>=0;saucerCtr--){
//ConsoleLog.log("saucer: " + saucerCtr);
tempSaucer = saucers[saucerCtr];
context.save(); //save current state in stack
var sourceX = 0;
var sourceY = 0;
context.drawImage(saucerTilessourceXsourceY30, 15,
tempSaucer.x,tempSaucer.y,30,15);
context.restore(); //pop old state on to screen
}
}
There is no need to calculate the sourceX and sourceY values for the saucer because the
saucer is only a single tile. In this instance, we can just set them to 0. We have hardcoded
the saucer.width (30) and saucer.height (15) as an example, but with all the rest
of the game objects, we use the object width and height attributes rather than literals.
Next, let’s look at the rock rendering, which varies slightly from both the player ship
and the saucers.
Rendering the rocks
The rock tiles are contained inside three tile sheets based on their size (large, medium,
and small), and we have used only five tiles for each rock. The rocks are square with a
symmetrical pattern, so we only need to precreate a single quarter-turn rotation for each
of the three sizes.
Here is the renderRocks() function. Notice that we must switch based on the scale of
the rock (1=large, 2=medium, 3=small) to choose the right tile sheet to render:
function renderRocks() {
var tempRock = {};
var rocksLength = rocks.length-1;
for (var rockCtr=rocksLength;rockCtr>=0;rockCtr--){
context.save(); //save current state in stack
tempRock = rocks[rockCtr];
var sourceX = Math.floor((tempRock.rotation) % 5* tempRock.width;
var sourceY = Math.floor((tempRock.rotation) /5) *tempRock.height;
switch(tempRock.scale){
case 1:
context.drawImage(largeRockTilessourceXsourceY,
tempRock.width,tempRock.height,tempRock.x,tempRock.y,
536  |  Chapter 9: Canvas Games: Part II
tempRock.width,tempRock.height);
break;
case 2:
context.drawImage(mediumRockTilessourceX,
sourceY,tempRock.width,tempRock.height,tempRock.x,tempRock.y,
tempRock.width,tempRock.height);
break;
case 3:
context.drawImage(smallRockTilessourceX,
sourceY,tempRock.width,tempRock.height,tempRock.x,tempRock.y,
tempRock.width,tempRock.height);
break;
}
context.restore(); //pop old state on to screen
}
}
In the renderRocks() function, we are no longer using the rock.rotation attribute as
the angle of rotation as we did in Geo Blaster Basic. Instead, we have repurposed the
rotation attribute to represent the tile ID (0–4) of the current tile on the tile sheet to
render.
In the Chapter 8 version, we could simulate faster or slower speeds for the rock rotations
by simply giving each rock a random rotationInc value. This value, either negative for
counterclockwise or positive for clockwise, was added to the rotation attribute on each
frame. In this new tilesheet-based version, we only have five frames of animation, so we
don’t want to skip frames because it will look choppy. Instead, we are going to add two
new attributes to each rock: animationCount and animationDelay.
The animationDelay represents the number of frames between each tile change for a
given rock. The animationCount variable restarts at 0 after each tile frame change and
increases by 1 on each subsequent frame tick. When animationCount is greater than
animationDelay, the rock.rotation value is increased (clockwise) or decreased (coun‐
terclockwise). Here is the new code in our updateRocks() function:
tempRock.animationCount++;
if (tempRock.animationCount > tempRock.animationDelay){
tempRock.animationCount = 0;
tempRock.rotation += tempRock.rotationInc;      if (tempRock.rotation > 4){
tempRock.rotation = 0;
}else if (tempRock.rotation <0){
tempRock.rotation = 4;
}
}
Geo Blaster Extended  |  537
Notice that we have hardcoded the values 4 and 0 into the tile ID maximum and min‐
imum checks. We could have just as easily used a constant or two variables for this
purpose.
Rendering the missiles
Both the player missiles and saucer missiles are rendered in the same manner. For each,
we simply need to know the tile ID on the four-tile particleTiles image representing
the tile we want to display. For the player missiles, this tile ID is 1; for the saucer missile,
the tile ID is 0.
Let’s take a quick look at both of these functions:
function renderPlayerMissiles() {
var tempPlayerMissile = {};
var playerMissileLength = playerMissiles.length-1;
//ConsoleLog.log("render playerMissileLength=" + playerMissileLength);
for (var playerMissileCtr=playerMissileLength; playerMissileCtr>=0;
playerMissileCtr--){
//ConsoleLog.log("draw player missile " + playerMissileCtr)
tempPlayerMissile = playerMissiles[playerMissileCtr];
context.save(); //save current state in stack
var sourceX = Math.floor(1 % 4* tempPlayerMissile.width;
var sourceY = Math.floor(1 / 4* tempPlayerMissile.height;
context.drawImage(particleTilessourceXsourceY,
tempPlayerMissile.width,tempPlayerMissile.height,
tempPlayerMissile.x,tempPlayerMissile.y,tempPlayerMissile.width,
tempPlayerMissile.height);
context.restore(); //pop old state on to screen
}
}
function renderSaucerMissiles() {
var tempSaucerMissile = {};
var saucerMissileLength = saucerMissiles.length-1;
//ConsoleLog.log("saucerMissiles= " + saucerMissiles.length)
for (var saucerMissileCtr=saucerMissileLength;
saucerMissileCtr >= 0;saucerMissileCtr--){
//ConsoleLog.log("draw player missile " + playerMissileCtr)
tempSaucerMissile = saucerMissiles[saucerMissileCtr];
context.save(); //save current state in stack
var sourceX = Math.floor(0 % 4* tempSaucerMissile.width;
var sourceY = Math.floor(0 / 4* tempSaucerMissile.height;
context.drawImage(particleTilessourceXsourceY,
tempSaucerMissile.width,tempSaucerMissile.height,
tempSaucerMissile.x,tempSaucerMissile.y,tempSaucerMissile.width,
tempSaucerMissile.height);
538  |  Chapter 9: Canvas Games: Part II
Documents you may be interested
Documents you may be interested