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.
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))
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?
Posted by: Mike | September 18, 2007 12:12 AM
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
Posted by: Jan Erik Paulsen | September 19, 2007 09:34 PM