27 replies to this topic

[esco]

What's going on everyone. Well here I am again asking for help with yet another special effect in the engine. I swear, I will be soooooooooooooo happy when all of them are done. Coding attacks, monsters, even collisions I don't mind in the least. But these effects are going to give me a stroke at this rate.

Well I managed to create the effect that I wanted to using 2 primitives comprised of 8 triangles (each primitive is in a different object) and then putting a texture over each one. The bottom one is used for a gradient. The top one placed over this one (a separate object) is the mist. After hours of hard work I manged to get it looking exactly like what I wanted.

............ the problem is that as SOON as I put on a background, or changed the background color to anything but solid black my cool looking mist effect went from this:

to this:

The colors get all messed up and the outline that is around the topmost texture I was unable to see before, can easily be seen now. How can I fix this please?

Here is my GM file: http://www.mediafire...3e2jpbw6xs1v2fu

And here is the code for both draw statements:

//draw for bottom primitive (the gradient texture)
d3d_transform_set_identity()
d3d_transform_add_rotation_z(image_angle);
d3d_transform_add_scaling(1.6,1.45,0)
d3d_transform_add_translation(x,y,0);
d3d_primitive_begin_texture(pr_trianglelist, mist_gradient);
//triangle order: top left, top right, middle top left, middle top right,bottom middle left, bottom middle right. bottom left, bottom right
//triangle1:top, left, bottom
d3d_vertex_texture_color(20,8+warp_value,0,0.5,0,c_white,gradient_alpha);
d3d_vertex_texture_color(7+warp_value,5+warp_value,0,0,0,c_white,gradient_alpha);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
//triangle2:top, right, bottom
d3d_vertex_texture_color(20,8+warp_value,0,0.5,0,c_white,gradient_alpha);
d3d_vertex_texture_color(33+(warp_value*-1),5+warp_value,0,1,0,c_white,gradient_alpha);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
//triangle3:top left, bottom left, bottom right
d3d_vertex_texture_color(7+warp_value,5+warp_value,0,0,0,c_white,gradient_alpha);
d3d_vertex_texture_color(3+warp_value,30,0,0,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
//triangle4: top right, bottom right, bottom left
d3d_vertex_texture_color(33+(warp_value*-1),5+warp_value,0,1,0,c_white,gradient_alpha);
d3d_vertex_texture_color(37+(warp_value*-1),30,0,1,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
//triangle5: upper left, upper right, bottom
d3d_vertex_texture_color(3+warp_value,30,0,0,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(7+warp_value,55+(warp_value*-1),0,0,1,c_white,gradient_alpha);
//triangle6: upper left, upper right, bottom
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(37+(warp_value*-1),30,0,1,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(33+(warp_value*-1),55+(warp_value*-1),0,1,1,c_white,gradient_alpha);
//triangle7:left, top, bottom
d3d_vertex_texture_color(7+warp_value,55+(warp_value*-1),0,0,1,c_white,gradient_alpha);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(20,52+(warp_value*-1),0,0.5,1,c_white,gradient_alpha);
//triangle8:right,top, bottom
d3d_vertex_texture_color(33+(warp_value*-1),55+(warp_value*-1),0,1,1,c_white,gradient_alpha);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(20,52+(warp_value*-1),0,0.5,1,c_white,gradient_alpha);
d3d_primitive_end();
d3d_transform_set_identity()

//draw for top primitive (mist overlay)
draw_set_blend_mode(bm_subtract)
d3d_transform_set_identity();
d3d_transform_add_rotation_z(image_angle);
d3d_transform_set_scaling(2,1.5,1)
d3d_transform_add_translation(x,y,0);
d3d_primitive_begin_texture(pr_trianglelist, mist_texture);
//triangle order: top left, top right, middle top left, middle top right,bottom middle left, bottom middle right. bottom left, bottom right
//triangle1:top, left, bottom
d3d_vertex_texture_color(20,10+warp_value[1],0,0.5,0,c_white,0.9);
d3d_vertex_texture_color(10+warp_value[0],17+warp_value[0],0,0,0,c_white,0.9);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.9);
//triangle2:top, right, bottom
d3d_vertex_texture_color(20,10+warp_value[1],0,0.5,0,c_white,0.9);
d3d_vertex_texture_color(30+(warp_value[2]*-1),17+warp_value[2],0,1,0,c_white,0.9);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.9);
//triangle3:top left, bottom left, bottom right
d3d_vertex_texture_color(10+warp_value[0],17+warp_value[0],0,0,0,c_white,0.9);
d3d_vertex_texture_color(7+warp_value[7],30,0,0,0.5,c_white,0.9);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.9);
//triangle4: top right, bottom right, bottom left
d3d_vertex_texture_color(30+(warp_value[2]*-1),17+warp_value[2],0,1,0,c_white,0.9);
d3d_vertex_texture_color(33+(warp_value[3]*-1),30,0,1,0.5,c_white,0.9);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.9);
//triangle5: upper left, upper right, bottom
d3d_vertex_texture_color(7+warp_value[7],30,0,0,0.5,c_white,0.9);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.9);
d3d_vertex_texture_color(10+warp_value[6],43+(warp_value[6]*-1),0,0,1,c_white,0.9);
//triangle6: upper left, upper right, bottom
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.9);
d3d_vertex_texture_color(33+(warp_value[3]*-1),30,0,1,0.5,c_white,0.9);
d3d_vertex_texture_color(30+(warp_value[4]*-1),43+(warp_value[4]*-1),0,1,1,c_white,0.9);
//triangle7:left, top, bottom
d3d_vertex_texture_color(10+warp_value[6],43+(warp_value[6]*-1),0,0,1,c_white,0.9);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.9);
d3d_vertex_texture_color(20,50+(warp_value[5]*-1),0,0.5,1,c_white,0.9);
//triangle8:right,top, bottom
d3d_vertex_texture_color(30+(warp_value[4]*-1),43+(warp_value[4]*-1),0,1,1,c_white,0.9);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.9);
d3d_vertex_texture_color(20,50+(warp_value[5]*-1),0,0.5,1,c_white,0.9);
d3d_primitive_end();
draw_set_blend_mode(bm_normal)
d3d_transform_set_identity() 

