Game Development Reference
In-Depth Information
IMG
The
IMG
tag allows you to embed images directly into your log. This capability is particularly useful when you want
to show statically generated graphical data from the game, such as a screenshot. This can be very useful during
automated runs of the game. If an area of the game contains an unacceptable drop in frame rate, then you can have
the game write out the frame buffer as an image file and add an IMG link to that file within the log.
CANVAS
This new tag provides you with a method to render graphical information in real time. You can use the canvas tag to
render bar graphs and other charts to help visualize information about your game. This tag is one of the most exciting
additions within the emerging HTML 5 standard.
2
With the ability to draw simple primitives, and by using JavaScript,
you are able to dynamically create images representing game data. For example, you can interpret data from the game,
such as a navigation mesh, and render it as a series of lines and shapes to show how it has been constructed, and to
show any broken links between nodes.
Improving Log Readability with CSS
You've seen how to easily construct an HTML file while your application is running. By itself, this tool will help to
organize your logged data, but with CSS,
3
you are able to drastically improve the readability and formatting of
the log.
CSS allows you to stylize and format your logs. This has some immediate benefits, such as improving table
readability by alternating row colors, highlighting problematic entries within a table, and generally structuring your
page into a more visually pleasing form. As a simple introduction to CSS, Listing 9-2 shows a simple extracted piece of
CSS script to style a sample HTML table.
Listing 9-2.
Simple CSS to Style a Table
<HTML>
<HEAD>
<!-- Simple style setup for odd and event table rows -->
<style type="text/css">
tr.odd { background-color:#CCCCCC }
tr.even { background-color:#EEEEEE }
tr.problem { background-color:#EE2020 }
table.report_log { margin-left: auto; margin-right: auto;
border-style:solid; border-width:1px;
border-color:#222222;
background-color:#222222}
</style>
</HEAD>
<BODY>
<!-- Now populate our table -->
<TABLE class = "report_log">
<tr class = "even"><td> 1st result </td></tr>
2
Berjon, Robin, Travis Leithead, Silvia Pfeiffer, Erika D. Navara, and Edward O'Connor. “The CANVAS element.” W3C.
