Giter VIP home page Giter VIP logo

drawpixels's Introduction

Draw Pixels

Build Status

Defold engine native extension for drawing pixels and simple geometry into texture buffer.

Feel free to contribute!

Please, pay attension! The size of the image you manipulate with DrawPixels must match that of the atlas, not the sprite image. Otherwise you need to know where the sprite is the atlas and update that region of the atlas.

Installation

To use this library in your Defold project, add the needed version URL to your game.project dependencies from Releases

image

Example

screenshot

Main code example is here

Lua API

First of all you need to create a table with a buffer information that contain next fields:

buffer - buffer
width - buffer width, same as your texture width
height - buffer height, same as your texture height
channels - 3 for rgb, 4 for rgba
premultiply_alpha - alpha value will be premultiplied into the RGB color values. Optional parameter. Default is false.

For example:

local buffer_info = {
    buffer = buffer.create(1024 * 2048, -- size of the buffer width*height
    {{
      name = hash("my_buffer"),
      type = buffer.VALUE_TYPE_UINT8,
      count = 4 -- same as channels
    }}),
    width = 1024,
    height = 2048,
    channels = 4,
    premultiply_alpha = true
  }

Then when you have a buffer info, you can use next methods:

drawpixels.circle(buffer_info, pox_x, pox_y, diameter, red, green, blue, alpha, antialiasing, width)

Method for drawing circle:

buffer_info - buffer information
pox_x - x position center of the circle
pox_y - y position center of the circle
diameter - diameter of the circle
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255. Optional parameter for rgba textures
antialiasing - adds anti-aliasing. Only for 4 channels. Optional parameter.
width - indicates the circle width. Only for circle with anti-aliasing. Optional parameter.

drawpixels.filled_circle(buffer_info, pos_x, pos_y, diameter, red, green, blue, alpha, antialiasing)

Method for drawing filled circle:

buffer_info - buffer information
pox_x - x position center of the circle
pox_y - y position center of the circle
diameter - diameter of the circle
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255. Optional parameter for rgba textures
antialiasing - adds anti-aliasing. Only for 4 channels. Optional parameter.

drawpixels.rect(buffer_info, pos_x, pos_y, rect_width, rect_height, red, green, blue, alpha)

Method for drawing rectangle:

buffer_info - buffer information
pox_x - x position center of the rectangle
pox_y - y position center of the rectangle
rect_width - rectangle width
rect_height - rectangle height
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255. Optional parameter for rgba textures

drawpixels.filled_rect(buffer_info, pos_x, pos_y, rect_width, rect_height, red, green, blue, alpha, angle)

Method for drawing filled rectangle:

buffer_info - buffer information
pox_x - x position center of the rectangle
pox_y - y position center of the rectangle
rect_width - rectangle width
rect_height - rectangle height
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255. Optional parameter for rgba textures
angle - rotation angle in degrees. Optional.

drawpixels.fill(buffer_info, red, green, blue, alpha)

Fill buffer with the color:

buffer_info - buffer information
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255. Optional parameter for rgba textures

drawpixels.line(buffer_info, x0, y0, x1, y1, red, green, blue, alpha, antialiasing, width)

Draw a line between two points:

buffer_info - buffer information
x0 - x position of one end of the line
y0 - y position of one end of the line
x1 - x position of the other end of the line
y1 - y position of the other end of the line
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255. Optional parameter for rgba textures
antialiasing - adds anti-aliasing. Only for 4 channels. Optional parameter.
width - indicates the line width. Only for line with anti-aliasing. Optional parameter.

drawpixels.gradient_line(buffer_info, x0, y0, x1, y1, red1, green1, blue1, red2, green2, blue2, alpha, antialiasing, width)

Draw a gradient line between two points:

buffer_info - buffer information
x0 - x position of one end of the line
y0 - y position of one end of the line
x1 - x position of the other end of the line
y1 - y position of the other end of the line
red1 - first red channel of the color 0..255
green1 - first green channel of the color 0..255
blue1 - first blue channel of the color 0..255
red2 - second red channel of the color 0..255
green2 - second green channel of the color 0..255
blue2 - second blue channel of the color 0..255
alpha - alpha channel 0..255
antialiasing - adds anti-aliasing. Only for 4 channels. Optional parameter.
width - indicates the line width. Only for line with anti-aliasing. Optional parameter.

