Sign in to follow this  
BoltBait

How to Write an Effect Plugin (Part 2 of 4 - Intermediate)

Recommended Posts

I've never been happy with the C# Code Syntax Highlighter here on this site, so this tutorial has been moved here:

If you have questions about the tutorial, you can post them here in this thread and I will address them.

Share this post


Link to post
Share on other sites

Thanks BoltBait. I actually played with some of the numbers in this before you posted this tutorial. I changed the sliders from -100 --> 100 to -200 --> 200. It's interesting how the plugin reacts. It produces much more saturated colours (as to be expected I suppose).

Share this post


Link to post
Share on other sites

Good job again Boltbait!

Just before this:

When you are happy with that, click CodeLab's "Make DLL" button.

I wound have say:

When you are happy with that, create a 16x16 image and apply your effect, then save it as icon_name.png, and then click CodeLab's "Make DLL" button.

And could be easier for questions/remarks on such long post to have some step numbers to refere to...

Thanks BoltBait. I actually played with some of the numbers in this before you posted this tutorial. I changed the sliders from -100 --> 100 to -200 --> 200. It's interesting how the plugin reacts. It produces much more saturated colours (as to be expected I suppose).

As the color "range" is 0 to 255, and...

as we want to add/substract, and...

as we force the final result to be in the "range" :

then the best ranges for the sliders should be [-255,255]!

Share this post


Link to post
Share on other sites

I have a question:

Why do the comments in these matter

int Amount1=0; //[-100,100]Cyan - Red

int Amount2=0; //[-100,100]Magenta - Green

int Amount3=0; //[-100,100]Yellow - Blue

You mentioned that they had an effect, but i thought that anything after // was ignored......

or is that there just for reference?

Share this post


Link to post
Share on other sites
I have a question:

Why do the comments in these matter

int Amount1=0; //[-100,100]Cyan - Red

int Amount2=0; //[-100,100]Magenta - Green

int Amount3=0; //[-100,100]Yellow - Blue

You mentioned that they had an effect, but i thought that anything after // was ignored......

or is that there just for reference?

I think (I'm sure in fact) the codelab uses this to pre-fill the slider configuration...

Hum, as Boltbait explained here:

There are 4 important parts to these lines that you will need to modify so that we can create the UI we need.


  1. [*:e128a]After the '=' and before the ';' contains the default value for our slider.
    int Amount1=0; //[0,100]Slider 1 Description
    Since our default is 0, we don't need to change that.
    [*:e128a]After the '[' and before the ',' contains the lower limit for our slider.
    int Amount1=0; //[0,100]Slider 1 Description
    Currently that is set to 0. We will change that to -100.
    [*:e128a]After the ',' and before the ']' contains the upper limit for our slider.
    int Amount1=0; //[0,100]Slider 1 Description
    Currently that is set to 100 which is fine.
    [*:e128a]After the ']' contains the slider description that we will see in the UI.
    int Amount1=0; //[0,100]Slider 1 Description
    We will change each one to be different.

After updating the first 3 lines, they should look like this:

int Amount1=0;   //[-100,100]Cyan - Red
int Amount2=0;   //[-100,100]Magenta - Green
int Amount3=0;   //[-100,100]Yellow - Blue

Hum(2), yes step numbers would help!

Share this post


Link to post
Share on other sites
but what if if write a comment somewhere before that? wont it screw up my plugin....

I guess I am just being stupid.

No, nothing gets screwed up. CodeLab is smart enough to look for the "int Amount..." lines in order to setup the UI.

Those comments really don't do anything to the code, they only list defaults for the UI design dialog box for when you build a DLL. The values you enter into the Build DLL UI design dialog box override anything you've put into the code's comments.

It is only there for the convience of posting CodeLab scripts to this message board.

In fact, I may extend them to include comments for the default effects sub folder and menu text... next time I work on CodeLab.

Share this post


Link to post
Share on other sites

As the color "range" is 0 to 255, and...

as we want to add/substract, and...

as we force the final result to be in the "range" :

then the best ranges for the sliders should be [-255,255]!

Too true! I included this in my remake of color balance :)

