Bits & Bytes

Posts Tagged ‘image’

Creating a Walkable 2D Game Terrain in JavaScript

The Demonstration

This post demonstrates how to program the basic elements of a 2D tiled game with terrain images. This is an update to my prior post with terrain images added, along with an image for our game character. You can try out the demo, by left-clicking this link and then using the arrow keys to move around.

The Code

Most of this code was explained already in my prior post; so, I will explain the minor changes that have been made, beginning with the HTML file. In the HTML file, I have changed the 25 div elements to img elements so that they can hold images. I have also added an additional img element to hold the character image at the end of the background div.

Inside the JavaScript File, I have added variables to hold the terrain images and adapted the functions to use these images. At the top of the file, there are four new variables declared to hold the images for the terrain types: grass, forest, water, and bushes. In the Initialize() function, we allocate and set these terrain image variables. The function GetRandomTerrain() has been changed from the prior GetRandomColor() function to return an image object rather than a color. The FillBoard() function has been changed from the prior ColorBoard() function so that it now returns a null image for squares outside of the map; this has the effect of leaving these squares medium gray, as defined by the background element. The rest of the changes consist of calling these to functions instead of the prior functions. So, the changes are simple and straightforward.

Again, the HTML code can be put into any file with a .html extension, but the JavaScript file should be named “XoaXGameTerrain2D.js” in order to work with the code as is. Also, you will need 100 pixel by 100 pixel terrain images and a character image, which should be stored in the same folder with the HTML and JavaScript files.

HTML File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>XoaX.net's Javascript 2D Game Board Example</title>
<script type="text/javascript" src="XoaXGameTerrain2D.js"></script>

</head>
<body>
<div id="gameboard" style="position:absolute; width:500px; height:500px; background:#aaaaaa; margin:30px;">

<img id="A11" style="left:0px; top:0px; position:absolute; width:100px; height:100px;" />

<img id="A12" style="left:100px; top:0px; position:absolute; width:100px; height:100px;" />

<img id="A13" style="left:200px; top:0px; position:absolute; width:100px; height:100px;" />

<img id="A14" style="left:300px; top:0px; position:absolute; width:100px; height:100px;" />

<img id="A15" style="left:400px; top:0px; position:absolute; width:100px; height:100px;" />
<img id="A21" style="left:0px; top:100px; position:absolute; width:100px; height:100px;" />

<img id="A22" style="left:100px; top:100px; position:absolute; width:100px; height:100px;" />

<img id="A23" style="left:200px; top:100px; position:absolute; width:100px; height:100px;" />

<img id="A24" style="left:300px; top:100px; position:absolute; width:100px; height:100px;" />

<img id="A25" style="left:400px; top:100px; position:absolute; width:100px; height:100px;" />
<img id="A31" style="left:0px; top:200px; position:absolute; width:100px; height:100px;" />

<img id="A32" style="left:100px; top:200px; position:absolute; width:100px; height:100px;" />

<img id="A33" style="left:200px; top:200px; position:absolute; width:100px; height:100px;" />

<img id="A34" style="left:300px; top:200px; position:absolute; width:100px; height:100px;" />

<img id="A35" style="left:400px; top:200px; position:absolute; width:100px; height:100px;" />
<img id="A41" style="left:0px; top:300px; position:absolute; width:100px; height:100px;" />

<img id="A42" style="left:100px; top:300px; position:absolute; width:100px; height:100px;" />

<img id="A43" style="left:200px; top:300px; position:absolute; width:100px; height:100px;" />

<img id="A44" style="left:300px; top:300px; position:absolute; width:100px; height:100px;" />

<img id="A45" style="left:400px; top:300px; position:absolute; width:100px; height:100px;" />
<img id="A51" style="left:0px; top:400px; position:absolute; width:100px; height:100px;" />

<img id="A52" style="left:100px; top:400px; position:absolute; width:100px; height:100px;" />

<img id="A53" style="left:200px; top:400px; position:absolute; width:100px; height:100px;" />

<img id="A54" style="left:300px; top:400px; position:absolute; width:100px; height:100px;" />

<img id="A55" style="left:400px; top:400px; position:absolute; width:100px; height:100px;" />
<img src="Man.png" style="left:200px; top:200px; position:absolute; width:100px; height:100px;" />

</div>

</body> </html>

JavaScript File

var qpBkdg = null; var qppBoard = null; var qppMap = null; var iLocX = 10; var iLocY = 10; var qpGrass = null; var qpForest = null; var qpWater = null; var qpBushes = null;