Edited by esco, 16 April 2012 - 04:19 PM.

[IceMetalPunk]

That's...quite a multifaceted effect .

Drawing a gradient like that shouldn't be too hard with primitives:

draw_rectangle_rectgradient(x1, y1, x2, y2, innercolor, outercolor, inneralpha, outeralpha):

var x1, y1, x2, y2, icol, ocol, ialph, oalph;
x1=min(argument0, argument2);
y1=min(argument1, argument3);
x2=max(argument0, argument2);
y2=max(argument1, argument3);
icol=argument4;
ocol=argument5;
ialph=argument6;
oalph=argument7;

draw_primitive_begin(pr_trianglefan);
draw_vertex_color(x1 + (x2 - x1) / 2, y1 + (y2 - y1) / 2, icol, ialph);

draw_vertex_color(x1, y1, ocol, oalph);
draw_vertex_color(x2, y1, ocol, oalph);
draw_vertex_color(x2, y2, ocol, oalph);
draw_vertex_color(x1, y2, ocol, oalph);

draw_primitive_end();

I couldn't really see the pulsing you mentioned in the video, but you could pulse the size of the rectangle simply by adding a slight random offset to the positions:

draw_rectangle_rectgradient(x1 + irandom_range(-4, 4), y1 + irandom_range(-4, 4), x2 + irandom_range(-4, 4), y2 + irandom_range(-4, 4), innercolor, outercolor, inneralpha, outeralpha);

As for the motion distortion, I'm not sure how that's done. It may simply be increasing the scale along the axis of motion and decreasing it parallel to that, but I'm not sure. If that IS the case, then this should work:

if (speed > 0) {
  image_yscale = 1 + 0.1 * speed;
  image_xscale = 1 - 0.1 * speed;
}
else {
  image_xscale=1;
  image_yscale=1;
}

Assuming you're using image_angle to rotate the sprite to face the movement direction, that should warp it at 1/10 the speed (so when you're moving at a speed of 10px/sec, it will expand/compress the sprite by 1 px along its own axes). Change the 0.1's to other number to make it something larger or smaller.

