Drawing functions - (Rectangle & Ellipse)!

Talk about making games.

Drawing functions - (Rectangle & Ellipse)!

Postby lcl » Sun Mar 17, 2013 8:05 pm

Hello everybody!

As I have been working with the world editor
for Sabre, I have had to create some drawing functions, and
since they turned out pretty well, I decided to share them with you.

There is 3 functions in the .ged and they are:
  • setColor(); - this is used for setting the colors the functions use
  • drawRectangle(); - this is for drawing rectangles and filled rectangles
  • drawEllipse(); - this is for drawing ellipses and filled ellipses
The usage of the functions is explained in the example ged.

These functions are free to use for everyone.
I would of course like to have my name in the credits of your game if you use these,
but I can't force you to add it. :)

Download the example ged:
drawingFunctions.zip
This is the second version, now the ellipse's edges are fixed.
(428.87 KiB) Downloaded 717 times


Or if you think you don't need the .ged, here's the code for the functions:
Code: Select all
//Definitions which make it easier to use the functions.
//With these definitions it is possible, for example, to write FILL_OFF instead of 0, when
//using a drawing function and not wanting it to fill the drawn shape. This makes it easier and
//clearer to use the functions.
#define FILL_OFF 0
#define FILL_ON 1
#define NO_FILL_COLOR 0, 0, 0, 0, 1
//This can be used to avoid writing multiple 0's when setting
//a color for a shape that won't have a fill in it.

float ALPHA, ALPHA2; //These are the alpha variables for the edge color and for the fill color.
int R, R2, G, G2, B, B2, SIZE, SIZE2; //These are the color and size variables for the edge color
//and for the fill color. (The 2-variables are the fill variables.)

//This is a function for setting the colours to be used.
void setColor(int r, int g, int b, float alpha, int size, int r2, int g2, int b2, float alpha2, int size2)
{
    R = r; G = g; B = b; SIZE = size; ALPHA = alpha;
    R2 = r2; G2 = g2; B2 = b2; SIZE2 = size2; ALPHA2 = alpha2;
}

//This is a function for drawing a rectangle / square.
void drawRectangle(int lineBeginX, int lineBeginY, int lineX, int lineY, int fill)
{
    setpen(R, G, B, ALPHA, SIZE);
    moveto(lineBeginX, lineBeginY);
    lineto(lineX, lineBeginY);
    lineto(lineX, lineY);
    lineto(lineBeginX, lineY);
    lineto(lineBeginX, lineBeginY);
 
    if (fill == FILL_ON) //This is equal to 'if (fill == 1)' because of the #defines at the top.
    {
        int i;
 
        setpen(R2, G2, B2, ALPHA2, SIZE2);
 
        //For loop for filling the rectangle.
        for (i = min(lineBeginX, lineX) + 1; i < max(lineBeginX, lineX); i ++)
        {
            moveto(i, min(lineBeginY, lineY) + 1);
            lineto(i, max(lineBeginY, lineY) - 1);
        }
    }
}

//This is a function for drawing an ellipse / circle.
void drawEllipse(int lineBeginX, int lineBeginY, int lineX, int lineY, int fill)
{
    float t; //This variable will be used for the for loop for drawing the ellipse.
    int i, a, b, centerX, centerY;
    //a is the horizontal diametre of the ellipse.
    //b is the vertical diametre of the ellipse.
    //centerX and centerY are the position of the center of the ellipse.
 
    //Calculate a and b.
    a = (max(lineBeginX, lineX) - min(lineBeginX, lineX)) * 0.5;
    b = (max(lineBeginY, lineY) - min(lineBeginY, lineY)) * 0.5;
 
    //Calculate the center of the ellipse and store its coordinates to centerX and centerY.
    centerX = (lineX - lineBeginX) * 0.5;
    centerY = (lineY - lineBeginY) * 0.5;
 
    if (fill == FILL_ON) //This is equal to 'if (fill == 1)' because of the #defines at the top.
    {
        for (t = 0; t < 360; t += 0.1)
        {
            //Set the pen to the fill color and fill the ellipse.
            setpen(R2, G2, B2, ALPHA2, SIZE2);
            moveto(a * cos(t) + lineBeginX + centerX, b * sin(t) + lineBeginY + centerY);
            lineto(a * cos(t) + lineBeginX + centerX, lineBeginY + centerY);
        }
    }

    //The for loop for drawing the ellipse's edges.
    for (t = 0; t < 360; t += 0.1)
    {
        //Set the pen to the edge color and draw the ellipse's edges.
        setpen(R, G, B, ALPHA, SIZE);
        putpixel(a * cos(t) + lineBeginX + centerX, b * sin(t) + lineBeginY + centerY);
    }
}


