Light

apostolique / apos.shapes Goto Github PK

View Code? Open in Web Editor NEW

43.0 7.0 3.0 291 KB

Shape rendering library for MonoGame.

License: MIT License

HLSL 9.83% C# 90.17%

apos sdf monogame nuget

apos.shapes's Introduction

Apos.Shapes

Shape rendering library for MonoGame.

Description

This library draws shapes using SDFs. Special thanks to Inigo Quilez for doing a lot of the work on the math functions.

Documentation

Coming soon!

Build

Features

Circles
Lines
Rectangles
Hexagons
Equilateral Triangles
Ellipses
Filled + Borders
Rounded
Rotations

Usage samples

Install with:

dotnet add package Apos.Shapes

Add to your Game1.cs:

using Apos.Shapes;

// ...

_graphics.GraphicsProfile = GraphicsProfile.HiDef;

// ...

ShapeBatch _sb = new ShapeBatch(GraphicsDevice, Content);

// ...

_sb.Begin();
_sb.BorderLine(new Vector2(100, 20), new Vector2(450, -15), 20, Color.White, 2f);

_sb.DrawCircle(new Vector2(120, 120), 75, new Color(96, 165, 250), new Color(191, 219, 254), 4f);
_sb.DrawCircle(new Vector2(120, 120), 30, Color.White, Color.Black, 20f);

_sb.DrawCircle(new Vector2(370, 120), 100, new Color(96, 165, 250), new Color(191, 219, 254), 4f);
_sb.DrawCircle(new Vector2(370, 120), 40, Color.White, Color.Black, 20f);

_sb.DrawCircle(new Vector2(190, 270), 10, Color.Black, Color.White, 2f);
_sb.DrawCircle(new Vector2(220, 270), 10, Color.Black, Color.White, 2f);

_sb.FillCircle(new Vector2(235, 400), 30, new Color(220, 38, 38));
_sb.FillRectangle(new Vector2(235, 370), new Vector2(135, 60), new Color(220, 38, 38));
_sb.FillCircle(new Vector2(235, 400), 20, Color.White);
_sb.FillRectangle(new Vector2(235, 380), new Vector2(125, 40), Color.White);
_sb.End();

Other projects you might like

Apos.Gui - UI library for MonoGame.
Apos.Input - Polling input library for MonoGame.
Apos.History - A C# library that makes it easy to handle undo and redo.
Apos.Content - Content builder library for MonoGame.
Apos.Framework - Game architecture for MonoGame.
AposGameStarter - MonoGame project starter. Common files to help create a game faster.

apos.shapes's People

Contributors

Stargazers

Watchers

Forkers

beyley akaadream fna-net

apos.shapes's Issues

Gradients

Would be nice to allow picking two colors to define a gradient. I'm guessing you could pick a position to place color1, then place color2 and the shader could interpolate between the two to fill the shape.

Add DrawEllipse

I used this for my own needs and I think it would be a good fit to add to the library. It's a copy-paste of DrawCircle with different radii for horizontal and vertical.

public void DrawEllipse(Vector2 center, float radiusHorizontal, float radiusVertical, Color c1, Color c2, float thickness = 1f)
{
    // Account for AA.
    radiusHorizontal += _pixelSize;
    radiusVertical += _pixelSize;

    var topLeft = center + new Vector2(-radiusHorizontal, -radiusVertical);
    var topRight = center + new Vector2(radiusHorizontal, -radiusVertical);
    var bottomRight = center + new Vector2(radiusHorizontal, radiusVertical);
    var bottomLeft = center + new Vector2(-radiusHorizontal, radiusVertical);

    var ps = _pixelSize / (Math.Max(radiusHorizontal, radiusVertical) * 2);

    var u = 1.0f;

    _vertices[_vertexCount + 0] = new VertexShape(new Vector3(topLeft, 0), new Vector2(-u, -u), 0f, c1, c2, thickness, ps);
    _vertices[_vertexCount + 1] = new VertexShape(new Vector3(topRight, 0), new Vector2(u, -u), 0f, c1, c2, thickness, ps);
    _vertices[_vertexCount + 2] = new VertexShape(new Vector3(bottomRight, 0), new Vector2(u, u), 0f, c1, c2, thickness, ps);
    _vertices[_vertexCount + 3] = new VertexShape(new Vector3(bottomLeft, 0), new Vector2(-u, u), 0f, c1, c2, thickness, ps);

    _triangleCount += 2;
    _vertexCount += 4;
    _indexCount += 6;

    if (_triangleCount >= MAX_TRIANGLES)
    {
        Flush();
    }
}

Request: Filled Polygons

Is there a plan to include filled polygons in the future?

How to make borders thinner?

Hello!
Thank you for your work and your library.
When I draw:
_sb.DrawCircle(new Vector2(120, 120), 75, new Color(96, 165, 250), new Color(191, 219, 254), 1f);
I still have a thick border that I would like to make much thinner.
Decreasing 0.1f for thickness has no effect.
Is it possible to make the border lines thinner? Thank you!

Rounded shapes

Since the shapes are drawn with SDF, it's possible to round them.

Request: API to retrieve the shape boundaries

It might be worth it to provide functions that return an AABB for each shape. Could be useful when using shapes with spatial data structures?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.