Author Topic: Making explosion/animated sprite  (Read 6683 times)

Offline 32kda

  • byte
  • *
  • Posts: 10
    • View Profile
Making explosion/animated sprite
« on: June 22, 2012, 08:47:18 am »
Hi guys,
I need to create explosion effect, AFAIK it's made with animated sprite. Please tell, how this can be done with JPCT.
Found this topic:

http://www.jpct.net/forum2/index.php/topic,1406.0.html

but unable to get sources linked from it.

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: Making explosion/animated sprite
« Reply #1 on: June 22, 2012, 10:15:27 am »
You can create a texture that contains for example 16 (4*4) explosion textures, create quad with texture coordinates (0,0)-(0.25,0.25) and modify the texture matrix at runtime to "jump" to the proper explosion image for the given frame.

Offline MrYogi

  • byte
  • *
  • Posts: 21
    • View Profile
Re: Making explosion/animated sprite
« Reply #2 on: June 22, 2012, 03:17:14 pm »
You can create a texture that contains for example 16 (4*4) explosion textures, create quad with texture coordinates (0,0)-(0.25,0.25) and modify the texture matrix at runtime to "jump" to the proper explosion image for the given frame.
hi EgonOlsen,
i,m also trying the same thing ,as i'm new to Jpct :-\ so could you plz elaborate your ans.i have image with explosion texture.but how to use texture coordinate puzzling me.
thanks for your help 
« Last Edit: June 22, 2012, 03:23:09 pm by MrYogi »

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: Making explosion/animated sprite
« Reply #3 on: June 23, 2012, 01:53:09 pm »
One explosion texture doesn't help much. You need a texture which contains the different stages of the explosion that you want to animate. For this example, i assume that you have one that contains 16 different explosion stages, i.e. 4*4 little explosions combined in one texture. You then create a simple plane and texture it using your texture. You can use one created by the Primitives class. By default, you should now see all 16 explosion mapped to the plane. To just show a single image, create a texture matrix like so:

Code: [Select]
Matrix texMat=new Matrix();
texMat.scalarMul(0.25f);
texMat.translate(0.25f*(float)x, 0.25f*(float)y, 0);

Where x[0..3] and y[0..3] is the position of the explosion you want to show in your combined texture. Add this texture matrix to the plane (setTextureMatrix()) and modify x and y over time to animate the explosion.

Offline 32kda

  • byte
  • *
  • Posts: 10
    • View Profile
Re: Making explosion/animated sprite
« Reply #4 on: June 25, 2012, 03:11:25 pm »
Thanks alot Egon, this kind of animation works fine.

One more Q: how to make this texture transparent?
Tried
Code: [Select]

texture = new Texture(context.getAssets().open("ani4.png"),true);
TextureManager.getInstance().addTexture("explode", texture);
With png file containing alpha channel & black-backgrounded png file. Can't get transparent texture(

Offline MrYogi

  • byte
  • *
  • Posts: 21
    • View Profile
Re: Making explosion/animated sprite
« Reply #5 on: June 25, 2012, 03:15:19 pm »
hi, by using the way you suggested,the TextureMatrix is setting only last row as sprite,only after using some delay so that the sprite can show ,because without that it is so fast for eye.
my code for TextureMatrix in onDrawFrame is :
Code: [Select]
com.threed.jpct.Matrix texMat=new com.threed.jpct.Matrix();
texMat.scalarMul(0.25f);

if(sprite)
{
float x,y=0;
plane.setVisibility(true);
for (x=0;x<4;x++)
{

for(y=0;y<4;y++)
{
frameCount++;
if(frameCount==200)
{
frameCount=0;

texMat.translate(0.25f*(float)x, 0.25f*(float)y, 0);
plane.setTextureMatrix(texMat);

}

}

}
}

Offline MrYogi

  • byte
  • *
  • Posts: 21
    • View Profile
Re: Making explosion/animated sprite
« Reply #6 on: June 25, 2012, 03:18:25 pm »
Thanks alot Egon, this kind of animation works fine.

One more Q: how to make this texture transparent?
Tried
Code: [Select]

texture = new Texture(context.getAssets().open("ani4.png"),true);
TextureManager.getInstance().addTexture("explode", texture);
With png file containing alpha channel & black-backgrounded png file. Can't get transparent texture(
use simple transparent background png image.

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: Making explosion/animated sprite
« Reply #7 on: June 25, 2012, 08:03:03 pm »
With png file containing alpha channel & black-backgrounded png file. Can't get transparent texture(
Use setTransparency(0...x) on the the object that uses the texture.

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: Making explosion/animated sprite
« Reply #8 on: June 25, 2012, 08:07:26 pm »
hi, by using the way you suggested,the TextureMatrix is setting only last row as sprite,only after using some delay so that the sprite can show ,because without that it is so fast for eye.
my code for TextureMatrix in onDrawFrame is :
Is this a question? Your code looks a bit strange to me...i would rather initialize x and y to y and increment them in onDrawFrame based on the time elapsed since the explosion. Your code counts x and y from 0...3 every time and only sets one state based on the value of frameCount. If this works, then it's only by accident and it's inefficient and overly complex.

Offline 32kda

  • byte
  • *
  • Posts: 10
    • View Profile
Re: Making explosion/animated sprite
« Reply #9 on: June 27, 2012, 11:10:35 am »
Thanks alot, now it works
My code looks as following:
Code: [Select]
@Override
public void handleTimer(int time) {
if (needsToRemove())
return;
sumTime += time;
if (sumTime >= PERIOD) {
sumTime = 0;
x++;
if (x == 16) {
remove = true;
return;
}
texMat.set(3,0,0); //reset x translation
texMat.set(3,1,0); //reset y translation
texMat.translate(0.25f * x % 4, 0.25f * (x / 4),0); //set new translation
}
}

One more Q - sprite appears upside down for me, how can I mirror or rotate 180 deg?