Printable View
I want to make bitmaps explode, but not by creating separate explosion graphics, instead I want to use the original picture and make it blow up into pieces, like this:
http://www.tonypa.pri.ee/test/explode.html
What you think? Anyone done something like that or has ideas how to improve it?
You could try some AS3 particle effects like these:
http://lab.andre-michelle.com/bitmap-particles
http://lab.andre-michelle.com/bitmap-particles-2
http://lab.andre-michelle.com/particle-explosion
maybe improve it using the Voronoi diagram?, also known as the celluar filter in photoshop or as shader in 3dsmax
like this:
http://www.cs.utexas.edu/~amenta/pow...ix/voronoi.gif
some links I found with google:
http://www.donhavey.com/blog/tutoria...onoi-diagrams/
http://www.righto.com/fractals/vor.html
but I am sure you´ll find more as you search yourself
but that demo is already pretty cool, perhaps add some glim, sparks or noise effects (wich can be unique sprites again) so that it looks more like breaking.
Also perhaps add random dirt maps, a common method in the 3d industry is using so called cavity (convex/concarve) or ambient occlusion maps to fake dirt and altering of objects. If you apply that on 2d it could for instance mean a slight inside glow of brown or black with blending mode set to multiply.
another cool idea could be to clamp chunks together instead of exploding thus imploded shifting into each other. Like hitting metal and watching how it gets more and more compact.
If you then use tesseltation of triangles it could look really great
In your example link tony, how is it done ?
In my latest games, I've maybe made something you're looking for. I have a movie clip, I split it into several piece of bitmaps and I explode the bitmaps.
I did that some time ago for my TRPG. I think that's about what you're looking for, you just have to make a variation of it that fits your needs :D
http://fil.razorback.free.fr/tmp/FK/damageTest.html
http://fil.razorback.free.fr/tmp/FK/damageTest.fla
I know that this is easier said than done, but I think some rotation on the little pieces would make it look a lot nicer. How exactly you would accomplish this, I don't know. Obviously you could just "draw" them rotated, but that's going to slow things down. Is it possible that you could prerender rotated shrapnel shaped pieces, then do a bitmapfill on to them? I wonder if that would be faster.
I have rotating shrapnel in this demo but it's all solid colored. Maybe you could just approximate the original bitmap by drawing small solid colored shrapnel of appropriate color.
EDIT: forgot to link the demo I mentioned - http://www.wesisgood.com/follow/index.html
Or you could just have each piece as a separate bitmap and just rotate them in the same way you would rotate anything else. Probably a lot more efficient than all of the other crazy things I suggested.
Did I mention it should of course run fast? Since its only for the eye-candy, most of the power is needed elsewhere. There will be many other elements flying around same time.
renderhjs, that looks interesting but too complicated.
I am simply using 1 bitmap and copyPixel to put pieces there, so cant handle rotations. After some time it breaks the bitmap into 4 smaller bitmaps.
you could do some pre-rendering if you wanted to save cpu. :)
Yeah, I love pre-rendering. If you're not exploding anything that's being created or deformed dynamically, I don't see what it would hurt. I'm only suggesting rotation because to me without rotation it looks more like it is being sliced up methodically than being exploded.
EDIT: It looks like you have changed it a bit since I last looked. Now things are exploding outward instead of completely randomly. That's actually something I considered suggesting, and I think it definitely looks better now.
Tony, I actually think that you should stick to what you've got, if it's fast enough! I think it looks great as it is :)
That looks better now.
I would add some kind of particle trail to those pieces, otherwise it looks like a shattering instead of an explosion.
Thanks, guys :)
replaced it back to simple example for now
That is very fast for me 30% of CPU on the game field.
Hmm.. I wouldn't mind some of that for one of my games. any chance of some open-source action there Tony?
Sure EvilKris, here is what i used:
Setting it up
Begin explosionPHP Code://the array to hold all the pieces
var explArr:Array = new Array();
//bitmap for explosion, size of the screen
var explBmp:Bitmap = new Bitmap(new BitmapData(400, 400, true, 0));
this.addChild (explBmp);
//example object to be blown up
var ob:Object = new Object();
//use bitmap with linkage name ship_bmd
ob.bmp = new Bitmap(new ship_bmd(0, 0));
ob.bmp.x = 200;
ob.bmp.y = 200;
this.addChild (ob.bmp);
//listeners
this.stage.addEventListener (MouseEvent.CLICK, myClick, false, 0, true);
this.addEventListener (Event.ENTER_FRAME, doExplode, false, 0, true);
//user clicked, explode
function myClick (ev:MouseEvent):void {
//hide the original bitmap
if(explArr.length == 0){
//only hide it if the explosion was not already running
this.removeChild(ob.bmp);
}
startExplode (ob.bmp);
}
Run enterframe eventPHP Code://starts the explosion with bitmap b
function startExplode (b:Bitmap):void {
//clear the array, dont clear if you want to have multiple explosions
explArr = new Array();
//first object to be inserted into array, its full bitmap
var curOb:Object = new Object();
//get bitmapdata
curOb.bmd = b.bitmapData;
//position
curOb.x = b.x;
curOb.y = b.y;
//movement
curOb.xd = 0;
curOb.yd = 0;
//lifetime
curOb.t = 0;
//put into array
explArr.push(curOb);
}
Breaking upPHP Code://runs explosion
function doExplode (e:Event):void {
//check if array is empty
if(explArr.length > 0){
//start manipulating the bitmap
explBmp.bitmapData.lock();
//clear the bitmap
explBmp.bitmapData.fillRect(new Rectangle(0, 0, 400, 400), 0);
//loop the array
for(var n:int = 0; n < explArr.length; n++){
//get first piece in the array
var curOb:Object = explArr.shift();
//move the piece, 4 is speed value
curOb.x += curOb.xd/4;
curOb.y += curOb.yd/4;
//copy this piece into main bitmap
var r:Rectangle = new Rectangle(0, 0, curOb.bmd.width, curOb.bmd.height);
explBmp.bitmapData.copyPixels(curOb.bmd, r, new Point(curOb.x, curOb.y));
//check if its time is up
if(curOb.t <= 0){
//break it up if its at least 3 pixels
//you could break up 2 pixels too but it wont change much
if(curOb.bmd.width > 2){
//create 4 new pieces
breakOb (curOb, 0, 0);
breakOb (curOb, 1, 0);
breakOb (curOb, 0, 1);
breakOb (curOb, 1, 1);
}
}else{
//reduce life
curOb.t--;
//its still alive, add back into array
explArr.push(curOb);
}
}
//array is empty
if(explArr.length == 0){
//clear the bitmap
explBmp.bitmapData.fillRect(new Rectangle(0, 0, 400, 400), 0);
//re-place object
this.addChild (ob.bmp);
ob.bmp.x = 40 + Math.random() * 320;
ob.bmp.y = 40 + Math.random() * 320;
}
//finished manipulating the bitmap
explBmp.bitmapData.unlock();
}
}
Notice that original bitmap should not be rotated, and it works better on the square images.PHP Code://creates smaller 1/4 piece of bitmap
function breakOb (curOb:Object, xd:Number, yd:Number):void {
var newOb:Object = new Object();
//half the size of old piece
var s:Number = curOb.bmd.width/2;
//create bitmapdata
newOb.bmd = new BitmapData(s, s, true, 0);
var r:Rectangle = new Rectangle(xd * s, yd * s, s, s);
//copy part of old bitmap into new piece
newOb.bmd.copyPixels(curOb.bmd, r, new Point(0, 0));
//check for empty bitmap
r = newOb.bmd.getColorBoundsRect (0xFF000000, 0x00000000, false);
//find if it contains any non-transparent pixels
if(r.width > 1 || r.height > 1){
//place new piece
newOb.x = curOb.x + xd * s;
newOb.y = curOb.y + yd * s;
//check if this was first division from original bitmap image
if(curOb.xd == 0 && curOb.yd == 0){
//make it move apart from origin
var xm:Number = newOb.x - curOb.x - s/2;
var ym:Number = newOb.y - curOb.y - s/2;
//add some randomness
xm = xm + xm * (Math.random() * 2 - 1) * 1;
ym = ym + ym * (Math.random() * 2 - 1) * 1;
}else{
//completely random movement
xm = Math.random() - 0.5;
ym = Math.random() - 0.5;
}
//movement speed depends on the size, change 30 / (s * s) for other results
var tm:Number = Math.sqrt(xm * xm + ym * ym) * (30 / (s * s));
//save movement, getting half of the movement from old piece
newOb.xd = xm/tm + curOb.xd/2;
newOb.yd = ym/tm + curOb.yd/2;
//lifetime, play with values here for different results
newOb.t = 10 + Math.random() * 30 - s * 1.5;
//add to array
explArr.push(newOb);
}
}
Thanks for sharing, Tony! Your example looks great! Runs great on my trusty old laptop (1,66GHz, 2Gb RAM). You could add an fps counter if you want more solid stats! Doesn't seem to slow down though, and the look and feel is awesome! :D
You're the man Tony. You should post things like that on your site for posterity. If you don't I might plop it on mine, with full credit given to you of course. Just good to have snippets like that put somewhere they can be read, instead of rotting away on some internet forum.
Feel free to use and modify it any way you like :)
I've just played a game with wonderful explosions, the demo animation can give you interesting ideas.
http://www.alphabounce.com/
I know this thread is ancient, but I'm looking to do something somewhat similar and was wondering if anyone has seen anything like this:
- 1 - copy a movieclip on stage into a bitmap and hide it
- 2 - slice it up into 2x2 blocks (like this)
- 3 - send the parts flying off in different directions based on their relation to the center of the original image - determine angle of new part from center of original image then calculate starting x and y speeds (like this with rotation removed)
- 4 - apply gravity
- 5 - BOOM!
Before I struggle to marry all of these techniques together, I figured I'd ask if anyone out there has already done this :)
Something like this (with fading instead of gravity) would also work. Unfortunately, this example breaks an image up into single pixels, not larger blocks.
Woohoo! Got it working 2 different ways. Hopefully someone out there will find this useful!
Code:import flash.display.BitmapData;
import flash.geom.Matrix;
// ADD A MOVIECLIP WITH THE INSTANCE NAME 'IMAGE' ONTO THE STAGE AND ENJOY!
// either draw the pieces into a canvas or just move them on the stage (less efficient but might be good enough for some cases)
var useCanvas:Boolean = true;
// size of each bitmap block
var size:uint = 2;
// array to reference all the parts and speeds
var pieces:Array = new Array();
// y coordinate where pieces should disappear
var yMax:uint = 400;
// copy and hide original movieclip
var imageData:BitmapData = new BitmapData(image.width, image.height);
imageData.draw(image);
image.visible = false;
// if just adding bitmaps to the stage
if (!useCanvas){
// make holder for bitmaps and place at position of original movieclip
var bitmapsHolder:Sprite = new Sprite();
bitmapsHolder.x = image.x;
bitmapsHolder.y = image.y;
addChild(bitmapsHolder);
// if drawing into a canvas
} else {
var canvasWidth:uint = 550;
var canvasHeight:uint = 400;
var canvas:Bitmap = new Bitmap(new BitmapData(canvasWidth, canvasHeight, true, 0));
addChild(canvas);
}
// slice up clone of movieclip
for (var i:int = 0; i < image.width; i += size) {
for (var j:int = 0; j < image.height; j += size) {
var bitmapData:BitmapData = new BitmapData(size, size, true, 0x00000000);
bitmapData.copyPixels(imageData, new Rectangle(i, j, size, size), new Point(0, 0));
var bitmap:Bitmap = new Bitmap(bitmapData);
var obj:Object = new Object();
obj.x = i;
obj.y = j;
obj.xSpeed = 5 - Math.round(Math.random() * 10);
obj.ySpeed = 5 - Math.round(Math.random() * 10);
// if not using a canvas
if (!useCanvas){
// save bitmap to object
obj.bitmap = bitmap;
pieces.push(obj);
// add bitmaps to stage
bitmap.x = i;
bitmap.y = j;
bitmapsHolder.addChild(bitmap);
// if using a canvas
} else {
// save bitmapdata to object
obj.bitmapData = bitmapData;
// adjust coordinates based on original image position (based on canvas at 0,0)
obj.x += image.x;
obj.y += image.y;
pieces.push(obj);
// copy bitmapdata to canvas
canvas.bitmapData.copyPixels(obj.bitmapData, new Rectangle(0, 0, size, size), new Point(obj.x, obj.y));
}
}
}
trace("pieces:", pieces.length);
// animate
if (!useCanvas){
addEventListener(Event.ENTER_FRAME, animateOnStage);
} else {
addEventListener(Event.ENTER_FRAME, animateOnCanvas);
}
function animateOnStage(event:Event) {
// move the pieces
for (var i:int = pieces.length - 1; i > -1; i--){
var obj = pieces[i];
obj.bitmap.x += obj.xSpeed;
obj.ySpeed += .5;//gravity
obj.bitmap.y += obj.ySpeed;
if (obj.bitmap.y > yMax){
pieces.splice(i,1);
}
}
// stop animation when last piece drops off screen
if (!pieces.length){
trace("DONE!");
removeEventListener(Event.ENTER_FRAME, animateOnStage);
}
}
function animateOnCanvas(event:Event) {
//clear the bitmap
canvas.bitmapData.fillRect(new Rectangle(0, 0, canvasWidth, canvasHeight), 0);
// move the pieces
for (var i:int = pieces.length - 1; i > -1; i--){
var obj = pieces[i];
obj.x += obj.xSpeed;
obj.ySpeed += .5;//gravity
obj.y += obj.ySpeed;
canvas.bitmapData.copyPixels(obj.bitmapData, new Rectangle(0, 0, size, size), new Point(obj.x, obj.y));
if (obj.y > yMax){
pieces.splice(i,1);
}
}
// stop animation when last piece drops off screen
if (!pieces.length){
trace("DONE!");
removeEventListener(Event.ENTER_FRAME, animateOnCanvas);
}
}
stop();