function KeyHandler(qKeyEvent) {

    var iKeyDown = 0;

    var iLeftArrow = 37;

    var iUpArrow = 38;

    var iRightArrow = 39;

    var iDownArrow = 40;
    if (qKeyEvent) {

        iKeyDown = qKeyEvent.which;

    } else {

        iKeyDown = window.event.keyCode;

    }
    if (iKeyDown === iLeftArrow) {

        if (iLocX > 0) {

            iLocX = iLocX - 1;

        }

    } else if (iKeyDown === iRightArrow) {

        if (iLocX < 19) {

            iLocX = iLocX + 1;

        }

    } else if (iKeyDown === iUpArrow) {

        if (iLocY > 0) {

            iLocY = iLocY - 1;

        }

    } else if (iKeyDown === iDownArrow) {

        if (iLocY < 19) {

            iLocY = iLocY + 1;

        }

    }

    FillBoard();

    return false;

}
function GetRandomTerrain() {

    var iRnd = Math.floor(Math.random()*10);

    switch(iRnd) {

        case 0:

        {

            return qpWater;

        }

        case 1:

        {

            return qpForest;

        }

        case 2:

        {

            return qpBushes;

        }

        default:

        {

            return qpGrass;

        }

    }

}
function FillBoard() {

    for (var iY = iLocY - 2; iY < iLocY + 3; iY++) {

        for (var iX = iLocX - 2; iX < iLocX + 3; iX++) {

            if (iY < 0 || iX < 0 || iY > 19 || iX > 19) {

                qppBoard[iY - iLocY + 2][iX - iLocX + 2].src = null;

            } else {

                qppBoard[iY - iLocY + 2][iX - iLocX + 2].src = qppMap[iY][iX].src;

            }

        }

    }

}
function Initialize() {

    qpGrass = new Image();

    qpGrass.src = "Grass.png"

    qpForest = new Image();

    qpForest.src = "Forest.png"

    qpWater = new Image();

    qpWater.src = "Water.png"

    qpBushes = new Image();

    qpBushes.src = "Bushes.png"
    // Generate map

    qppMap = new Array(20);

    for (var iY = 0; iY < 20; iY++) {

        qppMap[iY] = new Array(20);

        for (var iX = 0; iX < 20; iX++) {

            qppMap[iY][iX] = GetRandomTerrain();

        }

    }
    // Allocate the visible board

    qppBoard = new Array(5);

    for (var iY = 0; iY < 5; iY++) {

        qppBoard[iY] = new Array(5);

        for (var iX = 0; iX < 5; iX++) {

            qppBoard[iY][iX] = document.getElementById('A'+((iY+1)*10+(iX+1)));

        }

    }

    FillBoard();
    document.onkeydown = KeyHandler;

    qpBkdg = document.getElementById('gameboard');

}

window.onload = Initialize;

Centering HTML Elements

For our first example we want to center an image like this one:
XoaX.net Logo

This image is 260×50 pixels, but we are not concerned about the height because we are talking about centering the image horizontally with respect to the containing element.

If we knew the size of the containing element, we could find the center location and position the image there. However, we often deal with elements, like the browser window, that vary a great deal. In this case, we want to keep the image centered no matter how the containing element changes.

To center the image, we enclose it within a div, where we set the width to that of the image, and the right and left margins to auto, as shown below.

<div style="width: 260px; margin-left: auto; margin-right: auto;"> <img src="XoaXLogo.png" /> </div>

For illustration, we have put the 260×50 pixel image inside of a 480×100 pixel div and colored the background gray for illustration. Notice that the image sits at the top of the gray rectangle because we have not added anything to position it vertically.

Saving a Screen Capture to a JPEG Image File in Actionscript 3.0

The program below demostrates how to capture an image of the stage and save it as a jpg image. We have drawn a yellow circle give the image capture something more interesting to render. To save the jpg image, just left-click the box above and select a location to save the image in.

The program for this jpg image capture is shown below. Additionally, you will need the JPGEncoder file which you can get here: https://github.com/mikechambers/as3corelib. To use the source file, select Edit->Preferences->Actionscript->Actionscript 3.0 Settings . . . and add the folder where you put “mikechambers-as3corelib-release.93-8-g24c6c16\mikechambers-as3corelib-24c6c16\src” to the src paths. Then you should be able to compile and execute the Actionscript code.

In this program, we import the JPGEncoder class and then draw a filled yellow circle on the stage. Next, we register an event listener to call the function SaveJPG() to save the image when a left-click occurs; Actionscript requires that file-saving code be contained in a user-initiated function.

Inside the callback, we create a BitmapData object that is the size of our stage and draw the stage into it. Then we create the encoder and call encode() to put the jpg data into a ByteArray. Finally, we create a FileReference object and save the jpg data.

import com.adobe.images.JPGEncoder;

// Draw a circle on the staqe
graphics.beginFill(0xFFFF00);
graphics.drawCircle(160, 120, 100);
graphics.endFill();

stage.addEventListener(MouseEvent.CLICK, SaveJPG);

function SaveJPG(e:MouseEvent):void {
	// Store the image capture of stage in a BitmapData Object
	var qImageData:BitmapData = new BitmapData(320, 240);
	qImageData.draw(stage);
	
	// Set the encoding to high-quality
	var qEncoder:JPGEncoder = new JPGEncoder(100);
	var qBytes:ByteArray = qEncoder.encode(qImageData);
	
	var qFile:FileReference = new FileReference();
	qFile.save(qBytes, "YellowCircle.jpg");
}

Categories

Recent Posts