EDIT: Fixed the bug with the ellipse's edges, see the picture below for how the edges look like now.
The example and the code have been updated, too.
Attachments
fEllipse.png
Last edited by lcl on Sun Mar 31, 2013 8:09 pm, edited 4 times in total.
User avatar
lcl
 
Posts: 2339
Joined: Thu Mar 25, 2010 5:55 pm
Location: Finland
Score: 276 Give a positive score

Re: Drawing functions - (Rectangle & Ellipse)!

Postby GEuser » Mon Mar 18, 2013 2:40 am

Oh cool. This will come in handy. thanks lcl.
GEuser
 
Posts: 204
Joined: Thu Jan 05, 2012 3:08 pm
Score: 19 Give a positive score

Re: Drawing functions - (Rectangle & Ellipse)!

Postby lcl » Mon Mar 18, 2013 4:56 pm

GEuser wrote:Oh cool. This will come in handy. thanks lcl.

:) I'm glad that you found this useful.

I wonder if you could find a way to fix the edges of the ellipses?
That's because you seem to be pretty good with canvas actors. :)
User avatar
lcl
 
Posts: 2339
Joined: Thu Mar 25, 2010 5:55 pm
Location: Finland
Score: 276 Give a positive score

Re: Drawing functions - (Rectangle & Ellipse)!

Postby lcl » Tue Mar 19, 2013 9:34 pm

UPDATE:

I fixed the bug with the ellipse's edges.
The example ged and the code have been updated to include this fix. :)
User avatar
lcl
 
Posts: 2339
Joined: Thu Mar 25, 2010 5:55 pm
Location: Finland
Score: 276 Give a positive score

Re: Drawing functions - (Rectangle & Ellipse)!

Postby GEuser » Wed Mar 20, 2013 2:06 pm

That was fast. Will go and checkout the code now. So what was this going tto be for (adding stuff to sabre?)
GEuser
 
Posts: 204
Joined: Thu Jan 05, 2012 3:08 pm
Score: 19 Give a positive score

Re: Drawing functions - (Rectangle & Ellipse)!

Postby Hblade » Wed Mar 20, 2013 3:22 pm

This is amazing lcl!
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: Drawing functions - (Rectangle & Ellipse)!

Postby lcl » Wed Mar 20, 2013 6:10 pm

GEuser wrote:That was fast. Will go and checkout the code now. So what was this going tto be for (adding stuff to sabre?)

These drawing functions are used in the world editor for Sabre.
I use a canvas to draw an ellipse or a rectangle, then I create
bunch of blocks in a rectangular shape over the drawing and then each created block checks if it's colliding with the drawing. The blocks which
are not colliding self-destroy before they are even drawn to screen. Then the canvas actor is erased for being able to draw new shapes without the old ones causing problems. So this way it is easy to make ellipses and rectangles. I use this same method for drawing lines, too.
Hblade wrote:This is amazing lcl!

Thanks! Feel free to use the functions in your games. :)
User avatar
lcl
 
Posts: 2339
Joined: Thu Mar 25, 2010 5:55 pm
Location: Finland
Score: 276 Give a positive score

Re: Drawing functions - (Rectangle & Ellipse)!

Postby GEuser » Sun Mar 24, 2013 5:04 am

@lcl

I'm not really familiar with the raytracing coding and all so not sure if my idea means anything, here goes anyway.

