marcus welz

HTML5 Map Tile test

Posted on September 25, 2010
This entry is part 4 of 7 in the series HTML5 and Erlang Game Development

My next thing was trying to build a simple tile-based terrain. I don't really do graphics, so I borrowed tiles from Zelda. RPGmaker related sites have a ton of tile sets. Some more usable than others.

These tiles are 16×16. I wanted something with dimensions of power-of-two. Just in case this thing escalates into a native client or, more likely, using WebGL. The very first thing is just having a bunch of tags arranged as map tiles.

There isn't all that much going on here. A bit of CSS to define the map tiles along with a snippet of JavaScript to just render a bunch of div tags with random map tiles.

I used CSS to build a bunch of classes, one for each tile in the tileset to minimize the amount of specifications that were needed in the div tags' style attribute. The only thing that I wanted in there was top, left, and (later) z-index. Everything else goes into the class.

I don't even bother testing in IE at the moment. I do the development in Firefox (due to Firebug and all), and test in Chrome (as a best-case scenario test, I guess).

Alright, so rendering a static map is neither hard nor exciting. Having the ability to scroll the thing around a bit would be nice. So that's next.

Print This Post Print This Post

HTML5 Scrollable Map test

Posted on September 25, 2010
This entry is part 5 of 7 in the series HTML5 and Erlang Game Development

So a few things have happened. I've made a larger, scrollable map. And it seemed I ran into some performance issues when it came time to scroll. Running fullscreen at 1680 x 1050, and having 16×16 pixel tiles covering the screen means nearly 7000 tiles. It's a lot, and it wasn't happy.

So my next thing was to try to build patches. On the client. Seems to work. The level is also no longer randomly generated. It's fed by a JavaScript array.

Print This Post Print This Post
Filed under: Uncategorized 2 Comments

HTML5 - Canvas Clickmap Test

Posted on September 18, 2010
This entry is part 3 of 7 in the series HTML5 and Erlang Game Development

So, one of the prototypes was to test using canvas to build a clickmap that detects whether a mouse click occurred on a visible pixel, rather than a transparent part of the image. It's one of the techniques presented in the Building a game engine with jQuery that was used in the Google Tech Talk.

I looked at the slides for the code (it's on slide #50). Simple stuff, it needed some tweaks though. The idea is that if the pixel is transparent, the click shouldn't be registered as such. Essentially it means extracting the alpha channel from the image data, storing it in an array and using it to scan for click hits.

And this is pretty much the first step it took for me to get a taste of what's ahead. I'm no stranger to game development, the web, JavaScript, nor the canvas tag, but I was intrigued and curious.

The embedded page on the right with the character sprites (borrowed from Secret Of Mana) is the clickmap test. Try it yourself. Only clicks on colored pixels should register and result in a JavaScript alert.

The next thing I was wondering about is how they'd handle overlapping images, and detecting which one was clicked. The first thought was DOM event bubbling, because the tech talks mentioned heavy use of delegations, but that makes no sense since the various sprites are siblings, and not arranged in any kind of hierarchical way.

The obvious answer is to quickly iterate over all the sprites (maybe optimize with quadtree), do collision check with the mouse click via the clickmap, and give precedence to the top-most element.

So now I need a playground where I can put these sprites. The next experiment will be something map related, how hard can it be…

Print This Post Print This Post

MMOFPS APB closes its doors

Posted on September 18, 2010

Too bad. It's barely been three months. Apparently APB was one big gamble. Then again, most new games are. In terms of technology, the game was pretty neat. Although it did get rather repetitive. My guess is that some company will pick up the assets, and hopefully re-use some of the tech developed for APB.

The vehicle customizations in particular were impressive. Instead of a very limited selection, or having to support a ton of custom textures they opted for the ability to have lots of decals and text layered on top of clothing and vehicles. It's almost a light version of Photoshop. Instead of transmitting large custom textures, the game could get away with storing customizations "simply" as a few parameters, and let the client do the heavy lifting of reconstructing the exact texture.

I customized my starter vehicle as a mash-up of FedEx and UPS. Figured I'd take a screenshot before all of this becomes inaccessible.

Print This Post Print This Post
Filed under: Gaming No Comments

Displaying Stacktraces in PHP

Posted on September 15, 2010

Stack Trace

During development stuff breaks. And when that happens, it's not always clear what exactly when wrong. Luckily stack traces help narrow things down, by showing the execution path that lead up to the unfortunate event.

Still, unless you're intimately familiar with the code base, you need to sift through the files to understand what exactly was called on that particular line. To help out with doing this quickly during development of a Zend Framework based application, I wrote a view helper that would format and show a section of code for each line. The resulting stack trace is then easy to follow.

Of course, this is something that should only be used during development as exposing source code anywhere near a production environment isn't recommended.

I've found that it helps me quickly see what actually went wrong. And if necessary, it could be augmented to also display any arguments that were passed along for an even better overview.

<?php

/**
 *
 * Pretty print a stack trace
 *
 * Didn't put too much effort into this. After all, running this on a production
 * site isn't really recommended.
 *
 * @author Marcus Welz
 *
 */
class Helper_StackTrace extends Zend_View_Helper_Abstract
{

    /**
     * Retrieve the relevant portion of the PHP source file with syntax highlighting
     *
     * @param string    $fileName   The full path and filename to the source file
     * @param int       $lineNumber The line number which to highlight
     * @param int       $showLines  The number of surrounding lines to include as well
     */
    protected function _highlightSource($fileName, $lineNumber, $showLines)
    {
        $lines = file_get_contents($fileName);
        $lines = highlight_string($lines, true);
        $lines = explode("<br />", $lines);

        $offset = max(0, $lineNumber - ceil($showLines / 2));

        $lines = array_slice($lines, $offset, $showLines);

        $html = '';
        foreach ($lines as $line) {
            $offset++;
            $line = '<em class="lineno">' . sprintf('%4d', $offset) . ' </em>' . $line . '<br/>';
            if ($offset == $lineNumber) {
                $html .= '<div style="background: #ffc">' . $line . '</div>';
            } else {
                $html .= $line;
            }
        }

        return $html;
    }

    /**
     *
     * Print the stack Trace
     *
     * @param Exception $exception Any kind of exception
     * @param int       $showLines Number of surrounding lines to display (optional; defaults to 10)
     */
    public function stackTrace($exception, $showLines = 10)
    {
        $html  = '<style type="text/css">'
               . '.stacktrace p { margin: 0; padding: 0; }'
               . '.source { border: 1px solid #000; overflow: auto; background: #fff;'
               . ' font-family: monospace; font-size: 12px; margin: 0 0 25px 0 }'
               . '.lineno { color: #333; }'
               . '</style>'
               . '<div class="stacktrace">'
               . '<p>File: ' . $exception->getFile() . ' Line: ' . $exception->getLine() . '</p>'
               . '<div class="source">'
               . $this->_highlightSource($exception->getFile(), $exception->getLine(), $showLines)
               . '</div>';
        foreach ($exception->getTrace() as $trace) {
            $html .= '<p>File: ' . $trace['file'] . ' Line: ' . $trace['line'] . '</p>'
                   . '<div class="source">'
                   . $this->_highlightSource($trace['file'], $trace['line'], 5)
                   . '</div>';
        }
        $html .= '</div>';
        return $html;
    }
}
Print This Post Print This Post