Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

Vector Graphics

A topic by intrepidhero created Sep 02, 2021 Views: 1,649 Replies: 10
Viewing posts 1 to 10
Submitted

I’ve dabbled in 2D vector graphics for games before with Java and Python. Some minimal poking at godot came up with Polygon2D but that seems extremely minimal, basically just colored and filled polygons. What if I want to have godot draw just the border of the polygon? Can I style the lines? What I want to make lasers out of lines that shift color and width from frame to frame?

Are there any good resources for making 2D vector graphics in godot?

As I fallback I can always draw my graphics in inkscape and export sprite sheets but I’ve always had a soft spot for games where the graphics are true line art drawn by the engine in real time.

I am also interested in this, would love to know how far you get.

Submitted

You can use any CanvasItem derived node (for example an empty Node2D) with a script for fine grained control. Just call update() every time you want to redraw the canvas item. Then in the _draw() callback you can use all the draw_*() methods.

Documentation: https://docs.godotengine.org/en/stable/classes/class_canvasitem.html

Example:

extends Node2D

func _process():
    update() # Redraw every frame

func _draw():
    var radius = sin(OS.get_ticks_msec() / 1000) * 50 + 10
    draw_line(Vector2.ZERO, radius, Color.white)
Submitted

In the link that Winston put are tutorials about custom drawing, how canvas layers work and other useful stuff too.

You can also use Line2D nodes which can make fancy lines on top of Polygon2D nodes (using the same set of points), there are MeshInstance2D nodes too but are a bit hard to use.

And Godot importer can rasterize SVG files (in editor, not at runtime) if you want to just use svg assets.

While Godot can import SVG files, they are raterized into bitmaps or textures.
As far as I know it is not possible to directly render SVG images.

On the other hand, you can do custom 2D drawings:
https://docs.godotengine.org/en/stable/tutorials/2d/custom_drawing_in_2d.htm
You can find the list of 2D drawing functions here:
https://docs.godotengine.org/en/stable/classes/class_canvasitem.htm

Submitted(+1)

Thanks everybody! CanvasItem seems to be the thing I was looking for. I’ll dabble some more and report back.

(1 edit)

I suggest deriving you stuff at least from Node2D.
Node2D extends CanvasItem with some useful stuff, like transforms, and it is the base node for most 2D stuff, except GUI.

Submitted(+1)

Hey things are kinda working. I added a custom drawing script to a KinematicBody2D node to draw my player ship. The CanvasItem methods folks pointed me at above where just the thing. Thanks guys!

I posted my super janky rough draft. I’ll try to make periodic devlog posts to share what I’m figuring out. Comments and questions welcome. https://intrepidhero.itch.io/space-jam

Submitted(+1)

New version with way more stuff. Like you can shoot now!

https://intrepidhero.itch.io/space-jam

I found that writing custom _draw() code on my nodes is working for the vector graphics look I was going for. One neat thing you can do is declare your script a tool and then you’ll get a preview of the drawing code in the editor.

Neat, just had a quick look, looks like you're making some good progress!

The pseudo-3D "tilt" of the ship is a cool addition.
In https://intrepidhero.itch.io/space-jam/devlog/290870/custom-drawing you mention an weirdness with PolyLine line width, you might want to check out the related known issues, of which there seem to be a couple: https://github.com/godotengine/godot/search?q=polyline&type=issues (e.g. https://github.com/godotengine/godot/issues/16466)

Submitted

Thanks. That first one is exactly what I’m seeing. Nice to know it wasn’t just me. Maybe I’ll look into submitting a patch after the jam. Shouldn’t be too hard given they have correct line drawing algorithms elsewhere in the codebase.