From 519b8acd852a255424567e53b8133ad31e85dcb1 Mon Sep 17 00:00:00 2001 From: Danil Alexeev Date: Mon, 5 Dec 2022 17:46:49 +0300 Subject: [PATCH] Explain `draw_line` and `draw_rect` coordinates --- tutorials/2d/custom_drawing_in_2d.rst | 67 +++++++++++++++++++++++++- tutorials/2d/img/draw_line.png | Bin 0 -> 974 bytes tutorials/2d/img/draw_rect.png | Bin 0 -> 1595 bytes 3 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 tutorials/2d/img/draw_line.png create mode 100644 tutorials/2d/img/draw_rect.png diff --git a/tutorials/2d/custom_drawing_in_2d.rst b/tutorials/2d/custom_drawing_in_2d.rst index 97b284aab51..29af75195de 100644 --- a/tutorials/2d/custom_drawing_in_2d.rst +++ b/tutorials/2d/custom_drawing_in_2d.rst @@ -139,9 +139,74 @@ call ``queue_redraw()`` from the ``_process()`` callback, like this: } } +Coordinates +----------- + +The drawing API uses the CanvasItem's coordinate system, not necessarily pixel +coordinates. Which means it uses the coordinate space created after applying +the CanvasItem's transform. Additionally, you can apply a custom transform on +top of it by using +:ref:`draw_set_transform` or +:ref:`draw_set_transform_matrix`. + +When using ``draw_line``, you should consider the width of the line. +When using a width that is an odd size, the position should be shifted +by ``0.5`` to keep the line centered as shown below. + +.. image:: img/draw_line.png + +.. tabs:: + .. code-tab:: gdscript GDScript + + extends Node2D + + func _draw(): + draw_line(Vector2(1.5, 1), Vector2(1.5, 4), Color.GREEN, 1.0) + draw_line(Vector2(4, 1), Vector2(4, 4), Color.GREEN, 2.0) + draw_line(Vector2(7.5, 1), Vector2(7.5, 4), Color.GREEN, 3.0) + + .. code-tab:: csharp + + public class CustomNode2D : Node2D + { + public override void _Draw() + { + DrawLine(new Vector2(1.5, 1), new Vector2(1.5, 4), Colors.Green, 1.0) + DrawLine(new Vector2(4, 1), new Vector2(4, 4), Colors.Green, 2.0) + DrawLine(new Vector2(7.5, 1), new Vector2(7.5, 4), Colors.Green, 3.0) + } + } + +The same applies to the ``draw_rect`` method with ``filled = false``. + +.. image:: img/draw_rect.png + +.. tabs:: + .. code-tab:: gdscript GDScript + + extends Node2D + + func _draw(): + draw_rect(Rect2(1, 1, 3, 3), Color.GREEN) + draw_rect(Rect2(5.5, 1.5, 2, 2), Color.GREEN, false, 1.0) + draw_rect(Rect2(9, 1, 5, 5), Color.GREEN) + draw_rect(Rect2(16, 2, 3, 3), Color.GREEN, false, 2.0) + + .. code-tab:: csharp + + public class CustomNode2D : Node2D + { + public override void _Draw() + { + DrawRect(new Rect2(1, 1, 3, 3), Colors.Green) + DrawRect(new Rect2(5.5, 1.5, 2, 2), Colors.Green, false, 1.0) + DrawRect(new Rect2(9, 1, 5, 5), Colors.Green) + DrawRect(new Rect2(16, 2, 3, 3), Colors.Green, false, 2.0) + } + } An example: drawing circular arcs ----------------------------------- +--------------------------------- We will now use the custom drawing functionality of the Godot Engine to draw something that Godot doesn't provide functions for. As an example, Godot provides diff --git a/tutorials/2d/img/draw_line.png b/tutorials/2d/img/draw_line.png new file mode 100644 index 0000000000000000000000000000000000000000..a6a236b81ec68fcd45c11ca4ecb90e4b0e36f481 GIT binary patch literal 974 zcmeAS@N?(olHy`uVBq!ia0vp^M}RnsgAGVN-tg}$km4-xh%9Dc-~&qV9bufR%_q&k zz}(>J;uumf=k48#MT;B+ST7hpt?!OMXSd_pJ%I~?>J~cB1Hz69S=;W?m7RX=vPEAq zqnGB=Io_I2tM;C|SFtnZ-appMH?otro!VGB=l9=b*X^hFTYUb0`mg*^oAY-wU-D&d z>9VY4xOOaCboo{>eLLMpTk2|}?Eh~q%=$L}_VeuArVsX3_V<_auZ=qyEiYK7y*_Mh z>T2clQG4z3y~~0H%J*(z*?V;6vDa%w-#q2{js;cdZ3=Bx6hir?-w^!^yNH~XXJ z-fabI_sl+j>-Y6PyJvUTe)=!)p??~u(^dJadu7`m#&)m$7Lh2?HtX&Y!SwHiTYLmW zSXfvY9UUD41aL6Z?5DrH-2C!`;pNLo&;5FH3vcCWZa;ll_R}V_uC11I&dJ{9cdhh(TVlqh zZ|;TL>S~S!o@Tka&ugb_(r?ENOCD>py=+|r8KqVMqdw&iB$PV40*1ty!H8~r?{(B}mVTa&)WKh~t)`qWV< z*;bTm8Mn33_Sv0Nao7KSuzog8?P-=;Pu$#)Dl^eg;j6LcAg(KYJKO9$gt=N;|%13KxyG(0ifG_&X{gEJ}3I->s#`EXU_VHJPn!Hx$}GR zy(*0!8YyW?JYpajIu9-7-pYe(PYS+0HWaaN$yJyab4moxH^el_D zpH_Z!Iyd{t=F~a1cJZR1H1bQcW9Rib_x_&!Y{m2YFVdQ&MBb@0DXqHf=CeA zS2YGgARs%GM3f2<7>E!8N=Serh6EGAh^&DoN;}i(blN}Oy>I5uefNFm`<-)>PoP}3 zXzFSL0I&t&>gWjopcMIgn!2idgyeeE$|sE&*E1LZ*!ooQfU*v4)dK((F~afNQ}Kmj z-o&N*upO$;&3hKC?5;?NffCBDG?1ry^JQN&En;fNVexI9r5m0|1Ykay?TI8ZL*5lE ztRzac;;R{rVHJtz1JI)q*}99E2xD{MV|YZb5%zu}?A*1+p>i-6O%L*=NE5hYR4H9{ zL8OQ27z+26%23s`VJa%hEI;lhj7IdBVYW4*dc{rrur52!Aov2Wgoe#N9k-cS#a>?2 zk1gmQnbYAUH?CXwe+~?A!A>kcxHLLZbwWa)EcqG_9hC&@TtePBa zYk{oxPH~qQzc79XW2xMZhO?WAEG5XB*o>82>3Z207>VtZS-nn==)P}?{h^a@JEAGb z<{qd=ss07jiRFksNQu8)Twg(BbU@jliVD7dMurS+nhaSjtmr$y#8kj+*8}URY|&hP z2xmKRuglv5<8`9qR-ONE>8euvSD~wq?*;n6L62>{JU&&&cZuB=dakHx2^Xx@Coc<1 zvZ*PrOWgzIVd!G*i$OsqMrf-TY@aFWyeYecScq=3#yfK%H084eazUOAvJt5)e$RN` z(T5Q9hG2Jwak?$_YJhxRZg^muguIp$y&h01o^J`s#VPHz%=GLoD=+gw>ns#P@(LRS zvXSLFKa(p(!be_ZIg<&FwG-*cgThJMlLf*F8~e|;OI~M)BQuCQU*;YkifSJ$P7Xf8 zG{@16+kfB6D{=Z7hR0Q~-P(BuT{movM;r86v@ffne3!Y-1I87_Nu>BY z5%&8>LE5zw}8rtlMPSu#aH{hC*GuiN_MFdSW z+n`GbM_`W@Tcq3pcMDi9ecnw`-fCf4-%HU5Zq%uxt%i3$BK-Hy$ZMbWK-v%EaF6)x zm37c!pn?X42QGOuw^I2T)G7+o@!=tn*k+;8p7uVz?N`@kFP9?s{i9+}LAS literal 0 HcmV?d00001