« Colorspace 1.5, Layout 3.2, FX 3.2 and Darkstar 20070905 | Main | Using Quicktime to display CMYK images »

Color masking and sprite tiles

Wow.. written by a high school senior. The mask and sprite code is really cool. So I made a Javascript “mashup” in Darkstar FX.

One thing that is strange. My color picker (Colorspace) reports that the green in the Mario tile is #008500 in Firefox but #007300 when I paint the same image in Java 2D or open the file in Photoshop.

mario2.png

mario_fx.png

mask.js
importPackage(Packages.java.io)
importPackage(Packages.java.awt)
importPackage(Packages.java.awt.image)
importPackage(Packages.java.awt.geom)
importPackage(Packages.javax.imageio)

function loadImage(ref) {
    var bimg;
    try {
        // read images from desktop folder
        bimg = ImageIO.read(new File(System.getProperty("user.home") +File.separator+"Desktop"+File.separator+ ref));
        //context.info(bimg)
    }
    catch(e) {
        e.printStackTrace();
    }
    return bimg;
   }
function makeColorTransparent(ref, color) { 
    image = loadImage(ref); 
    dimg = new BufferedImage(image.getWidth(), image.getHeight(), BufferedImage.TYPE_INT_ARGB); 
    g = dimg.createGraphics(); 
    g.setComposite(AlphaComposite.Src); 
    g.drawImage(image, null, 0, 0); 
    g.dispose(); 
    for(i = 0; i < dimg.getHeight(); i++) { 
        for(j = 0; j < dimg.getWidth(); j++) { 
            if(dimg.getRGB(j, i) == color.getRGB()) { 
                dimg.setRGB(j, i, 0x8F1C1C); 
            }
        }
    }
    return dimg;
}

function splitImage(img, cols, rows) {
   var w = img.getWidth()/cols;
   var h = img.getHeight()/rows;
   var num = 0;
   imgs = new Array();
   for(y = 0; y < rows; y++) {
       for(x = 0; x < cols; x++) {
           imgs[num] = new BufferedImage(w, h, img.getType());
           g = imgs[num].createGraphics();
           g.drawImage(img, 0, 0, w, h, w*x, h*y, w*x+w, h*y+h, null);
           g.dispose();
           num++;
       }
   }
   return imgs;
}
var tiles
var r = {
    initialize: function(ds, fg, bg) {
        var sprite = makeColorTransparent("mario2.png", new Color(0x007300)) // firefox and java2d have different color values?
        tiles = splitImage(sprite, 6, 4)
    },
   render : function(g, size) {
       var xoffset = 0, yoffset = 0
       for(i in tiles) {
           if(i % 8 == 0) {
           if(i != 0)
           yoffset += 1
           xoffset = 0
           //context.info(i + ", "+yoffset)
        }
        g.drawImage(
            tiles[i],
            tiles[i].getWidth()*xoffset,
            tiles[i].getHeight()*yoffset,
            tiles[i].getWidth(),
            tiles[i].getHeight(),
            null
        )
        xoffset++
        //g.drawString("test", 10*i, 20)
        }
    }
}
context.getDarkstar().setRenderer(new D2DAdapter(r))


Bookmark and Share

TrackBack

TrackBack URL for this entry:
http://www.installer.teppefall.com/movabletype/mt-tb.cgi/154

Comments

Video games used to be made using color keying in the 80's onwards. Been there done that.
But now we have the alpha channel and graphics programs like The Gimp that lets to paint the sprites.

Also, not all sprites might be the same size, so you need a sprite editor. Also been there done that, 20 years ago?

I like retro stuff. It is much easier to understand than modern programming API's wrapped around hardware specific assembly code.

Apollo 11 is even older than sprites. Now you go create a better version of the guidance system.

http://www.ddj.com/184404139

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

This website is all about alpha and beta software

Download non-beta software here