Sorry your browser is not supported!

Hi

Description

AGK vector drawings is an application/software for PC and android, to create vector drawings with AppGameKit, and export them as text files or images (with transparency).

I try to create a little application to create vector drawings/graphics with AppGameKit (bezier, ellipse), with color and stroke.

It's not easy, because agk don't have any command for vector drawing, and do the rendering with drawellipse(), drawline() drawbox() or sprite isn't very good.
So, I have made this little app to create drawings, with a kind of "simili" vector.

Help : BaxSlash (bezier curve), Swissolo (fill a polygon !), Hubert Baire (drawellipse modified) and other codes but I can't remember who (point(), rgbtohsl/hsltorgb)
Start of the project :

Last version
Version 0.52.08 (13 november 2023)





Download last version from github :
https://github.com/blendman/agkvectordrawing/blob/main/release/

Github repository :
https://github.com/blendman/agkvectordrawing

Other download (not the last version):
https://blendman.ldvmultimedia.com/opensource/agkvectordrawing.zip


The current shapes :
- shape with Bezier curves (thanks to Baxslash) or "polygon"
- Ellipse (help Hubert Baire)
- Box
- image
- text


The features :
See infos.agc for the releaselog and more informations

Main features :
- create shapes, set colors and opacity, add "fx" to shapes
- shapes transformations/editions : copy, paste, move, rotate, scale, flip h/V...
- save, load documents
- export : image (png), SVG, in agk code (little game code exemple)

