Skip to content

Examples

Vlod edited this page Feb 6, 2024 · 11 revisions

The repo has a main function with examples. There are many of them, inside an 'if(0)' block each. Comment out the if for the one that you want to see! I will also add the examples here:

Initialization

This is how to init the library:

gl2d::init();

gl2d::setVsync(1); //optional

gl2d::Renderer2D renderer; //please just make an instance of the object don't allocate it on the heap for no reason :D
renderer.create();

In every frame, I do this:

int w = 0; int h = 0;
glfwGetWindowSize(wind, &w, &h);
renderer.updateWindowMetrics(w, h);
renderer.clearScreen({0.1,0.2,0.6,1});

Don't forget to clear the resources if needed:

renderer.cleanup(); 
texture.cleanup();
font.cleanup();
gl2d::clearnup();

Shapes and Outlines

//initialization:
gl2d::Texture texture(RESOURCES_PATH "test.jpg");
//

renderer.renderRectangle({100,350, 100, 100}, texture, {1,1,1,1}, {}, r);
renderer.renderRectangleOutline({100,350, 100, 100}, {1,1,1,0.5}, 10, {}, r);
			
renderer.renderRectangle({200,150, 100, 100}, texture, {1,1,1,1}, {}, r);
renderer.renderRectangleOutline({200,150, 100, 100}, {1,1,1,0.5}, 10, {}, r);

renderer.renderRectangle({250,450, 100, 100}, Colors_Orange, {}, r);

renderer.renderCircleOutline({500,200}, Colors_Orange, 100);

Texture Atlases

Note that I am using 'loadFromFileWithPixelPadding' and 'TextureAtlasPadding' but you can also use 'loadFromFile' and 'TextureAtlas'. See Texture Atlases section.

//initialization
gl2d::Texture playerSprite;
playerSprite.loadFromFileWithPixelPadding(RESOURCES_PATH "sprites.png", 80); //the character is 80 pixels in size
gl2d::TextureAtlasPadding atlas(12, 12, playerSprite.GetSize().x, playerSprite.GetSize().y);
//

static int pos = 0;
static float timer = 0;
			
timer += deltaTime;
if (timer > 0.08)
{
	timer -= 0.08;
	pos++;
}
			
pos %= 7;

renderer.renderRectangle({100,100,200,200}, playerSprite,
	Colors_White, {}, 0, atlas.get(1 + pos , 0));

Gradients and Transparency

glm::vec4 colors[4] = {Colors_Orange,Colors_Orange ,Colors_Orange ,Colors_Orange};
renderer.renderRectangle({90,90, 100, 100}, colors, {}, 30);

renderer.renderRectangle({100,150, 100, 100}, {1,0,0,0.5});

glm::vec4 c[4] = {Colors_Orange, Colors_Orange, Colors_Green, Colors_Blue};
renderer.renderRectangle({300,300,100,100}, c);

Text Rendering

To render text you need to load a .ttf file for the font.

gl2d::Font f(RESOURCES_PATH "arial.ttf");

//...

renderer.renderText({300,100}, "Hello world", f, Colors_White);

example

9 Patches

9 Patches are used for UI and basically cut your texture in a way that allows for it to be resized while keeping the border not stretched. You should use 'render9Patch2' because 'render9Patch' is an old implementation. The inner_texture_coords parameter specifies where to cut the texture (the inner rect). The inner rect will be stretched while the outer rects will be drawn repeatedly.

renderer.renderRectangle({50,50,100,100}, button);

renderer.render9Patch2({50,160,100,190}, Colors_White,
	{}, 0, button, GL2D_DefaultTextureCoords, {0.2,0.8,0.8,0.2});

renderer.render9Patch2({200, 50, 100, 300}, Colors_White, 
	{}, 0, button, GL2D_DefaultTextureCoords, {0.2,0.8,0.8,0.2});

renderer.render9Patch2({400, 150, 300, 100}, Colors_White, 
	{}, 0, button, GL2D_DefaultTextureCoords, {0.2,0.8,0.8,0.2});