... please wait
Google Chrome 54 introduced the ability to take a full screenshot of a webpage in April 2017. This by itself is pretty cool. But, I happened to be working on some game code and wanted to build a simple sprite sheet. I found a program, but it appears that sprite sheets are normally built to fit the content on to the sheet as best as possible. That makes sense, but I wanted something where the location of the images was organized into columns. This way I could easily calculate the frames for animation. So I wrote my own little program to automate the process. The row and column structure are baked into the filename constrictions.
The filename should be a number greater than 10000. This allows the row and column to converge. This allows a large number of frames to be placed into a matrix.
<html>
<head>
<style>
/**
* make sure that NOTHING has any padding or margin
* */
* {
margin: 0;
padding: 0;
border-spacing: 0;
}
</style>
</head>
<body>
<table>
<?php
/**
* Simple single image to spritesheet converter
*
*
* image filename format:
* [row]000[column].mime
*
* example(s):
* 100001.bmp
* 100002.bmp
* ...
* 200010.bmp
* 200011.bmp
* etc...
* */
// @param string virtual path to images
$path = '';
// @param integer row number
$rows = 8;
// @param integer column number
$columns = 46;
// @param string MIME type : [ *.jpg, *.png, *.bmp, *.gif ]
$mime = "bmp";
// loop through the rows
for($y = 1; $y<=$rows;$y++) {
echo '<tr>';
// loop through the columns
for($x=0;$x<$columns;$x++) {
// build the file name for this frame
$img = $y * 10000 + $x.'.'.$mime;
// write an image tag
echo '<td><img src="'.$img.'" /></td>';
}
echo '</tr>';
}
?>
</table>
</body>
</html>
