Game Development Reference
In-Depth Information
}
if ( placed == false )
{
sorted_table.push( entry );
}
}
// Add the sorted list elements to the table.
for ( var item in sorted_table )
{
var entry = sorted_table[ item ];
var row = document.createElement("tr");
row.className = (item % 2 == 0) ? "even" : "odd";
var column_data = document.createElement("td");
column_data.appendChild(document.createTextNode( entry.label ));
row.appendChild( column_data );
column_data = document.createElement("td");
column_data.appendChild(document.createTextNode(entry.value));
row.appendChild( column_data );
report_table.appendChild( row );
update_report();
}
}
request.send(null);
}, 2000 );
Visualizing Data
Using the canvas element, you are able to visually represent data to help make information within the log more
accessible. Being able to graphically represent logged data is one of the strengths of generated HTML logs. You now
have the ability to extrapolate data from multiple sources to create visualizations tailored to the interests of the user
viewing the report.
For example, when rendering your navigation mesh, you can easily add the option to highlight nodes where a
character has spent time idling, or died. These can be color-coded to help highlight areas where characters may be
getting trapped, or where there may be difficulty spikes.
As mentioned previously, canvas is one of the most powerful HTML elements. However, if these logs are being
used internally, then you may take advantage of technologies that may not be implemented in every browser, such as
WebGL.
9
WebGL is based on OpenGL ES 2.0
10
and so offers many opportunities to render complex 3D data.
Other Third-Party JavaScript Libraries
By using standard web technologies, you can leverage the vast wealth of free and open source software to enrich your
logs. While delving into each of these is beyond the scope of this chapter, I will present a short list of useful libraries to
investigate.
10
The Khronos Group. “OpenGL ES 2_X - The Standard for Embedded Accelerated 3D Graphics.”
www.khronos.org/opengles/2_X/
.
