Drawing Textures - sinusinu/Flora GitHub Wiki

Texture

Texture is an image that can be drawn on screen. BMP, JPG, PNG files can be loaded as a Texture.

ℹī¸ Before starting, Place any PNG file with size bigger than (32, 32) as test.png on build folder. (where built exe file gets placed)
You could use the post-build action to automate copying images too!

Begin with Simple Program:

MyCore.cs

using Flora;
using Flora.Gfx;
using Flora.Util;

namespace FloraTest {
    class MyCore : FloraCore {
        Texture texture;

        public override void Prepare() {
            texture = new Texture(PathUtils.Relative("test.png"));
        }

        public override void Pause() {
            
        }

        public override void Resume() {
            
        }

        public override void Resize(int width, int height) {
            
        }

        public override void Render(float delta) {
            Gfx.Begin();
            Gfx.Clear(0, 0, 0);
            Gfx.Draw(texture, 0, 0);
            Gfx.End();
        }

        public override void Cleanup() {
            texture.Dispose();
        }
    }
}

On Prepare, texture is set as new Texture(PathUtils.Relative("test.png").

PathUtils.Relative function converts executable-relative path to absolute path. Since all paths required by Flora objects are considered as an absolute path, it is recommended to use this function to get files located in executable's path.

On Render, texture is drawn at (x, y) coordinate of (0, 0).

Flora uses top-left origin coordinate. (0, 0) is the most top-left spot, x-positive is right, y-positive is bottom.

Gfx.Clear(0, 0, 0) clears screen with black color.

Because Texture handles low-level resources, it must be disposed by calling Dispose() function after use. Best way to do it is calling it in FloraCore's Cleanup() function, making both FloraCore and Texture gets cleaned up at the same time.

TextureRegion

TextureRegion can be used to draw a part of texture.

Continue with above program:

MyCore.cs

using Flora;
using Flora.Gfx;
using Flora.Util;

namespace FloraTest {
    class MyCore : FloraCore {
        Texture texture;
        TextureRegion region;

        public override void Prepare() {
            texture = new Texture(PathUtils.Relative(@"test.png"));
            region = new TextureRegion(texture, 0, 0, 32, 32);
        }

        public override void Pause() {
            
        }

        public override void Resume() {
            
        }

        public override void Resize(int width, int height) {
            
        }

        public override void Render(float delta) {
            Gfx.Begin();
            Gfx.Clear(0, 0, 0);
            Gfx.Draw(texture, 0, 0);
            Gfx.Draw(region, 0, 100);
            Gfx.End();
        }

        public override void Cleanup() {
            texture.Dispose();
        }
    }
}

Now we're drawing part of texture on (0, 100)!

new TextureRegion(texture, 0, 0, 32, 32) means this TextureRegion refer to the part of the texture from x = 0, y = 0 to x = 32, y = 32.

TextureRegion can be drawn in the same way Texture is drawn on screen.

TextureRegion does not need to be disposed.

Advanced uses

Gfx.Draw function offers more overloads that can be used to draw the texture as exactly as you want.

Gfx.Draw(Texture texture, float x, float y, float width, float height, double rotation, float pivotX, float pivotY, FlipMode flip)

  • texture is self-explanatory.
  • x is the x-coordinate that the texture will be drawn on.
  • y is the y-coordinate that the texture will be drawn on.
  • width is the width of drawn texture. can be used to stretch or squish texture horizontally.
  • height is the height of drawn texture. can be used to stretch or squish texture vertically.
  • rotation is the angle texture should be rotated in degrees.
  • pivotX and pivotY is the pivot point of the rotation. if set to width / 2, height / 2 respectively, texture will rotate around central pivot.
  • flip sets if texture should be flipped horizontally or vertically. It is bitmask, so both axis can be flipped using FlipMode.Horizontal | FlipMode.Vertical.
⚠ī¸ **GitHub.com Fallback** ⚠ī¸