The smoke doesn't need a sprite; it looks like it's very similar to just leaving a trail of effect_create_above(ef_smoke,...) effects at the position of the player.

I'm sure I've missed some part of this gigantic effect, but that's all I could figure out how to do.

-IMP

[esco]

DELETED DUE TO ME EDITING MY INITIAL POST.

Edited by esco, 09 April 2012 - 08:05 AM.

[esco]

Deleted due to another edit. Sorry

Edited by esco, 10 April 2012 - 03:57 AM.

[esco]

Ok, well now I almost have it done after 8 hours of working on it. I just need to figure out how to fix the issue with not getting it to blend properly. Sorry for all the posts in here, but I have been working on this for hours and have ASTONISHINGLY figured out the majority of it on my own.

Now I just need help with the issue listed in my topmost post with blending it.

Edited by esco, 10 April 2012 - 04:50 AM.

[icuurd12b42]

your are going to have to draw the effect on a surface.
change your texture to only do a gradient on the color, not the alpha
make a surface large enough for the size you would need but it has to be 2^n (commonly power of 2) to be compatible with all
redirect the draw to the surface
draw clear alpha with black and alpha 0
draw your effect on it
the final step is to set the draw mode so that full white transfer to full alpha and black transfers 0 in the alpha channel. I think its
bm_src = 12;
bm_dest = 2;
for blend mode ext
draw the surface onto itself in that mode, this should match the alpha channel to the grayscale image
now you should have a greay scale image with matching alpha channels
in the draw event draw the surface on the screen.

[esco]

your are going to have to draw the effect on a surface.

I can do that but which of the 2 effects are you referring to? The bottom part (gradient) or top one?

change your texture to only do a gradient on the color, not the alpha

So basically a gradient with an alpha of 1 everywhere right?

make a surface large enough for the size you would need but it has to be 2^n (commonly power of 2) to be compatible with all
redirect the draw to the surface
draw clear alpha with black and alpha 0
draw your effect on it

Understood, but which of the 2 effects do you mean? The gradient or the mist over it?

the final step is to set the draw mode so that full white transfer to full alpha and black transfers 0 in the alpha channel. I think its
bm_src = 12;
bm_dest = 2;
for blend mode ext

So are you saying to use a blend_mode_ext(12, 2) statement here?

draw the surface onto itself in that mode, this should match the alpha channel to the grayscale image
now you should have a greay scale image with matching alpha channels
in the draw event draw the surface on the screen.

Wait........ so do you mean to literally set the target to the surface, then use a draw_surface statement, then go back to writing to the screen? THEN just draw it to the screen like normal?

Edited by esco, 10 April 2012 - 05:14 AM.

[icuurd12b42]

I'm talking about the mist. Yeah, I guess it's fine then, the image...

the target is already set to the surface... you can call draw_surface() to draw the surface onto itself, yes.

end step
create
surf = -1;

end step
//free because we may need to resize
if(surface_exists(surf)) surface_free(surf)
//new surf new size
surf = surface_create(...)
//capable of using surfaces?
if(!surface_exists(surf)) exit; //no, fail
//onto the surface
surface_set_target(surf)
draw_clear_alpha(c_black,0)
draw your effect here
draw_set_blend_mode_ext(...)
//draw onto itself to change the alpha channel
surface_draw(surf,0,0)
surface_reset_target()

draw
if(surface_exists(surf)) surface_draw(surf,x,y)

[esco]

Thanks for trying to help me, but Unless I am misunderstanding you, this doesn't solve my issue. In fact for some reason, drawing the primitive to a surface first makes it look very grainy and ugly too. Here is a link to my file with your suggestion used in it if you want to check it out: http://www.mediafire...e8plt8dycthjrvn

The biggest problem I am having is that I am trying to find a way to make sure that nothing from the mist effect shows up past the edges of the gradient. If any of the mist graphic goes past the gradient I don't want it to show. I am basically trying to duplicate the effect in this video:

This effect is made the same way as how I did it: two octagonal primitives, one with a gradient, and then one with mist over it. It has the same effects too, the only difference is as you can see in the video if the mist texture goes past the gradient texture edges it will not show.

