Advanced Graphical Filtering using a canvas

You must understand the Game Editor concepts, before post here.

Advanced Graphical Filtering using a canvas

Postby Hblade » Sun Apr 11, 2010 7:38 pm

Hello everyone! I've found an interesting way to make filters using a canvas! :D With this script you can modify / edit the brightness, you can create horizontal or vertical lines, (sometimes if used correctly can make mobile games or small monitor games look better, or if your image quality has floating pixels this can eliminate them :D), make a grid, and even pixelate the screen. Pixelating the screen can also cause your game to look higher quality if your using a windows mobile or any other phone type device. Pixelating / making the grid is also good for building an image editing game :D. You can also tent the screen.

Functions in this code:
    AddFilter
    AddGrid
    Brightness
    Tent
    LargeFilter


The code for the definitions:
Code: Select all
#define tvlines 0
#define verticallines 1
#define pixelate 2
#define pixelate2 3

#define brighter 0
#define darker 1

#define brighten 0
#define darken 1
#define lighten 0
#define lighter 0

#define red 0
#define green 1
#define blue 2
#define black 3
#define white 4

Place this code in the Global Code.

The next code also goes in global code, this is used to call all of the filters
Code: Select all
void Brightness(int mode, int ammount)
{
    double a;
    a = 1 - (double)ammount / 100;
    if (mode == 0)
    {
        r = 255;
        g = 255;
        b = 255;
    }
    if (mode == 1)
    {
        r = 0;
        b = 0;
        g = 0;
    }
    erase(r, g, b, a);
}
void AddGrid(int gridsize, int mode)
{
    int i;
    for (i=0;i<width;i+=gridsize)
    {
        if (mode == 0)
        {
            setpen(255, 0, 0, 0, 1);
        }
        if (mode == 1)
        {
            setpen(0, 255, 0, 0, 1);
        }
        if (mode == 2)
        {
            setpen(0, 0, 255, 0, 1);
        }
        if (mode == 3)
        {
            setpen(0, 0, 0, 0, 1);
        }
        if (mode == 4)
        {
            setpen(255, 255, 255, 0, 1);
        }
        moveto(i, 0);
        lineto(i, height);
        moveto(0, i);
        lineto(width, i);
    }
}
void AddFilter(int mode)
{
    int i;
    int height_i;
    if (mode == 0)
    {
        for (i=0;i<width;i+=2)
        {
            setpen(0, 0, 0, 0, 1);
            moveto(0, i);
            lineto(width, i);
        }
    }
    if (mode == 1)
    {
        for (i=0;i<width;i+=2)
        {
            setpen(0, 0, 0, 0, 1);
            moveto(i, 0);
            lineto(i, height);
        }
    }
    if (mode == 2)
    {
        for (i=0;i<width;i+=3)
        {
            setpen(0, 0, 0, .70, 2);
            moveto(i, 0);
            lineto(i, height);
            moveto(0, i);
            lineto(width, i);
        }
    }
    if (mode == 3)
    {
        for (i=0;i<width;i+=2)
        {
            setpen(0, 0, 0, .70, 1);
            moveto(i, 0);
            lineto(i, height);
            moveto(0, i);
            lineto(width, i);
        }
    }
}
void Tent(int rr, int gg, int bb)
{
    erase(rr, gg, bb, .70);
}

void LargeFilter(int mode)
{
    int i;
    int height_i;
    if (mode == 0)
    {
        for (i=0;i<width;i+=4)
        {
            setpen(0, 0, 0, 0, 1);
            moveto(0, i);
            lineto(width, i);
        }
    }
    if (mode == 1)
    {
        for (i=0;i<width;i+=4)
        {
            setpen(0, 0, 0, 0, 1);
            moveto(i, 0);
            lineto(i, height);
        }
    }
    if (mode == 2)
    {
        for (i=0;i<width;i+=6)
        {
            setpen(0, 0, 0, .70, 2);
            moveto(i, 0);
            lineto(i, height);
            moveto(0, i);
            lineto(width, i);
        }
    }
    if (mode == 3)
    {
        for (i=0;i<width;i+=4)
        {
            setpen(0, 0, 0, .70, 1);
            moveto(i, 0);
            lineto(i, height);
            moveto(0, i);
            lineto(width, i);
        }
    }
}