Had this idea floating in my head that what if you created a globe in a 3D art program (like blender) took slices off the rendered image just like your textures and used it to create a sphere like object in Sabre.

In diagram attached below:

lcl_GlobeSlice.png


If your using 256 slices (1 x 256 px ) as in texture than for a 360 degree rotation of a sphere you'd have to do:-

360/256 = 1.40625 degress per slice (so that 1.40625 x 256 slices = 360 degrees effectively).

in image:

(A) you would take a slice at the centre (to preserve all the info at that angle) and then rotate by 1.40625 degrees and repeat for full revolution, so on...

(B) The slices would then be gathered up to make an animated frames and eventually texture (as in C).

(C) The texture obtained from aggregating the slices (in animation frames form).

(D) You could then use this circle drawing function of yours to detect collisions with texture made in (C).

(E) After cutting away surplus square texture against the circle you'd end up with this.

(F) When you remove the circle you'd have the textured sphere (2d) but could make into 3D by applying shading and lightting effects with raytracing code. When the player moves you adjust the perspective by shifting the slice/s in the animated texture (since each is 1.4ish degrees) you'd use this to gauge the amount of perspective angle moved or whatever.

The original render in (A) would have to be evenly lighted without any shading so that your ray tracing program can add the shading/lighting/darkness. The advantage of doing it this way is that the image disortation that is normally caused to the texture when wrapping it around a sphere can be avoided because we made slices from a sphere originally anyway so compensated for emulating that distortion (make sense?). Of course you could argue that the slices are okay for the vertical distortion but don't solve the problem for the horitonal distortation across a texture on a sphere? Of course this could be fixed up with your alogrithm (extra, new coding?)

Not sure how you'd code this but could this be at least a step closer, a part solution to creating a 3D spheroid object? If possible then you could also do cylinders and beable to make columns and posts. Link them up with a sphere, cube and cylinder and you the basics to create most irregular 3D shapes (kind of).

Not sure if this is meanful to you in ray-tracing?
GEuser
 
Posts: 204
Joined: Thu Jan 05, 2012 3:08 pm
Score: 19 Give a positive score

Re: Drawing functions - (Rectangle & Ellipse)!

Postby lcl » Sun Mar 24, 2013 9:24 pm

@GEuser: Thanks for the idea, I could try it when I have completed the more important parts of Sabre. :)
User avatar
lcl
 
Posts: 2339
Joined: Thu Mar 25, 2010 5:55 pm
Location: Finland
Score: 276 Give a positive score

Re: Drawing functions - (Rectangle & Ellipse)!

Postby ITomi » Wed May 17, 2017 1:56 pm

Wow, it's great, LcL!
But is it possible to draw a rectangle with the mouse? I try with the following code, but the rectangle enough ugly and not always visible its all parts. Maybe I don't understand the functioning of moveto()?
So, in the Draw event of the canvas actor:
Code: Select all
erase(0,0,0,1);
setpen(0,0,255,0.0,1);
screen_to_actor(&xmouse, &ymouse);
if (xmouse>x)
{
 sz=xmouse-x; //width of the rectangle
}
else
{
    sz=x-xmouse;
};
if (ymouse>y)
{
 m=ymouse-y; //height
}
else
{
    m=y-ymouse;
};
moveto(x,y);
lineto(sz,y);
lineto(sz,m);
lineto(x,m);
lineto(x,y);

I would like make a mini RTS with the GE, and therefore I would like make a selector rectangle in it.
User avatar
ITomi
 
Posts: 48
Joined: Sun Aug 21, 2016 1:56 pm
Location: Hungary
Score: 5 Give a positive score

Re: Drawing functions - (Rectangle & Ellipse)!

Postby Zivouhr » Sun Jul 30, 2017 5:26 pm

Interesting tutorial on Rectangles, thanks Lcl.
City of Rott Game created on Game Editor http://cityofrott.wordpress.com/
User avatar
Zivouhr
 
Posts: 549
Joined: Sat May 17, 2014 2:12 pm
Score: 59 Give a positive score


Return to Game Development

Who is online

Users browsing this forum: No registered users and 1 guest