The screens :
- screen start : to open, copy, delete, rename ... our project. We have our projects, exemples, and autosave file (we can select severals files, export them, delete them, we can create a .zip with all our files (save on the internal disk on android or PC).
- Screen option to change the options
- screen myimages : to add, save, rename, delete or select our images (for shape image), or use external images (works on pc and android)
- screen drawing : to create and draw our shapes (Stroke, color, and FX), export as image (png) or SVG. save document, export selected shapes as image or file, export layers as image (option : crop)....

In screendrawing :
Shapes :
- create a shape (bezier curve (open/closed), ellipse, box, images, text)
- delete a shape
- add FX to a shape
- select and deselect, multi-selection
- move or scale the selected shapes
- add points / delete points (only for bezier curves), move points, select points (and change its type (free, hard, mirored) or visibility (drawn if visible)
- points can be "hard" (like basic polygon), mirored or "free"
- set shape parameters : name, color, alpha, depth, scale, position, open/closed, hide, lock.
- set stroke parameters : color, alpha, type of stroke (ellipse (typ=0), box (typ = 1), sprite (typ>=2)), antialiased with some sprite typ, scatter, and other "brush" parameters (only with sprite (typ>=2) : random rotation, user rotation, use angle of direction, space between dots.
- shape, stroke and fx : color selector and pick buton (to get color from another shape)
- shape box : color flat or gradient

Tools :
- flip Horizontal and vertical : flip the points for beziers curve
- widgets : scale the shape (scale the points), rotate (the points), resize in w /h (shape for the moment)
- copy parameters (color for the moment), copy selected shapes, paste shapes,,duplicate selected shapes (copy/paste)

Layers :
- layers : we can add, move up/down, delete a layer, hide or lock it. On a layer we can create shapes.

Files :
- save/load doc, import/export in clipboard, export in Zip all files, save on internal disk (pc, android)
- export as image (with background transparent, color, or gradient background), export layers as image, export in SVG, PNG
- draw shape with color or not, with stroke or not. Draw the stroke we want (hide point to not drawn the selected stroke (with selected point)

GUI :
- camera x, y, width, height (for the export size) and scale.
- move (pan) and zoom the canvas, PinchZoom on android (thanks to baxslash)
- boundingbox change its size if we move points.
- option : set the number of segment for the curves, set the size of the image for polygon filled (for optimisation), setimagemag/minfilter (for color and stroke), camera parameters (width, height).

So here the current GUI (freely inspired by vector_motion):

Version 0.47 :
Stroke "fade size":


Version 0.3x to 0.43 :

Shape and Stroke "style" (1: with no stroke, 2 : with a brush (sprite with a brush image)) :


SHape FX :






Version 0.28


Version 0.20 :




version 0.11 :


A video to show the current state of the app (version 0.11) :



And Some images created with this software/application (rendertoimage) :

Version 0.3x to 0.42 :




version 0.2x :



version 0.11 :


What I hope to add : (todolist)
- flipH/v on the points not on the sprite.
- Scale the points, not the sprite
- multi selection (move, copy/paste, scale)
- shape images
- bank of shapes
- widgets (to change scale, width/height, rotation).
- add layer (+layer properties)
- basic parenting (move the parents shapes)

Rendering :
I try to use some shader to render the shape (preview in the app and final rendering). I ahve tryed to convert a bezier shader from shadertoy and it works, but I have to find how to use that for rendering.

My test (transparent background when saveimage):


License
Open source GPL

What is the interest ?
- create drawings with almost unlimited size (in fact limited by the virtual resolution) and kind of "vector" system
- drawings can be anti aliased, if you use stroke Type = 2 (or the number of the brush image (in images folder) +2)
- we can create application without any graphics, but with text files, and render the graphics at start of the game .
- show what AppGameKit can do

Bugs known or limitations :
- change scale of a shapebox may cause unwanted result
- shapes bigger than the virtualscreen are cropped

Download link (with sources) :
(I will add this on my github profil)
https://blendman.ldvmultimedia.com/opensource/agkvectordrawing.zip

Old versions :
https://github.com/blendman/agkvectordrawing/tree/main/release
0.11
https://blendman.ldvmultimedia.com/opensource/agkvectordrawingv0.11.zip

Bank of shapes :
I will post later some simple shapes I have created (heath, leaf, eye...)

And what about animation ?
- for the moment, it's not what I will add, but hey ! this tool is open source, you can change it and add animation features if you want

I hope you like it and it will be usefull.

Yes, AppGameKit is very powerfull
Cheers !

Wow!

good stuff, Blendman.

and, the best part is taking what others have shared and putting it together to make something better

Looking good!

Hi

thank you for your message.

I have post a new version : Version 0.20


Screenshots
The new screen "start":


The screen "drawing":



What's new ?

New features :
- a new screen "start" : with the list of our project (file), exemples files and autosave files, and some buton (rename project, delte, open, add, copy/paste (to clipboard, from clipboard)
- autosave
- points : we can set it as "hard" (like polygon), mirored or free (like in version 0.11)
- shape : pick color
- new shape : box
- new shape image (works on PC windows, but not really on android because getchoosenimage is always a jpg so we don't have the transparency if the image is a png with alpha )
- copy/paste : we can copy/paste a shape or a color from a shape to another
File
- savedoc : we can now choose between : savedoc and export in clipboard (usefull to get our file from pc to android and vice versa)
- loaddoc : we can now choose between : loaddoc or import from clipboard (usefulle on android to get the PC files for exemple)
- Loaddoc (in screendrawing) : open a window with the file to open (was before I add the screenstart ^^)
UI :
- LeftBox : add colorselector, pick color tool (in parameter panel in shape is selected (and editmode is on "shape" not point)
- Leftbox : the gadgets are grouped and we can show or hide them.
- Leftbox : options (border camera, show camera, camera w, h, scale)
- Tool selection : we can select several shapes, and move them
- I have add my own "drawbox" named "drawboxline", which isn't drawn above the UI ^^ (only for camera border for the moment)
- PC : add keyboard shortcut : space to move the canvas.
Examples :
- 5 examples added

Bugfixes :
- change width/height of an ellipse scale by 2 the shape.
- change x/y parameters with editbox doesn't work for the moment
- and a lot of other bugs ^^

Know bugs or limitations :
- sometimes : we can't select the editbox (on the leftBox) : I haven't understand why.
- scale shape doesn't work properly or as expected
- the thumbs image should be improved

Download (with source code)
https://blendman.ldvmultimedia.com/opensource/agkvectordrawing.zip

I have updated the first message with the current version (download link).

Cheers !

Well Done.

Impressive! Well done.

Hi

Thank you for your comments

I have posted a new version 0.28.03.
One of the main new feature is the much better rendering smooth curves and lines, shape text, and improvements with points editions (scale points, miror points, bette slection and drawings...).

Whats new in 0.28.03 :
- much better rendering, with smooth curves/line for drawings (in 0.22)
- scale the points of a shape
- miror the points of a shape (hor/vert)
- widgets to scale points , and rotate or resize the shape
- change some parameters of the selected shapes (color, alpha, open, stroke (size, color, alpha, typ))
- the background can be colored (color and alpha)
- shape text (+parameters : color, alpha, text$, position, maxwidth, alignment, size)
- points : if we move a center point, the tangents points are moved too
- add pinchzoom on android
- buton duplicate : to duplicate a shape
- lots of bugfixes and improvements



Download :
https://blendman.ldvmultimedia.com/opensource/agkvectordrawing.zip

Cheers !

This is very cool.


Have you tried limiting the scale to multiples of 2? Keeping the scaling uniform might help avoid skewing..

Hi

Thank you for your messages.



with this application/software, it's very simple to create a game without any image in the media folder, but the images are created by the program, and as we can see, we can have any type of images (character, background, objects...).
For 2D game or other 2stuff (comics...) its really cool.

I have posted a new version 0.43, with lots of bugfixes, improvements and new features.

Whats new in 0.43 :
New features :
- Shape FX : (panel fx) : we can add "fx" to the shape, to create internal shadow, external shadow or other types of fx)
- Stroke new parameters : space (between dots), random rotation, user rotation, use angle of direction,
- we can changed the parameters of shape or stroke with selected shapes (Stroke (rgb, a, scatter, typ, size, space, rndrot, rot, useangle, fadesize), shape (rgb, a, hide, lock))
- new brush images (used to draw the stroke if stroke.typ>=2)
- 10 new fonts
- scale the selected shapes (in panel/tools / scale)
- selection of the points (with tool selection)
- change the type of selected points (free, hard, mirored)
- screenstart : we can select severals files and copy them in clipboard
- add screen Myimages : to add/save (in "media/myimages/"), delete, rename, select an image to use it (with a shape image)
Improvements :
- shape image improved : (there was some bugs with shape image in android)
- shapebox improved : we can resize and scale it (and the stroke is updated)
- shape text improved : we can change depth, alignement, fontID, position (with gadgets)
Fixes :
- lots of bugfixes and minor changes

Some images made with this great appli :




Download :
https://blendman.ldvmultimedia.com/opensource/agkvectordrawing.zip

Cheers

Hi

I have posted a new version : 0.47.05
with a few new features (bank of shapes, stroke "fade size" and several saving possibilities (save selected, save layer...), improvements and bugfixes.

https://blendman.ldvmultimedia.com/opensource/agkvectordrawing.zip

The stroke "fade size" new feature :

Hi

The new version 0.48.03 :
https://blendman.ldvmultimedia.com/opensource/agkvectordrawing.zip

I have add a new feature (version 0.48.03) :
- exportforagk()

This create the .agk file and main.agc, so you can see how to use agkvectordrawing too create images on your game

here is a full example with a simple image (create by the code and an avd file) and a sprite :
https://blendman.ldvmultimedia.com/opensource/AVD_example.zip

I hope this will be usefull for you

Wow, impressive work. May I ask how you built the entire GUI?

Hi

I have posted a new version 0.49.32 with some new features, improvements and bugfixes:
new features :
- part of stroke can be drawn or not (with point.hide)
- the sprite for the scene background can be a flat color or a gradient
fixes and improvements :
- shapebox have been improved
- other fixes



download
https://blendman.ldvmultimedia.com/opensource/agkvectordrawing.zip

Download from github :
https://github.com/blendman/agkvectordrawing/blob/main/release/agkvectordrawing0.49.32.zip


Github repository :
https://github.com/blendman/agkvectordrawing


Do you know the full code source is opensource ?
So you can compile and see if some functions may be usefull for you .

I know, the code isn't very well explain and organised, but perhaps somme functions could be interesting.

I have "build" the GUI with Sprites and editbox (see GUI in functions.agc).
- for the Topbar or leftbar, its a simple sprite for the Background and sprites for the butons (i Use constants for each butons and sprite, and I use a depth for gadget smaller than the depth for shapes)

For the other panel, gadgets :
- I have created some arrays for the gadgets : Dim GroupGadget[] as tGroupGadget
- see the functions with "LBOX_" (leftbox) or "BBox_" (bottom box), I use those functions to create the gui.
- see the function UpdateBBox(), UpdateBBoxParameter() and MoveBbox() : I use those function to create all the gadgets, update them and move the panel (only if the gadgets are at bottom (portrait mode)
- I have some functions to add buttons, "separator gadget", editbox (with text and sprite), buttons text... For example : LBox_AddGroupButton(), LBox_AddEditbox2()
- I use the function LBox_AddSeparator() to add a group for gadget, all gadget in that group can be show or hide if we clic on the "separator gadget". I i move the panel, I use MoveBbox() to move all gadgets.

For the events, it's more complicated :
- In the main code (in screendrawing().agc ), I check if we clic on a sprite (pointer pressed)? I check all type of sprite : widgets, GUI (topbar, leftbar, bbox or lbox), if we haven't clic on sprite of GUi, I check the canvas, to know if we have clic on a shape.

The code verify the events lke this :
- pointerpressed : here, I verify : buton = getspritehitgroup()
in the other events, I have the id of buton, and I verify if the sprite is one of my GUi or another thing.
- pointerstate
- editbox event
- pointerreleased()
- doubleclic

I have made a priority to check :
- GUI (widgets, topbar button, leftbar, panel (leftbox or bottombox)
- and after that, I check if we have clicked on a shapes, on a point of a shape, etc..

I hope this infos can help

Hi

I have posted a new version on github and in the other site.

I have added some new features, for example : exportToSvg, improvements and bugfixes.

An example of export :
https://blendman.ldvmultimedia.com/opensource/gilbert09.svg

Donwload :

Github repository :
https://github.com/blendman/agkvectordrawing

other download
https://blendman.ldvmultimedia.com/opensource/agkvectordrawing.zip

cheers.

impressive. How are you drawing the shapes? I can't imagine using 2d commands would be very fast and I'm not sure writing to memblocks would be quick enough in realtime either.

Hi


I use several technics :

I draw on a renderToImage (stroke+shape on a seperate image and sprite)

For the stroke :
- Shapes, ellipse : I draw sprites on a renderToImage.
- box : I use drawbox (but I will change to draw with sprite)
- image : I use a simple sprite.

For the Shape :
I have two functions (2 technics)
1) use memblocks (thanks to a code form swissolo), on an image 4 x smaller. It's ok, with small shape, but the more the shape is big, the more its slow. : https://forum.thegamecreators.com/thread/211123

2) draw on a rendertoImage with drawline. It's seems to be a little faster.
https://forum.thegamecreators.com/thread/229357



A "new video" :

played with it a bit, pretty awesome! I think that is the best Vector app made with AppGameKit so far. Inspiring.
And thank you for sharing the source code I bet I'll find lots of good stuff there