How to use:
+-=-=-=-=-=-=-=-=-=-=-=How to use-=-=-=-=-=-=-=-=-=-=-=-+
To use these functions, after you've coppied and pasted the code, simply make a canvas, and place your code in the create actor.

Examples:
AddFilter(tvlines);
This function will make TV lines, or horrizontal lines which make games look a bit different on mobile or small screens.
Where tvlines is, you can also put:
    verticallines
    pixelate
    pixelate2

Pixelate2 is different and can look different depending on your display. If the first one doesn't look right, use pixelate2.

AddGrid is a bit different, to use this you have to first tell the grid size, 32 will be 32x32 and 16 will be 16x16. Any number you put counts as both width and height of the grid. You also must specify a color from 5 color selections. Those colors are:
    red
    green
    blue
    black
    white

Examples:
AddGrid(32, white);

Tenting the screen is as easy as typing in Tent(r, g, b);.

Examples:
Tent(89, 89, 255);

The brightness can control how bright or dark the screen is.

Examples:
Brigtness(lighter, 30);

The lighter means that it'll brighten the screen. To darken the screen, simply put darken. The 30 is how much it gets brighter. You can range this anywhere from 0 to 100.

The commands you can use for Brightness are:
    lighter
    lighten
    brighter
    brighten

    darker
    darken

LagreFilter is the same as AddFilter but the filters are larger.

Remember to put every one of these inside of CreateActor in a Canvas Actor, or you will probably lag.
Enjoy :D

SCREENSHOTS:
tvlines:
Screenshot1.jpg

Notice how it creates horizontal lines that distort the graphics, which can make playing games on a tall screen look better.

verticallines:
Screenshot2.jpg

Notice how this brings out the text more then it does using tvlines.

Tent:
Screenshot3.jpg

Notice how it makes a blue tent to the screen.

Grid:
Screenshot4.jpg

Notice how it makes a grid. This can be usefull for tile editors, or art programs.

Pixelate:
Screenshot5.jpg

Notice how it brings out the pixels a bit more.

Pixelate2:
Screenshot6.jpg

This is slightly different then the pixelate, as the pixels are shown smaller. This is usefull for smaller resolution or full screen games, as pixelate gives an allusion in full screen of brighter pixel spots, while pixelate2 doesn't.
Subscribe to my YouTube? - Yes| No
User avatar
Hblade
 
Posts: 4455
Joined: Fri Dec 08, 2006 11:14 pm
Score: 181 Give a positive score

Re: Advanced Graphical Filtering using a canvas

Postby makslane » Mon Apr 12, 2010 12:44 am

Great, Thanks!
Game Editor is an open source game creator software that's wants to pay it's developers to keep evolving.
If you like Game Editor, make a review!
makslane
Site Admin
 
Posts: 3947
Joined: Sat Apr 05, 2003 6:47 pm
Score: 182 Give a positive score

Re: Advanced Graphical Filtering using a canvas

Postby Hblade » Mon Apr 12, 2010 1:04 am

Glad you like it, any suggestions?
Subscribe to my YouTube? - Yes| No
User avatar
Hblade
 
Posts: 4455
Joined: Fri Dec 08, 2006 11:14 pm
Score: 181 Give a positive score

Re: Advanced Graphical Filtering using a canvas

Postby DBGames » Fri Jul 02, 2010 7:45 am

sorry to say it but i think theres a lack of idea's due to its field of use. i cant think of where this could be used. perhaps you could help my train of thought. where would you like to see it used, what possible function?
User avatar
DBGames
 
Posts: 113
Joined: Wed Jun 24, 2009 10:13 am
Location: Bismarck, North Dakota
Score: 8 Give a positive score

Re: Advanced Graphical Filtering using a canvas

Postby Hblade » Fri Jul 02, 2010 7:47 am

hehe :D Ive made a better one :)
Subscribe to my YouTube? - Yes| No
User avatar
Hblade
 
Posts: 4455
Joined: Fri Dec 08, 2006 11:14 pm
Score: 181 Give a positive score


Return to Advanced Topics

Who is online

Users browsing this forum: No registered users and 1 guest