Anyone have any other advice on how I can fix this issue please?

Edited by esco, 10 April 2012 - 04:20 PM.

[TheSnidr]

The youtube links in your last post are broken. I gave your file a look, and noticed that the transparent parts of the sprite aren't entirely black - when drawing with bm_subtract, it completely ignores the alpha channel. Change the value of the transparent parts to 0. Right now it's 26!

[esco]

The youtube links in your last post are broken. I gave your file a look, and noticed that the transparent parts of the sprite aren't entirely black - when drawing with bm_subtract, it completely ignores the alpha channel. Change the value of the transparent parts to 0. Right now it's 26!

Sorry about that; I fixed the link. However, the only sprite that has transparency on it is the gradient which does NOT use BM_subtract; just bm_normal and that is not the one causing the issue. The mist one is the one with the big black square around it that I cannot seem to get rid of, so I have no idea why you mentioned the gradient transparency. Is there something I am not understanding here?

[TheSnidr]

mist_texture has transparent areas. That's what's causing your problem

[esco]

mist_texture has transparent areas. That's what's causing your problem

Sorry but I see no transparent areas ANYWHERE on mist texture. Even when I click all over it. But just in case, I went into opacity and set it all to 255. But that made no difference whatsoever. Any other suggestions?

Edited by esco, 10 April 2012 - 04:27 PM.

[TheSnidr]

Then your file is different from the one you uploaded. The whole edge of the mist_texture is transparent, with a cloudlike shape in the middle.
Use this one instead:

I only changed from transparent gray to opaque black

[esco]

Then your file is different from the one you uploaded. The whole edge of the mist_texture is transparent, with a cloudlike shape in the middle.
Use this one instead:

I only changed from transparent gray to opaque black

Hmmmmmmm........ that is very odd. I don't know why in the world it would have alpha on it, but I probably missed it somehow. It's things like this that you notice that are why are you considered a pro and I am not.

I tried your image, and yes it does work fine for removing the edge so thanks a bunch. Apparently I was trying to do the same thing with a black that was 16,16,16 so it would still show up. I repped you for your help BTW.

Sadly for me, even with that issue fixed it just doesn't look good on ANYTHING other than a plain black background, so it looks like I STILL have my work cut out for me. But hopefully I can do the rest on my own without having to ask for help in here again!

[esco]

Well I have been messing around with the mist and thru placing BOTH primitives (one for the gradient and one for the mist) into 1 draw statement, I managed to get it looking excellent. However, for some reason now that I do not understand I canNOT get the primitives to rotate using d3d_transform_add_rotation_z(image_angle). Does anyone have any idea why this is, please?

BTW, before anyone replies, please, PLEASE test your idea/code first and make sure it works. As I have used add rotation and add translation for COUNTLESS things now and they worked fine like this normally. I honestly have no idea why it doesn't work here.

Link to download the GM 8.1 file (it is object3): http://www.mediafire...d6869iotn6ykval