I can't wait for the third and final installment BoltBait!

Share this post


Link to post
Share on other sites

PineappleQc, in your code, when you want to access the value of the first slider, simply use the variable Amount1. For the second slider, use Amount2. And, for the third slider, use Amount3.

The value of the slider is exactly what the user has moved the slider to. For example, if the user has moved the first slider to 50, the variable Amount1 will have the value of 50 in it.

Share this post


Link to post
Share on other sites

Ah! Well, that's the trick, isn't it?! :D

The functioning of each slider is determined by the code you write!

You see, in the original code here: "// TODO: Add pixel processing code here", you simply* have to replace that line with your algorithm which uses the Amount1 variable.

In my code example, my algorithm looks like this:

// Cyan - Red adjustment

R = R + Amount1;

G = G - (Amount1 / 2);

B = B - (Amount1 / 2);

You see, I'm using the Amount1 variable to add something to the R variable, and also using it to subtract half the Amount1 amount from the G and B variables. This is how the Cyan-Red adjustment slider works.

Then, you follow the next few lines to see how the other two sliders work.

*I* (the effect developer) had to write the code that uses the slider values.

I hope this clears things up for you.

*When I say "simply", of course I'm making a joke--its only simple for someone who already knows how to write code. As originally stated, this tutorial is targetted to someone who already has a knowledge of C# coding.

Share this post


Link to post
Share on other sites

// Code fixed to account for retired 'Utility' library; :wink:

#region UICode
int Amount1=0;   //[-255,255]Cyan - Red
int Amount2=0;   //[-255,255]Magenta - Green
int Amount3=0;   //[-255,255]Yellow - Blue
#endregion

void Render(Surface dst, Surface src, Rectangle rect) 
{ 
   ColorBgra CurrentPixel; 
   int R, G, B;
   for(int y = rect.Top; y < rect.Bottom; y++) 
   { 
       for (int x = rect.Left; x < rect.Right; x++) 
       { 
           CurrentPixel = src[x,y]; 
           R = (int)CurrentPixel.R;
           G = (int)CurrentPixel.G;
           B = (int)CurrentPixel.B;
           // Cyan - Red adjustment
           R = R + Amount1;
           G = G - (Amount1 / 2);
           B = B - (Amount1 / 2);
           // Magenta - Green adjustment
           G = G + Amount2;
           R = R - (Amount2 / 2);
           B = B - (Amount2 / 2);
           // Yellow - Blue adjustment
           B = B + Amount3;
           R = R - (Amount3 / 2);
           G = G - (Amount3 / 2);
           // Reassemble the color from R, G, and B
           CurrentPixel = ColorBgra.FromBgra(Int32Util.ClampToByte(,Int32Util.ClampToByte(G),Int32Util.ClampToByte(R),CurrentPixel.A);
           dst[x,y] = CurrentPixel; 
       } 
   } 
}

Share this post


Link to post
Share on other sites
// Code fixed to account for retired 'Utility' library; :wink:

I was just going to ask that...

Thanks!

And Boltbait, could you please explain what does your actual plugin code does differently from the code used in the tutorial?

For the same movimentation of the sliders, the output is different for those codes. Actually, the first slider does not work at all for the tutorial's code (duno what I did wrong, but after adding the if (selectionRegion.IsVisible(x, y)) from your actual code, it started working).

But even with the addition of this and the other two extra lines from the actual code, the output is still different.

Ow, and btw, thanks for the tut, and mostly for Codelab!!! :D

30913_f983f5f87e9110d39cb670bedfb1747f

30913_1779da648e92bda67f4a3da46d8c2556

30913_db475cffbc154c652f0dcb23785f4c15

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this