drawpixels.arc(buffer_info, x, y, radius, from, to, red, green, blue, alpha)

Draw a arc between two corners. If from < to the arc is drawn counterclockwise. If from > to the arc is drawn clockwise. Only for 4 channels:

buffer_info - buffer information
x - x position center of the circle
y - y position center of the circle
radius - radius of the circle
from - first arc angle in radians. May be negative
to - second arc angle in radians. May be negative
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255

drawpixels.filled_arc(buffer_info, x, y, radius, from, to, red, green, blue, alpha)

Draw a filled arc between two corners. If from < to the arc is drawn counterclockwise. If from > to the arc is drawn clockwise. Only for 4 channels:

buffer_info - buffer information
x - x position center of the circle
y - y position center of the circle
radius - radius of the circle
from - first arc angle in radians. May be negative
to - second arc angle in radians. May be negative
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255

drawpixels.gradient_arc(buffer_info, x, y, radius, from, to, red1, green1, blue1, red2, green2, blue2, alpha)

Draw a gradient arc between two corners. If from < to the arc is drawn counterclockwise. If from > to the arc is drawn clockwise. Only for 4 channels:

buffer_info - buffer information
x - x position center of the circle
y - y position center of the circle
radius - radius of the circle
from - first arc angle in radians. May be negative
to - second arc angle in radians. May be negative
red1 - first red channel of the color 0..255
green1 - first green channel of the color 0..255
blue1 - first blue channel of the color 0..255
red2 - second red channel of the color 0..255
green2 - second green channel of the color 0..255
blue2 - second blue channel of the color 0..255
alpha - alpha channel 0..255

drawpixels.pixel(buffer_info, x, y, red, green, blue, alpha)

Draw a pixel:

buffer_info - buffer information
x - x position of pixel
y - y position of pixel
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255. Optional parameter for rgba textures

drawpixels.color(buffer_info, x, y)

Read color from a position in the buffer:

buffer_info - buffer information
x - x position to get color from
y - y position to get color from

RETURNS:

red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255. Optional parameter for rgba textures

drawpixels.bezier(buffer_info, x0, y0, xc, yc, x1, y1, red, green, blue, alpha)

Draw a bezier line between two points and one control point:

buffer_info - buffer information
x0 - x position of the first point
y0 - y position of the first point
xc - x position of the control point
yc - y position of the control point
x1 - x position of the second point
y1 - y position of the second point
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255. Optional parameter for rgba textures

You can fill in a specific area. To do this, you need to identify the borders with start_fill method and call the fill_area method to fill the area. Borders work with: lines, gradient lines, circles, filled circles with anti-aliasing, pixels, arcs. NOT WORK WITH FILLED ARCS AND GRADIENT ARCS. The arcs themselves use this method, so the fill may not be predictable. Do not create arcs until you are done with the fill. Be sure to call the end_fill method when you stop working with the fill.

drawpixels.start_fill()

Indicates the start of border preservation.

drawpixels.end_fill()

Indicates the stop of border preservation.

drawpixels.fill_area(buffer_info, x, y, red, green, blue, alpha)

Fills an area at specified boundaries. Only for 4 channels:

buffer_info - buffer information
x - x position of the start point
y - y position of the start point
red - red channel of the color 0..255
green - green channel of the color 0..255
blue - blue channel of the color 0..255
alpha - alpha channel 0..255

In order to draw this into a sprite, you need a separate atlas with power of two texture. Then we can use resource.set_texture:

resource.set_texture(go.get("#sprite", "texture0"), self.header, self.buffer_info.buffer)

In order to render this in gui, we just need to create a box and create a new texture. We can use gui.new_texture. Then you need to set this texture to the box using gui.set_texture:

local data = buffer.get_bytes(self.buffer_info.buffer, hash("rgba"))
gui.new_texture("name", width, height, image.TYPE_RGBA, data)
gui.set_texture(gui.get_node("box"), "name")
gui.set_size(gui.get_node("box"), vmath.vector3(width, height, 0))

If you have any questions or suggestions contact me: [email protected]

drawpixels's People

Contributors

agulev avatar britzl avatar d954mas avatar sergeysinyavsky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

drawpixels's Issues

Example does not build under Fedora 32

Hello,

when I try to run the example project I get a lot of build errors:
/drawpixels/src/drawpixels.cpp
Line 5: "DLIB_LOG_DOMAIN" redefined
#define DLIB_LOG_DOMAIN LIB_NAME
/drawpixels/src/drawpixels.cpp
Line 5: this is the location of the previous definition
/drawpixels/src/drawpixels.cpp
Line 44: identifier ‘nullptr’ is a keyword in C++11 [-Wc++0x-compat]
static int *points = nullptr;
/drawpixels/src/drawpixels.cpp
Line 44: ‘nullptr’ was not declared in this scope
static int points = nullptr;
/drawpixels/src/drawpixels.cpp
Line 48: ‘nullptr’ was not declared in this scope
if (points != nullptr)
/drawpixels/src/drawpixels.cpp
Line 248: unused variable ‘size’ [-Wunused-variable]
int size = 10;
/drawpixels/src/drawpixels.cpp
Line 285: ‘bool is_new(int, int, int, int)’ defined but not used [-Wunused-function]
static bool is_new(int i, int r, int g, int b)
/drawpixels/src/drawpixels.cpp
Line 1117: unused variable ‘fx’ [-Wunused-variable]
float fx = radius * cos(from);
/drawpixels/src/drawpixels.cpp
Line 1118: unused variable ‘fy’ [-Wunused-variable]
float fy = radius * sin(from);
/drawpixels/src/drawpixels.cpp
Line 1227: unused variable ‘last_iiy2’ [-Wunused-variable]
int last_iiy2 = 0;
/drawpixels/src/drawpixels.cpp
Line 1332: ‘int draw_triangle_lua(lua_State
)’ defined but not used [-Wunused-function]
static int draw_triangle_lua(lua_State *L)
/drawpixels/src/drawpixels.cpp
Line 1675: comparison between signed and unsigned integer expressions [-Wsign-compare]
for (int i = 0; i < buffer_info.src_size; i += line_size)
/drawpixels/src/drawpixels.cpp
Line 1762: unused variable ‘newposx’ [-Wunused-variable]
int newposx = 0;
/drawpixels/ext.manifest
upload/drawpixels/src/drawpixels.cpp: At global scope:

Any ideas? Otherwise Defold is working fine AFAICS.

issue with two or more images

Hi
I'm not sure if it is a bug of Defold Editor or drawpixels
With one image everything is fine and drawpixels works very well
but when I try to draw on two image for example when they are next to each other
only one of them shows its content at a time, and sometimes they show duplicate content. It's very weird and annoying.
When I test it on Browser or Android its working fine.
I've made a very simple project to show you what I mean. You can play it in editor and move the player to right direction to see the issue.
Thanks
trail-test.zip

Сan't erase 1 pixel

drawpixels.pixel(self.buffer_info, self.touch_pos.x, self.touch_pos.y, 0, 0, 0, 0) doesn't work

Fill rect doesn't work

Fill rect or any drawing for that matter doesn't work. Just fill works. Waste of time.

Rotated rect bad draw

rot = 4.72 -- or 1.571
drawpixels.filled_rect(self.buffer_info, 222,222,55,55,255,0,0,255, math.deg(rot))
2018-07-23_01-15-03

Improvements of example

Would be great to improve example by adding one more layer for interactive elements like line and bezier.
When user move cursor we redraw this interactive elements on this extra layer, and put them to the main layer when user release cursor.
Of course we can use fill() for clearning "extra texture", but would be greate to save previous drawing (coordinates) every frame and before drawing new line, redraw old one with alpha (smaller fillrate and better performans than using fill() method)

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

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

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.