/////All in the draw statement for object3
//draw the gradient under the fog
d3d_transform_set_identity()
image_angle+=1;
d3d_transform_add_rotation_z(image_angle);
d3d_transform_set_scaling(2,2,0)
d3d_transform_add_translation(x-10,y-15,0);
d3d_primitive_begin_texture(pr_trianglelist, mist_gradient);
//triangle order: goes counter clockwise from top left, top right, middle right, etc.
//triangle1: top left corner: left, top, bottom points
d3d_vertex_texture_color(10,12,0,0.1,0.1,c_white,0);
d3d_vertex_texture_color(20,10,0,0.5,0.1,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
//triangle2: top right corner: bottom, top, right
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(20,10,0,0.5,0.05,c_white,0);
d3d_vertex_texture_color(30,15,0,0.9,0.1,c_white,0);
//triangle3: right side: upper right, bottom right, left
d3d_vertex_texture_color(30,15,0,0.9,0.1,c_white,0);
d3d_vertex_texture_color(31,30,0,0.9,0.5,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
//triangle4: lower right side: left, right, bottom right
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(31,30,0,0.9,0.5,c_white,0);
d3d_vertex_texture_color(27,45,0,0.8,0.8,c_white,0);
//triangle5: bottom right side: right, left, bottom
d3d_vertex_texture_color(27,45,0,0.8,0.8,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(20,52,0,0.5,1,c_white,0);
//triangle6: bottom left side: bottom, up, left
d3d_vertex_texture_color(20,52,0,0.5,1,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(13,45,0,0.1,0.75,c_white,0);
//triangle7: lower left side: bottom left, upper right, left
d3d_vertex_texture_color(13,45,0,0.1,0.75,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(9,30,0,0.1,0.5,c_white,0);
//triangle8:left side: bottom left, right, upper left
d3d_vertex_texture_color(9,30,0,0.1,0.5,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,gradient_alpha);
d3d_vertex_texture_color(10,12,0,0.15,0.1,c_white,0);
d3d_primitive_end();

d3d_transform_set_identity();


//now draw the fog
d3d_transform_set_scaling(1.5,1.5,0)
d3d_transform_add_translation(x,y,0);
d3d_primitive_begin_texture(pr_trianglelist, mist_texture);
//triangle order: goes counter clockwise from top left, top right, middle right, etc.
//triangle1: top left corner: left, top, bottom points
d3d_vertex_texture_color(10,12,0,0.1,0.1,c_white,0);
d3d_vertex_texture_color(20,10,0,0.5,0,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.52);
//triangle2: top right corner: bottom, top, right
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.52);
d3d_vertex_texture_color(20,10,0,0.5,0,c_white,0);
d3d_vertex_texture_color(30,15,0,0.9,0.1,c_white,0);
//triangle3: right side: upper right, bottom right, left
d3d_vertex_texture_color(30,15,0,0.9,0.1,c_white,0);
d3d_vertex_texture_color(31,30,0,1,0.5,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.52);
//triangle4: lower right side: left, right, bottom right
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.52);
d3d_vertex_texture_color(31,30,0,1,0.5,c_white,0);
d3d_vertex_texture_color(27,45,0,0.8,0.8,c_white,0);
//triangle5: bottom right side: right, left, bottom
d3d_vertex_texture_color(27,45,0,0.8,0.8,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.52);
d3d_vertex_texture_color(20,52,0,0.5,1,c_white,0);
//triangle6: bottom left side: bottom, up, left
d3d_vertex_texture_color(20,52,0,0.5,1,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.52);
d3d_vertex_texture_color(13,45,0,0.1,0.8,c_white,0);
//triangle7: lower left side: bottom left, upper right, left
d3d_vertex_texture_color(13,45,0,0.1,0.8,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.52);
d3d_vertex_texture_color(9,30,0,0,0.5,c_white,0);
//triangle8:left side: bottom left, right, upper left
d3d_vertex_texture_color(9,30,0,0,0.5,c_white,0);
d3d_vertex_texture_color(20,30,0,0.5,0.5,c_white,0.52);
d3d_vertex_texture_color(10,12,0,0.15,0.1,c_white,0);
d3d_primitive_end();
d3d_transform_set_identity() 

[TheSnidr]

d3d_transform_add_rotation_z(image_angle);
d3d_transform_set_scaling(2,2,0)

Whenever you use a transformation function with "set" in it, you set the whole transformation. In your code you first add the rotation, then set the transformation to scaling, removing the rotation.
Swap their order.

[icuurd12b42]

d3d_transform_set_scaling(1.5,1.5,0)

that is the same as calling set_identity then add_scaling. the transforms stack is cleared.

use the add... then you'll need to fix the problem afterwards of the mist not in the right place but that is peanuts to fix

[brac37]

Since oalph is not zero, the background will be darkened. You can use bland mode bm_add to compensate that, but I think blend mode bm_max will look better.

[esco]

Snidr & Icuurd: thank you both very much! I figured it was some silly little mistake I was making, and I was right. Also thank you both on educating me as to WHY it works. That info will come in handy ion the future, and I wish more people actually educate others on why one method works and one doesn't. I repped you both for your help.

As for the effect, my first version used only 8 triangles to make each primitive; the next will use 12 which will help me to emulate the effect much better. When it's done I will definitely have to throw up a quick vid for everyone to see.