Archive for the ‘canvas’ tag

Accessing HTML5 CANVAS Pixels

without comments

Let’s fill a HTML5 Canvas row-by-row to a checker pattern, directly setting the pixels rather than using fillRect():

$(document).ready(function () {
    // Get the canvas element with id="canvas" using JQuery
    $("#canvas").each(function () {
        var ctx = this.getContext('2d');
 
        for (var y = 0; y < this.height; ++y) {
            var rowData = ctx.createImageData(this.width, 1);
            var pixels = rowData.data;
            for (var x = 0; x < this.width; ++x) {
                var c;
                if ((x + y) % 2 == 0)
                    c = [127, 127, 127];
                else
                    c = [255, 0, 0];
 
                pixels[x * 4 + 0] = c[0];
                pixels[x * 4 + 1] = c[1];
                pixels[x * 4 + 2] = c[2];
                pixels[x * 4 + 3] = 255;
            }
            ctx.putImageData(rowData, 0, y);
        }
    });
});

Written by arthur

December 18th, 2011 at 7:55 pm

A Complete Game

without comments

Progress update…

A Complete Game

Over the last several months, I’ve been working primarily with web-related technologies (basic HTML, CSS, PHP, some CMS customization, etc.). In my spare time, I’ve been playing around with the more graphical / game-aspects HTML5. I’ve written a couple “draft” quality JQuery plug-ins: one for basic image effects (saturation effects, etc.), a seamless image tiler / previewer, a seamless image generator, a fire effect, and one more thing: a complete game.

I’m interested in graphics, engine architecture, and games, but often find myself exploring a specific technology rather than trying to create something “complete.” In other words, I tend to take a deep and narrow approach to coding rather than a broad, shallow approach.

My goal this time is to produce a small, maybe-not-that-impressive, but complete game. I realize I’ve never really done this before…

Gravity Tide

I’ve decided to code name it Gravity Tide. So far:

  • 2D Graphics via an HTML Canvas element
  • Music via the HTML5 Audio element (and via opengameart.org since I’m not a musician!)
  • A main menu and credits screen
  • 1 Level currently…

Once I add a splashscreen, load/save functionality, a couple more levels, a few power-ups, a few new enemies, end-of-level “bosses”, and a generic minimal game story, I think it – again, may not be epic quality – but it will be a complete game.

Written by arthur

December 16th, 2011 at 10:43 am

Seamless Images

without comments

Continuing with the HTML5 Canvas experiments…

I put together a draft tool for procedurally generating seamless images. It’s pretty limited at this point, but it does serve as a proof-of-concept. See later in the post for where I’d like to go with this.

The above image is seamless.

Algorithm

The crux of the algorithm is this:

  • Create a canvas
  • Add helper function that repeats each canvas draw call 9 times: repeating the draw with an offset to each of the 8 directly neighboring “tiles” – thus handling overlap in draw calls across the borders
  • Add simple code to allow the generated canvas image to be saved as a PNG
  • Reuse the seamless image viewer I wrote the other day to preview the image in tiled form

Interesting Stuff

Future Directions

The collection of spot-based tiles has only a limited range of value – especially given that the example page only exposes a subset of the possible parameters. Again, it’s a proof-of-concept for a more useful implementation.

Dirt, Rock, & Grass. I’d like to use the basic framework to procedurally generate some basic terrain textures. Namely because these have greater utility – i.e. there’s a lot larger audience that’d want to use freely available seamless terrain textures.

Make it pluggable. It’d like to separate the framework from the particular tile being generated. I.e. make dirt, rock, grass, spot-pattern, etc. all different plug-ins that automatically generate a UI, etc. yet utilize common code.

Better automatic UI generation. For a tool like this, the UI for controlling the parameters should be a lot simpler to auto-generate without the common boilerplate code…

General polish. There are some basic UI issues with the current demo. For example. 512×512 is a decent size to save the image as when done, but it certainly would be a lot nicer to get the base image and the tiled preview all fitting one screen (at a reasonably normal resolution).

Written by arthur

November 29th, 2011 at 10:10 am

HTML5 2D Map Viewer

without comments

I wrote a quick little 2D map viewer using an HTML5 canvas. It’s not much to look at: it draws a 1000×1000 solid color map with 200 sprites randomly on it and uses simple WSAD keyboard movement to scroll around the map.

What’s Worth Noting…

  • How incredibly easy adding UI is when you’re coding something in HTML (and with JQuery)
  • How easy adding plug-ins can be when using a dynamic language like Javascript

I wanted to confirm my clipping code was working: so I added code to shrink the visible rect by 50% and draw entities inside the shrunk rect normally and draw those outside the draw (but still in the visible rect) as partly opaque red rectangles. (See screenshot below).

That’s not anything tough or interesting. However, I realized, given that I was using javascript where functions are objects, I could easily make this whole clip debugging functionality a “plug-in” that doesn’t touch the core functionality. By chaining some code to a core “pre-render” function and to the entity draw function, I could inject the logic without really uglifying the core engine.

And then since this is all HTML, adding a quick slider bar to control the debugging clip rectangle size took about 2 minutes.

Of course, this isn’t going to be foolproof (as suddenly every core function is potentially not doing what is expected) and it isn’t going to be fast (Javascript is slow enough without adding indirections like this that no doubt hurt the chances the browser can optimize the JS), BUT if the goal is to prototype ideas…well then, this is wonderful.

Screenshot

LxWeb

Admittedly, I’m a bit daunted by the notion of moving my LxEngine work to WebGL and reworking all the C++ code I’ve written. However, the idea of working on a basic 2D engine to prototype on the web – well, that sounds compelling without being as utterly daunting. The dynamic nature of JS and HTML will no doubt lend me more good ideas for the more production-oriented C++ coding.

Written by arthur

November 28th, 2011 at 9:22 pm

JQuery Seamless Image Preview

with one comment

I wrote a brief JQuery plug-in which transforms a normal <IMG> element into a dynamic, tiled version of the image with a slider for controlling the size of the image tiles.

Purpose

The purpose would be to preview quickly seamless textures. I wrote this mostly to get a bit more experience with HTML5 and JQuery.

I also like the idea of improving this enough that I could a site like OpenGameArt.org could use it for images tagged with ‘seamless’ – but we’ll see about that: it needs more polish before I would feel right contacting anyone over there.

Note: I’ve called this “version 0.2.0″ since this is really draft quality work: I haven’t written the docs (though the normal JQuery plug-in convention of $("#myimage").seamlessImage() will get you started pretty quickly), I haven’t done any unit testing (i.e. different layout scenarios, different browsers), there are some basic features that should probably be added, etc.

The absolutely minimal documentation is located here.

Demonstration

The demonstration below of the plug-in uses the Cobblestone.png from OpenGameArt.org. (The image was created by Saroman of the Wurm Online project).

Use the slider below the image to use the plug-in!




Implementation

  • Uses the HTML5 “range” control to implement the slider
  • The majority of the setup occurs on the “onLoad” callback of the Javascript Image object: this ensures the width and height are accurate during the setup. Otherwise, due to timing issues, the setup may occur while the image is still being loaded by the browser so the height/width will not be accurate and corrupt the setup.
  • The JQuery $.data method is used to store the internal state of the plug-in

Conclusion

Anyway, good to get something demonstrable and graphical back up on the blog!

Written by arthur

November 27th, 2011 at 2:17 pm