diff --git a/example/assets/druid.atlas b/example/assets/druid.atlas new file mode 100644 index 0000000..e1cda80 --- /dev/null +++ b/example/assets/druid.atlas @@ -0,0 +1,40 @@ +images { + image: "/example/assets/images/empty.png" +} +images { + image: "/example/assets/images/icon_cross.png" +} +images { + image: "/example/assets/images/pixel.png" +} +images { + image: "/example/assets/images/ui_circle_8.png" +} +images { + image: "/example/assets/images/ui_circle_16.png" +} +images { + image: "/example/assets/images/ui_circle_32.png" +} +images { + image: "/example/assets/images/ui_circle_64.png" +} +images { + image: "/example/assets/images/ui_rounded_top_32.png" +} +images { + image: "/example/assets/images/icon_arrow.png" +} +images { + image: "/example/assets/images/icon_check.png" +} +images { + image: "/example/assets/images/rect_round2_width1.png" +} +images { + image: "/example/assets/images/ui_circle_64_blur_8.png" +} +images { + image: "/example/assets/images/icon_heart.png" +} +extrude_borders: 2 diff --git a/example/assets/druid_logo.atlas b/example/assets/druid_logo.atlas new file mode 100644 index 0000000..7dd2b36 --- /dev/null +++ b/example/assets/druid_logo.atlas @@ -0,0 +1,16 @@ +images { + image: "/example/assets/images/icon_druid.png" +} +images { + image: "/example/assets/images/logo_druid.png" +} +images { + image: "/example/assets/images/sponsor_coffee.png" +} +images { + image: "/example/assets/images/sponsor_github.png" +} +images { + image: "/example/assets/images/sponsor_kofi.png" +} +extrude_borders: 2 diff --git a/example/assets/fonts/Roboto-Bold.ttf b/example/assets/fonts/Roboto-Bold.ttf new file mode 100644 index 0000000..e64db79 Binary files /dev/null and b/example/assets/fonts/Roboto-Bold.ttf differ diff --git a/example/assets/fonts/Roboto-Regular.ttf b/example/assets/fonts/Roboto-Regular.ttf new file mode 100644 index 0000000..2d116d9 Binary files /dev/null and b/example/assets/fonts/Roboto-Regular.ttf differ diff --git a/example/assets/fonts/RobotoCJKSC-Bold.ttf b/example/assets/fonts/RobotoCJKSC-Bold.ttf new file mode 100644 index 0000000..767fec5 Binary files /dev/null and b/example/assets/fonts/RobotoCJKSC-Bold.ttf differ diff --git a/example/assets/fonts/RobotoCJKSC-Regular.ttf b/example/assets/fonts/RobotoCJKSC-Regular.ttf new file mode 100644 index 0000000..b9d12ba Binary files /dev/null and b/example/assets/fonts/RobotoCJKSC-Regular.ttf differ diff --git a/example/assets/fonts/text_bold.font b/example/assets/fonts/text_bold.font new file mode 100644 index 0000000..f5c97ff --- /dev/null +++ b/example/assets/fonts/text_bold.font @@ -0,0 +1,10 @@ +font: "/example/assets/fonts/RobotoCJKSC-Bold.ttf" +material: "/builtins/fonts/font-df.material" +size: 40 +outline_alpha: 1.0 +outline_width: 2.0 +shadow_alpha: 1.0 +shadow_blur: 2 +output_format: TYPE_DISTANCE_FIELD +render_mode: MODE_MULTI_LAYER +characters: "\302\241\302\253\302\273\302\277\303\200\303\202\303\206\303\207\303\210\303\211\303\212\303\213\303\216\303\217\303\224\303\231\303\233\303\234\303\237\303\240\303\241\303\242\303\243\303\244\303\246\303\247\303\250\303\251\303\252\303\253\303\255\303\256\303\257\303\261\303\262\303\263\303\264\303\265\303\266\303\271\303\273\303\274\303\277\305\222\305\223\305\270\320\201\320\220\320\221\320\222\320\223\320\224\320\225\320\226\320\227\320\230\320\231\320\232\320\233\320\234\320\235\320\236\320\237\320\240\320\241\320\242\320\243\320\244\320\245\320\246\320\247\320\250\320\251\320\252\320\253\320\254\320\255\320\256\320\257\320\260\320\261\320\262\320\263\320\264\320\265\320\266\320\267\320\270\320\271\320\272\320\273\320\274\320\275\320\276\320\277\321\200\321\201\321\202\321\203\321\204\321\205\321\206\321\207\321\210\321\211\321\212\321\213\321\214\321\215\321\216\321\217\321\221\342\200\224\343\200\201\343\200\202\343\200\214\343\200\215\343\201\202\343\201\204\343\201\206\343\201\210\343\201\212\343\201\213\343\201\214\343\201\215\343\201\217\343\201\223\343\201\225\343\201\227\343\201\230\343\201\231\343\201\233\343\201\237\343\201\240\343\201\244\343\201\246\343\201\247\343\201\250\343\201\251\343\201\252\343\201\253\343\201\256\343\201\257\343\201\263\343\201\276\343\202\200\343\202\201\343\202\202\343\202\210\343\202\211\343\202\212\343\202\213\343\202\214\343\202\222\343\202\223\343\202\241\343\202\242\343\202\243\343\202\244\343\202\246\343\202\250\343\202\251\343\202\254\343\202\255\343\202\257\343\202\260\343\202\261\343\202\262\343\202\263\343\202\265\343\202\267\343\202\270\343\202\271\343\202\272\343\202\273\343\202\277\343\203\200\343\203\201\343\203\203\343\203\206\343\203\207\343\203\210\343\203\211\343\203\213\343\203\215\343\203\216\343\203\220\343\203\221\343\203\224\343\203\225\343\203\226\343\203\227\343\203\231\343\203\233\343\203\234\343\203\235\343\203\236\343\203\240\343\203\241\343\203\242\343\203\243\343\203\245\343\203\247\343\203\251\343\203\252\343\203\253\343\203\254\343\203\255\343\203\257\343\203\263\343\203\274\344\270\200\344\270\207\344\270\212\344\270\213\344\270\215\344\270\216\344\270\241\344\270\244\344\270\252\344\270\255\344\270\272\344\271\211\344\271\260\344\272\213\344\272\216\344\273\213\344\273\216\344\273\230\344\273\243\344\273\245\344\273\254\344\273\266\344\275\206\344\275\223\344\275\225\344\275\234\344\275\240\344\275\277\344\276\213\344\277\241\345\200\244\345\200\274\345\201\234\345\205\203\345\205\205\345\205\245\345\205\266\345\206\205\345\207\246\345\207\272\345\207\273\345\210\206\345\210\227\345\210\233\345\210\235\345\210\240\345\210\245\345\210\260\345\210\266\345\211\212\345\211\215\345\211\252\345\212\233\345\212\237\345\212\240\345\212\250\345\212\271\345\214\272\345\215\225\345\215\230\345\217\214\345\217\221\345\217\226\345\217\243\345\217\246\345\217\257\345\220\210\345\220\214\345\220\221\345\220\227\345\220\253\345\220\257\345\222\214\345\231\250\345\233\236\345\234\250\345\235\227\345\236\202\345\236\213\345\237\237\345\237\272\345\240\261\345\241\253\345\244\204\345\244\232\345\244\247\345\245\275\345\246\202\345\247\213\345\255\227\345\255\230\345\256\203\345\256\232\345\257\206\345\257\214\345\257\271\345\260\206\345\260\217\345\260\261\345\261\200\345\261\217\345\261\236\345\267\245\345\270\203\345\270\246\345\271\225\345\271\263\345\271\266\345\272\246\345\273\272\345\274\200\345\274\271\345\276\227\345\277\205\345\277\253\346\200\201\346\200\247\346\201\257\346\202\254\346\203\205\346\210\217\346\210\220\346\211\200\346\211\213\346\212\236\346\212\274\346\213\226\346\213\251\346\214\201\346\214\211\346\215\256\346\215\267\346\216\247\346\217\203\346\220\255\346\221\270\346\223\215\346\224\257\346\224\276\346\225\210\346\225\260\346\225\264\346\226\207\346\226\271\346\227\245\346\227\266\346\230\216\346\230\257\346\230\276\346\233\264\346\234\200\346\234\211\346\234\254\346\235\206\346\235\241\346\236\220\346\237\204\346\237\245\346\240\207\346\240\274\346\243\200\346\251\237\346\254\241\346\255\244\346\255\245\346\260\264\346\261\275\346\262\241\346\263\225\346\264\262\346\265\213\346\266\210\346\267\267\346\267\273\346\270\205\346\270\270\346\273\221\346\273\232\347\202\271\347\211\210\347\216\207\347\220\206\347\224\250\347\224\273\347\225\260\347\231\276\347\232\204\347\233\264\347\233\270\347\234\213\347\240\201\347\241\200\347\241\256\347\242\272\347\244\272\347\247\222\347\247\273\347\252\227\347\253\257\347\255\276\347\256\200\347\260\241\347\261\273\347\264\224\347\264\240\347\264\271\347\272\265\347\273\204\347\273\215\347\273\221\347\274\223\347\274\251\347\275\221\347\275\256\347\276\216\347\276\251\350\203\275\350\211\257\350\211\262\350\212\202\350\216\267\350\241\214\350\241\250\350\243\201\350\244\207\350\246\201\350\246\213\350\247\246\350\250\200\350\250\255\350\252\215\350\252\236\350\252\254\350\252\277\350\256\241\350\256\244\350\256\276\350\257\225\350\257\255\350\257\264\350\257\267\350\260\203\350\261\271\350\263\274\350\264\255\350\267\235\350\273\212\350\273\270\350\275\246\350\275\264\350\276\223\350\276\271\350\277\207\350\277\231\350\277\233\350\277\275\351\200\211\351\200\232\351\201\270\351\205\215\351\207\214\351\222\256\351\224\256\351\225\267\351\225\277\351\231\244\351\234\200\351\235\231\351\235\242\351\240\230\351\242\204\351\242\234\351\252\244\351\253\230\351\274\240\351\275\220\352\260\200\352\260\204\352\260\222\352\260\231\352\260\234\352\261\260\352\262\203\352\262\214\352\262\240\352\263\204\352\263\240\352\263\274\352\265\254\352\265\255\352\267\270\352\270\200\352\270\260\352\271\214\352\273\230\352\274\264\353\202\230\353\202\264\353\204\214\353\205\270\353\206\223\353\210\204\353\212\224\353\212\245\353\213\210\353\213\244\353\213\250\353\213\254\353\213\271\353\214\200\353\215\224\353\215\260\353\217\204\353\217\231\353\220\230\353\220\234\353\220\251\353\221\220\353\223\234\353\223\244\353\224\251\353\225\214\353\226\273\353\235\274\353\236\230\353\236\265\353\237\254\353\240\210\353\240\244\353\240\245\353\240\254\353\241\234\353\241\235\353\241\244\353\245\264\353\245\270\353\245\274\353\246\254\353\246\255\353\247\210\353\247\214\353\247\216\353\247\244\353\250\270\353\251\224\353\251\264\353\252\205\353\252\250\353\252\251\353\260\200\353\260\217\353\260\224\353\260\233\353\260\251\353\260\260\353\260\261\353\262\204\353\262\210\353\262\225\353\262\227\353\262\244\353\263\264\353\263\270\353\270\224\353\271\204\354\202\254\354\203\201\354\203\211\354\204\234\354\204\240\354\204\244\354\204\261\354\204\270\354\205\230\354\206\214\354\206\215\354\210\230\354\212\244\354\212\254\354\212\265\354\213\234\354\213\240\354\213\255\354\225\204\354\225\240\354\226\221\354\226\264\354\226\270\354\227\206\354\227\220\354\227\254\354\227\255\354\230\201\354\230\210\354\230\244\354\230\254\354\231\200\354\232\224\354\232\251\354\232\260\354\233\203\354\234\204\354\234\210\354\234\240\354\234\250\354\234\274\354\235\200\354\235\204\354\235\214\354\235\230\354\235\264\354\235\270\354\235\274\354\236\204\354\236\205\354\236\210\354\236\220\354\236\221\354\236\230\354\236\245\354\240\201\354\240\204\354\240\225\354\240\234\354\241\260\354\242\213\354\244\221\354\247\200\354\247\201\354\247\204\354\247\210\354\260\250\354\260\275\354\262\230\354\264\210\354\265\234\354\266\224\354\266\225\354\266\234\354\267\250\354\271\230\354\272\220\354\273\250\354\273\264\354\274\200\354\275\224\354\275\234\355\201\254\355\201\264\355\202\244\355\203\200\355\203\204\355\203\234\355\203\235\355\204\260\355\205\214\355\205\215\355\212\270\355\212\274\355\213\261\355\214\214\355\214\250\355\214\254\355\217\211\355\217\254\355\221\234\355\224\204\355\224\274\355\225\204\355\225\221\355\225\230\355\225\234\355\225\240\355\225\250\355\225\251\355\225\264\355\226\211\355\230\225\355\230\270\355\230\274\355\231\224\355\231\225\355\231\234\355\232\250\357\274\201\357\274\214\357\274\237 !\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_abcdefghijklmnopqrstuvwxyz{|}" diff --git a/example/assets/fonts/text_regular.font b/example/assets/fonts/text_regular.font new file mode 100644 index 0000000..2cd3673 --- /dev/null +++ b/example/assets/fonts/text_regular.font @@ -0,0 +1,8 @@ +font: "/example/assets/fonts/RobotoCJKSC-Regular.ttf" +material: "/builtins/fonts/font-df.material" +size: 40 +outline_alpha: 1.0 +outline_width: 2.0 +output_format: TYPE_DISTANCE_FIELD +render_mode: MODE_MULTI_LAYER +characters: "\302\241\302\253\302\273\302\277\303\200\303\202\303\206\303\207\303\210\303\211\303\212\303\213\303\216\303\217\303\224\303\231\303\233\303\234\303\237\303\240\303\241\303\242\303\243\303\244\303\246\303\247\303\250\303\251\303\252\303\253\303\255\303\256\303\257\303\261\303\262\303\263\303\264\303\265\303\266\303\271\303\273\303\274\303\277\305\222\305\223\305\270\320\201\320\220\320\221\320\222\320\223\320\224\320\225\320\226\320\227\320\230\320\231\320\232\320\233\320\234\320\235\320\236\320\237\320\240\320\241\320\242\320\243\320\244\320\245\320\246\320\247\320\250\320\251\320\252\320\253\320\254\320\255\320\256\320\257\320\260\320\261\320\262\320\263\320\264\320\265\320\266\320\267\320\270\320\271\320\272\320\273\320\274\320\275\320\276\320\277\321\200\321\201\321\202\321\203\321\204\321\205\321\206\321\207\321\210\321\211\321\212\321\213\321\214\321\215\321\216\321\217\321\221\342\200\224\343\200\201\343\200\202\343\200\214\343\200\215\343\201\202\343\201\204\343\201\206\343\201\210\343\201\212\343\201\213\343\201\214\343\201\215\343\201\217\343\201\223\343\201\225\343\201\227\343\201\230\343\201\231\343\201\233\343\201\237\343\201\240\343\201\244\343\201\246\343\201\247\343\201\250\343\201\251\343\201\252\343\201\253\343\201\256\343\201\257\343\201\263\343\201\276\343\202\200\343\202\201\343\202\202\343\202\210\343\202\211\343\202\212\343\202\213\343\202\214\343\202\222\343\202\223\343\202\241\343\202\242\343\202\243\343\202\244\343\202\246\343\202\250\343\202\251\343\202\254\343\202\255\343\202\257\343\202\260\343\202\261\343\202\262\343\202\263\343\202\265\343\202\267\343\202\270\343\202\271\343\202\272\343\202\273\343\202\277\343\203\200\343\203\201\343\203\203\343\203\206\343\203\207\343\203\210\343\203\211\343\203\213\343\203\215\343\203\216\343\203\220\343\203\221\343\203\224\343\203\225\343\203\226\343\203\227\343\203\231\343\203\233\343\203\234\343\203\235\343\203\236\343\203\240\343\203\241\343\203\242\343\203\243\343\203\245\343\203\247\343\203\251\343\203\252\343\203\253\343\203\254\343\203\255\343\203\257\343\203\263\343\203\274\344\270\200\344\270\207\344\270\212\344\270\213\344\270\215\344\270\216\344\270\241\344\270\244\344\270\252\344\270\255\344\270\272\344\271\211\344\271\260\344\272\213\344\272\216\344\273\213\344\273\216\344\273\230\344\273\243\344\273\245\344\273\254\344\273\266\344\275\206\344\275\223\344\275\225\344\275\234\344\275\240\344\275\277\344\276\213\344\277\241\345\200\244\345\200\274\345\201\234\345\205\203\345\205\205\345\205\245\345\205\266\345\206\205\345\207\246\345\207\272\345\207\273\345\210\206\345\210\227\345\210\233\345\210\235\345\210\240\345\210\245\345\210\260\345\210\266\345\211\212\345\211\215\345\211\252\345\212\233\345\212\237\345\212\240\345\212\250\345\212\271\345\214\272\345\215\225\345\215\230\345\217\214\345\217\221\345\217\226\345\217\243\345\217\246\345\217\257\345\220\210\345\220\214\345\220\221\345\220\227\345\220\253\345\220\257\345\222\214\345\231\250\345\233\236\345\234\250\345\235\227\345\236\202\345\236\213\345\237\237\345\237\272\345\240\261\345\241\253\345\244\204\345\244\232\345\244\247\345\245\275\345\246\202\345\247\213\345\255\227\345\255\230\345\256\203\345\256\232\345\257\206\345\257\214\345\257\271\345\260\206\345\260\217\345\260\261\345\261\200\345\261\217\345\261\236\345\267\245\345\270\203\345\270\246\345\271\225\345\271\263\345\271\266\345\272\246\345\273\272\345\274\200\345\274\271\345\276\227\345\277\205\345\277\253\346\200\201\346\200\247\346\201\257\346\202\254\346\203\205\346\210\217\346\210\220\346\211\200\346\211\213\346\212\236\346\212\274\346\213\226\346\213\251\346\214\201\346\214\211\346\215\256\346\215\267\346\216\247\346\217\203\346\220\255\346\221\270\346\223\215\346\224\257\346\224\276\346\225\210\346\225\260\346\225\264\346\226\207\346\226\271\346\227\245\346\227\266\346\230\216\346\230\257\346\230\276\346\233\264\346\234\200\346\234\211\346\234\254\346\235\206\346\235\241\346\236\220\346\237\204\346\237\245\346\240\207\346\240\274\346\243\200\346\251\237\346\254\241\346\255\244\346\255\245\346\260\264\346\261\275\346\262\241\346\263\225\346\264\262\346\265\213\346\266\210\346\267\267\346\267\273\346\270\205\346\270\270\346\273\221\346\273\232\347\202\271\347\211\210\347\216\207\347\220\206\347\224\250\347\224\273\347\225\260\347\231\276\347\232\204\347\233\264\347\233\270\347\234\213\347\240\201\347\241\200\347\241\256\347\242\272\347\244\272\347\247\222\347\247\273\347\252\227\347\253\257\347\255\276\347\256\200\347\260\241\347\261\273\347\264\224\347\264\240\347\264\271\347\272\265\347\273\204\347\273\215\347\273\221\347\274\223\347\274\251\347\275\221\347\275\256\347\276\216\347\276\251\350\203\275\350\211\257\350\211\262\350\212\202\350\216\267\350\241\214\350\241\250\350\243\201\350\244\207\350\246\201\350\246\213\350\247\246\350\250\200\350\250\255\350\252\215\350\252\236\350\252\254\350\252\277\350\256\241\350\256\244\350\256\276\350\257\225\350\257\255\350\257\264\350\257\267\350\260\203\350\261\271\350\263\274\350\264\255\350\267\235\350\273\212\350\273\270\350\275\246\350\275\264\350\276\223\350\276\271\350\277\207\350\277\231\350\277\233\350\277\275\351\200\211\351\200\232\351\201\270\351\205\215\351\207\214\351\222\256\351\224\256\351\225\267\351\225\277\351\231\244\351\234\200\351\235\231\351\235\242\351\240\230\351\242\204\351\242\234\351\252\244\351\253\230\351\274\240\351\275\220\352\260\200\352\260\204\352\260\222\352\260\231\352\260\234\352\261\260\352\262\203\352\262\214\352\262\240\352\263\204\352\263\240\352\263\274\352\265\254\352\265\255\352\267\270\352\270\200\352\270\260\352\271\214\352\273\230\352\274\264\353\202\230\353\202\264\353\204\214\353\205\270\353\206\223\353\210\204\353\212\224\353\212\245\353\213\210\353\213\244\353\213\250\353\213\254\353\213\271\353\214\200\353\215\224\353\215\260\353\217\204\353\217\231\353\220\230\353\220\234\353\220\251\353\221\220\353\223\234\353\223\244\353\224\251\353\225\214\353\226\273\353\235\274\353\236\230\353\236\265\353\237\254\353\240\210\353\240\244\353\240\245\353\240\254\353\241\234\353\241\235\353\241\244\353\245\264\353\245\270\353\245\274\353\246\254\353\246\255\353\247\210\353\247\214\353\247\216\353\247\244\353\250\270\353\251\224\353\251\264\353\252\205\353\252\250\353\252\251\353\260\200\353\260\217\353\260\224\353\260\233\353\260\251\353\260\260\353\260\261\353\262\204\353\262\210\353\262\225\353\262\227\353\262\244\353\263\264\353\263\270\353\270\224\353\271\204\354\202\254\354\203\201\354\203\211\354\204\234\354\204\240\354\204\244\354\204\261\354\204\270\354\205\230\354\206\214\354\206\215\354\210\230\354\212\244\354\212\254\354\212\265\354\213\234\354\213\240\354\213\255\354\225\204\354\225\240\354\226\221\354\226\264\354\226\270\354\227\206\354\227\220\354\227\254\354\227\255\354\230\201\354\230\210\354\230\244\354\230\254\354\231\200\354\232\224\354\232\251\354\232\260\354\233\203\354\234\204\354\234\210\354\234\240\354\234\250\354\234\274\354\235\200\354\235\204\354\235\214\354\235\230\354\235\264\354\235\270\354\235\274\354\236\204\354\236\205\354\236\210\354\236\220\354\236\221\354\236\230\354\236\245\354\240\201\354\240\204\354\240\225\354\240\234\354\241\260\354\242\213\354\244\221\354\247\200\354\247\201\354\247\204\354\247\210\354\260\250\354\260\275\354\262\230\354\264\210\354\265\234\354\266\224\354\266\225\354\266\234\354\267\250\354\271\230\354\272\220\354\273\250\354\273\264\354\274\200\354\275\224\354\275\234\355\201\254\355\201\264\355\202\244\355\203\200\355\203\204\355\203\234\355\203\235\355\204\260\355\205\214\355\205\215\355\212\270\355\212\274\355\213\261\355\214\214\355\214\250\355\214\254\355\217\211\355\217\254\355\221\234\355\224\204\355\224\274\355\225\204\355\225\221\355\225\230\355\225\234\355\225\240\355\225\250\355\225\251\355\225\264\355\226\211\355\230\225\355\230\270\355\230\274\355\231\224\355\231\225\355\231\234\355\232\250\357\274\201\357\274\214\357\274\237 !\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_abcdefghijklmnopqrstuvwxyz{|}" diff --git a/example/assets/images/empty.png b/example/assets/images/empty.png new file mode 100755 index 0000000..36b4ff1 Binary files /dev/null and b/example/assets/images/empty.png differ diff --git a/example/assets/images/icon_arrow.png b/example/assets/images/icon_arrow.png new file mode 100644 index 0000000..80b29f2 Binary files /dev/null and b/example/assets/images/icon_arrow.png differ diff --git a/example/assets/images/icon_check.png b/example/assets/images/icon_check.png new file mode 100644 index 0000000..d32bb3f Binary files /dev/null and b/example/assets/images/icon_check.png differ diff --git a/example/assets/images/icon_cross.png b/example/assets/images/icon_cross.png new file mode 100644 index 0000000..5f227ff Binary files /dev/null and b/example/assets/images/icon_cross.png differ diff --git a/example/assets/images/icon_druid.png b/example/assets/images/icon_druid.png new file mode 100644 index 0000000..22a26ce Binary files /dev/null and b/example/assets/images/icon_druid.png differ diff --git a/example/assets/images/icon_heart.png b/example/assets/images/icon_heart.png new file mode 100644 index 0000000..840ce21 Binary files /dev/null and b/example/assets/images/icon_heart.png differ diff --git a/example/assets/images/logo_druid.png b/example/assets/images/logo_druid.png new file mode 100644 index 0000000..094c058 Binary files /dev/null and b/example/assets/images/logo_druid.png differ diff --git a/example/assets/images/pixel.png b/example/assets/images/pixel.png new file mode 100755 index 0000000..9619df8 Binary files /dev/null and b/example/assets/images/pixel.png differ diff --git a/example/assets/images/rect_round2_width1.png b/example/assets/images/rect_round2_width1.png new file mode 100644 index 0000000..bbde0a6 Binary files /dev/null and b/example/assets/images/rect_round2_width1.png differ diff --git a/example/assets/images/sponsor_coffee.png b/example/assets/images/sponsor_coffee.png new file mode 100644 index 0000000..899870f Binary files /dev/null and b/example/assets/images/sponsor_coffee.png differ diff --git a/example/assets/images/sponsor_github.png b/example/assets/images/sponsor_github.png new file mode 100644 index 0000000..c1aa5bf Binary files /dev/null and b/example/assets/images/sponsor_github.png differ diff --git a/example/assets/images/sponsor_kofi.png b/example/assets/images/sponsor_kofi.png new file mode 100644 index 0000000..5e8d3ce Binary files /dev/null and b/example/assets/images/sponsor_kofi.png differ diff --git a/example/assets/images/ui_circle_16.png b/example/assets/images/ui_circle_16.png new file mode 100644 index 0000000..559c77c Binary files /dev/null and b/example/assets/images/ui_circle_16.png differ diff --git a/example/assets/images/ui_circle_32.png b/example/assets/images/ui_circle_32.png new file mode 100644 index 0000000..82932ca Binary files /dev/null and b/example/assets/images/ui_circle_32.png differ diff --git a/example/assets/images/ui_circle_64.png b/example/assets/images/ui_circle_64.png new file mode 100644 index 0000000..c74547d Binary files /dev/null and b/example/assets/images/ui_circle_64.png differ diff --git a/example/assets/images/ui_circle_64_blur_8.png b/example/assets/images/ui_circle_64_blur_8.png new file mode 100644 index 0000000..23e6897 Binary files /dev/null and b/example/assets/images/ui_circle_64_blur_8.png differ diff --git a/example/assets/images/ui_circle_8.png b/example/assets/images/ui_circle_8.png new file mode 100644 index 0000000..0d49e70 Binary files /dev/null and b/example/assets/images/ui_circle_8.png differ diff --git a/example/assets/images/ui_rounded_top_32.png b/example/assets/images/ui_rounded_top_32.png new file mode 100644 index 0000000..3585730 Binary files /dev/null and b/example/assets/images/ui_rounded_top_32.png differ diff --git a/example/components/container/container.lua b/example/components/container/container.lua new file mode 100644 index 0000000..7f71ba4 --- /dev/null +++ b/example/components/container/container.lua @@ -0,0 +1,528 @@ +--- Container component +-- Container setup in GUI +-- parent container - container that contains this container. If not, then it's a window default container +-- container pivot - the point of the parent container that will be used as a pivot point for positioning +-- node_offset - position offset from parent container pivot point (vector4 - offset in pixels from each side) +-- adjust mode FIT - container will keep it's size and will be positioned inside parent container +-- adjust mode STRETCH - container will have percentage of parent container size +-- adjust mode STRETCH_X - container will have percentage of parent container size (only x side) +-- adjust mode STRETCH_Y - container will have percentage of parent container size (only y side) +-- Adjust Stretch and x_anchor == None: container will be positioned by pivot point with one side fixed margin, stretched to pivot side by percentage +-- Adjust stretch and x_anchor ~= None: container will be positioned by pivot point, stretched to pivot side by percentage, but with fixed margins +-- Inner container should be inside other container + +local const = require("druid.const") +local helper = require("druid.helper") +local component = require("druid.component") +local Event = require("druid.event") + +---@class druid.container: druid.base_component +---@field node node +---@field druid druid_instance +---@field node_offset vector4 +---@field origin_size vector3 +---@field size vector3 +---@field origin_position vector3 +---@field position vector3 +---@field pivot_offset vector3 +---@field center_offset vector3 +---@field mode string +---@field fit_size vector3 +---@field min_size_x number|nil +---@field min_size_y number|nil +---@field on_size_changed druid.event @function on_size_changed(size) +---@field _parent_container druid.container +---@field _containers table +---@field _draggable_corners table +local Container = component.create("container") + +local abs = math.abs +local min = math.min +local max = math.max + +local CORNER_PIVOTS = { + gui.PIVOT_NE, + gui.PIVOT_NW, + gui.PIVOT_SE, + gui.PIVOT_SW, +} + + +--- The Container init +---@param node node Gui node +---@param mode string Layout mode +---@param callback fun(self: druid.container, size: vector3) Callback on size changed +function Container:init(node, mode, callback) + self.node = self:get_node(node) + self.druid = self:get_druid() + + self.min_size_x = 0 + self.min_size_y = 0 + self._containers = {} + self._draggable_corners = {} + self.node_offset = vmath.vector4(0) + self.node_fill_x = nil + self.node_fill_y = nil + self._position = gui.get_position(self.node) + local x_koef, y_koef = helper.get_screen_aspect_koef() + self.x_koef = x_koef + self.y_koef = y_koef + + self.x_anchor = gui.get_xanchor(self.node) + self.y_anchor = gui.get_yanchor(self.node) + + -- Can be changed + self.origin_size = gui.get_size(self.node) + self.size = gui.get_size(self.node) + self.position = gui.get_position(self.node) + self.origin_position = gui.get_position(self.node) + + local adjust_mode = gui.get_adjust_mode(self.node) + self.mode = mode or (adjust_mode == gui.ADJUST_FIT) and const.LAYOUT_MODE.FIT or const.LAYOUT_MODE.STRETCH + + gui.set_size_mode(self.node, gui.SIZE_MODE_MANUAL) + gui.set_adjust_mode(self.node, gui.ADJUST_FIT) + + self.on_size_changed = Event(callback) + + self.pivot_offset = helper.get_pivot_offset(gui.get_pivot(self.node)) + self.center_offset = -vmath.vector3(self.size.x * self.pivot_offset.x, self.size.y * self.pivot_offset.y, 0) + self:set_size(self.size.x, self.size.y) +end + + +function Container:on_late_init() + if not gui.get_parent(self.node) then + -- TODO: Scale issue here, in fit into window! + self:fit_into_window() + end +end + + +function Container:on_remove() + self:clear_draggable_corners() +end + + +function Container:refresh_origins() + self.origin_size = gui.get_size(self.node) + self.origin_position = gui.get_position(self.node) + self:set_pivot(gui.get_pivot(self.node)) +end + + +---@param pivot constant +function Container:set_pivot(pivot) + gui.set_pivot(self.node, pivot) + self.pivot_offset = helper.get_pivot_offset(pivot) + self.center_offset = -vmath.vector3(self.size.x * self.pivot_offset.x, self.size.y * self.pivot_offset.y, 0) +end + + +--- Component style params. +-- You can override this component styles params in Druid styles table +-- or create your own style +-- @table style +-- @tfield[opt=vector3(24, 24, 0)] vector3 DRAGGABLE_CORNER_SIZE Size of box node for debug draggable corners +-- @tfield[opt=vector4(1)] vector4 DRAGGABLE_CORNER_COLOR Color of debug draggable corners +function Container:on_style_change(style) + self.style = {} + self.style.DRAGGABLE_CORNER_SIZE = style.DRAGGABLE_CORNER_SIZE or vmath.vector3(24, 24, 0) + self.style.DRAGGABLE_CORNER_COLOR = style.DRAGGABLE_CORNER_COLOR or vmath.vector4(10) +end + + +--- Set new size of layout node +---@param width number|nil +---@param height number|nil +---@return druid.container @{Container} +function Container:set_size(width, height) + width = width or self.size.x + height = height or self.size.y + + if self.min_size_x then + width = max(width, self.min_size_x) + end + if self.min_size_y then + height = max(height, self.min_size_y) + end + + if (width and width ~= self.size.x) or (height and height ~= self.size.y) then + self.center_offset.x = -width * self.pivot_offset.x + self.center_offset.y = -height * self.pivot_offset.y + self.size.x = width + self.size.y = height + self.size.z = 0 + gui.set_size(self.node, self.size) + + self:update_child_containers() + self.on_size_changed:trigger(self:get_context(), self.size) + end + + return self +end + + +---@param pos_x number +---@param pos_y number +function Container:set_position(pos_x, pos_y) + if self._position.x == pos_x and self._position.y == pos_y then + return + end + + self._position.x = pos_x + self._position.y = pos_y + gui.set_position(self.node, self._position) +end + + +---Get current size of layout node +---@return vector3 size +function Container:get_size() + return self.size +end + + +---Get current scale of layout node +---@return vector3 scale +function Container:get_scale() + return helper.get_scene_scale(self.node, true) --[[@as vector3]] +end + + +--- Set size for layout node to fit inside it +---@param target_size vector3 +---@return druid.container @{Container} +function Container:fit_into_size(target_size) + self.fit_size = target_size + self:refresh() + return self +end + + +--- Set current size for layout node to fit inside it +---@return druid.container @{Container} +function Container:fit_into_window() + return self:fit_into_size(vmath.vector3(gui.get_width(), gui.get_height(), 0)) +end + + +---@param self druid.container +function Container:on_window_resized() + local x_koef, y_koef = helper.get_screen_aspect_koef() + self.x_koef = x_koef + self.y_koef = y_koef + + if not self._parent_container then + self:refresh() + end +end + + +---@param node_or_container node|string|druid.container|table +---@param mode string|nil stretch, fit, stretch_x, stretch_y. Default: Pick from node, "fit" or "stretch" +---@param on_resize_callback fun(self: userdata, size: vector3)|nil +---@return druid.container @{Container} New created layout instance +function Container:add_container(node_or_container, mode, on_resize_callback) + local container = nil + local node = node_or_container + + -- Check it's a container components instead of node + if type(node_or_container) == "table" and node_or_container._component then + node = node_or_container.node + container = node_or_container + mode = mode or container.mode + end + + -- Covert node_id to node if needed + node = self:get_node(node) + + container = container or self.druid:new(Container, node, mode) + container:set_parent_container(self) + if on_resize_callback then + container.on_size_changed:subscribe(on_resize_callback) + end + table.insert(self._containers, container) + + return container +end + + +---@return druid.container|nil +function Container:remove_container_by_node(node) + for index = 1, #self._containers do + local container = self._containers[index] + if container.node == node then + table.remove(self._containers, index) + self.druid:remove(container) + return container + end + end + + return nil +end + + +---@param parent_container druid.container|nil +function Container:set_parent_container(parent_container) + if not parent_container then + self._parent_container = nil + gui.set_parent(self.node, nil) + self:refresh() + return + end + + -- TODO: Just check it's already parent + gui.set_parent(self.node, parent_container.node, true) + + -- Node offset - fixed distance from parent side to the child side + local parent_left = parent_container.center_offset.x - parent_container.origin_size.x * 0.5 + local parent_right = parent_container.center_offset.x + parent_container.origin_size.x * 0.5 + local parent_top = parent_container.center_offset.y + parent_container.origin_size.y * 0.5 + local parent_bottom = parent_container.center_offset.y - parent_container.origin_size.y * 0.5 + + local node_left = self.origin_position.x + self.center_offset.x - self.origin_size.x * 0.5 + local node_right = self.origin_position.x + self.center_offset.x + self.origin_size.x * 0.5 + local node_top = self.origin_position.y + self.center_offset.y + self.origin_size.y * 0.5 + local node_bottom = self.origin_position.y + self.center_offset.y - self.origin_size.y * 0.5 + + self.node_offset.x = node_left - parent_left + self.node_offset.y = node_top - parent_top + self.node_offset.z = node_right - parent_right + self.node_offset.w = node_bottom - parent_bottom + self._parent_container = parent_container + + local offset_x = (self.node_offset.x + self.node_offset.z)/2 + local offset_y = (self.node_offset.y + self.node_offset.w)/2 + + if self.pivot_offset.x < 0 then + offset_x = self.node_offset.x + end + if self.pivot_offset.x > 0 then + offset_x = self.node_offset.z + end + if self.pivot_offset.y < 0 then + offset_y = self.node_offset.w + end + if self.pivot_offset.y > 0 then + offset_y = self.node_offset.y + end + + local koef_x = (parent_container.origin_size.x - abs(offset_x)) + self.node_fill_x = koef_x ~= 0 and self.origin_size.x / koef_x or 1 + local x_anchor = gui.get_xanchor(self.node) + if x_anchor ~= gui.ANCHOR_NONE then + self.node_fill_x = 1 + end + + local koef_y = (parent_container.origin_size.y - abs(offset_y)) + self.node_fill_y = koef_y ~= 0 and self.origin_size.y / koef_y or 1 + local y_anchor = gui.get_yanchor(self.node) + if y_anchor ~= gui.ANCHOR_NONE then + self.node_fill_y = 1 + end + + self:refresh() +end + + +-- Glossary +-- Center Offset - vector from node position to visual center of node +function Container:refresh() + local x_koef, y_koef = self.x_koef, self.y_koef + self:refresh_scale() + + if self._parent_container then + local parent = self._parent_container + local offset_x = (self.node_offset.x + self.node_offset.z) / 2 + local offset_y = (self.node_offset.y + self.node_offset.w) / 2 + + if self.pivot_offset.x < 0 then + offset_x = self.node_offset.x + end + if self.pivot_offset.x > 0 then + offset_x = self.node_offset.z + end + if self.pivot_offset.y < 0 then + offset_y = self.node_offset.w + end + if self.pivot_offset.y > 0 then + offset_y = self.node_offset.y + end + + local stretch_side_x = parent.size.x - abs(offset_x) + local stretch_side_y = parent.size.y - abs(offset_y) + + do + local parent_pivot_x = parent.center_offset.x + (parent.size.x * self.pivot_offset.x) + local parent_pivot_y = parent.center_offset.y + (parent.size.y * self.pivot_offset.y) + local pos_x = parent_pivot_x + offset_x + local pos_y = parent_pivot_y + offset_y + self:set_position(pos_x, pos_y) + end + + do + if self.x_anchor ~= gui.ANCHOR_NONE then + stretch_side_x = parent.size.x - (abs(self.node_offset.x) + abs(self.node_offset.z)) + end + + if self.y_anchor ~= gui.ANCHOR_NONE then + stretch_side_y = parent.size.y - (abs(self.node_offset.y) + abs(self.node_offset.w)) + end + + ---- Size Update (for stretch) + if self.mode == const.LAYOUT_MODE.STRETCH then + self:set_size( + abs(stretch_side_x * self.node_fill_x), + abs(stretch_side_y * self.node_fill_y)) + end + + if self.mode == const.LAYOUT_MODE.STRETCH_X then + self:set_size(abs(stretch_side_x * self.node_fill_x), nil) + end + + if self.mode == const.LAYOUT_MODE.STRETCH_Y then + self:set_size(nil, abs(stretch_side_y * self.node_fill_y)) + end + end + else + if self.fit_size then + x_koef = self.fit_size.x / self.origin_size.x * x_koef + y_koef = self.fit_size.y / self.origin_size.y * y_koef + + if self.mode == const.LAYOUT_MODE.STRETCH then + self:set_size(self.origin_size.x * x_koef, self.origin_size.y * y_koef) + end + end + end + + self:update_child_containers() +end + + +function Container:refresh_scale() + if self._fit_node then + local fit_node_size = gui.get_size(self._fit_node) + + local scale = vmath.vector3(1) + scale.x = min(fit_node_size.x / self.size.x, 1) + scale.y = min(fit_node_size.y / self.size.y, 1) + + scale.x = min(scale.x, scale.y) + scale.y = min(scale.x, scale.y) + + gui.set_scale(self.node, scale) + end +end + + +function Container:update_child_containers() + for index = 1, #self._containers do + self._containers[index]:refresh() + end +end + + +---@return druid.container @{Container} +function Container:create_draggable_corners() + self:clear_draggable_corners() + + for _, corner_pivot in pairs(CORNER_PIVOTS) do + local corner_offset = helper.get_pivot_offset(corner_pivot) + local anchor_position = vmath.vector3( + self.center_offset.x + (self.size.x) * corner_offset.x, + self.center_offset.y + (self.size.y) * corner_offset.y, + 0) + + local new_draggable_node = gui.new_box_node(anchor_position, self.style.DRAGGABLE_CORNER_SIZE) + gui.set_color(new_draggable_node, self.style.DRAGGABLE_CORNER_COLOR) + gui.set_pivot(new_draggable_node, corner_pivot) + gui.set_parent(new_draggable_node, self.node) + self:add_container(new_draggable_node) + + ---@type druid.drag + local drag = self.druid:new_drag(new_draggable_node, function(_, x, y) + self:_on_corner_drag(x, y, corner_offset) + end) + table.insert(self._draggable_corners, drag) + + drag.style.DRAG_DEADZONE = 0 + end + + return self +end + + +---@return druid.container @{Container} +function Container:clear_draggable_corners() + for index = 1, #self._draggable_corners do + local drag_component = self._draggable_corners[index] + self.druid:remove(drag_component) + self:remove_container_by_node(drag_component.node) + gui.delete_node(drag_component.node) + end + + self._draggable_corners = {} + + return self +end + + +function Container:_on_corner_drag(x, y, corner_offset) + x = corner_offset.x >= 0 and x or -x + y = corner_offset.y >= 0 and y or -y + + local size = self:get_size() + if self.min_size_x and size.x + x < self.min_size_x then + x = self.min_size_x - size.x + end + if self.min_size_y and size.y + y < self.min_size_y then + y = self.min_size_y - size.y + end + + if corner_offset.x < 0 then + self.node_offset.x = self.node_offset.x - x + end + if corner_offset.x > 0 then + self.node_offset.z = self.node_offset.z - x + end + if corner_offset.y < 0 then + self.node_offset.w = self.node_offset.w - y + end + if corner_offset.y > 0 then + self.node_offset.y = self.node_offset.y - y + end + + local pivot = gui.get_pivot(self.node) + local pivot_offset = helper.get_pivot_offset(pivot) + + local center_pos_x = self._position.x + (x * (pivot_offset.x + corner_offset.x)) + local center_pos_y = self._position.y + (y * (pivot_offset.y + corner_offset.y)) + + self:set_position(center_pos_x, center_pos_y) + self:set_size(size.x + x, size.y + y) +end + + +--- Set node for layout node to fit inside it. Pass nil to reset +---@param node string|node The node_id or gui.get_node(node_id) +---@return druid.container @{Layout} +function Container:fit_into_node(node) + self._fit_node = self:get_node(node) + self:refresh_scale() + return self +end + + +---@param min_size_x number|nil +---@param min_size_y number|nil +function Container:set_min_size(min_size_x, min_size_y) + self.min_size_x = min_size_x or self.min_size_x + self.min_size_y = min_size_y or self.min_size_y + self:refresh() + + return self +end + + +return Container diff --git a/example/components/druid_logo/druid_logo.gui b/example/components/druid_logo/druid_logo.gui new file mode 100644 index 0000000..15b549d --- /dev/null +++ b/example/components/druid_logo/druid_logo.gui @@ -0,0 +1,451 @@ +script: "" +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +textures { + name: "druid_logo" + texture: "/example/assets/druid_logo.atlas" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 170.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 200.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 16.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "E_Anchor" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_E + adjust_mode: ADJUST_MODE_STRETCH + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 10.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid_logo/icon_druid" + id: "icon_druid_right" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "E_Anchor" + layer: "druid_logo" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 0.5 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -200.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 16.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "W_Anchor" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_STRETCH + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: -10.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid_logo/icon_druid" + id: "icon_druid_left" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "W_Anchor" + layer: "druid_logo" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 0.5 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid_logo/logo_druid" + id: "icon_logo" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "druid_logo" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -50.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.6 + y: 0.6 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Defold UI Framework" + font: "text_regular" + id: "text_description" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_regular" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "druid_logo" +} +layers { + name: "text_regular" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/components/druid_logo/druid_logo.lua b/example/components/druid_logo/druid_logo.lua new file mode 100644 index 0000000..4784a80 --- /dev/null +++ b/example/components/druid_logo/druid_logo.lua @@ -0,0 +1,48 @@ +local panthera = require("panthera.panthera") +local component = require("druid.component") + +local druid_logo_panthera = require("example.components.druid_logo.druid_logo_panthera") +local container = require("example.components.container.container") + +---@class druid_logo: druid.base_component +---@field root druid.container +---@field text_description druid.text +---@field druid druid_instance +local DruidLogo = component.create("druid_logo") + + +---@param template string +---@param nodes table +function DruidLogo:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self.druid:new(container, "root") --[[@as druid.container]] + self.root:add_container("E_Anchor") + self.root:add_container("W_Anchor") + + self.druid:new_button("root", self.on_click):set_style(nil) + + self.animation = panthera.create_gui(druid_logo_panthera, self:get_template(), nodes) + panthera.play(self.animation, "idle", { is_loop = true }) + + self.animation_hover = panthera.clone_state(self.animation) + self.hover = self.druid:new_hover("root") + self.hover.on_mouse_hover:subscribe(self.on_mouse_hover) +end + + +function DruidLogo:on_click() + sys.open_url("https://github.com/Insality/druid", { target = "_blank" }) +end + + +function DruidLogo:on_mouse_hover(is_hover) + if is_hover then + panthera.play(self.animation_hover, "on_hover_in") + else + panthera.play(self.animation_hover, "on_hover_out", { is_skip_init = true }) + end +end + + +return DruidLogo diff --git a/example/components/druid_logo/druid_logo_panthera.lua b/example/components/druid_logo/druid_logo_panthera.lua new file mode 100644 index 0000000..8178fac --- /dev/null +++ b/example/components/druid_logo/druid_logo_panthera.lua @@ -0,0 +1,268 @@ +return { + version = 1, + format = "json", + data = { + animations = { + { + duration = 12, + animation_id = "idle", + animation_keys = { + { + node_id = "icon_druid_left", + duration = 3, + end_value = -5, + easing = "outsine", + key_type = "tween", + property_id = "position_y", + }, + { + node_id = "icon_druid_right", + duration = 3, + end_value = -5, + easing = "outsine", + key_type = "tween", + property_id = "position_y", + }, + { + node_id = "icon_logo", + duration = 4, + end_value = 5, + easing = "outsine", + key_type = "tween", + property_id = "position_y", + }, + { + start_time = 3, + duration = 3, + start_value = -5, + easing = "outsine", + key_type = "tween", + node_id = "icon_druid_left", + end_value = 5, + property_id = "position_y", + }, + { + start_time = 3, + duration = 3, + start_value = -5, + easing = "outsine", + key_type = "tween", + node_id = "icon_druid_right", + end_value = 5, + property_id = "position_y", + }, + { + start_time = 4, + duration = 8, + start_value = 5, + easing = "insine", + key_type = "tween", + node_id = "icon_logo", + property_id = "position_y", + }, + { + start_time = 6, + duration = 6, + start_value = 5, + easing = "outsine", + key_type = "tween", + node_id = "icon_druid_left", + property_id = "position_y", + }, + { + start_time = 6, + duration = 6, + start_value = 5, + easing = "outsine", + key_type = "tween", + node_id = "icon_druid_right", + property_id = "position_y", + }, + }, + }, + { + duration = 0.6, + animation_id = "on_hover_in", + animation_keys = { + { + node_id = "W_Anchor", + duration = 0.6, + end_value = -220, + easing = "outsine", + key_type = "tween", + start_value = -200, + property_id = "position_x", + }, + { + node_id = "text_description", + duration = 0.6, + end_value = -60, + easing = "outsine", + key_type = "tween", + start_value = -50, + property_id = "position_y", + }, + { + node_id = "icon_druid_left", + duration = 0.6, + end_value = 0.7, + easing = "outsine", + key_type = "tween", + start_value = 0.5, + property_id = "color_a", + }, + { + node_id = "icon_druid_right", + duration = 0.6, + end_value = 0.7, + easing = "outsine", + key_type = "tween", + start_value = 0.5, + property_id = "color_a", + }, + { + node_id = "icon_logo", + duration = 0.6, + end_value = 1.1, + easing = "outsine", + key_type = "tween", + start_value = 1, + property_id = "scale_x", + }, + { + node_id = "icon_logo", + duration = 0.6, + end_value = 1.1, + easing = "outsine", + key_type = "tween", + start_value = 1, + property_id = "scale_y", + }, + { + node_id = "icon_logo", + duration = 0.6, + end_value = 1.7, + easing = "outsine", + key_type = "tween", + start_value = 1, + property_id = "color_a", + }, + { + node_id = "E_Anchor", + duration = 0.6, + end_value = 220, + easing = "outsine", + key_type = "tween", + start_value = 200, + property_id = "position_x", + }, + }, + }, + { + duration = 0.3, + animation_id = "on_hover_out", + animation_keys = { + { + node_id = "W_Anchor", + duration = 0.3, + end_value = -200, + easing = "outback", + key_type = "tween", + start_value = -200, + property_id = "position_x", + }, + { + node_id = "text_description", + duration = 0.3, + end_value = -50, + easing = "outback", + key_type = "tween", + start_value = -50, + property_id = "position_y", + }, + { + node_id = "icon_druid_left", + duration = 0.3, + end_value = 0.5, + easing = "outsine", + key_type = "tween", + start_value = 0.5, + property_id = "color_a", + }, + { + node_id = "icon_druid_right", + duration = 0.3, + end_value = 0.5, + easing = "outsine", + key_type = "tween", + start_value = 0.5, + property_id = "color_a", + }, + { + node_id = "icon_logo", + duration = 0.3, + end_value = 1, + easing = "outsine", + key_type = "tween", + start_value = 1, + property_id = "color_a", + }, + { + node_id = "icon_logo", + duration = 0.3, + end_value = 1, + easing = "outback", + key_type = "tween", + start_value = 1, + property_id = "scale_x", + }, + { + node_id = "icon_logo", + duration = 0.3, + end_value = 1, + easing = "outback", + key_type = "tween", + start_value = 1, + property_id = "scale_y", + }, + { + node_id = "E_Anchor", + duration = 0.3, + end_value = 200, + easing = "outback", + key_type = "tween", + start_value = 200, + property_id = "position_x", + }, + }, + }, + }, + metadata = { + gui_path = "/example/components/druid_logo/druid_logo.gui", + settings = { + font_size = 40, + }, + gizmo_steps = { + time = 0.1, + }, + layers = { + { + name = "druid", + color = "73E84C", + }, + { + name = "druid_logo", + color = "90D2F6", + }, + { + name = "text_regular", + color = "C379F0", + }, + }, + fps = 60, + }, + nodes = { + }, + }, + type = "animation_editor", +} \ No newline at end of file diff --git a/example/components/example_scene/example_scene.gui b/example/components/example_scene/example_scene.gui new file mode 100644 index 0000000..93d7877 --- /dev/null +++ b/example/components/example_scene/example_scene.gui @@ -0,0 +1,146 @@ +script: "" +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1080.0 + y: 1030.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_STRETCH + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -530.0 + y: 505.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.5 + y: 0.5 + z: 1.0 + w: 1.0 + } + size { + x: 1080.0 + y: 520.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Entities: 8\n" + "Top Index: 1\n" + "Bottom Index: 10\n" + "Scroll Size: 200x400\n" + "Grid Size: 400x800" + font: "text_regular" + id: "text_debug_info" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_regular" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "text_regular" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/components/example_scene/example_scene.lua b/example/components/example_scene/example_scene.lua new file mode 100644 index 0000000..3a93144 --- /dev/null +++ b/example/components/example_scene/example_scene.lua @@ -0,0 +1,29 @@ +local component = require("druid.component") +local container = require("example.components.container.container") + +---@class example_scene: druid.base_component +---@field root druid.container +---@field text_debug_info druid.text +---@field druid druid_instance +local M = component.create("example_scene") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self.druid:new(container, "root") --[[@as druid.container]] + self.root:add_container("text_debug_info") + + self.text_debug_info = self.druid:new_text("text_debug_info") +end + + +---@param info string +function M:set_debug_info(info) + self.text_debug_info:set_to(info) +end + + +return M diff --git a/example/components/examples_list_view/examples_list_view.gui b/example/components/examples_list_view/examples_list_view.gui new file mode 100644 index 0000000..750684c --- /dev/null +++ b/example/components/examples_list_view/examples_list_view.gui @@ -0,0 +1,612 @@ +script: "" +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 910.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_STRETCH + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -190.0 + y: 445.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 250.0 + y: 60.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Examples" + font: "text_regular" + id: "text_header" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_regular" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -200.0 + y: 395.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 850.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "scroll_view" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + parent: "root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 850.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "scroll_content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + parent: "scroll_view" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -52.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "examples_list_view_item" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/components/examples_list_view/examples_list_view_item.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "examples_list_view_item/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_STRETCH + parent: "examples_list_view_item" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "examples_list_view_item/panel_highlight" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_FIT + parent: "examples_list_view_item/root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 0.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 4.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.894 + y: 0.506 + z: 0.333 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "examples_list_view_item/panel_selected" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_FIT + parent: "examples_list_view_item/root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: false + visible: true + material: "" +} +nodes { + position { + x: 18.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.6 + y: 0.6 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.851 + y: 0.851 + z: 0.851 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/icon_arrow" + id: "examples_list_view_item/icon" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "examples_list_view_item/root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: false + visible: true + material: "" +} +nodes { + position { + x: 36.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.7 + y: 0.7 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 60.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Basic" + font: "text_bold" + id: "examples_list_view_item/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "examples_list_view_item/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_regular" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/components/examples_list_view/examples_list_view.lua b/example/components/examples_list_view/examples_list_view.lua new file mode 100644 index 0000000..26c1dca --- /dev/null +++ b/example/components/examples_list_view/examples_list_view.lua @@ -0,0 +1,172 @@ +local event = require("druid.event") +local component = require("druid.component") +local container = require("example.components.container.container") +local lang_text = require("druid.extended.lang_text") +local storage = require("saver.storage") + +local examples_list_view_item = require("example.components.examples_list_view.examples_list_view_item") + +---@class examples_list_view: druid.base_component +---@field root druid.container +---@field druid druid_instance +---@field scroll druid.scroll +---@field grid druid.static_grid +local M = component.create("examples_list_view") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self.druid:new(container, "root") --[[@as druid.container]] + self.root:add_container("text_header") + + self.druid:new(lang_text, "text_header", "ui_examples") + self.druid:new(examples_list_view_item, "examples_list_view_item") + + self.prefab = self:get_node("examples_list_view_item/root") + gui.set_enabled(self.prefab, false) + + self.scroll = self.druid:new_scroll("scroll_view", "scroll_content") + self.grid = self.druid:new_static_grid("scroll_content", self.prefab, 1) + self.scroll:bind_grid(self.grid) + + self.root:add_container("scroll_view", nil, function(_, size) + self.scroll:set_view_size(size) + self.scroll:set_size(self.grid:get_size()) + end) + + self.selected_example = nil + self.examples = {} + self.on_debug_info = event() + self.on_set_information = event() + self.add_log_text = event() + + timer.delay(0.1, true, function() + self:update_debug_info() + end) +end + + +---@param examples druid.examples +---@param druid_example druid.example @The main GUI component +function M:add_example(examples, druid_example) + local example_name_id = examples.example_name_id + local examples_list = examples.examples_list + + if false then + do -- Add section name + local nodes = gui.clone_tree(self.prefab) + local item = self.druid:new(examples_list_view_item, "examples_list_view_item", nodes) --[[@as examples_list_view_item]] + gui.set_enabled(item.root.node, true) + item.text:translate(example_name_id) + item:set_fold_icon_enabled(true) + + item.on_click:subscribe(function() + item:set_fold_status(not item:is_folded()) + end) + + self.grid:add(item.root.node) + end + end + + for index = 1, #examples_list do + local example_data = examples_list[index] + local nodes = gui.clone_tree(self.prefab) + local item = self.druid:new(examples_list_view_item, "examples_list_view_item", nodes) --[[@as examples_list_view_item]] + gui.set_enabled(item.root.node, true) + item.text:translate(example_data.name_id) + item:set_fold_icon_enabled(false) + + item.on_click:subscribe(function() + if self.selected_example then + self.selected_example.list_item:set_selected(false) + druid_example.druid:remove(self.selected_example.instance) + gui.set_enabled(self.selected_example.root, false) + + self.selected_example = nil + end + + local root = gui.get_node(example_data.root) + gui.set_enabled(root, true) + local instance = druid_example.druid:new(example_data.component_class, example_data.template) + + self.selected_example = { + data = example_data, + list_item = item, + instance = instance, + root = root + } + item:set_selected(true) + + druid_example.output_list:clear() + if example_data.on_create then + example_data.on_create(instance, druid_example.output_list) + end + + if example_data.information_text_id then + self.on_set_information(example_data.information_text_id) + else + self.on_set_information("") + end + + druid_example.properties_panel:clear() + if example_data.properties_control then + example_data.properties_control(instance, druid_example.properties_panel) + end + + storage.set("last_selected_example", example_data.name_id) + if html5 then + local command = string.format('window.history.replaceState(null, null, "?example=%s")', example_data.name_id) + html5.run(command) + end + end) + + self.grid:add(item.root.node) + table.insert(self.examples, { + data = example_data, + list_item = item + }) + end +end + + +---@param name_id string +---@return boolean @true if example was found and selected +function M:select_example_by_name_id(name_id) + for index = 1, #self.examples do + local example = self.examples[index] + + -- Scroll to the element + self.scroll:scroll_to(gui.get_position(example.list_item.root.node), true) + + -- Select the element + if example.data.name_id == name_id then + example.list_item.on_click:trigger() + return true + end + end + + return false +end + + +function M:update_debug_info() + if not self.selected_example then + self.on_debug_info:trigger("") + return + end + + local data = self.selected_example.data + if data.get_debug_info then + local info = data.get_debug_info(self.selected_example.instance) + self.on_debug_info:trigger(info) + return + end + + self.on_debug_info:trigger("") +end + + +return M diff --git a/example/components/examples_list_view/examples_list_view_item.gui b/example/components/examples_list_view/examples_list_view_item.gui new file mode 100644 index 0000000..2cef928 --- /dev/null +++ b/example/components/examples_list_view/examples_list_view_item.gui @@ -0,0 +1,326 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_STRETCH + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "panel_highlight" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 0.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 4.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.894 + y: 0.506 + z: 0.333 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "panel_selected" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: false + visible: true + material: "" +} +nodes { + position { + x: 18.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.6 + y: 0.6 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.851 + y: 0.851 + z: 0.851 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/icon_arrow" + id: "icon" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: false + visible: true + material: "" +} +nodes { + position { + x: 36.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.7 + y: 0.7 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 60.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Basic" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_bold" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/components/examples_list_view/examples_list_view_item.lua b/example/components/examples_list_view/examples_list_view_item.lua new file mode 100644 index 0000000..4793fb5 --- /dev/null +++ b/example/components/examples_list_view/examples_list_view_item.lua @@ -0,0 +1,74 @@ +local component = require("druid.component") +local container = require("example.components.container.container") +local lang_text = require("druid.extended.lang_text") + +---@class examples_list_view_item: druid.base_component +---@field root druid.container +---@field text druid.lang_text +---@field druid druid_instance +---@field on_click druid.event +local M = component.create("examples_list_view_item") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self.druid:new(container, "root") --[[@as druid.container]] + self.text = self.druid:new(lang_text, "text") --[[ @as druid.lang_text]] + self.icon = self:get_node("icon") + self.selected = self:get_node("panel_selected") + self.highlight = self:get_node("panel_highlight") + + self.color_not_selected = gui.get_color(self.text.node) + self.color_selected = gui.get_outline(self.text.node) + self.color_selected.w = 1 + self._is_folded = true + + self.button = self.druid:new_button("root") + self.button:set_style(nil) + + local hover = self.druid:new_hover("root") + hover.on_mouse_hover:subscribe(self.on_hover) + + -- External Events + self.on_click = self.button.on_click +end + + +---@param is_enabled boolean +function M:set_fold_icon_enabled(is_enabled) + gui.set_enabled(self.icon, is_enabled) +end + + +---@param is_folded boolean +function M:set_fold_status(is_folded) + self._is_folded = is_folded + gui.animate(self.icon, "euler.z", is_folded and 0 or -90, gui.EASING_OUTQUAD, 0.2) +end + + +function M:is_folded() + return self._is_folded +end + + +function M:set_selected(is_selected) + gui.set_enabled(self.selected, is_selected) + + local color = is_selected and self.color_selected or self.color_not_selected + gui.set_color(self.text.node, color) +end + + +function M:on_hover(is_hover) + if is_hover then + gui.animate(self.highlight, "color.w", 1, gui.EASING_OUTQUAD, 0.2) + else + gui.animate(self.highlight, "color.w", 0, gui.EASING_OUTQUAD, 0.1) + end +end + + +return M diff --git a/example/components/output_list/output_list.gui b/example/components/output_list/output_list.gui new file mode 100644 index 0000000..ba1540d --- /dev/null +++ b/example/components/output_list/output_list.gui @@ -0,0 +1,397 @@ +script: "" +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 440.0 + y: 280.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_STRETCH + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -210.0 + y: 130.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Output" + font: "text_regular" + id: "text_header" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_regular" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -200.0 + y: 80.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 220.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "scroll_view" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + parent: "root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 220.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "scroll_content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + parent: "scroll_view" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.7 + y: 0.7 + z: 1.0 + w: 1.0 + } + size { + x: 571.4286 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Log text" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 140.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 440.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "separator" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_regular" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/components/output_list/output_list.lua b/example/components/output_list/output_list.lua new file mode 100644 index 0000000..1a6be69 --- /dev/null +++ b/example/components/output_list/output_list.lua @@ -0,0 +1,68 @@ +local component = require("druid.component") +local container = require("example.components.container.container") +local lang_text = require("druid.extended.lang_text") + +---@class output_list: druid.base_component +---@field root druid.container +---@field text_header druid.text +---@field scroll druid.scroll +---@field druid druid_instance +local M = component.create("output_list") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self.druid:new(container, "root") --[[@as druid.container]] + self.root:add_container("text_header") + self.root:add_container("separator") + + self.created_texts = {} + self.prefab = self:get_node("text") + gui.set_enabled(self.prefab, false) + + self.grid = self.druid:new_static_grid("scroll_content", "text", 1) + self.scroll = self.druid:new_scroll("scroll_view", "scroll_content") + self.scroll:bind_grid(self.grid) + self.scroll:set_horizontal_scroll(false) + + self.druid:new(lang_text, "text_header", "ui_output") +end + + +---@param text string +function M:add_log_text(text) + local text_node = gui.clone(self.prefab) + gui.set_enabled(text_node, true) + + local text_instance = self.druid:new_text(text_node, text) + self.grid:add(text_instance.node) + table.insert(self.created_texts, text_instance) + + self.scroll:scroll_to_percent(vmath.vector3(0, 0, 0)) + + if #self.created_texts > 64 then + self.grid:remove(1) + self.druid:remove(self.created_texts[1]) + gui.delete_node(self.created_texts[1].node) + table.remove(self.created_texts, 1) + end +end + + +function M:clear() + for index = 1, #self.created_texts do + self.druid:remove(self.created_texts[index]) + end + + local nodes = self.grid.nodes + for index = 1, #nodes do + gui.delete_node(nodes[index]) + end + self.created_texts = {} + self.grid:clear() +end + + +return M diff --git a/example/components/panel_druid_profiler/panel_druid_profiler.gui b/example/components/panel_druid_profiler/panel_druid_profiler.gui new file mode 100644 index 0000000..e157c46 --- /dev/null +++ b/example/components/panel_druid_profiler/panel_druid_profiler.gui @@ -0,0 +1,988 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1080.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_STRETCH + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -530.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "group_memory" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 89.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.8 + y: 0.8 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.306 + y: 0.31 + z: 0.314 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Memory" + font: "text_bold" + id: "text_memory" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "group_memory" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 199.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.8 + y: 0.8 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "2048" + font: "text_bold" + id: "text_memory_amount" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "group_memory" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 273.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.8 + y: 0.8 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.306 + y: 0.31 + z: 0.314 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "KB" + font: "text_bold" + id: "text_memory_kb" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "group_memory" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -130.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "group_fps" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: -50.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.8 + y: 0.8 + z: 1.0 + w: 1.0 + } + size { + x: 120.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.306 + y: 0.31 + z: 0.314 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "FPS" + font: "text_bold" + id: "text_fps" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "group_fps" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 17.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.8 + y: 0.8 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "60" + font: "text_bold" + id: "text_fps_amount" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_S + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "group_fps" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 65.0 + y: -17.5 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.6 + y: 0.6 + z: 1.0 + w: 1.0 + } + size { + x: 100.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "/60" + font: "text_bold" + id: "text_fps_min" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_S + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "group_fps" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 130.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "group_components" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: -50.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.8 + y: 0.8 + z: 1.0 + w: 1.0 + } + size { + x: 350.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.306 + y: 0.31 + z: 0.314 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Components" + font: "text_bold" + id: "text_components" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "group_components" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 90.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.8 + y: 0.8 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "2004" + font: "text_bold" + id: "text_components_amount" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "group_components" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 530.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "group_events" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_E + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: -163.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.8 + y: 0.8 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.306 + y: 0.31 + z: 0.314 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Events" + font: "text_bold" + id: "text_events" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "group_events" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -59.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.8 + y: 0.8 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "6000" + font: "text_bold" + id: "text_events_amount" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "group_events" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_bold" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/components/panel_druid_profiler/panel_druid_profiler.lua b/example/components/panel_druid_profiler/panel_druid_profiler.lua new file mode 100644 index 0000000..974aaf3 --- /dev/null +++ b/example/components/panel_druid_profiler/panel_druid_profiler.lua @@ -0,0 +1,180 @@ +local event = require("druid.event") +local helper = require("druid.helper") +local component = require("druid.component") +local container = require("example.components.container.container") +local lang_text = require("druid.extended.lang_text") + + +---@class panel_druid_profiler: druid.base_component +---@field root druid.container +---@field druid druid_instance +local M = component.create("panel_druid_profiler") +local FPS_SAMPLES = 60 + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self.druid:new(container, "root") --[[@as druid.container]] + self.group_memory = self.root:add_container("group_memory") + self.group_fps = self.root:add_container("group_fps") + self.group_components = self.root:add_container("group_components") + self.group_events = self.root:add_container("group_events") + + self.druid:new_button("group_memory", self.run_collectgarbage) + + self.group_memory:set_min_size(270, nil) + self.group_fps:set_min_size(270, nil) + self.group_components:set_min_size(270, nil) + self.group_events:set_min_size(270, nil) + + self.text_memory_amount = self.druid:new_text("text_memory_amount") + self.text_fps_amount = self.druid:new_text("text_fps_amount") + self.text_fps_min = self.druid:new_text("text_fps_min") + self.text_components_amount = self.druid:new_text("text_components_amount") + self.text_events_amount = self.druid:new_text("text_events_amount") + + self.druid:new(lang_text, "text_memory", "ui_profiler_memory") + self.druid:new(lang_text, "text_fps", "ui_profiler_fps") + self.druid:new(lang_text, "text_components", "ui_profiler_components") + self.druid:new(lang_text, "text_events", "ui_profiler_events") + + self.previous_time = nil + self.fps_samples = {} + + self.nodes_memory = { + self:get_node("text_memory"), + self:get_node("text_memory_amount"), + self:get_node("text_memory_kb"), + } + self.nodes_fps = { + self:get_node("text_fps"), + self:get_node("text_fps_amount"), + self:get_node("text_fps_min"), + } + self.nodes_components = { + self:get_node("text_components"), + self:get_node("text_components_amount"), + } + self.nodes_events = { + self:get_node("text_events"), + self:get_node("text_events_amount"), + } + + timer.delay(0.16, true, function() + self:update_memory() + self:update_fps() + self:update_components() + self:update_events() + self:align_fps_components() + end) +end + + +function M:on_language_change() + self:update_memory() + self:update_fps() + self:update_components() + self:update_events() + self:align_fps_components() +end + + +function M:update_memory() + local memory = collectgarbage("count") + self.text_memory_amount:set_to(tostring(math.ceil(memory))) + + local width = helper.centrate_nodes(2, unpack(self.nodes_memory)) + for index = 1, #self.nodes_memory do + local node = self.nodes_memory[index] + local position_x = gui.get(node, "position.x") + gui.set(node, "position.x", position_x + width/2) + end + self.group_memory:set_size(width, nil) +end + + +function M:update_fps() + local average_frame_time = 0 + local max_frame_time = 0 + for index = 1, #self.fps_samples do + average_frame_time = average_frame_time + self.fps_samples[index] + max_frame_time = math.max(max_frame_time, self.fps_samples[index]) + end + average_frame_time = average_frame_time / #self.fps_samples + + self.text_fps_amount:set_to(tostring(math.ceil(1 / average_frame_time))) + self.text_fps_min:set_to("/ " .. tostring(math.ceil(1 / max_frame_time))) + + local width = helper.centrate_nodes(2, unpack(self.nodes_fps)) + self.group_fps:set_size(width, nil) +end + + +function M:update_components() + ---@diagnostic disable-next-line: undefined-field + local components = #self.druid.components_all + + self.text_components_amount:set_to(tostring(components)) + local width = helper.centrate_nodes(2, unpack(self.nodes_components)) + self.group_components:set_size(width, nil) +end + + +function M:update_events() + self.text_events_amount:set_to(tostring(event.COUNTER)) + + local width = helper.centrate_nodes(2, unpack(self.nodes_events)) + for index = 1, #self.nodes_events do + local node = self.nodes_events[index] + local position_x = gui.get(node, "position.x") + gui.set(node, "position.x", position_x - width/2) + end + self.group_events:set_size(width, nil) +end + + +function M:align_fps_components() + local pos_x_memory = gui.get(self.group_memory.node, "position.x") + gui.get(self.group_memory.node, "size.x") + local pos_x_events = gui.get(self.group_events.node, "position.x") - gui.get(self.group_events.node, "size.x") + local width = pos_x_events - pos_x_memory + + -- Align FPS and Components + local fps_size = gui.get(self.group_fps.node, "size.x") + local components_size = gui.get(self.group_components.node, "size.x") + + local free_width = width - fps_size - components_size + gui.set(self.group_fps.node, "position.x", pos_x_memory + fps_size/2 + free_width/3) + gui.set(self.group_components.node, "position.x", pos_x_events - components_size/2 - free_width/3) +end + + +function M:update() + self:sample_fps() +end + + +function M:sample_fps() + if not self.previous_time then + self.previous_time = socket.gettime() + return + end + + local current_time = socket.gettime() + local delta_time = current_time - self.previous_time + self.previous_time = current_time + + table.insert(self.fps_samples, delta_time) + if #self.fps_samples > FPS_SAMPLES then + table.remove(self.fps_samples, 1) + end +end + + +function M:run_collectgarbage() + collectgarbage("collect") +end + + +return M diff --git a/example/components/panel_information/panel_information.gui b/example/components/panel_information/panel_information.gui new file mode 100644 index 0000000..e9df7b8 --- /dev/null +++ b/example/components/panel_information/panel_information.gui @@ -0,0 +1,259 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 440.0 + y: 450.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + } + type: TYPE_BOX + texture: "druid/pixel" + id: "root" + adjust_mode: ADJUST_MODE_STRETCH + layer: "druid" + inherit_alpha: true +} +nodes { + position { + x: -210.0 + y: 215.0 + } + scale { + x: 0.9 + y: 0.9 + } + size { + x: 245.0 + y: 50.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + } + type: TYPE_TEXT + text: "Information" + font: "text_regular" + id: "text_header" + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + } + parent: "root" + layer: "text_regular" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + y: -225.0 + } + size { + x: 16.0 + y: 16.0 + } + type: TYPE_BOX + id: "S_Anchor" + pivot: PIVOT_S + parent: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + y: 60.0 + } + type: TYPE_TEMPLATE + id: "button_view_code" + parent: "S_Anchor" + inherit_alpha: true + template: "/example/templates/button_text_blue.gui" +} +nodes { + size { + x: 240.0 + y: 80.0 + } + type: TYPE_BOX + id: "button_view_code/root" + parent: "button_view_code" + overridden_fields: 4 + template_node_child: true +} +nodes { + scale { + x: 0.75 + y: 0.75 + } + type: TYPE_TEXT + text: "View code" + id: "button_view_code/text" + parent: "button_view_code/root" + overridden_fields: 3 + overridden_fields: 8 + template_node_child: true +} +nodes { + position { + x: 220.0 + y: 225.0 + } + size { + x: 16.0 + y: 16.0 + } + type: TYPE_BOX + id: "NE_Anchor" + pivot: PIVOT_NE + parent: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -85.0 + y: -32.5 + } + type: TYPE_TEMPLATE + id: "button_profiler" + parent: "NE_Anchor" + inherit_alpha: true + template: "/example/templates/button_text_yellow.gui" +} +nodes { + size { + x: 130.0 + y: 35.0 + } + type: TYPE_BOX + texture: "druid/ui_circle_8" + id: "button_profiler/root" + parent: "button_profiler" + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + overridden_fields: 4 + overridden_fields: 9 + overridden_fields: 22 + template_node_child: true +} +nodes { + scale { + x: 0.6 + y: 0.6 + } + size { + x: 190.0 + y: 50.0 + } + type: TYPE_TEXT + text: "Profiler" + id: "button_profiler/text" + parent: "button_profiler/root" + overridden_fields: 3 + overridden_fields: 4 + overridden_fields: 8 + template_node_child: true +} +nodes { + position { + x: -200.0 + y: 150.0 + } + size { + x: 400.0 + y: 250.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "scroll_view" + pivot: PIVOT_NW + parent: "root" + inherit_alpha: true + visible: false +} +nodes { + size { + x: 400.0 + y: 250.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "scroll_content" + pivot: PIVOT_NW + parent: "scroll_view" + inherit_alpha: true + visible: false +} +nodes { + scale { + x: 0.75 + y: 0.75 + } + size { + x: 535.0 + y: 270.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + } + type: TYPE_TEXT + text: "The default example how to use the button and bind the callbacks on them" + font: "text_regular" + id: "text_description" + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + } + line_break: true + parent: "scroll_content" + layer: "text_bold" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +layers { + name: "druid" +} +layers { + name: "text_bold" +} +layers { + name: "text_regular" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/components/panel_information/panel_information.lua b/example/components/panel_information/panel_information.lua new file mode 100644 index 0000000..fd0a35e --- /dev/null +++ b/example/components/panel_information/panel_information.lua @@ -0,0 +1,62 @@ +local lang = require("lang.lang") +local component = require("druid.component") + +local container = require("example.components.container.container") +local lang_text = require("druid.extended.lang_text") +local rich_text = require("druid.custom.rich_text.rich_text") + +---@class panel_information: druid.base_component +---@field root druid.container +---@field text_header druid.lang_text +---@field rich_text druid.rich_text +---@field druid druid_instance +local PanelInformation = component.create("panel_information") + +---@param template string +---@param nodes table +function PanelInformation:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self.druid:new(container, "root") --[[@as druid.container]] + self.root:add_container("text_header") + self.root:add_container("scroll_view") + self.root:add_container("S_Anchor") + self.root:add_container("NE_Anchor") + + self.druid:new(lang_text, "text_header", "ui_information") + self.druid:new(lang_text, "button_profiler/text", "ui_profiler") + + --self.text_description = self.druid:new(lang_text, "text_description", "") --[[@as druid.lang_text]] + self.rich_text = self.druid:new(rich_text, "text_description") + self.button_profiler = self.druid:new_button("button_profiler/root", self.on_profiler_click) + self.button_profiler:set_key_trigger("key_p") + self.button_view_code = self.druid:new_button("button_view_code/root") + + -- Disable profiler button for HTML5 + gui.set_enabled(self.button_profiler.node, not html5) +end + + +function PanelInformation:set_text(text_id) + local text = lang.txt(text_id) + self.rich_text:set_text(text) +end + + +function PanelInformation:on_profiler_click() + if self._profiler_mode == nil then + self._profiler_mode = profiler.VIEW_MODE_MINIMIZED + profiler.enable_ui(true) + profiler.set_ui_view_mode(self._profiler_mode) + elseif self._profiler_mode == profiler.VIEW_MODE_MINIMIZED then + self._profiler_mode = profiler.VIEW_MODE_FULL + profiler.enable_ui(true) + profiler.set_ui_view_mode(self._profiler_mode) + else + self._profiler_mode = nil + profiler.enable_ui(false) + end +end + + +return PanelInformation diff --git a/example/components/properties_panel/properties/property_button.gui b/example/components/properties_panel/properties/property_button.gui new file mode 100644 index 0000000..20e4680 --- /dev/null +++ b/example/components/properties_panel/properties/property_button.gui @@ -0,0 +1,328 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.65 + y: 0.65 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Button" + font: "text_bold" + id: "text_name" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 267.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 226.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 226.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.894 + y: 0.506 + z: 0.333 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "selected" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_S + adjust_mode: ADJUST_MODE_STRETCH + parent: "button" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.65 + y: 0.65 + z: 1.0 + w: 1.0 + } + size { + x: 250.0 + y: 30.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Button" + font: "text_bold" + id: "text_button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/components/properties_panel/properties/property_button.lua b/example/components/properties_panel/properties/property_button.lua new file mode 100644 index 0000000..9ffa273 --- /dev/null +++ b/example/components/properties_panel/properties/property_button.lua @@ -0,0 +1,33 @@ +local component = require("druid.component") +local lang_text = require("druid.extended.lang_text") + +---@class property_button: druid.base_component +---@field root node +---@field text_name druid.lang_text +---@field button druid.button +---@field text_button druid.text +---@field druid druid_instance +local M = component.create("property_button") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self:get_node("root") + self.text_name = self.druid:new(lang_text, "text_name") --[[@as druid.lang_text]] + self.selected = self:get_node("selected") + gui.set_alpha(self.selected, 0) + + self.button = self.druid:new_button("button", self.on_click) + self.text_button = self.druid:new_text("text_button") +end + + +function M:on_click() + gui.set_alpha(self.selected, 1) + gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16) +end + + +return M diff --git a/example/components/properties_panel/properties/property_checkbox.gui b/example/components/properties_panel/properties/property_checkbox.gui new file mode 100644 index 0000000..69de501 --- /dev/null +++ b/example/components/properties_panel/properties/property_checkbox.gui @@ -0,0 +1,320 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.65 + y: 0.65 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Checkbox" + font: "text_bold" + id: "text_name" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 174.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 40.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/icon_check" + id: "icon" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 40.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.894 + y: 0.506 + z: 0.333 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "selected" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_S + adjust_mode: ADJUST_MODE_STRETCH + parent: "button" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/components/properties_panel/properties/property_checkbox.lua b/example/components/properties_panel/properties/property_checkbox.lua new file mode 100644 index 0000000..aec6c9f --- /dev/null +++ b/example/components/properties_panel/properties/property_checkbox.lua @@ -0,0 +1,54 @@ +local component = require("druid.component") +local container = require("example.components.container.container") +local lang_text = require("druid.extended.lang_text") + +---@class property_checkbox: druid.base_component +---@field druid druid_instance +---@field root druid.container +---@field text_name druid.lang_text +---@field button druid.button +---@field selected node +local M = component.create("property_checkbox") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + self.root = self.druid:new(container, "root") --[[@as druid.container]] + + self.icon = self:get_node("icon") + gui.set_enabled(self.icon, false) + + self.selected = self:get_node("selected") + gui.set_alpha(self.selected, 0) + + self.text_name = self.druid:new(lang_text, "text_name") --[[@as druid.lang_text]] + + self.button = self.druid:new_button("button") +end + + +---@param value boolean +function M:set_value(value, is_instant) + if self._value == value then + return + end + + self._value = value + gui.set_enabled(self.icon, value) + + if not is_instant then + gui.set_alpha(self.selected, 1) + gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16) + end +end + + +---@return boolean +function M:get_value() + return self._value +end + + +return M diff --git a/example/components/properties_panel/properties/property_slider.gui b/example/components/properties_panel/properties/property_slider.gui new file mode 100644 index 0000000..111ff61 --- /dev/null +++ b/example/components/properties_panel/properties/property_slider.gui @@ -0,0 +1,564 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.65 + y: 0.65 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Checkbox" + font: "text_bold" + id: "text_name" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 400.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "E_Anchor" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_E + adjust_mode: ADJUST_MODE_STRETCH + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: -20.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 60.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_E + adjust_mode: ADJUST_MODE_FIT + parent: "E_Anchor" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 60.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.894 + y: 0.506 + z: 0.333 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "selected" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_SE + adjust_mode: ADJUST_MODE_STRETCH + parent: "button" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -30.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.55 + y: 0.55 + z: 1.0 + w: 1.0 + } + size { + x: 100.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "25 %" + font: "text_bold" + id: "text_value" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 234.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 160.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "slider" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 160.0 + y: 8.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_8" + id: "slider_back" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "slider" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -68.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 24.0 + y: 24.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_8" + id: "slider_pin" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "slider" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/components/properties_panel/properties/property_slider.lua b/example/components/properties_panel/properties/property_slider.lua new file mode 100644 index 0000000..d5ada5f --- /dev/null +++ b/example/components/properties_panel/properties/property_slider.lua @@ -0,0 +1,75 @@ +local component = require("druid.component") +local container = require("example.components.container.container") +local lang_text = require("druid.extended.lang_text") +local slider = require("druid.extended.slider") + +---@class property_slider: druid.base_component +---@field druid druid_instance +---@field root druid.container +---@field text_name druid.lang_text +---@field text_value druid.text +---@field slider druid.slider +local M = component.create("property_slider") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self.druid:new(container, "root") --[[@as druid.container]] + self.selected = self:get_node("selected") + gui.set_alpha(self.selected, 0) + self._value = 0 + + self.text_name = self.druid:new(lang_text, "text_name") --[[@as druid.lang_text]] + self.text_value = self.druid:new_text("text_value") + self.slider = self.druid:new(slider, "slider_pin", vmath.vector3(68, 0, 0), self._on_slider_change_by_user) --[[@as druid.slider]] + self.slider:set_input_node("slider") + + self:set_text_function(function(value) + return math.floor(value * 100) .. "%" + end) +end + + +---@param callback fun(value:number):string +function M:set_text_function(callback) + self._text_function = callback + self.text_value:set_to(self._text_function(self._value)) +end + + +---@param value number +function M:set_value(value, is_instant) + if self._value == value then + return + end + + self._value = value + self.slider:set(value, true) + self.text_value:set_to(self._text_function(value)) + + if not is_instant then + gui.set_alpha(self.selected, 1) + gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16) + end +end + + +---@return number +function M:get_value() + return self._value +end + + +function M:_on_slider_change_by_user(value) + self._value = value + self.text_value:set_to(self._text_function(value)) + + gui.set_alpha(self.selected, 1) + gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16) +end + + +return M diff --git a/example/components/properties_panel/properties_panel.gui b/example/components/properties_panel/properties_panel.gui new file mode 100644 index 0000000..49cc600 --- /dev/null +++ b/example/components/properties_panel/properties_panel.gui @@ -0,0 +1,1798 @@ +script: "" +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 440.0 + y: 350.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_STRETCH + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -210.0 + y: 165.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Properties" + font: "text_regular" + id: "text_header" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_regular" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -200.0 + y: 115.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 290.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "scroll_view" + xanchor: XANCHOR_LEFT + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + parent: "root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 290.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "scroll_content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + parent: "scroll_view" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -35.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "item_size" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_FIT + parent: "scroll_content" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 175.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 440.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "separator" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "druid" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "propeties" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "property_slider" + parent: "propeties" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/components/properties_panel/properties/property_slider.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "property_slider/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + parent: "property_slider" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.65 + y: 0.65 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Checkbox" + font: "text_bold" + id: "property_slider/text_name" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "property_slider/root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 400.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "property_slider/E_Anchor" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_E + adjust_mode: ADJUST_MODE_STRETCH + parent: "property_slider/root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: -20.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 60.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "property_slider/button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_E + adjust_mode: ADJUST_MODE_FIT + parent: "property_slider/E_Anchor" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 60.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.894 + y: 0.506 + z: 0.333 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "property_slider/selected" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_SE + adjust_mode: ADJUST_MODE_STRETCH + parent: "property_slider/button" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -30.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.55 + y: 0.55 + z: 1.0 + w: 1.0 + } + size { + x: 100.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "25 %" + font: "text_bold" + id: "property_slider/text_value" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "property_slider/button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 234.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 160.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "property_slider/slider" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "property_slider/root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 160.0 + y: 8.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_8" + id: "property_slider/slider_back" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "property_slider/slider" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -68.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 24.0 + y: 24.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_8" + id: "property_slider/slider_pin" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "property_slider/slider" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -50.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "property_checkbox" + parent: "propeties" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/components/properties_panel/properties/property_checkbox.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "property_checkbox/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + parent: "property_checkbox" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.65 + y: 0.65 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Checkbox" + font: "text_bold" + id: "property_checkbox/text_name" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "property_checkbox/root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 174.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 40.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "property_checkbox/button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "property_checkbox/root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/icon_check" + id: "property_checkbox/icon" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "property_checkbox/button" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 40.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.894 + y: 0.506 + z: 0.333 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "property_checkbox/selected" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_S + adjust_mode: ADJUST_MODE_STRETCH + parent: "property_checkbox/button" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -100.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "property_button" + parent: "propeties" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/components/properties_panel/properties/property_button.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "property_button/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + parent: "property_button" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.65 + y: 0.65 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Button" + font: "text_bold" + id: "property_button/text_name" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "property_button/root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 267.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 226.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "property_button/button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "property_button/root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -20.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 226.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.894 + y: 0.506 + z: 0.333 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "property_button/selected" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_S + adjust_mode: ADJUST_MODE_STRETCH + parent: "property_button/button" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.65 + y: 0.65 + z: 1.0 + w: 1.0 + } + size { + x: 250.0 + y: 30.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Button" + font: "text_bold" + id: "property_button/text_button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "property_button/button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -200.0 + y: 115.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.7 + y: 0.7 + z: 1.0 + w: 1.0 + } + size { + x: 570.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "No properties for this example" + font: "text_regular" + id: "text_no_properties" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_regular" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_regular" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/components/properties_panel/properties_panel.lua b/example/components/properties_panel/properties_panel.lua new file mode 100644 index 0000000..ace064d --- /dev/null +++ b/example/components/properties_panel/properties_panel.lua @@ -0,0 +1,128 @@ +local component = require("druid.component") +local container = require("example.components.container.container") +local lang_text = require("druid.extended.lang_text") + +local property_checkbox = require("example.components.properties_panel.properties.property_checkbox") +local property_slider = require("example.components.properties_panel.properties.property_slider") +local property_button = require("example.components.properties_panel.properties.property_button") + +---@class properties_panel: druid.base_component +---@field root druid.container +---@field text_no_properties druid.lang_text +---@field scroll druid.scroll +---@field druid druid_instance +local M = component.create("properties_panel") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self.druid:new(container, "root") --[[@as druid.container]] + self.root:add_container("text_header") + self.root:add_container("separator") + --self.root:add_container("scroll_view", nil, function() + -- self.scroll:update_view_size() + --end) + + self.properties = {} + + self.druid:new(lang_text, "text_header", "ui_properties_panel") + self.text_no_properties = self.druid:new(lang_text, "text_no_properties", "ui_no_properties") --[[@as druid.lang_text]] + + self.scroll = self.druid:new_scroll("scroll_view", "scroll_content") + self.grid = self.druid:new_static_grid("scroll_content", "item_size", 1) + self.scroll:bind_grid(self.grid) + + self.property_checkbox_prefab = self:get_node("property_checkbox/root") + gui.set_enabled(self.property_checkbox_prefab, false) + + self.property_slider_prefab = self:get_node("property_slider/root") + gui.set_enabled(self.property_slider_prefab, false) + + self.property_button_prefab = self:get_node("property_button/root") + gui.set_enabled(self.property_button_prefab, false) +end + + +function M:clear() + for index = 1, #self.properties do + self.druid:remove(self.properties[index]) + end + self.properties = {} + + local nodes = self.grid.nodes + for index = 1, #nodes do + gui.delete_node(nodes[index]) + end + self.grid:clear() + + gui.set_enabled(self.text_no_properties.text.node, true) +end + + +---@param text_id string +---@param initial_value boolean +---@param on_change_callback function +---@return property_checkbox +function M:add_checkbox(text_id, initial_value, on_change_callback) + local nodes = gui.clone_tree(self.property_checkbox_prefab) + local instance = self.druid:new(property_checkbox, "property_checkbox", nodes) --[[@as property_checkbox]] + instance.text_name:translate(text_id) + instance:set_value(initial_value, true) + instance.button.on_click:subscribe(function() + instance:set_value(not instance:get_value()) + on_change_callback(instance:get_value()) + end) + + gui.set_enabled(instance.root.node, true) + self.grid:add(instance.root.node) + table.insert(self.properties, instance) + gui.set_enabled(self.text_no_properties.text.node, false) + + return instance +end + + +---@param text_id string +---@param initial_value number +---@param on_change_callback function +---@return property_slider +function M:add_slider(text_id, initial_value, on_change_callback) + local nodes = gui.clone_tree(self.property_slider_prefab) + local instance = self.druid:new(property_slider, "property_slider", nodes) --[[@as property_slider]] + instance.text_name:translate(text_id) + instance:set_value(initial_value, true) + + gui.set_enabled(instance.root.node, true) + self.grid:add(instance.root.node) + table.insert(self.properties, instance) + gui.set_enabled(self.text_no_properties.text.node, false) + + instance.slider.on_change_value:subscribe(function(_, value) + on_change_callback(value) + end) + + return instance +end + + +---@param text_id string +---@param on_click_callback function +function M:add_button(text_id, on_click_callback) + local nodes = gui.clone_tree(self.property_button_prefab) + local instance = self.druid:new(property_button, "property_button", nodes) --[[@as property_button]] + instance.text_name:translate(text_id) + + gui.set_enabled(instance.root, true) + self.grid:add(instance.root) + table.insert(self.properties, instance) + gui.set_enabled(self.text_no_properties.text.node, false) + + instance.button.on_click:subscribe(on_click_callback) + + return instance +end + + +return M diff --git a/example/druid.collection b/example/druid.collection new file mode 100644 index 0000000..5273ec0 --- /dev/null +++ b/example/druid.collection @@ -0,0 +1,39 @@ +name: "example" +scale_along_z: 0 +embedded_instances { + id: "go" + data: "components {\n" + " id: \"druid\"\n" + " component: \"/example/druid.gui\"\n" + " position {\n" + " x: 0.0\n" + " y: 0.0\n" + " z: 0.0\n" + " }\n" + " rotation {\n" + " x: 0.0\n" + " y: 0.0\n" + " z: 0.0\n" + " w: 1.0\n" + " }\n" + " property_decls {\n" + " }\n" + "}\n" + "" + position { + x: 0.0 + y: 0.0 + z: 0.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale3 { + x: 1.0 + y: 1.0 + z: 1.0 + } +} diff --git a/example/druid.gui b/example/druid.gui new file mode 100644 index 0000000..c6ba7a0 --- /dev/null +++ b/example/druid.gui @@ -0,0 +1,3610 @@ +script: "/example/druid.gui_script" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +textures { + name: "druid_logo" + texture: "/example/assets/druid_logo.atlas" +} +nodes { + position { + x: 960.0 + y: 540.0 + } + size { + x: 1920.0 + y: 1080.0 + } + type: TYPE_BOX + id: "root" + adjust_mode: ADJUST_MODE_STRETCH + inherit_alpha: true + visible: false +} +nodes { + position { + x: -960.0 + } + size { + x: 400.0 + y: 1080.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "container_left" + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_STRETCH + parent: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + y: 540.0 + } + size { + x: 400.0 + y: 170.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "container_logo" + pivot: PIVOT_NW + parent: "container_left" + inherit_alpha: true + visible: false +} +nodes { + position { + x: 200.0 + y: -85.0 + } + type: TYPE_TEMPLATE + id: "druid_logo" + parent: "container_logo" + inherit_alpha: true + template: "/example/components/druid_logo/druid_logo.gui" +} +nodes { + type: TYPE_BOX + id: "druid_logo/root" + parent: "druid_logo" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "druid_logo/E_Anchor" + parent: "druid_logo/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "druid_logo/icon_druid_right" + parent: "druid_logo/E_Anchor" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "druid_logo/W_Anchor" + parent: "druid_logo/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "druid_logo/icon_druid_left" + parent: "druid_logo/W_Anchor" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "druid_logo/icon_logo" + parent: "druid_logo/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "druid_logo/text_description" + parent: "druid_logo/root" + template_node_child: true +} +nodes { + position { + y: 370.0 + } + size { + x: 400.0 + y: 910.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "container_examples" + pivot: PIVOT_NW + adjust_mode: ADJUST_MODE_STRETCH + parent: "container_left" + inherit_alpha: true + visible: false +} +nodes { + position { + x: 200.0 + y: -455.0 + } + type: TYPE_TEMPLATE + id: "examples_list_view" + parent: "container_examples" + inherit_alpha: true + template: "/example/components/examples_list_view/examples_list_view.gui" +} +nodes { + type: TYPE_BOX + id: "examples_list_view/root" + parent: "examples_list_view" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "examples_list_view/text_header" + parent: "examples_list_view/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "examples_list_view/scroll_view" + parent: "examples_list_view/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "examples_list_view/scroll_content" + parent: "examples_list_view/scroll_view" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "examples_list_view/examples_list_view_item" + parent: "examples_list_view/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "examples_list_view/examples_list_view_item/root" + parent: "examples_list_view/examples_list_view_item" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "examples_list_view/examples_list_view_item/panel_highlight" + parent: "examples_list_view/examples_list_view_item/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "examples_list_view/examples_list_view_item/panel_selected" + parent: "examples_list_view/examples_list_view_item/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "examples_list_view/examples_list_view_item/icon" + parent: "examples_list_view/examples_list_view_item/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "examples_list_view/examples_list_view_item/text" + parent: "examples_list_view/examples_list_view_item/root" + template_node_child: true +} +nodes { + position { + x: 960.0 + } + size { + x: 440.0 + y: 1080.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "container_right" + pivot: PIVOT_E + adjust_mode: ADJUST_MODE_STRETCH + parent: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + y: 540.0 + } + size { + x: 440.0 + y: 450.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "container_info" + pivot: PIVOT_NE + adjust_mode: ADJUST_MODE_STRETCH + parent: "container_right" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -220.0 + y: -225.0 + } + type: TYPE_TEMPLATE + id: "panel_information" + parent: "container_info" + inherit_alpha: true + template: "/example/components/panel_information/panel_information.gui" +} +nodes { + type: TYPE_BOX + id: "panel_information/root" + parent: "panel_information" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_information/text_header" + parent: "panel_information/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "panel_information/S_Anchor" + parent: "panel_information/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "panel_information/button_view_code" + parent: "panel_information/S_Anchor" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "panel_information/button_view_code/root" + parent: "panel_information/button_view_code" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_information/button_view_code/text" + parent: "panel_information/button_view_code/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "panel_information/NE_Anchor" + parent: "panel_information/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "panel_information/button_profiler" + parent: "panel_information/NE_Anchor" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "panel_information/button_profiler/root" + parent: "panel_information/button_profiler" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_information/button_profiler/text" + parent: "panel_information/button_profiler/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "panel_information/scroll_view" + parent: "panel_information/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "panel_information/scroll_content" + parent: "panel_information/scroll_view" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_information/text_description" + parent: "panel_information/scroll_content" + template_node_child: true +} +nodes { + position { + y: -540.0 + } + size { + x: 440.0 + y: 630.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "container_group_settings_output" + pivot: PIVOT_SE + adjust_mode: ADJUST_MODE_STRETCH + parent: "container_right" + inherit_alpha: true + visible: false +} +nodes { + position { + y: 630.0 + } + size { + x: 440.0 + y: 350.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "container_settings" + pivot: PIVOT_NE + adjust_mode: ADJUST_MODE_STRETCH + parent: "container_group_settings_output" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -220.0 + y: -175.0 + } + type: TYPE_TEMPLATE + id: "properties_panel" + parent: "container_settings" + inherit_alpha: true + template: "/example/components/properties_panel/properties_panel.gui" +} +nodes { + type: TYPE_BOX + id: "properties_panel/root" + parent: "properties_panel" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "properties_panel/text_header" + parent: "properties_panel/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/scroll_view" + parent: "properties_panel/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/scroll_content" + parent: "properties_panel/scroll_view" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/item_size" + parent: "properties_panel/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/separator" + parent: "properties_panel/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/propeties" + parent: "properties_panel/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "properties_panel/property_slider" + parent: "properties_panel/propeties" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_slider/root" + parent: "properties_panel/property_slider" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "properties_panel/property_slider/text_name" + parent: "properties_panel/property_slider/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_slider/E_Anchor" + parent: "properties_panel/property_slider/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_slider/button" + parent: "properties_panel/property_slider/E_Anchor" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_slider/selected" + parent: "properties_panel/property_slider/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "properties_panel/property_slider/text_value" + parent: "properties_panel/property_slider/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_slider/slider" + parent: "properties_panel/property_slider/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_slider/slider_back" + parent: "properties_panel/property_slider/slider" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_slider/slider_pin" + parent: "properties_panel/property_slider/slider" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "properties_panel/property_checkbox" + parent: "properties_panel/propeties" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_checkbox/root" + parent: "properties_panel/property_checkbox" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "properties_panel/property_checkbox/text_name" + parent: "properties_panel/property_checkbox/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_checkbox/button" + parent: "properties_panel/property_checkbox/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_checkbox/icon" + parent: "properties_panel/property_checkbox/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_checkbox/selected" + parent: "properties_panel/property_checkbox/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "properties_panel/property_button" + parent: "properties_panel/propeties" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_button/root" + parent: "properties_panel/property_button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "properties_panel/property_button/text_name" + parent: "properties_panel/property_button/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_button/button" + parent: "properties_panel/property_button/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "properties_panel/property_button/selected" + parent: "properties_panel/property_button/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "properties_panel/property_button/text_button" + parent: "properties_panel/property_button/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "properties_panel/text_no_properties" + parent: "properties_panel/root" + template_node_child: true +} +nodes { + size { + x: 440.0 + y: 280.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "container_output" + pivot: PIVOT_SE + adjust_mode: ADJUST_MODE_STRETCH + parent: "container_group_settings_output" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -220.0 + y: 140.0 + } + type: TYPE_TEMPLATE + id: "output_list" + parent: "container_output" + inherit_alpha: true + template: "/example/components/output_list/output_list.gui" +} +nodes { + type: TYPE_BOX + id: "output_list/root" + parent: "output_list" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "output_list/text_header" + parent: "output_list/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "output_list/scroll_view" + parent: "output_list/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "output_list/scroll_content" + parent: "output_list/scroll_view" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "output_list/text" + parent: "output_list/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "output_list/separator" + parent: "output_list/root" + template_node_child: true +} +nodes { + position { + x: -20.0 + y: 25.0 + } + size { + x: 1080.0 + y: 1030.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "container_center" + xanchor: XANCHOR_LEFT + yanchor: YANCHOR_BOTTOM + adjust_mode: ADJUST_MODE_STRETCH + parent: "root" + inherit_alpha: true + clipping_mode: CLIPPING_MODE_STENCIL +} +nodes { + type: TYPE_TEMPLATE + id: "example_scene" + parent: "container_center" + inherit_alpha: true + template: "/example/components/example_scene/example_scene.gui" +} +nodes { + type: TYPE_BOX + id: "example_scene/root" + parent: "example_scene" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "example_scene/text_debug_info" + parent: "example_scene/root" + template_node_child: true +} +nodes { + size { + x: 200.0 + y: 100.0 + } + type: TYPE_BOX + id: "examples" + parent: "container_center" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + type: TYPE_BOX + texture: "druid/empty" + id: "intro_examples" + parent: "examples" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + type: TYPE_TEMPLATE + id: "intro" + parent: "intro_examples" + inherit_alpha: true + template: "/example/examples/intro/intro/intro.gui" +} +nodes { + type: TYPE_BOX + id: "intro/root" + parent: "intro" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "intro/icon_druid_left" + parent: "intro/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "intro/icon_druid_right" + parent: "intro/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "intro/text_hello" + parent: "intro/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "intro/text_description" + parent: "intro/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "intro/text_support" + parent: "intro/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "intro/icon_heart1" + parent: "intro/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "intro/icon_heart2" + parent: "intro/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "intro/icon_heart3" + parent: "intro/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "intro/sponsor" + parent: "intro/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "intro/sponsor_github" + parent: "intro/sponsor" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "intro/sponsor_coffee" + parent: "intro/sponsor" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "intro/sponsor_kofi" + parent: "intro/sponsor" + template_node_child: true +} +nodes { + size { + x: 200.0 + y: 100.0 + } + type: TYPE_BOX + id: "basic" + parent: "examples" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + type: TYPE_TEMPLATE + id: "basic_button" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/button/basic_button.gui" +} +nodes { + type: TYPE_BOX + id: "basic_button/root" + parent: "basic_button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_button/button" + parent: "basic_button/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_button/button/root" + parent: "basic_button/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_button/button/text" + parent: "basic_button/button/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_text" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/text/basic_text.gui" +} +nodes { + type: TYPE_BOX + id: "basic_text/root" + parent: "basic_text" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_text/text_area" + parent: "basic_text/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_text/text" + parent: "basic_text/text_area" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "multiline_text" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/text/multiline_text.gui" +} +nodes { + type: TYPE_BOX + id: "multiline_text/root" + parent: "multiline_text" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "multiline_text/text_area" + parent: "multiline_text/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "multiline_text/text" + parent: "multiline_text/text_area" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/scroll/scroll.gui" +} +nodes { + type: TYPE_BOX + id: "scroll/root" + parent: "scroll" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll/scroll_view" + parent: "scroll/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll/scroll_content" + parent: "scroll/scroll_view" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll/button_tutorial" + parent: "scroll/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll/button_tutorial/root" + parent: "scroll/button_tutorial" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll/button_tutorial/text" + parent: "scroll/button_tutorial/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll/ui_scroll_text_1" + parent: "scroll/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll/ui_scroll_text_2" + parent: "scroll/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll/ui_scroll_text_3" + parent: "scroll/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll/ui_scroll_text_4" + parent: "scroll/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll/ui_scroll_text_5" + parent: "scroll/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll/button_stencil" + parent: "scroll/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll/button_stencil/root" + parent: "scroll/button_stencil" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll/button_stencil/text" + parent: "scroll/button_stencil/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "grid" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/grid/grid.gui" +} +nodes { + type: TYPE_BOX + id: "grid/root" + parent: "grid" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "grid/grid" + parent: "grid/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "grid/prefab" + parent: "grid/grid" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "grid/panel" + parent: "grid/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "grid/text" + parent: "grid/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_bind_grid" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/scroll_bind_grid/scroll_bind_grid.gui" +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid/root" + parent: "scroll_bind_grid" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid/view" + parent: "scroll_bind_grid/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid/content" + parent: "scroll_bind_grid/view" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid/prefab" + parent: "scroll_bind_grid/content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid/panel" + parent: "scroll_bind_grid/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_bind_grid/text" + parent: "scroll_bind_grid/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_bind_grid_horizontal" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/scroll_bind_grid/scroll_bind_grid_horizontal.gui" +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid_horizontal/root" + parent: "scroll_bind_grid_horizontal" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid_horizontal/view" + parent: "scroll_bind_grid_horizontal/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid_horizontal/content" + parent: "scroll_bind_grid_horizontal/view" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid_horizontal/prefab" + parent: "scroll_bind_grid_horizontal/content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid_horizontal/panel" + parent: "scroll_bind_grid_horizontal/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_bind_grid_horizontal/text" + parent: "scroll_bind_grid_horizontal/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "hover" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/hover/hover.gui" +} +nodes { + type: TYPE_BOX + id: "hover/root" + parent: "hover" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "hover/button_mouse_hover" + parent: "hover/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "hover/button_mouse_hover/root" + parent: "hover/button_mouse_hover" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "hover/button_mouse_hover/text" + parent: "hover/button_mouse_hover/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "hover/button_mobile_hover" + parent: "hover/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "hover/button_mobile_hover/root" + parent: "hover/button_mobile_hover" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "hover/button_mobile_hover/text" + parent: "hover/button_mobile_hover/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "drag" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/drag/drag.gui" +} +nodes { + type: TYPE_BOX + id: "drag/root" + parent: "drag" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "drag/drag" + parent: "drag/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "drag/drag/root" + parent: "drag/drag" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "drag/drag/text" + parent: "drag/drag/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_input" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/input/basic_input.gui" +} +nodes { + type: TYPE_BOX + id: "basic_input/root" + parent: "basic_input" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_input/input" + parent: "basic_input/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_input/input/root" + parent: "basic_input/input" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_input/input/text" + parent: "basic_input/input/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_input/input_2" + parent: "basic_input/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_input/input_2/root" + parent: "basic_input/input_2" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_input/input_2/text" + parent: "basic_input/input_2/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_rich_input" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/input/rich_input.gui" +} +nodes { + type: TYPE_BOX + id: "basic_rich_input/root" + parent: "basic_rich_input" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_rich_input/rich_input" + parent: "basic_rich_input/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_rich_input/rich_input/root" + parent: "basic_rich_input/rich_input" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_rich_input/rich_input/button" + parent: "basic_rich_input/rich_input/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_rich_input/rich_input/placeholder_text" + parent: "basic_rich_input/rich_input/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_rich_input/rich_input/input_text" + parent: "basic_rich_input/rich_input/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_rich_input/rich_input/cursor_node" + parent: "basic_rich_input/rich_input/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_rich_input/rich_input/cursor_text" + parent: "basic_rich_input/rich_input/cursor_node" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_rich_input/rich_input_2" + parent: "basic_rich_input/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_rich_input/rich_input_2/root" + parent: "basic_rich_input/rich_input_2" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_rich_input/rich_input_2/button" + parent: "basic_rich_input/rich_input_2/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_rich_input/rich_input_2/placeholder_text" + parent: "basic_rich_input/rich_input_2/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_rich_input/rich_input_2/input_text" + parent: "basic_rich_input/rich_input_2/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_rich_input/rich_input_2/cursor_node" + parent: "basic_rich_input/rich_input_2/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_rich_input/rich_input_2/cursor_text" + parent: "basic_rich_input/rich_input_2/cursor_node" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_rich_text" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/rich_text/basic_rich_text.gui" +} +nodes { + type: TYPE_BOX + id: "basic_rich_text/root" + parent: "basic_rich_text" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_rich_text/text" + parent: "basic_rich_text/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_slider" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/slider/basic_slider.gui" +} +nodes { + type: TYPE_BOX + id: "basic_slider/root" + parent: "basic_slider" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_slider/slider" + parent: "basic_slider/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_slider/slider/root" + parent: "basic_slider/slider" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_slider/slider/slider_back" + parent: "basic_slider/slider/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_slider/slider/slider_pin" + parent: "basic_slider/slider/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_slider/slider_value" + parent: "basic_slider/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_progress_bar" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/progress_bar/basic_progress_bar.gui" +} +nodes { + type: TYPE_BOX + id: "basic_progress_bar/root" + parent: "basic_progress_bar" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_progress_bar/progress_bar_back" + parent: "basic_progress_bar/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_progress_bar/progress_bar_fill" + parent: "basic_progress_bar/progress_bar_back" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_progress_bar/progress_value" + parent: "basic_progress_bar/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/scroll_slider/scroll_slider.gui" +} +nodes { + type: TYPE_BOX + id: "scroll_slider/root" + parent: "scroll_slider" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/scroll_view" + parent: "scroll_slider/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/scroll_content" + parent: "scroll_slider/scroll_view" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button1" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button1/root" + parent: "scroll_slider/button1" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button1/text" + parent: "scroll_slider/button1/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button2" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button2/root" + parent: "scroll_slider/button2" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button2/text" + parent: "scroll_slider/button2/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button3" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button3/root" + parent: "scroll_slider/button3" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button3/text" + parent: "scroll_slider/button3/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button4" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button4/root" + parent: "scroll_slider/button4" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button4/text" + parent: "scroll_slider/button4/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button5" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button5/root" + parent: "scroll_slider/button5" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button5/text" + parent: "scroll_slider/button5/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button6" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button6/root" + parent: "scroll_slider/button6" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button6/text" + parent: "scroll_slider/button6/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button7" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button7/root" + parent: "scroll_slider/button7" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button7/text" + parent: "scroll_slider/button7/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button8" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button8/root" + parent: "scroll_slider/button8" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button8/text" + parent: "scroll_slider/button8/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button9" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button9/root" + parent: "scroll_slider/button9" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button9/text" + parent: "scroll_slider/button9/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button10" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button10/root" + parent: "scroll_slider/button10" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button10/text" + parent: "scroll_slider/button10/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button11" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button11/root" + parent: "scroll_slider/button11" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button11/text" + parent: "scroll_slider/button11/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button12" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button12/root" + parent: "scroll_slider/button12" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button12/text" + parent: "scroll_slider/button12/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_slider/button13" + parent: "scroll_slider/scroll_content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/button13/root" + parent: "scroll_slider/button13" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_slider/button13/text" + parent: "scroll_slider/button13/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/slider_back" + parent: "scroll_slider/scroll_view" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_slider/slider_pin" + parent: "scroll_slider/slider_back" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_slider_stepped" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/slider/basic_slider_stepped.gui" +} +nodes { + type: TYPE_BOX + id: "basic_slider_stepped/root" + parent: "basic_slider_stepped" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_slider_stepped/slider" + parent: "basic_slider_stepped/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_slider_stepped/slider/root" + parent: "basic_slider_stepped/slider" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_slider_stepped/slider/slider_back" + parent: "basic_slider_stepped/slider/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_slider_stepped/slider/slider_pin" + parent: "basic_slider_stepped/slider/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_slider_stepped/slider_value" + parent: "basic_slider_stepped/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_swipe" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/swipe/basic_swipe.gui" +} +nodes { + type: TYPE_BOX + id: "basic_swipe/root" + parent: "basic_swipe" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_swipe/swipe_hint" + parent: "basic_swipe/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "rich_text_tags" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/rich_text/rich_text_tags.gui" +} +nodes { + type: TYPE_BOX + id: "rich_text_tags/root" + parent: "rich_text_tags" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "rich_text_tags/background" + parent: "rich_text_tags/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "rich_text_tags/rich_text_color" + parent: "rich_text_tags/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "rich_text_tags/rich_text_breaks" + parent: "rich_text_tags/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "rich_text_tags/rich_text_size" + parent: "rich_text_tags/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "rich_text_tags/rich_text_font" + parent: "rich_text_tags/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "rich_text_tags/rich_text_image" + parent: "rich_text_tags/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "rich_text_tags_custom" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/rich_text/rich_text_tags_custom.gui" + enabled: false +} +nodes { + type: TYPE_BOX + id: "rich_text_tags_custom/root" + parent: "rich_text_tags_custom" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "rich_text_tags_custom/rich_text_link" + parent: "rich_text_tags_custom/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "rich_text_tags_custom/rich_text_characters" + parent: "rich_text_tags_custom/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "rich_text_tags_custom/rich_text_custom" + parent: "rich_text_tags_custom/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_progress_bar_slice9" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/progress_bar/basic_progress_bar_slice9.gui" +} +nodes { + type: TYPE_BOX + id: "basic_progress_bar_slice9/root" + parent: "basic_progress_bar_slice9" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_progress_bar_slice9/progress_bar_back" + parent: "basic_progress_bar_slice9/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_progress_bar_slice9/progress_bar_fill" + parent: "basic_progress_bar_slice9/progress_bar_back" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_progress_bar_slice9/progress_value" + parent: "basic_progress_bar_slice9/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_timer" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/timer/basic_timer.gui" +} +nodes { + type: TYPE_BOX + id: "basic_timer/root" + parent: "basic_timer" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_timer/text" + parent: "basic_timer/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_hotkey" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/hotkey/basic_hotkey.gui" +} +nodes { + type: TYPE_BOX + id: "basic_hotkey/root" + parent: "basic_hotkey" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_hotkey/text" + parent: "basic_hotkey/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_button_double_click" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/button/basic_button_double_click.gui" +} +nodes { + type: TYPE_BOX + id: "basic_button_double_click/root" + parent: "basic_button_double_click" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_button_double_click/button" + parent: "basic_button_double_click/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_button_double_click/button/root" + parent: "basic_button_double_click/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_button_double_click/button/text" + parent: "basic_button_double_click/button/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_button_hold" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/button/basic_button_hold.gui" +} +nodes { + type: TYPE_BOX + id: "basic_button_hold/root" + parent: "basic_button_hold" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_button_hold/button" + parent: "basic_button_hold/root" + template_node_child: true +} +nodes { + type: TYPE_PIE + id: "basic_button_hold/mask" + parent: "basic_button_hold/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_button_hold/button_image" + parent: "basic_button_hold/mask" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_button_hold/text" + parent: "basic_button_hold/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "input_password" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/input/input_password.gui" +} +nodes { + type: TYPE_BOX + id: "input_password/root" + parent: "input_password" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "input_password/input" + parent: "input_password/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "input_password/input/root" + parent: "input_password/input" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "input_password/input/text" + parent: "input_password/input/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "drag_to_node" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/drag/drag_to_node.gui" +} +nodes { + type: TYPE_BOX + id: "drag_to_node/root" + parent: "drag_to_node" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "drag_to_node/drag" + parent: "drag_to_node/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "drag_to_node/drag/root" + parent: "drag_to_node/drag" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "drag_to_node/drag/text" + parent: "drag_to_node/drag/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "drag_to_node/zone" + parent: "drag_to_node/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "drag_to_node/text_hint" + parent: "drag_to_node/zone" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "drag_to_node/text_counter" + parent: "drag_to_node/zone" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_slider_vertical" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/slider/basic_slider_vertical.gui" +} +nodes { + type: TYPE_BOX + id: "basic_slider_vertical/root" + parent: "basic_slider_vertical" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_slider_vertical/slider" + parent: "basic_slider_vertical/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_slider_vertical/slider/root" + parent: "basic_slider_vertical/slider" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_slider_vertical/slider/slider_back" + parent: "basic_slider_vertical/slider/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_slider_vertical/slider/slider_pin" + parent: "basic_slider_vertical/slider/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_slider_vertical/slider_value" + parent: "basic_slider_vertical/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "scroll_bind_grid_points" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/scroll_bind_grid/scroll_bind_grid_points.gui" +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid_points/root" + parent: "scroll_bind_grid_points" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid_points/view" + parent: "scroll_bind_grid_points/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid_points/content" + parent: "scroll_bind_grid_points/view" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid_points/prefab" + parent: "scroll_bind_grid_points/content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "scroll_bind_grid_points/panel" + parent: "scroll_bind_grid_points/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "scroll_bind_grid_points/text" + parent: "scroll_bind_grid_points/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_blocker" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/blocker/basic_blocker.gui" +} +nodes { + type: TYPE_BOX + id: "basic_blocker/root" + parent: "basic_blocker" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_blocker/blocker" + parent: "basic_blocker/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_blocker/button" + parent: "basic_blocker/blocker" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_blocker/button/root" + parent: "basic_blocker/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_blocker/button/text" + parent: "basic_blocker/button/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_blocker/text" + parent: "basic_blocker/blocker" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_back_handler" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/back_handler/basic_back_handler.gui" +} +nodes { + type: TYPE_BOX + id: "basic_back_handler/root" + parent: "basic_back_handler" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_back_handler/text" + parent: "basic_back_handler/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_checkbox" + parent: "basic" + inherit_alpha: true + template: "/example/examples/basic/checkbox/basic_checkbox.gui" +} +nodes { + type: TYPE_BOX + id: "basic_checkbox/root" + parent: "basic_checkbox" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_checkbox/button" + parent: "basic_checkbox/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_checkbox/icon" + parent: "basic_checkbox/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_checkbox/selected" + parent: "basic_checkbox/button" + template_node_child: true +} +nodes { + size { + x: 200.0 + y: 100.0 + } + type: TYPE_BOX + id: "windows" + adjust_mode: ADJUST_MODE_STRETCH + parent: "examples" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + type: TYPE_TEMPLATE + id: "window_language" + parent: "windows" + inherit_alpha: true + template: "/example/examples/windows/window_language/window_language.gui" +} +nodes { + type: TYPE_BOX + id: "window_language/root" + parent: "window_language" + overridden_fields: 1 + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_language/window" + parent: "window_language/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_language/panel_header" + parent: "window_language/window" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "window_language/text_header" + parent: "window_language/panel_header" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_language/button_close" + parent: "window_language/panel_header" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_language/icon_close" + parent: "window_language/button_close" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_language/content" + parent: "window_language/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_language/button_prefab" + parent: "window_language/content" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "window_language/button" + parent: "window_language/button_prefab" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_language/button/root" + parent: "window_language/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "window_language/button/text" + parent: "window_language/button/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "window_confirmation" + parent: "windows" + inherit_alpha: true + template: "/example/examples/windows/window_confirmation/window_confirmation.gui" +} +nodes { + type: TYPE_BOX + id: "window_confirmation/root" + parent: "window_confirmation" + overridden_fields: 1 + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_confirmation/window" + parent: "window_confirmation/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_confirmation/panel_header" + parent: "window_confirmation/window" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "window_confirmation/text_header" + parent: "window_confirmation/panel_header" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_confirmation/button_close" + parent: "window_confirmation/panel_header" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_confirmation/icon_close" + parent: "window_confirmation/button_close" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_confirmation/content" + parent: "window_confirmation/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "window_confirmation/text" + parent: "window_confirmation/content" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "window_confirmation/button_accept" + parent: "window_confirmation/content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_confirmation/button_accept/root" + parent: "window_confirmation/button_accept" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "window_confirmation/button_accept/text" + parent: "window_confirmation/button_accept/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "window_confirmation/button_decline" + parent: "window_confirmation/content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_confirmation/button_decline/root" + parent: "window_confirmation/button_decline" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "window_confirmation/button_decline/text" + parent: "window_confirmation/button_decline/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "window_info" + parent: "windows" + inherit_alpha: true + template: "/example/examples/windows/window_info/window_info.gui" +} +nodes { + type: TYPE_BOX + id: "window_info/root" + parent: "window_info" + overridden_fields: 1 + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_info/window" + parent: "window_info/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_info/panel_header" + parent: "window_info/window" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "window_info/text_header" + parent: "window_info/panel_header" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_info/button_close" + parent: "window_info/panel_header" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_info/icon_close" + parent: "window_info/button_close" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_info/content" + parent: "window_info/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "window_info/text" + parent: "window_info/content" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "window_info/button_accept" + parent: "window_info/content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "window_info/button_accept/root" + parent: "window_info/button_accept" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "window_info/button_accept/text" + parent: "window_info/button_accept/root" + template_node_child: true +} +nodes { + size { + x: 200.0 + y: 100.0 + } + type: TYPE_BOX + id: "data_list" + parent: "examples" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + type: TYPE_TEMPLATE + id: "data_list_basic" + parent: "data_list" + inherit_alpha: true + template: "/example/examples/data_list/basic/data_list_basic.gui" +} +nodes { + type: TYPE_BOX + id: "data_list_basic/root" + parent: "data_list_basic" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_basic/view" + parent: "data_list_basic/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_basic/content" + parent: "data_list_basic/view" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_basic/prefab" + parent: "data_list_basic/content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_basic/panel" + parent: "data_list_basic/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "data_list_basic/text" + parent: "data_list_basic/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "data_list_horizontal_basic" + parent: "data_list" + inherit_alpha: true + template: "/example/examples/data_list/basic/data_list_horizontal_basic.gui" +} +nodes { + type: TYPE_BOX + id: "data_list_horizontal_basic/root" + parent: "data_list_horizontal_basic" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_horizontal_basic/view" + parent: "data_list_horizontal_basic/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_horizontal_basic/content" + parent: "data_list_horizontal_basic/view" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_horizontal_basic/prefab" + parent: "data_list_horizontal_basic/content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_horizontal_basic/panel" + parent: "data_list_horizontal_basic/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "data_list_horizontal_basic/text" + parent: "data_list_horizontal_basic/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "data_list_add_remove_clear" + parent: "data_list" + inherit_alpha: true + template: "/example/examples/data_list/add_remove_clear/data_list_add_remove_clear.gui" +} +nodes { + type: TYPE_BOX + id: "data_list_add_remove_clear/root" + parent: "data_list_add_remove_clear" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_add_remove_clear/view" + parent: "data_list_add_remove_clear/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_add_remove_clear/content" + parent: "data_list_add_remove_clear/view" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_add_remove_clear/prefab" + parent: "data_list_add_remove_clear/content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_add_remove_clear/panel" + parent: "data_list_add_remove_clear/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "data_list_add_remove_clear/text" + parent: "data_list_add_remove_clear/prefab" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "data_list_cache_with_component" + parent: "data_list" + inherit_alpha: true + template: "/example/examples/data_list/cache_with_component/cache_with_component.gui" +} +nodes { + type: TYPE_BOX + id: "data_list_cache_with_component/root" + parent: "data_list_cache_with_component" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_cache_with_component/view" + parent: "data_list_cache_with_component/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_cache_with_component/content" + parent: "data_list_cache_with_component/view" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "data_list_cache_with_component/button_component" + parent: "data_list_cache_with_component/content" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_cache_with_component/button_component/root" + parent: "data_list_cache_with_component/button_component" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "data_list_cache_with_component/button_component/panel" + parent: "data_list_cache_with_component/button_component/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "data_list_cache_with_component/button_component/text" + parent: "data_list_cache_with_component/button_component/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + texture: "druid/empty" + id: "gamepad" + parent: "examples" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester" + parent: "gamepad" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/gamepad_tester.gui" +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/root" + parent: "gamepad_tester" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/gamepad" + parent: "gamepad_tester/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/stick_left" + parent: "gamepad_tester/gamepad" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_left/root" + parent: "gamepad_tester/stick_left" + template_node_child: true +} +nodes { + type: TYPE_PIE + id: "gamepad_tester/stick_left/background_mask" + parent: "gamepad_tester/stick_left/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_left/background" + parent: "gamepad_tester/stick_left/background_mask" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_left/stick_root" + parent: "gamepad_tester/stick_left/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_left/stick_shadow" + parent: "gamepad_tester/stick_left/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_left/stick" + parent: "gamepad_tester/stick_left/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_left/dot_1" + parent: "gamepad_tester/stick_left/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_left/dot_2" + parent: "gamepad_tester/stick_left/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_left/dot_3" + parent: "gamepad_tester/stick_left/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_left/dot_4" + parent: "gamepad_tester/stick_left/stick" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/stick_right" + parent: "gamepad_tester/gamepad" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_right/root" + parent: "gamepad_tester/stick_right" + template_node_child: true +} +nodes { + type: TYPE_PIE + id: "gamepad_tester/stick_right/background_mask" + parent: "gamepad_tester/stick_right/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_right/background" + parent: "gamepad_tester/stick_right/background_mask" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_right/stick_root" + parent: "gamepad_tester/stick_right/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_right/stick_shadow" + parent: "gamepad_tester/stick_right/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_right/stick" + parent: "gamepad_tester/stick_right/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_right/dot_1" + parent: "gamepad_tester/stick_right/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_right/dot_2" + parent: "gamepad_tester/stick_right/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_right/dot_3" + parent: "gamepad_tester/stick_right/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/stick_right/dot_4" + parent: "gamepad_tester/stick_right/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/dpad" + parent: "gamepad_tester/gamepad" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_left" + parent: "gamepad_tester/dpad" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_left/button" + parent: "gamepad_tester/button_left" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_left/text" + parent: "gamepad_tester/button_left/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_left/icon" + parent: "gamepad_tester/button_left/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_up" + parent: "gamepad_tester/dpad" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_up/button" + parent: "gamepad_tester/button_up" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_up/text" + parent: "gamepad_tester/button_up/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_up/icon" + parent: "gamepad_tester/button_up/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_right" + parent: "gamepad_tester/dpad" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_right/button" + parent: "gamepad_tester/button_right" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_right/text" + parent: "gamepad_tester/button_right/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_right/icon" + parent: "gamepad_tester/button_right/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_down" + parent: "gamepad_tester/dpad" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_down/button" + parent: "gamepad_tester/button_down" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_down/text" + parent: "gamepad_tester/button_down/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_down/icon" + parent: "gamepad_tester/button_down/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/buttons" + parent: "gamepad_tester/gamepad" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_x" + parent: "gamepad_tester/buttons" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_x/button" + parent: "gamepad_tester/button_x" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_x/text" + parent: "gamepad_tester/button_x/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_x/icon" + parent: "gamepad_tester/button_x/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_y" + parent: "gamepad_tester/buttons" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_y/button" + parent: "gamepad_tester/button_y" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_y/text" + parent: "gamepad_tester/button_y/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_y/icon" + parent: "gamepad_tester/button_y/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_b" + parent: "gamepad_tester/buttons" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_b/button" + parent: "gamepad_tester/button_b" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_b/text" + parent: "gamepad_tester/button_b/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_b/icon" + parent: "gamepad_tester/button_b/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_a" + parent: "gamepad_tester/buttons" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_a/button" + parent: "gamepad_tester/button_a" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_a/text" + parent: "gamepad_tester/button_a/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_a/icon" + parent: "gamepad_tester/button_a/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/buttons_system" + parent: "gamepad_tester/gamepad" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_back" + parent: "gamepad_tester/buttons_system" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_back/button" + parent: "gamepad_tester/button_back" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_back/text" + parent: "gamepad_tester/button_back/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_back/icon" + parent: "gamepad_tester/button_back/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_start" + parent: "gamepad_tester/buttons_system" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_start/button" + parent: "gamepad_tester/button_start" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_start/text" + parent: "gamepad_tester/button_start/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_start/icon" + parent: "gamepad_tester/button_start/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_left_bump" + parent: "gamepad_tester/gamepad" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_l1" + parent: "gamepad_tester/button_left_bump" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_l1/button" + parent: "gamepad_tester/button_l1" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_l1/text" + parent: "gamepad_tester/button_l1/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_l1/icon" + parent: "gamepad_tester/button_l1/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_l2" + parent: "gamepad_tester/button_left_bump" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_l2/button" + parent: "gamepad_tester/button_l2" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_l2/fill" + parent: "gamepad_tester/button_l2/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_l2/text" + parent: "gamepad_tester/button_l2/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_right_bump" + parent: "gamepad_tester/gamepad" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_r1" + parent: "gamepad_tester/button_right_bump" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_r1/button" + parent: "gamepad_tester/button_r1" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_r1/text" + parent: "gamepad_tester/button_r1/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_r1/icon" + parent: "gamepad_tester/button_r1/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "gamepad_tester/button_r2" + parent: "gamepad_tester/button_right_bump" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_r2/button" + parent: "gamepad_tester/button_r2" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "gamepad_tester/button_r2/fill" + parent: "gamepad_tester/button_r2/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "gamepad_tester/button_r2/text" + parent: "gamepad_tester/button_r2/button" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "on_screen_control" + parent: "gamepad" + inherit_alpha: true + template: "/example/examples/gamepad/on_screen_control/on_screen_control.gui" +} +nodes { + type: TYPE_BOX + id: "on_screen_control/root" + parent: "on_screen_control" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/character" + parent: "on_screen_control/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/eye_left" + parent: "on_screen_control/character" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/eye_left_blick" + parent: "on_screen_control/eye_left" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/eye_right" + parent: "on_screen_control/character" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/eye_right_blick" + parent: "on_screen_control/eye_right" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "on_screen_control/on_screen_input" + parent: "on_screen_control/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/root" + parent: "on_screen_control/on_screen_input" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "on_screen_control/on_screen_input/on_screen_stick" + parent: "on_screen_control/on_screen_input/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/on_screen_stick/root" + parent: "on_screen_control/on_screen_input/on_screen_stick" + template_node_child: true +} +nodes { + type: TYPE_PIE + id: "on_screen_control/on_screen_input/on_screen_stick/background_mask" + parent: "on_screen_control/on_screen_input/on_screen_stick/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/on_screen_stick/background" + parent: "on_screen_control/on_screen_input/on_screen_stick/background_mask" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/on_screen_stick/stick_root" + parent: "on_screen_control/on_screen_input/on_screen_stick/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/on_screen_stick/stick_shadow" + parent: "on_screen_control/on_screen_input/on_screen_stick/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/on_screen_stick/stick" + parent: "on_screen_control/on_screen_input/on_screen_stick/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/on_screen_stick/dot_1" + parent: "on_screen_control/on_screen_input/on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/on_screen_stick/dot_2" + parent: "on_screen_control/on_screen_input/on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/on_screen_stick/dot_3" + parent: "on_screen_control/on_screen_input/on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/on_screen_stick/dot_4" + parent: "on_screen_control/on_screen_input/on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/on_screen_button" + parent: "on_screen_control/on_screen_input/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "on_screen_control/on_screen_input/button_action" + parent: "on_screen_control/on_screen_input/on_screen_button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/button_action/button" + parent: "on_screen_control/on_screen_input/button_action" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "on_screen_control/on_screen_input/button_action/text" + parent: "on_screen_control/on_screen_input/button_action/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_control/on_screen_input/button_action/icon" + parent: "on_screen_control/on_screen_input/button_action/button" + template_node_child: true +} +nodes { + size { + x: 200.0 + y: 100.0 + } + type: TYPE_BOX + id: "panthera" + parent: "examples" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + type: TYPE_TEMPLATE + id: "animation_blend" + parent: "panthera" + inherit_alpha: true + template: "/example/examples/panthera/animation_blend/animation_blend.gui" +} +nodes { + type: TYPE_BOX + id: "animation_blend/root" + parent: "animation_blend" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "animation_blend/character" + parent: "animation_blend/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "animation_blend/body" + parent: "animation_blend/character" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "animation_blend/eyes" + parent: "animation_blend/body" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "animation_blend/eye_left" + parent: "animation_blend/eyes" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "animation_blend/brow_left" + parent: "animation_blend/eye_left" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "animation_blend/eye_right" + parent: "animation_blend/eyes" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "animation_blend/brow_right" + parent: "animation_blend/eye_right" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "animation_blend/mouth" + parent: "animation_blend/body" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "animation_blend/hand_left" + parent: "animation_blend/body" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "animation_blend/hand_right" + parent: "animation_blend/body" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "animation_blend/text_hint" + parent: "animation_blend/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "animation_blend/rich_text_kenney" + parent: "animation_blend/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_animation" + parent: "panthera" + inherit_alpha: true + template: "/example/examples/panthera/basic_animation/basic_animation.gui" +} +nodes { + type: TYPE_BOX + id: "basic_animation/root" + parent: "basic_animation" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "basic_animation/button" + parent: "basic_animation/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_animation/button/root" + parent: "basic_animation/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "basic_animation/button/text" + parent: "basic_animation/button/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + texture: "druid/empty" + id: "layout" + parent: "examples" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + type: TYPE_TEMPLATE + id: "basic_layout" + parent: "layout" + inherit_alpha: true + template: "/example/examples/layout/basic/basic_layout.gui" +} +nodes { + type: TYPE_BOX + id: "basic_layout/root" + parent: "basic_layout" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_layout/layout" + parent: "basic_layout/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "basic_layout/prefab" + parent: "basic_layout/layout" + template_node_child: true +} +nodes { + position { + x: -20.0 + y: -540.0 + } + size { + x: 1080.0 + y: 50.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "container_status" + xanchor: XANCHOR_LEFT + pivot: PIVOT_S + parent: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + y: 25.0 + } + type: TYPE_TEMPLATE + id: "panel_druid_profiler" + parent: "container_status" + inherit_alpha: true + template: "/example/components/panel_druid_profiler/panel_druid_profiler.gui" +} +nodes { + type: TYPE_BOX + id: "panel_druid_profiler/root" + parent: "panel_druid_profiler" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "panel_druid_profiler/group_memory" + parent: "panel_druid_profiler/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_druid_profiler/text_memory" + parent: "panel_druid_profiler/group_memory" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_druid_profiler/text_memory_amount" + parent: "panel_druid_profiler/group_memory" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_druid_profiler/text_memory_kb" + parent: "panel_druid_profiler/group_memory" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "panel_druid_profiler/group_fps" + parent: "panel_druid_profiler/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_druid_profiler/text_fps" + parent: "panel_druid_profiler/group_fps" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_druid_profiler/text_fps_amount" + parent: "panel_druid_profiler/group_fps" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_druid_profiler/text_fps_min" + parent: "panel_druid_profiler/group_fps" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "panel_druid_profiler/group_components" + parent: "panel_druid_profiler/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_druid_profiler/text_components" + parent: "panel_druid_profiler/group_components" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_druid_profiler/text_components_amount" + parent: "panel_druid_profiler/group_components" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "panel_druid_profiler/group_events" + parent: "panel_druid_profiler/root" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_druid_profiler/text_events" + parent: "panel_druid_profiler/group_events" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "panel_druid_profiler/text_events_amount" + parent: "panel_druid_profiler/group_events" + template_node_child: true +} +layers { + name: "druid" +} +layers { + name: "druid_logo" +} +layers { + name: "text_regular" +} +layers { + name: "text_bold" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 2048 diff --git a/example/druid.gui_script b/example/druid.gui_script new file mode 100644 index 0000000..91e9120 --- /dev/null +++ b/example/druid.gui_script @@ -0,0 +1,210 @@ +local lang = require("lang.lang") +local saver = require("saver.saver") +local storage = require("saver.storage") +local druid = require("druid.druid") + +local container = require("example.components.container.container") +local druid_logo = require("example.components.druid_logo.druid_logo") +local panel_information = require("example.components.panel_information.panel_information") +local example_scene = require("example.components.example_scene.example_scene") +local panel_druid_profiler = require("example.components.panel_druid_profiler.panel_druid_profiler") +local examples_list_view = require("example.components.examples_list_view.examples_list_view") +local properties_panel = require("example.components.properties_panel.properties_panel") +local output_list = require("example.components.output_list.output_list") + +local druid_examples = require("example.examples.druid_examples") + +---@class druid.example +---@field druid druid_instance +---@field container_root druid.container +---@field container_left druid.container +---@field container_logo druid.container +---@field container_examples druid.container +---@field container_right druid.container +---@field container_info druid.container +---@field container_group_settings_output druid.container +---@field container_settings druid.container +---@field container_output druid.container +---@field container_center druid.container +---@field container_status druid.container +---@field druid_logo druid_logo +---@field panel_information panel_information +---@field example_scene example_scene +---@field panel_druid_profiler panel_druid_profiler +---@field examples_list_view examples_list_view +---@field properties_panel properties_panel +---@field output_list output_list + + +--- Generic setup that should be done once per application +---@param self druid.example +local function setup_druid(self) + saver.init() + saver.bind_save_state("lang", lang.state) + + lang.init() + lang.set_lang("en") -- Force default start language to EN, switch through the UI to check + druid.set_text_function(lang.txp) + + window.set_listener(function(_, event) + druid.on_window_callback(event) + end) +end + + +--- Containers is a layout of the GUI scene. Inside this containers I will place a logic components +--- This allow easily move components in the GUI scene and change the size of each section +---@param self druid.example +local function setup_layout(self) + self.container_root = self.druid:new(container, "root") --[[@as druid.container]] + self.container_left = self.container_root:add_container("container_left", "stretch_y") + self.container_logo = self.container_left:add_container("container_logo") + self.container_examples = self.container_left:add_container("container_examples") + + self.container_right = self.container_root:add_container("container_right", "stretch_y") + self.container_info = self.container_right:add_container("container_info") + + self.container_group_settings_output = self.container_right:add_container("container_group_settings_output") + self.container_settings = self.container_group_settings_output:add_container("container_settings") + self.container_output = self.container_group_settings_output:add_container("container_output") + + self.container_center = self.container_root:add_container("container_center") + self.container_status = self.container_root:add_container("container_status", "stretch_x") +end + + +---@param self druid.example +local function setup_components(self) + self.druid_logo = self.druid:new(druid_logo, "druid_logo") --[[@as druid_logo]] + self.container_logo:add_container(self.druid_logo.root) + + self.panel_information = self.druid:new(panel_information, "panel_information") --[[@as panel_information]] + self.container_info:add_container(self.panel_information.root) + + self.example_scene = self.druid:new(example_scene, "example_scene") --[[@as example_scene]] + self.container_center:add_container(self.example_scene.root) + + self.panel_druid_profiler = self.druid:new(panel_druid_profiler, "panel_druid_profiler") --[[@as panel_druid_profiler]] + self.container_status:add_container(self.panel_druid_profiler.root) + + self.examples_list_view = self.druid:new(examples_list_view, "examples_list_view") --[[@as examples_list_view]] + self.container_examples:add_container(self.examples_list_view.root) + + self.properties_panel = self.druid:new(properties_panel, "properties_panel") --[[@as properties_panel]] + self.container_settings:add_container(self.properties_panel.root) + + self.output_list = self.druid:new(output_list, "output_list") --[[@as output_list]] + self.container_output:add_container(self.output_list.root) + + do -- Component bindings + self.examples_list_view.on_debug_info:subscribe(function(info) + self.example_scene:set_debug_info(info) + end) + self.examples_list_view.add_log_text:subscribe(function(log) + self.output_list:add_log_text(log) + end) + self.examples_list_view.on_set_information:subscribe(function(text_id) + self.panel_information:set_text(text_id) + end) + + self.panel_information.button_view_code.on_click:subscribe(function() + local selected_example = self.examples_list_view.selected_example + if not selected_example then + return + end + + local code_url = selected_example.data.code_url + if not code_url then + return + end + + local url_prefix = "https://github.com/Insality/druid/blob/master/" + sys.open_url(url_prefix .. code_url, { target = "_blank" }) + end) + end +end + + +---@param self druid.example +local function select_start_example(self) + if html5 then + -- Try load example from URL + local example_name = html5.run("new URLSearchParams(window.location.search).get('example')") + if example_name then + local is_selected self.examples_list_view:select_example_by_name_id(example_name) + if is_selected then + return + end + end + end + + -- If we have last selected example in cache, select it again + local last_selected_example_name = storage.get_string("last_selected_example", "") + if last_selected_example_name ~= "" then + self.examples_list_view:select_example_by_name_id(last_selected_example_name) + end +end + + +---@param self druid.example +local function setup_examples(self) + local examples = druid_examples.get_examples() + + do -- Disable all examples by default + for index = 1, #examples do + local example = examples[index] + local examples_list = example.examples_list + for example_index = 1, #examples_list do + gui.set_enabled(gui.get_node(examples_list[example_index].root), false) + end + end + end + + for index = 1, #examples do + local example = examples[index] + self.examples_list_view:add_example(example, self) + end + + select_start_example(self) +end + + +---@param self druid.example +function init(self) + setup_druid(self) + + self.druid = druid.new(self) + setup_layout(self) + setup_components(self) + setup_examples(self) +end + + +---@param self druid.example +function final(self) + self.druid:final() +end + + +---@param self druid.example +---@param dt number +function update(self, dt) + self.druid:update(dt) +end + + +---@param self druid.example +---@param message_id hash +---@param message table +---@param sender url +function on_message(self, message_id, message, sender) + self.druid:on_message(message_id, message, sender) +end + + +---@param self druid.example +---@param action_id hash +---@param action action +function on_input(self, action_id, action) + return self.druid:on_input(action_id, action) +end \ No newline at end of file diff --git a/example/examples/basic/back_handler/basic_back_handler.gui b/example/examples/basic/back_handler/basic_back_handler.gui new file mode 100644 index 0000000..06c7705 --- /dev/null +++ b/example/examples/basic/back_handler/basic_back_handler.gui @@ -0,0 +1,50 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + } + type: TYPE_BOX + texture: "druid/ui_circle_64" + id: "root" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } +} +nodes { + size { + x: 700.0 + y: 100.0 + } + color { + x: 0.522 + y: 0.522 + z: 0.522 + } + type: TYPE_TEXT + text: "Press \"back\" to trigger a callback" + font: "text_bold" + id: "text" + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/back_handler/basic_back_handler.lua b/example/examples/basic/back_handler/basic_back_handler.lua new file mode 100644 index 0000000..4b9ee3a --- /dev/null +++ b/example/examples/basic/back_handler/basic_back_handler.lua @@ -0,0 +1,24 @@ +local component = require("druid.component") + +---@class basic_back_handler: druid.base_component +---@field druid druid_instance +local M = component.create("basic_back_handler") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + self.druid:new_back_handler(self.on_back) +end + + +function M:on_back() + local node = self:get_node("text") + gui.animate(node, gui.PROP_SCALE, vmath.vector3(1.2), gui.EASING_OUTELASTIC, 0.5, 0, function() + gui.animate(node, gui.PROP_SCALE, vmath.vector3(1), gui.EASING_OUTELASTIC, 0.5) + end) +end + + +return M diff --git a/example/examples/basic/blocker/basic_blocker.gui b/example/examples/basic/blocker/basic_blocker.gui new file mode 100644 index 0000000..96a1886 --- /dev/null +++ b/example/examples/basic/blocker/basic_blocker.gui @@ -0,0 +1,91 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + } + type: TYPE_BOX + texture: "druid/ui_circle_64" + id: "root" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } +} +nodes { + size { + x: 512.0 + y: 512.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_BOX + texture: "druid/ui_circle_32" + id: "blocker" + parent: "root" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } +} +nodes { + type: TYPE_TEMPLATE + id: "button" + parent: "blocker" + inherit_alpha: true + template: "/example/templates/button_text_green.gui" +} +nodes { + type: TYPE_BOX + id: "button/root" + parent: "button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "button/text" + parent: "button/root" + template_node_child: true +} +nodes { + position { + x: -246.0 + y: 246.0 + } + size { + x: 300.0 + y: 50.0 + } + type: TYPE_TEXT + text: "Blocker" + font: "text_bold" + id: "text" + pivot: PIVOT_NW + parent: "blocker" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/blocker/basic_blocker.lua b/example/examples/basic/blocker/basic_blocker.lua new file mode 100644 index 0000000..1885d91 --- /dev/null +++ b/example/examples/basic/blocker/basic_blocker.lua @@ -0,0 +1,34 @@ +local component = require("druid.component") + +---@class basic_blocker: druid.component +---@field druid druid_instance +---@field root node +---@field blocker druid.blocker +local M = component.create("basic_blocker") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self:get_node("root") + + self.button_root = self.druid:new_button(self.root, self.on_root_click) + -- This blocker forbid input to all previous nodes in node zone + self.blocker = self.druid:new_blocker("blocker") + self.button = self.druid:new_button("button/root", self.on_button_click) +end + + +function M:on_root_click() + print("Root click") +end + + +function M:on_button_click() + print("Button click") +end + + +return M diff --git a/example/examples/basic/button/basic_button.gui b/example/examples/basic/button/basic_button.gui new file mode 100644 index 0000000..d96efe6 --- /dev/null +++ b/example/examples/basic/button/basic_button.gui @@ -0,0 +1,236 @@ +script: "" +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Confirm" + font: "text_bold" + id: "button/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/button/basic_button.lua b/example/examples/basic/button/basic_button.lua new file mode 100644 index 0000000..79172d6 --- /dev/null +++ b/example/examples/basic/button/basic_button.lua @@ -0,0 +1,19 @@ +local component = require("druid.component") + +---@class basic_button: druid.base_component +---@field druid druid_instance +---@field button druid.button +local M = component.create("basic_button") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.button = self.druid:new_button("button/root", function() + print("Button pressed") + end) +end + + +return M diff --git a/example/examples/basic/button/basic_button_double_click.gui b/example/examples/basic/button/basic_button_double_click.gui new file mode 100644 index 0000000..d96efe6 --- /dev/null +++ b/example/examples/basic/button/basic_button_double_click.gui @@ -0,0 +1,236 @@ +script: "" +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Confirm" + font: "text_bold" + id: "button/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/button/basic_button_double_click.lua b/example/examples/basic/button/basic_button_double_click.lua new file mode 100644 index 0000000..1889fe5 --- /dev/null +++ b/example/examples/basic/button/basic_button_double_click.lua @@ -0,0 +1,23 @@ +local component = require("druid.component") + +---@class basic_button_double_click: druid.base_component +---@field druid druid_instance +---@field button druid.button +local M = component.create("basic_button_double_click") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.button = self.druid:new_button("button/root", function() + print("Click") + end) + + self.button.on_double_click:subscribe(function() + print("Double click") + end) +end + + +return M diff --git a/example/examples/basic/button/basic_button_hold.gui b/example/examples/basic/button/basic_button_hold.gui new file mode 100644 index 0000000..0be34c1 --- /dev/null +++ b/example/examples/basic/button/basic_button_hold.gui @@ -0,0 +1,107 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 200.0 + y: 100.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + size { + x: 280.0 + y: 90.0 + } + color { + x: 0.902 + y: 0.875 + z: 0.624 + } + type: TYPE_BOX + texture: "druid/ui_circle_32" + id: "button" + parent: "root" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } +} +nodes { + size { + x: 400.0 + y: 400.0 + } + type: TYPE_PIE + id: "mask" + parent: "button" + inherit_alpha: true + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: false + size_mode: SIZE_MODE_AUTO +} +nodes { + size { + x: 280.0 + y: 90.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + } + type: TYPE_BOX + texture: "druid/ui_circle_32" + id: "button_image" + parent: "mask" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } +} +nodes { + size { + x: 245.0 + y: 50.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_TEXT + text: "Confirm" + font: "text_bold" + id: "text" + outline { + x: 1.0 + y: 1.0 + z: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + } + parent: "button" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/button/basic_button_hold.lua b/example/examples/basic/button/basic_button_hold.lua new file mode 100644 index 0000000..97d1a5b --- /dev/null +++ b/example/examples/basic/button/basic_button_hold.lua @@ -0,0 +1,49 @@ +local component = require("druid.component") +local panthera = require("panthera.panthera") + +local animation = require("example.examples.basic.button.basic_button_hold_panthera") + +---@class basic_button_hold: druid.base_component +---@field druid druid_instance +---@field button druid.button +local M = component.create("basic_button_hold") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.animation = panthera.create_gui(animation, self:get_template(), nodes) + + self.button = self.druid:new_button("button", function() + print("Click") + end) + + self.button:set_style({}) + self.button.style.AUTOHOLD_TRIGGER = 2 + self.button.style.LONGTAP_TIME = 0 + + self.button.on_hold_callback:subscribe(function(_, _, _, time) + local start_time = self.button.style.LONGTAP_TIME + local max_time = self.button.style.AUTOHOLD_TRIGGER + local progress = (time - start_time) / (max_time - start_time) + panthera.set_time(self.animation, "hold", progress) + end) + + self.button.on_long_click:subscribe(function() + panthera.play(self.animation, "complete") + end) + + self.button.hover.on_mouse_hover:subscribe(function(_, state) + if not state then + panthera.set_time(self.animation, "hold", 0) + end + end) + + self.button.on_click_outside:subscribe(function() + panthera.set_time(self.animation, "hold", 0) + end) +end + + +return M diff --git a/example/examples/basic/button/basic_button_hold_panthera.lua b/example/examples/basic/button/basic_button_hold_panthera.lua new file mode 100644 index 0000000..b63a4e2 --- /dev/null +++ b/example/examples/basic/button/basic_button_hold_panthera.lua @@ -0,0 +1,266 @@ +return { + type = "animation_editor", + format = "json", + data = { + nodes = { + }, + animations = { + { + animation_id = "default", + duration = 1, + animation_keys = { + }, + }, + { + animation_id = "hold", + duration = 1, + animation_keys = { + { + end_value = -90, + easing = "outsine", + property_id = "rotation_z", + node_id = "button_image", + key_type = "tween", + }, + { + end_value = 90, + easing = "outsine", + property_id = "rotation_z", + node_id = "mask", + key_type = "tween", + }, + { + end_value = 1.1, + easing = "outsine", + property_id = "scale_x", + duration = 0.15, + key_type = "tween", + node_id = "button", + start_value = 1, + }, + { + end_value = 1.1, + easing = "outsine", + property_id = "scale_y", + duration = 0.15, + key_type = "tween", + node_id = "button", + start_value = 1, + }, + { + end_value = 1.3, + easing = "outsine", + property_id = "scale_x", + duration = 0.15, + key_type = "tween", + node_id = "text", + start_value = 1, + }, + { + end_value = 1.3, + easing = "outsine", + property_id = "scale_y", + duration = 0.15, + key_type = "tween", + node_id = "text", + start_value = 1, + }, + { + start_value = 360, + easing = "outsine", + property_id = "fill_angle", + duration = 1, + node_id = "mask", + key_type = "tween", + }, + { + end_value = 1, + easing = "incirc", + property_id = "scale_x", + duration = 0.85, + start_value = 1.1, + key_type = "tween", + node_id = "button", + start_time = 0.15, + }, + { + end_value = 1, + easing = "incirc", + property_id = "scale_y", + duration = 0.85, + start_value = 1.1, + key_type = "tween", + node_id = "button", + start_time = 0.15, + }, + { + end_value = 1, + easing = "outsine", + property_id = "scale_x", + duration = 0.51, + start_value = 1.3, + key_type = "tween", + node_id = "text", + start_time = 0.49, + }, + { + end_value = 1, + easing = "outsine", + property_id = "scale_y", + duration = 0.51, + start_value = 1.3, + key_type = "tween", + node_id = "text", + start_time = 0.49, + }, + }, + }, + { + animation_id = "complete", + duration = 0.4, + animation_keys = { + { + easing = "linear", + property_id = "inherit_alpha", + data = "false", + key_type = "trigger", + node_id = "text", + start_data = "true", + }, + { + end_value = 0.624, + easing = "outsine", + property_id = "color_b", + key_type = "tween", + node_id = "button_image", + start_value = 0.62, + }, + { + end_value = 0.875, + easing = "outsine", + property_id = "color_g", + key_type = "tween", + node_id = "button_image", + start_value = 0.835, + }, + { + end_value = 0.902, + easing = "outsine", + property_id = "color_r", + key_type = "tween", + node_id = "button_image", + start_value = 0.557, + }, + { + end_value = 1.1, + easing = "outsine", + property_id = "color_a", + duration = 0.17, + key_type = "tween", + node_id = "root", + start_value = 1, + }, + { + end_value = 1.2, + easing = "outsine", + property_id = "scale_x", + duration = 0.17, + key_type = "tween", + node_id = "root", + start_value = 1, + }, + { + end_value = 1.2, + easing = "outsine", + property_id = "scale_y", + duration = 0.17, + key_type = "tween", + node_id = "root", + start_value = 1, + }, + { + end_value = 0.557, + easing = "outsine", + property_id = "color_r", + duration = 0.38, + start_value = 0.902, + key_type = "tween", + node_id = "button_image", + start_time = 0.02, + }, + { + end_value = 0.62, + easing = "outsine", + property_id = "color_b", + duration = 0.38, + start_value = 0.624, + key_type = "tween", + node_id = "button_image", + start_time = 0.02, + }, + { + end_value = 0.835, + easing = "outsine", + property_id = "color_g", + duration = 0.38, + start_value = 0.875, + key_type = "tween", + node_id = "button_image", + start_time = 0.02, + }, + { + end_value = 1, + easing = "outsine", + property_id = "color_a", + duration = 0.22, + start_value = 1.1, + key_type = "tween", + node_id = "root", + start_time = 0.17, + }, + { + end_value = 1, + easing = "outsine", + property_id = "scale_x", + duration = 0.22, + start_value = 1.2, + key_type = "tween", + node_id = "root", + start_time = 0.17, + }, + { + end_value = 1, + easing = "outsine", + property_id = "scale_y", + duration = 0.22, + start_value = 1.2, + key_type = "tween", + node_id = "root", + start_time = 0.17, + }, + { + easing = "linear", + property_id = "inherit_alpha", + start_data = "false", + data = "true", + key_type = "trigger", + node_id = "text", + start_time = 0.39, + }, + }, + }, + }, + metadata = { + layers = { + }, + gui_path = "/example/examples/basic/button/basic_button_hold.gui", + gizmo_steps = { + }, + settings = { + font_size = 40, + }, + fps = 60, + }, + }, + version = 1, +} \ No newline at end of file diff --git a/example/examples/basic/checkbox/basic_checkbox.gui b/example/examples/basic/checkbox/basic_checkbox.gui new file mode 100644 index 0000000..b0f0f4f --- /dev/null +++ b/example/examples/basic/checkbox/basic_checkbox.gui @@ -0,0 +1,77 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 200.0 + y: 100.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + size { + x: 40.0 + y: 40.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + } + type: TYPE_BOX + texture: "druid/rect_round2_width1" + id: "button" + parent: "root" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } +} +nodes { + color { + x: 0.722 + y: 0.741 + z: 0.761 + } + type: TYPE_BOX + texture: "druid/icon_check" + id: "icon" + parent: "button" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: -20.0 + } + size { + x: 40.0 + y: 4.0 + } + color { + x: 0.894 + y: 0.506 + z: 0.333 + } + type: TYPE_BOX + texture: "druid/pixel" + id: "selected" + pivot: PIVOT_S + adjust_mode: ADJUST_MODE_STRETCH + parent: "button" + inherit_alpha: true +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/checkbox/basic_checkbox.lua b/example/examples/basic/checkbox/basic_checkbox.lua new file mode 100644 index 0000000..aaa7bfa --- /dev/null +++ b/example/examples/basic/checkbox/basic_checkbox.lua @@ -0,0 +1,41 @@ +local component = require("druid.component") + +---@class basic_checkbox: druid.base_component +---@field druid druid_instance +---@field button druid.button +local M = component.create("basic_checkbox") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.button = self.druid:new_button("button", self.on_checkbox_click) -- Button to handle checkbox + self.icon = self:get_node("icon") -- Checkbox icon to hide/show + self.selected = self:get_node("selected") -- Selected effect to show when checkbox is changed + gui.set_alpha(self.selected, 0) + + self:set_state(false) +end + + +function M:on_checkbox_click() + self:set_state(not self.is_enabled) +end + + +function M:set_state(is_enabled) + if self.is_enabled == is_enabled then + return + end + + self.is_enabled = is_enabled + gui.set_enabled(self.icon, self.is_enabled) + + gui.set_alpha(self.selected, 1) + gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16) +end + + +return M diff --git a/example/examples/basic/drag/drag.gui b/example/examples/basic/drag/drag.gui new file mode 100644 index 0000000..80572e3 --- /dev/null +++ b/example/examples/basic/drag/drag.gui @@ -0,0 +1,241 @@ +script: "" +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1000.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "drag" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_blue.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "drag/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "drag" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Drag Me" + font: "text_bold" + id: "drag/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "drag/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 8 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/drag/drag.lua b/example/examples/basic/drag/drag.lua new file mode 100644 index 0000000..fa51ad4 --- /dev/null +++ b/example/examples/basic/drag/drag.lua @@ -0,0 +1,29 @@ +local component = require("druid.component") + +---@class drag: druid.base_component +---@field druid druid_instance +local M = component.create("drag") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + -- Init drag and move the drag node on drag callback + self.drag = self.druid:new_drag("drag/root", function(_, dx, dy) + local position_x = gui.get(self.drag.node, "position.x") + local position_y = gui.get(self.drag.node, "position.y") + gui.set(self.drag.node, "position.x", position_x + dx) + gui.set(self.drag.node, "position.y", position_y + dy) + end) + + -- Save start position for animation + self.start_position = gui.get_position(self.drag.node) + self.drag.on_drag_end:subscribe(function() + gui.animate(self.drag.node, "position", self.start_position, gui.EASING_OUTBACK, 0.3) + end) +end + + +return M diff --git a/example/examples/basic/drag/drag_to_node.gui b/example/examples/basic/drag/drag_to_node.gui new file mode 100644 index 0000000..ec8257a --- /dev/null +++ b/example/examples/basic/drag/drag_to_node.gui @@ -0,0 +1,124 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + visible: false +} +nodes { + type: TYPE_TEMPLATE + id: "drag" + parent: "root" + inherit_alpha: true + template: "/example/templates/button_text_blue.gui" +} +nodes { + type: TYPE_BOX + id: "drag/root" + parent: "drag" + template_node_child: true +} +nodes { + type: TYPE_TEXT + text: "Drag Me" + id: "drag/text" + parent: "drag/root" + overridden_fields: 8 + template_node_child: true +} +nodes { + position { + y: 300.0 + } + size { + x: 300.0 + y: 300.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + } + type: TYPE_BOX + texture: "druid/ui_circle_64" + id: "zone" + parent: "root" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } +} +nodes { + position { + y: 100.0 + } + size { + x: 300.0 + y: 100.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_TEXT + text: "Drop Item Here" + font: "text_bold" + id: "text_hint" + outline { + x: 1.0 + y: 1.0 + z: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + } + parent: "zone" + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + scale { + x: 2.0 + y: 2.0 + } + size { + x: 100.0 + y: 100.0 + } + type: TYPE_TEXT + text: "0" + font: "text_bold" + id: "text_counter" + outline { + x: 1.0 + y: 1.0 + z: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + } + parent: "zone" + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/drag/drag_to_node.lua b/example/examples/basic/drag/drag_to_node.lua new file mode 100644 index 0000000..34fec17 --- /dev/null +++ b/example/examples/basic/drag/drag_to_node.lua @@ -0,0 +1,62 @@ +local component = require("druid.component") + +---@class drag_to_node: druid.base_component +---@field druid druid_instance +local M = component.create("drag_to_node") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + self.zone = self:get_node("zone") + self.counter = 0 + self.text_counter = self:get_node("text_counter") + gui.set_text(self.text_counter, self.counter) + + -- Init drag and move the drag node on drag callback + self.drag = self.druid:new_drag("drag/root", self.on_drag_start) + self.drag.on_drag_end:subscribe(self.on_drag_end) + + -- Save start position for animation + self.start_position = gui.get_position(self.drag.node) +end + + +function M:on_drag_start(dx, dy, x, y, touch) + local position_x = gui.get(self.drag.node, "position.x") + local position_y = gui.get(self.drag.node, "position.y") + gui.set(self.drag.node, "position.x", position_x + dx) + gui.set(self.drag.node, "position.y", position_y + dy) + + local is_pick_zone = gui.pick_node(self.zone, touch.x, touch.y) + self:on_hover_pick_zone(is_pick_zone) +end + + +function M:on_drag_end(x, y, touch) + gui.animate(self.drag.node, "position", self.start_position, gui.EASING_OUTBACK, 0.3) + + local is_pick_zone = gui.pick_node(self.zone, touch.x, touch.y) + if is_pick_zone then + self.counter = self.counter + 1 + gui.set_text(self.text_counter, self.counter) + self:on_drop_to_zone() + end + self:on_hover_pick_zone(false) +end + + +function M:on_hover_pick_zone(is_pick_zone) + local target_alpha = is_pick_zone and 1.5 or 1 + gui.animate(self.zone, "color.w", target_alpha, gui.EASING_OUTSINE, 0.3) +end + + +function M:on_drop_to_zone() + gui.set_scale(self.zone, vmath.vector3(1.2)) + gui.animate(self.zone, "scale", vmath.vector3(1), gui.EASING_OUTBACK, 0.3) +end + + +return M diff --git a/example/examples/basic/examples_list.lua b/example/examples/basic/examples_list.lua new file mode 100644 index 0000000..70483e0 --- /dev/null +++ b/example/examples/basic/examples_list.lua @@ -0,0 +1,721 @@ +local const = require("druid.const") +local helper = require("druid.helper") +local M = {} + +function M.get_examples() + ---@type druid.example.data[] + return { + { + name_id = "ui_example_basic_button", + information_text_id = "ui_example_basic_button_description", + template = "basic_button", + root = "basic_button/root", + code_url = "example/examples/basic/button/basic_button.lua", + component_class = require("example.examples.basic.button.basic_button"), + properties_control = function(instance, properties_panel) + ---@cast instance basic_button + + local checkbox = properties_panel:add_checkbox("ui_enabled", false, function(value) + instance.button:set_enabled(value) + end) + checkbox:set_value(true) + end, + on_create = function(instance, output_log) + ---@cast instance basic_button + instance.button.on_click:subscribe(function() + output_log:add_log_text("Button Clicked") + end) + end, + }, + { + name_id = "ui_example_basic_button_double_click", + information_text_id = "ui_example_basic_button_double_click_description", + template = "basic_button_double_click", + root = "basic_button_double_click/root", + code_url = "example/examples/basic/button/basic_button_double_click.lua", + component_class = require("example.examples.basic.button.basic_button_double_click"), + on_create = function(instance, output_log) + ---@cast instance basic_button_double_click + instance.button.on_click:subscribe(function() + output_log:add_log_text("Clicked") + end) + instance.button.on_double_click:subscribe(function() + output_log:add_log_text("Double Clicked") + end) + end, + }, + { + name_id = "ui_example_basic_button_hold", + information_text_id = "ui_example_basic_button_hold_description", + template = "basic_button_hold", + root = "basic_button_hold/root", + code_url = "example/examples/basic/button/basic_button_hold.lua", + component_class = require("example.examples.basic.button.basic_button_hold"), + on_create = function(instance, output_log) + ---@cast instance basic_button_hold + instance.button.on_click:subscribe(function() + output_log:add_log_text("Clicked") + end) + instance.button.on_long_click:subscribe(function() + output_log:add_log_text("On long click") + end) + end, + }, + { + name_id = "ui_example_basic_text", + information_text_id = "ui_example_basic_text_description", + template = "basic_text", + root = "basic_text/root", + code_url = "example/examples/basic/text/basic_text.lua", + component_class = require("example.examples.basic.text.basic_text"), + properties_control = function(instance, properties_panel) + ---@cast instance basic_text + + local adjust_index = 1 + local adjust_types = { + const.TEXT_ADJUST.DOWNSCALE, + const.TEXT_ADJUST.DOWNSCALE_LIMITED, + --const.TEXT_ADJUST.SCALE_THEN_SCROLL, -- works bad with container for some reason + --const.TEXT_ADJUST.SCROLL, -- works bad with container for some reason + const.TEXT_ADJUST.TRIM, + } + properties_panel:add_button("ui_adjust_next", function() + adjust_index = adjust_index + 1 + if adjust_index > #adjust_types then + adjust_index = 1 + end + instance.text:set_text_adjust(adjust_types[adjust_index], 0.5) + end) + + local pivot_index = 1 + local pivot_list = { + gui.PIVOT_CENTER, + gui.PIVOT_W, + gui.PIVOT_SW, + gui.PIVOT_S, + gui.PIVOT_SE, + gui.PIVOT_E, + gui.PIVOT_NE, + gui.PIVOT_N, + gui.PIVOT_NW, + } + + ---@cast instance rich_text_tags + properties_panel:add_button("ui_pivot_next", function() + pivot_index = pivot_index + 1 + if pivot_index > #pivot_list then + pivot_index = 1 + end + instance:set_pivot(pivot_list[pivot_index]) + end) + end, + get_debug_info = function(instance) + ---@cast instance multiline_text + local info = "" + + info = info .. "Text Adjust: " .. instance.text.adjust_type .. "\n" + info = info .. "Pivot: " .. gui.get_pivot(instance.text.node) .. "\n" + + return info + end + }, + { + name_id = "ui_example_basic_multiline_text", + information_text_id = "ui_example_basic_multiline_text_description", + template = "multiline_text", + root = "multiline_text/root", + code_url = "example/examples/basic/text/multiline_text.lua", + component_class = require("example.examples.basic.text.multiline_text"), + properties_control = function(instance, properties_panel) + ---@cast instance multiline_text + + local adjust_index = 1 + local adjust_types = { + const.TEXT_ADJUST.DOWNSCALE, + const.TEXT_ADJUST.DOWNSCALE_LIMITED, + --const.TEXT_ADJUST.SCALE_THEN_SCROLL, -- works bad with container for some reason + --const.TEXT_ADJUST.SCROLL, -- works bad with container for some reason + const.TEXT_ADJUST.TRIM, + } + properties_panel:add_button("ui_adjust_next", function() + adjust_index = adjust_index + 1 + if adjust_index > #adjust_types then + adjust_index = 1 + end + instance.text:set_text_adjust(adjust_types[adjust_index], 0.8) + end) + end, + get_debug_info = function(instance) + ---@cast instance multiline_text + local info = "" + + info = info .. "Text Adjust: " .. instance.text.adjust_type .. "\n" + info = info .. "Pivot: " .. gui.get_pivot(instance.text.node) .. "\n" + + return info + end + }, + { + name_id = "ui_example_basic_hover", + information_text_id = "ui_example_basic_hover_description", + template = "hover", + root = "hover/root", + code_url = "example/examples/basic/hover/hover.lua", + component_class = require("example.examples.basic.hover.hover"), + }, + { + name_id = "ui_example_basic_drag", + information_text_id = "ui_example_basic_drag_description", + template = "drag", + root = "drag/root", + code_url = "example/examples/basic/drag/drag.lua", + component_class = require("example.examples.basic.drag.drag"), + }, + { + name_id = "ui_example_basic_drag_to_node", + information_text_id = "ui_example_basic_drag_to_node_description", + template = "drag_to_node", + root = "drag_to_node/root", + code_url = "example/examples/basic/drag/drag_to_node.lua", + component_class = require("example.examples.basic.drag.drag_to_node"), + }, + { + name_id = "ui_example_basic_slider", + information_text_id = "ui_example_basic_slider_description", + template = "basic_slider", + root = "basic_slider/root", + code_url = "example/examples/basic/slider/basic_slider.lua", + component_class = require("example.examples.basic.slider.basic_slider"), + on_create = function(instance, output_log) + ---@cast instance basic_slider + instance.slider.on_change_value:subscribe(function(_, value) + local value = helper.round(value, 2) + output_log:add_log_text("Slider Value: " .. value) + end) + end, + }, + { + name_id = "ui_example_basic_slider_vertical", + information_text_id = "ui_example_basic_slider_vertical_description", + template = "basic_slider_vertical", + root = "basic_slider_vertical/root", + code_url = "example/examples/basic/slider/basic_slider_vertical.lua", + component_class = require("example.examples.basic.slider.basic_slider_vertical"), + on_create = function(instance, output_log) + ---@cast instance basic_slider_vertical + instance.slider.on_change_value:subscribe(function(_, value) + local value = helper.round(value, 2) + output_log:add_log_text("Slider Value: " .. value) + end) + end, + }, + { + name_id = "ui_example_basic_slider_stepped", + information_text_id = "ui_example_basic_slider_stepped_description", + template = "basic_slider_stepped", + root = "basic_slider_stepped/root", + code_url = "example/examples/basic/slider/basic_slider_stepped.lua", + component_class = require("example.examples.basic.slider.basic_slider_stepped"), + on_create = function(instance, output_log) + ---@cast instance basic_slider + instance.slider.on_change_value:subscribe(function(_, value) + local value = helper.round(value, 2) + output_log:add_log_text("Slider Value: " .. value) + end) + end, + }, + { + name_id = "ui_example_basic_progress_bar", + information_text_id = "ui_example_basic_progress_bar_description", + template = "basic_progress_bar", + root = "basic_progress_bar/root", + code_url = "example/examples/basic/progress_bar/basic_progress_bar.lua", + component_class = require("example.examples.basic.progress_bar.basic_progress_bar"), + properties_control = function(instance, properties_panel) + ---@cast instance basic_progress_bar + properties_panel:add_slider("ui_value", 1, function(value) + instance:set_value(value) + end) + end, + }, + { + name_id = "ui_example_basic_progress_bar_slice9", + information_text_id = "ui_example_basic_progress_bar_slice9_description", + template = "basic_progress_bar_slice9", + root = "basic_progress_bar_slice9/root", + code_url = "example/examples/basic/progress_bar/basic_progress_bar_slice9.lua", + component_class = require("example.examples.basic.progress_bar.basic_progress_bar_slice9"), + properties_control = function(instance, properties_panel) + ---@cast instance basic_progress_bar_slice9 + properties_panel:add_slider("ui_value", 1, function(value) + instance:set_value(value) + end) + end, + }, + { + name_id = "ui_example_basic_blocker", + information_text_id = "ui_example_basic_blocker_description", + template = "basic_blocker", + root = "basic_blocker/root", + code_url = "example/examples/basic/blocker/basic_blocker.lua", + component_class = require("example.examples.basic.blocker.basic_blocker"), + on_create = function(instance, output_log) + ---@cast instance basic_blocker + instance.button_root.on_click:subscribe(function() + output_log:add_log_text("Root Clicked") + end) + instance.button.on_click:subscribe(function() + output_log:add_log_text("Button Clicked") + end) + end, + }, + { + name_id = "ui_example_basic_back_handler", + information_text_id = "ui_example_basic_back_handler_description", + template = "basic_back_handler", + root = "basic_back_handler/root", + code_url = "example/examples/basic/back_handler/basic_back_handler.lua", + component_class = require("example.examples.basic.back_handler.basic_back_handler"), + }, + { + name_id = "ui_example_basic_timer", + information_text_id = "ui_example_basic_timer_description", + template = "basic_timer", + root = "basic_timer/root", + code_url = "example/examples/basic/timer/basic_timer.lua", + component_class = require("example.examples.basic.timer.basic_timer"), + on_create = function(instance, output_log) + ---@cast instance basic_timer + instance.on_cycle_end:subscribe(function() + output_log:add_log_text("Timer Cycle End") + end) + end, + }, + { + name_id = "ui_example_basic_hotkey", + information_text_id = "ui_example_basic_hotkey_description", + template = "basic_hotkey", + root = "basic_hotkey/root", + code_url = "example/examples/basic/hotkey/basic_hotkey.lua", + component_class = require("example.examples.basic.hotkey.basic_hotkey"), + on_create = function(instance, output_log) + ---@cast instance basic_hotkey + instance.hotkey.on_hotkey_released:subscribe(function() + output_log:add_log_text("Hotkey Released") + end) + end, + }, + { + name_id = "ui_example_basic_scroll", + information_text_id = "ui_example_basic_scroll_description", + template = "scroll", + root = "scroll/root", + code_url = "example/examples/basic/scroll/scroll.lua", + component_class = require("example.examples.basic.scroll.scroll"), + on_create = function(instance, output_log) + ---@cast instance scroll + instance.button_tutorial.on_click:subscribe(function() + output_log:add_log_text("Button Tutorial Clicked") + end) + instance.button_stencil.on_click:subscribe(function() + output_log:add_log_text("Button Stencil Clicked") + end) + end, + properties_control = function(instance, properties_panel) + ---@cast instance scroll + local is_stretch = instance.scroll.style.EXTRA_STRETCH_SIZE > 0 + properties_panel:add_checkbox("ui_elastic_scroll", is_stretch, function(value) + instance.scroll:set_extra_stretch_size(value and 100 or 0) + end) + + local view_node = instance.scroll.view_node + local is_stencil = gui.get_clipping_mode(view_node) == gui.CLIPPING_MODE_STENCIL + properties_panel:add_checkbox("ui_clipping", is_stencil, function(value) + gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE) + end) + end, + get_debug_info = function(instance) + ---@cast instance scroll + local info = "" + + local s = instance.scroll + info = info .. "View Size Y: " .. gui.get(s.view_node, "size.y") .. "\n" + info = info .. "Content Size Y: " .. gui.get(s.content_node, "size.y") .. "\n" + info = info .. "Content position Y: " .. math.ceil(s.position.y) .. "\n" + info = info .. "Content Range Y: " .. s.available_pos.y .. " - " .. s.available_pos.w .. "\n" + + return info + end + }, + { + name_id = "ui_example_basic_scroll_slider", + information_text_id = "ui_example_basic_scroll_slider_description", + template = "scroll_slider", + root = "scroll_slider/root", + code_url = "example/examples/basic/scroll_slider/scroll_slider.lua", + component_class = require("example.examples.basic.scroll_slider.scroll_slider"), + get_debug_info = function(instance) + ---@cast instance scroll_slider + local info = "" + + local s = instance.scroll + info = info .. "View Size Y: " .. gui.get(s.view_node, "size.y") .. "\n" + info = info .. "Content Size Y: " .. gui.get(s.content_node, "size.y") .. "\n" + info = info .. "Content position Y: " .. math.ceil(s.position.y) .. "\n" + info = info .. "Content Range Y: " .. s.available_pos.y .. " - " .. s.available_pos.w .. "\n" + + return info + end + }, + { + name_id = "ui_example_basic_grid", + information_text_id = "ui_example_basic_grid_description", + template = "grid", + root = "grid/root", + code_url = "example/examples/basic/grid/grid.lua", + component_class = require("example.examples.basic.grid.grid"), + properties_control = function(instance, properties_panel) + ---@cast instance grid + + local slider = properties_panel:add_slider("ui_grid_in_row", 0.3, function(value) + local in_row_amount = math.ceil(value * 10) + in_row_amount = math.max(1, in_row_amount) + instance.grid:set_in_row(in_row_amount) + end) + slider:set_text_function(function(value) + return tostring(math.ceil(value * 10)) + end) + + properties_panel:add_button("ui_add_element", function() + if #instance.created_nodes >= 36 then + return + end + instance:add_element() + end) + + properties_panel:add_button("ui_remove_element", function() + instance:remove_element() + end) + + properties_panel:add_button("ui_clear_elements", function() + instance:clear() + end) + end, + }, + { + name_id = "ui_example_basic_scroll_bind_grid", + information_text_id = "ui_example_basic_scroll_bind_grid_description", + template = "scroll_bind_grid", + root = "scroll_bind_grid/root", + code_url = "example/examples/basic/scroll_bind_grid/scroll_bind_grid.lua", + component_class = require("example.examples.basic.scroll_bind_grid.scroll_bind_grid"), + properties_control = function(instance, properties_panel) + ---@cast instance scroll_bind_grid + + local view_node = instance.scroll.view_node + local is_stencil = gui.get_clipping_mode(view_node) == gui.CLIPPING_MODE_STENCIL + properties_panel:add_checkbox("ui_clipping", is_stencil, function(value) + gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE) + end) + + properties_panel:add_button("ui_add_element", function() + if #instance.created_nodes >= 100 then + return + end + instance:add_element() + end) + + properties_panel:add_button("ui_remove_element", function() + instance:remove_element() + end) + + properties_panel:add_button("ui_clear_elements", function() + instance:clear() + end) + end, + get_debug_info = function(instance) + ---@cast instance scroll_bind_grid + local info = "" + + local s = instance.scroll + local view_node_size = gui.get(s.view_node, "size.y") + local scroll_position = -s.position + local scroll_bottom_position = vmath.vector3(scroll_position.x, scroll_position.y - view_node_size, scroll_position.z) + + info = info .. "View Size Y: " .. gui.get(s.view_node, "size.y") .. "\n" + info = info .. "Content Size Y: " .. gui.get(s.content_node, "size.y") .. "\n" + info = info .. "Content position Y: " .. math.ceil(s.position.y) .. "\n" + info = info .. "Content Range Y: " .. s.available_pos.y .. " - " .. s.available_pos.w .. "\n" + info = info .. "Grid Items: " .. #instance.grid.nodes .. "\n" + info = info .. "Grid Item Size: " .. instance.grid.node_size.x .. " x " .. instance.grid.node_size.y .. "\n" + info = info .. "Top Scroll Pos Grid Index: " .. instance.grid:get_index(scroll_position) .. "\n" + info = info .. "Bottm Scroll Pos Grid Index: " .. instance.grid:get_index(scroll_bottom_position) .. "\n" + + + return info + end + }, + { + name_id = "ui_example_basic_scroll_bind_grid_horizontal", + information_text_id = "ui_example_basic_scroll_bind_grid_horizontal_description", + template = "scroll_bind_grid_horizontal", + root = "scroll_bind_grid_horizontal/root", + code_url = "example/examples/basic/scroll_bind_grid/scroll_bind_grid_horizontal.lua", + component_class = require("example.examples.basic.scroll_bind_grid.scroll_bind_grid_horizontal"), + properties_control = function(instance, properties_panel) + ---@cast instance scroll_bind_grid_horizontal + + local view_node = instance.scroll.view_node + local is_stencil = gui.get_clipping_mode(view_node) == gui.CLIPPING_MODE_STENCIL + + properties_panel:add_checkbox("ui_clipping", is_stencil, function(value) + gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE) + end) + + + properties_panel:add_button("ui_add_element", function() + if #instance.created_nodes >= 100 then + return + end + instance:add_element() + end) + + properties_panel:add_button("ui_remove_element", function() + instance:remove_element() + end) + + properties_panel:add_button("ui_clear_elements", function() + instance:clear() + end) + end, + get_debug_info = function(instance) + ---@cast instance scroll_bind_grid_horizontal + local info = "" + + local s = instance.scroll + local view_node_size = gui.get(s.view_node, "size.x") + local scroll_position = -s.position + local scroll_bottom_position = vmath.vector3(scroll_position.x + view_node_size, scroll_position.y, scroll_position.z) + + info = info .. "View Size X: " .. gui.get(s.view_node, "size.x") .. "\n" + info = info .. "Content Size X: " .. gui.get(s.content_node, "size.x") .. "\n" + info = info .. "Content position X: " .. math.ceil(s.position.x) .. "\n" + info = info .. "Content Range X: " .. s.available_pos.x .. " - " .. s.available_pos.z .. "\n" + info = info .. "Grid Items: " .. #instance.grid.nodes .. "\n" + info = info .. "Grid Item Size: " .. instance.grid.node_size.x .. " x " .. instance.grid.node_size.y .. "\n" + info = info .. "Left Scroll Pos Grid Index: " .. instance.grid:get_index(scroll_position) .. "\n" + info = info .. "Right Scroll Pos Grid Index: " .. instance.grid:get_index(scroll_bottom_position) .. "\n" + + return info + end + }, + { + name_id = "ui_example_basic_scroll_bind_grid_points", + information_text_id = "ui_example_basic_scroll_bind_grid_points_description", + template = "scroll_bind_grid_points", + root = "scroll_bind_grid_points/root", + code_url = "example/examples/basic/scroll_bind_grid/scroll_bind_grid_points.lua", + component_class = require("example.examples.basic.scroll_bind_grid.scroll_bind_grid_points"), + properties_control = function(instance, properties_panel) + ---@cast instance scroll_bind_grid_points + + local view_node = instance.scroll.view_node + local is_stencil = gui.get_clipping_mode(view_node) == gui.CLIPPING_MODE_STENCIL + properties_panel:add_checkbox("ui_clipping", is_stencil, function(value) + gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE) + end) + + properties_panel:add_button("ui_add_element", function() + if #instance.created_nodes >= 100 then + return + end + instance:add_element() + end) + + properties_panel:add_button("ui_remove_element", function() + instance:remove_element() + end) + + properties_panel:add_button("ui_clear_elements", function() + instance:clear() + end) + end, + get_debug_info = function(instance) + ---@cast instance scroll_bind_grid_points + local info = "" + + local s = instance.scroll + local view_node_size = gui.get(s.view_node, "size.y") + local scroll_position = -s.position + local scroll_bottom_position = vmath.vector3(scroll_position.x, scroll_position.y - view_node_size, scroll_position.z) + + info = info .. "View Size Y: " .. gui.get(s.view_node, "size.y") .. "\n" + info = info .. "Content Size Y: " .. gui.get(s.content_node, "size.y") .. "\n" + info = info .. "Content position Y: " .. math.ceil(s.position.y) .. "\n" + info = info .. "Content Range Y: " .. s.available_pos.y .. " - " .. s.available_pos.w .. "\n" + info = info .. "Grid Items: " .. #instance.grid.nodes .. "\n" + info = info .. "Grid Item Size: " .. instance.grid.node_size.x .. " x " .. instance.grid.node_size.y .. "\n" + info = info .. "Top Scroll Pos Grid Index: " .. instance.grid:get_index(scroll_position) .. "\n" + info = info .. "Bottm Scroll Pos Grid Index: " .. instance.grid:get_index(scroll_bottom_position) .. "\n" + + + return info + end + }, + { + name_id = "ui_example_basic_input", + information_text_id = "ui_example_basic_input_description", + template = "basic_input", + root = "basic_input/root", + code_url = "example/examples/basic/input/basic_input.lua", + component_class = require("example.examples.basic.input.basic_input"), + on_create = function(instance, output_log) + ---@cast instance basic_input + instance.input.on_input_unselect:subscribe(function(_, text) + output_log:add_log_text("Input: " .. text) + end) + instance.input_2.on_input_unselect:subscribe(function(_, text) + output_log:add_log_text("Input 2: " .. text) + end) + end, + }, + { + name_id = "ui_example_input_password", + information_text_id = "ui_example_input_password_description", + template = "input_password", + root = "input_password/root", + code_url = "example/examples/basic/input/input_password.lua", + component_class = require("example.examples.basic.input.input_password"), + on_create = function(instance, output_log) + ---@cast instance input_password + instance.input.on_input_unselect:subscribe(function(_, text) + output_log:add_log_text("Input: " .. text) + end) + end, + }, + { + name_id = "ui_example_basic_rich_input", + information_text_id = "ui_example_basic_rich_input_description", + template = "basic_rich_input", + root = "basic_rich_input/root", + code_url = "example/examples/basic/input/rich_input.lua", + component_class = require("example.examples.basic.input.rich_input"), + on_create = function(instance, output_log) + ---@cast instance rich_input + instance.rich_input.input.on_input_unselect:subscribe(function(_, text) + output_log:add_log_text("Input: " .. text) + end) + instance.rich_input_2.input.on_input_unselect:subscribe(function(_, text) + output_log:add_log_text("Input 2: " .. text) + end) + end, + }, + { + name_id = "ui_example_basic_rich_text", + information_text_id = "ui_example_basic_rich_text_description", + template = "basic_rich_text", + root = "basic_rich_text/root", + code_url = "example/examples/basic/rich_text/basic_rich_text.lua", + component_class = require("example.examples.basic.rich_text.basic_rich_text"), + }, + { + name_id = "ui_example_rich_text_tags", + information_text_id = "ui_example_rich_text_tags_description", + template = "rich_text_tags", + root = "rich_text_tags/root", + code_url = "example/examples/basic/rich_text/rich_text_tags.lua", + component_class = require("example.examples.basic.rich_text.rich_text_tags"), + properties_control = function(instance, properties_panel) + local pivot_index = 1 + local pivot_list = { + gui.PIVOT_CENTER, + gui.PIVOT_W, + gui.PIVOT_SW, + gui.PIVOT_S, + gui.PIVOT_SE, + gui.PIVOT_E, + gui.PIVOT_NE, + gui.PIVOT_N, + gui.PIVOT_NW, + } + + ---@cast instance rich_text_tags + properties_panel:add_button("ui_pivot_next", function() + pivot_index = pivot_index + 1 + if pivot_index > #pivot_list then + pivot_index = 1 + end + instance:set_pivot(pivot_list[pivot_index]) + end) + end + }, + --{ + -- name_id = "ui_example_rich_text_tags_custom", + -- information_text_id = "ui_example_rich_text_tags_custom_description", + -- template = "rich_text_tags_custom", + -- root = "rich_text_tags_custom/root", + -- code_url = "example/examples/basic/rich_text/rich_text_tags_custom.lua", + -- component_class = require("example.examples.basic.rich_text.rich_text_tags_custom"), + -- properties_control = function(instance, properties_panel) + -- local pivot_index = 1 + -- local pivot_list = { + -- gui.PIVOT_CENTER, + -- gui.PIVOT_W, + -- gui.PIVOT_SW, + -- gui.PIVOT_S, + -- gui.PIVOT_SE, + -- gui.PIVOT_E, + -- gui.PIVOT_NE, + -- gui.PIVOT_N, + -- gui.PIVOT_NW, + -- } + + -- ---@cast instance rich_text_tags_custom + -- properties_panel:add_button("ui_pivot_next", function() + -- pivot_index = pivot_index + 1 + -- if pivot_index > #pivot_list then + -- pivot_index = 1 + -- end + -- instance:set_pivot(pivot_list[pivot_index]) + -- end) + -- end, + + -- on_create = function(instance, output_log) + -- ---@cast instance rich_text_tags_custom + -- instance.on_link_click:subscribe(function(text) + -- output_log:add_log_text("Custom Link: " .. text) + -- end) + -- end + --}, + { + name_id = "ui_example_basic_swipe", + information_text_id = "ui_example_basic_swipe_description", + template = "basic_swipe", + root = "basic_swipe/root", + code_url = "example/examples/basic/swipe/basic_swipe.lua", + component_class = require("example.examples.basic.swipe.basic_swipe"), + on_create = function(instance, output_log) + ---@cast instance basic_swipe + instance.swipe.on_swipe:subscribe(function(_, side, dist, delta_time) + output_log:add_log_text("Swipe Side: " .. side) + end) + end, + }, + { + name_id = "ui_example_basic_checkbox", + information_text_id = "ui_example_basic_checkbox_description", + template = "basic_checkbox", + root = "basic_checkbox/root", + code_url = "example/examples/basic/checkbox/basic_checkbox.lua", + component_class = require("example.examples.basic.checkbox.basic_checkbox"), + on_create = function(instance, output_log) + ---@cast instance basic_checkbox + instance.button.on_click:subscribe(function() + output_log:add_log_text("Checkbox Clicked: " .. tostring(instance.is_enabled)) + end) + end, + }, + } +end + +return M \ No newline at end of file diff --git a/example/examples/basic/grid/grid.gui b/example/examples/basic/grid/grid.gui new file mode 100644 index 0000000..c649b07 --- /dev/null +++ b/example/examples/basic/grid/grid.gui @@ -0,0 +1,320 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1000.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 300.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 600.0 + y: 600.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "grid" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 100.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "prefab" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "grid" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 90.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "panel" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "prefab" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.5 + y: 1.5 + z: 1.0 + w: 1.0 + } + size { + x: 50.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "1" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "prefab" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/grid/grid.lua b/example/examples/basic/grid/grid.lua new file mode 100644 index 0000000..b9928b5 --- /dev/null +++ b/example/examples/basic/grid/grid.lua @@ -0,0 +1,66 @@ +local component = require("druid.component") + +---@class grid: druid.base_component +---@field grid druid.static_grid +---@field text druid.text +---@field druid druid_instance +local M = component.create("grid") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.created_nodes = {} + + self.prefab = self:get_node("prefab") + gui.set_enabled(self.prefab, false) + + self.grid = self.druid:new_static_grid("grid", "prefab", 3) + + for index = 1, 9 do + self:add_element() + end +end + + +function M:on_remove() + self:clear() +end + + +function M:add_element() + local prefab_nodes = gui.clone_tree(self.prefab) + local root = prefab_nodes[self:get_template() .. "/prefab"] + local text = prefab_nodes[self:get_template() .. "/text"] + table.insert(self.created_nodes, root) + gui.set_text(text, #self.created_nodes) + gui.set_enabled(root, true) + + self.grid:add(root) +end + + +function M:remove_element() + local last_node = table.remove(self.created_nodes) + if last_node == nil then + return + end + + gui.delete_node(last_node) + local grid_index = self.grid:get_index_by_node(last_node) + self.grid:remove(grid_index) +end + + +function M:clear() + for _, node in ipairs(self.created_nodes) do + gui.delete_node(node) + end + self.created_nodes = {} + self.grid:clear() +end + + +return M diff --git a/example/examples/basic/hotkey/basic_hotkey.gui b/example/examples/basic/hotkey/basic_hotkey.gui new file mode 100644 index 0000000..7fd411c --- /dev/null +++ b/example/examples/basic/hotkey/basic_hotkey.gui @@ -0,0 +1,36 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +nodes { + size { + x: 200.0 + y: 100.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + size { + x: 700.0 + y: 100.0 + } + color { + x: 0.522 + y: 0.522 + z: 0.522 + } + type: TYPE_TEXT + text: "Press \"SHIFT\" + \"X\" to trigger hotkey" + font: "text_bold" + id: "text" + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/hotkey/basic_hotkey.lua b/example/examples/basic/hotkey/basic_hotkey.lua new file mode 100644 index 0000000..d003699 --- /dev/null +++ b/example/examples/basic/hotkey/basic_hotkey.lua @@ -0,0 +1,29 @@ +local hotkey = require("druid.extended.hotkey") + +local component = require("druid.component") + +---@class basic_hotkey: druid.base_component +---@field druid druid_instance +---@field root node +---@field text druid.text +local M = component.create("basic_hotkey") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self:get_node("root") + self.hotkey = self.druid:new(hotkey, { "key_lshift", "key_x" }, self.on_hotkey) +end + + +function M:on_hotkey() + gui.animate(self.root, gui.PROP_SCALE, vmath.vector3(1.2), gui.EASING_OUTELASTIC, 0.5, 0, function() + gui.animate(self.root, gui.PROP_SCALE, vmath.vector3(1), gui.EASING_OUTELASTIC, 0.5) + end) +end + + +return M diff --git a/example/examples/basic/hover/hover.gui b/example/examples/basic/hover/hover.gui new file mode 100644 index 0000000..45adecd --- /dev/null +++ b/example/examples/basic/hover/hover.gui @@ -0,0 +1,410 @@ +script: "" +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1000.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_mouse_hover" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button_mouse_hover/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_mouse_hover" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Mouse Hover" + font: "text_bold" + id: "button_mouse_hover/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_mouse_hover/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 8 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -100.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_mobile_hover" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button_mobile_hover/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_mobile_hover" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Mobile Hover" + font: "text_bold" + id: "button_mobile_hover/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_mobile_hover/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 8 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/hover/hover.lua b/example/examples/basic/hover/hover.lua new file mode 100644 index 0000000..3044b85 --- /dev/null +++ b/example/examples/basic/hover/hover.lua @@ -0,0 +1,34 @@ +local component = require("druid.component") + +---@class hover: druid.base_component +---@field druid druid_instance +---@field hover druid.hover +---@field hover_pressed druid.hover +local M = component.create("hover") + +---Color: #E6DF9F +local HOVERED_COLOR = vmath.vector4(230/255, 223/255, 159/255, 1.0) + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + -- Default hover callback is `on_hover`, designed for mobile devices + -- It's only hover if touch action is above the node + self.hover_default = self.druid:new_hover("button_mobile_hover/root", self.on_hover) + + -- If you wan't to use mouse hover, you can use `on_mouse_hover` callback + -- It's checks the `action_id` == nil (mouse events) + self.hover = self.druid:new_hover("button_mouse_hover/root", nil, self.on_hover) + + self.default_color = gui.get_color(self.hover.node) +end + + +function M:on_hover(is_hover, hover_instance) + gui.animate(hover_instance.node, "color", is_hover and HOVERED_COLOR or self.default_color, gui.EASING_LINEAR, 0.2) +end + + +return M diff --git a/example/examples/basic/input/basic_input.gui b/example/examples/basic/input/basic_input.gui new file mode 100644 index 0000000..c4405a8 --- /dev/null +++ b/example/examples/basic/input/basic_input.gui @@ -0,0 +1,406 @@ +script: "" +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1000.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "input" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/input.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 80.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "input/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "input" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -240.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 480.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap me to input" + font: "text_bold" + id: "input/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "input/root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -150.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "input_2" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/input.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 80.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "input_2/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "input_2" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 480.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap me to input" + font: "text_bold" + id: "input_2/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "input_2/root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 1 + overridden_fields: 14 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/input/basic_input.lua b/example/examples/basic/input/basic_input.lua new file mode 100644 index 0000000..3648191 --- /dev/null +++ b/example/examples/basic/input/basic_input.lua @@ -0,0 +1,26 @@ +local component = require("druid.component") +local input = require("druid.extended.input") + +---@class basic_input: druid.base_component +---@field druid druid_instance +---@field input druid.input +local M = component.create("basic_input") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.input = self.druid:new(input, "input/root", "input/text") + + self.input_2 = self.druid:new(input, "input_2/root", "input_2/text") --[[@as druid.input]] + + -- you can set custom style for input and their components + -- Check in the example, how long tap on bottom input will erase text + self.input_2.style.IS_LONGTAP_ERASE = true + self.input_2.button.style.AUTOHOLD_TRIGGER = 1.5 +end + + +return M diff --git a/example/examples/basic/input/input_password.gui b/example/examples/basic/input/input_password.gui new file mode 100644 index 0000000..c93752a --- /dev/null +++ b/example/examples/basic/input/input_password.gui @@ -0,0 +1,33 @@ +nodes { + size { + x: 1000.0 + y: 1000.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + visible: false +} +nodes { + type: TYPE_TEMPLATE + id: "input" + parent: "root" + inherit_alpha: true + template: "/example/templates/input.gui" +} +nodes { + type: TYPE_BOX + id: "input/root" + parent: "input" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "input/text" + parent: "input/root" + overridden_fields: 1 + overridden_fields: 14 + template_node_child: true +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/input/input_password.lua b/example/examples/basic/input/input_password.lua new file mode 100644 index 0000000..d56760a --- /dev/null +++ b/example/examples/basic/input/input_password.lua @@ -0,0 +1,25 @@ +local component = require("druid.component") +local input = require("druid.extended.input") + +---@class input_password: druid.component +---@field druid druid_instance +---@field root node +local M = component.create("input_password") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self:get_node("root") + self.input = self.druid:new(input, "input/root", "input/text", gui.KEYBOARD_TYPE_PASSWORD) + self.input:set_text("") + + self.input.on_input_unselect:subscribe(function(_, text) + print(text) + end) +end + + +return M diff --git a/example/examples/basic/input/rich_input.gui b/example/examples/basic/input/rich_input.gui new file mode 100644 index 0000000..108dc41 --- /dev/null +++ b/example/examples/basic/input/rich_input.gui @@ -0,0 +1,918 @@ +script: "" +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1000.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "rich_input" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/rich_input.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 80.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "rich_input/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "rich_input" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 80.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "rich_input/button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "rich_input/root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -240.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 480.0 + y: 60.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Placeholder" + font: "text_bold" + id: "rich_input/placeholder_text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 0.4 + y: 0.4 + z: 0.4 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "rich_input/button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 1 + overridden_fields: 14 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -240.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 480.0 + y: 60.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "User input" + font: "text_bold" + id: "rich_input/input_text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "rich_input/button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 1 + overridden_fields: 14 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_16" + id: "rich_input/cursor_node" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "rich_input/button" + layer: "" + inherit_alpha: true + slice9 { + x: 8.0 + y: 8.0 + z: 8.0 + w: 8.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 0.5 + overridden_fields: 1 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.2 + y: 1.2 + z: 1.0 + w: 1.0 + } + size { + x: 20.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "|" + font: "text_bold" + id: "rich_input/cursor_text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "rich_input/cursor_node" + layer: "" + inherit_alpha: false + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -150.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "rich_input_2" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/rich_input.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 80.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "rich_input_2/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "rich_input_2" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 80.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "rich_input_2/button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "rich_input_2/root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 480.0 + y: 60.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Placeholder" + font: "text_bold" + id: "rich_input_2/placeholder_text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 0.4 + y: 0.4 + z: 0.4 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "rich_input_2/button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 480.0 + y: 60.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "User input" + font: "text_bold" + id: "rich_input_2/input_text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "rich_input_2/button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_16" + id: "rich_input_2/cursor_node" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "rich_input_2/button" + layer: "" + inherit_alpha: true + slice9 { + x: 8.0 + y: 8.0 + z: 8.0 + w: 8.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 0.5 + overridden_fields: 1 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.2 + y: 1.2 + z: 1.0 + w: 1.0 + } + size { + x: 20.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "|" + font: "text_bold" + id: "rich_input_2/cursor_text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "rich_input_2/cursor_node" + layer: "" + inherit_alpha: false + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/input/rich_input.lua b/example/examples/basic/input/rich_input.lua new file mode 100644 index 0000000..cef718c --- /dev/null +++ b/example/examples/basic/input/rich_input.lua @@ -0,0 +1,22 @@ +local component = require("druid.component") +local rich_input = require("druid.custom.rich_input.rich_input") + +---@class rich_input: druid.base_component +---@field druid druid_instance +---@field rich_input druid.rich_input +local M = component.create("rich_input") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.rich_input = self.druid:new(rich_input, "rich_input") --[[@as druid.rich_input]] + self.rich_input:set_placeholder("Enter text") + + self.rich_input_2 = self.druid:new(rich_input, "rich_input_2") --[[@as druid.rich_input]] + self.rich_input_2:set_placeholder("Enter text") +end + + +return M diff --git a/example/examples/basic/progress_bar/basic_progress_bar.gui b/example/examples/basic/progress_bar/basic_progress_bar.gui new file mode 100644 index 0000000..975d78c --- /dev/null +++ b/example/examples/basic/progress_bar/basic_progress_bar.gui @@ -0,0 +1,89 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -150.0 + } + size { + x: 300.0 + y: 32.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + } + type: TYPE_BOX + texture: "druid/pixel" + id: "progress_bar_back" + pivot: PIVOT_W + parent: "root" + inherit_alpha: true +} +nodes { + size { + x: 300.0 + y: 32.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + } + type: TYPE_BOX + texture: "druid/pixel" + id: "progress_bar_fill" + pivot: PIVOT_W + parent: "progress_bar_back" + inherit_alpha: true +} +nodes { + position { + y: 50.0 + } + size { + x: 150.0 + y: 50.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + } + type: TYPE_TEXT + text: "0 %" + font: "text_bold" + id: "progress_value" + outline { + x: 1.0 + y: 1.0 + z: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + } + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/progress_bar/basic_progress_bar.lua b/example/examples/basic/progress_bar/basic_progress_bar.lua new file mode 100644 index 0000000..6681d01 --- /dev/null +++ b/example/examples/basic/progress_bar/basic_progress_bar.lua @@ -0,0 +1,28 @@ +local component = require("druid.component") +local progress = require("druid.extended.progress") + +---@class basic_progress_bar: druid.base_component +---@field druid druid_instance +---@field progress druid.progress +local M = component.create("basic_progress_bar") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.progress = self.druid:new(progress, "progress_bar_fill", "x") + self.text_value = self:get_node("progress_value") + + self:set_value(self.progress:get()) +end + + +function M:set_value(value) + gui.set_text(self.text_value, math.ceil(value * 100) .. "%") + self.progress:set_to(value) +end + + +return M diff --git a/example/examples/basic/progress_bar/basic_progress_bar_slice9.gui b/example/examples/basic/progress_bar/basic_progress_bar_slice9.gui new file mode 100644 index 0000000..cfeff26 --- /dev/null +++ b/example/examples/basic/progress_bar/basic_progress_bar_slice9.gui @@ -0,0 +1,101 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -150.0 + } + size { + x: 300.0 + y: 32.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + } + type: TYPE_BOX + texture: "druid/ui_circle_16" + id: "progress_bar_back" + pivot: PIVOT_W + parent: "root" + inherit_alpha: true + slice9 { + x: 8.0 + y: 8.0 + z: 8.0 + w: 8.0 + } +} +nodes { + size { + x: 300.0 + y: 32.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + } + type: TYPE_BOX + texture: "druid/ui_circle_16" + id: "progress_bar_fill" + pivot: PIVOT_W + parent: "progress_bar_back" + inherit_alpha: true + slice9 { + x: 8.0 + y: 8.0 + z: 8.0 + w: 8.0 + } +} +nodes { + position { + y: 50.0 + } + size { + x: 150.0 + y: 50.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + } + type: TYPE_TEXT + text: "0 %" + font: "text_bold" + id: "progress_value" + outline { + x: 1.0 + y: 1.0 + z: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + } + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/progress_bar/basic_progress_bar_slice9.lua b/example/examples/basic/progress_bar/basic_progress_bar_slice9.lua new file mode 100644 index 0000000..9a73c0d --- /dev/null +++ b/example/examples/basic/progress_bar/basic_progress_bar_slice9.lua @@ -0,0 +1,28 @@ +local component = require("druid.component") +local progress = require("druid.extended.progress") + +---@class basic_progress_bar_slice9: druid.base_component +---@field druid druid_instance +---@field progress druid.progress +local M = component.create("basic_progress_bar_slice9") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.progress = self.druid:new(progress, "progress_bar_fill", "x") + self.text_value = self:get_node("progress_value") + + self:set_value(self.progress:get()) +end + + +function M:set_value(value) + gui.set_text(self.text_value, math.ceil(value * 100) .. "%") + self.progress:set_to(value) +end + + +return M diff --git a/example/examples/basic/rich_text/basic_rich_text.gui b/example/examples/basic/rich_text/basic_rich_text.gui new file mode 100644 index 0000000..773f2d2 --- /dev/null +++ b/example/examples/basic/rich_text/basic_rich_text.gui @@ -0,0 +1,46 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -200.0 + } + size { + x: 400.0 + y: 100.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Hello I\'m a Rich Text!" + font: "text_regular" + id: "text" + pivot: PIVOT_W + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/rich_text/basic_rich_text.lua b/example/examples/basic/rich_text/basic_rich_text.lua new file mode 100644 index 0000000..3abb632 --- /dev/null +++ b/example/examples/basic/rich_text/basic_rich_text.lua @@ -0,0 +1,18 @@ +local component = require("druid.component") +local rich_text = require("druid.custom.rich_text.rich_text") + +---@class basic_rich_text: druid.base_component +---@field druid druid_instance +---@field rich_text druid.rich_text +local M = component.create("basic_rich_text") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + self.druid:new(rich_text, "text", "Hello, I'm a Rich Text!") +end + + +return M diff --git a/example/examples/basic/rich_text/rich_text_tags.gui b/example/examples/basic/rich_text/rich_text_tags.gui new file mode 100644 index 0000000..de6d63e --- /dev/null +++ b/example/examples/basic/rich_text/rich_text_tags.gui @@ -0,0 +1,167 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +textures { + name: "druid_logo" + texture: "/example/assets/druid_logo.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + visible: false +} +nodes { + size { + x: 400.0 + y: 1000.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + } + type: TYPE_BOX + texture: "druid/ui_circle_64" + id: "background" + parent: "root" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } +} +nodes { + position { + x: -200.0 + y: 400.0 + } + size { + x: 400.0 + y: 100.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Rich text" + font: "text_regular" + id: "rich_text_color" + pivot: PIVOT_W + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + x: -200.0 + y: 200.0 + } + size { + x: 400.0 + y: 100.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Rich text" + font: "text_regular" + id: "rich_text_breaks" + pivot: PIVOT_W + line_break: true + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + x: 200.0 + } + size { + x: 400.0 + y: 100.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Rich text" + font: "text_regular" + id: "rich_text_size" + pivot: PIVOT_SE + line_break: true + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + x: -200.0 + y: -200.0 + } + size { + x: 400.0 + y: 100.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Rich text" + font: "text_regular" + id: "rich_text_font" + pivot: PIVOT_W + line_break: true + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + x: -200.0 + y: -400.0 + } + size { + x: 400.0 + y: 100.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Rich text" + font: "text_regular" + id: "rich_text_image" + pivot: PIVOT_W + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/rich_text/rich_text_tags.lua b/example/examples/basic/rich_text/rich_text_tags.lua new file mode 100644 index 0000000..69f65cb --- /dev/null +++ b/example/examples/basic/rich_text/rich_text_tags.lua @@ -0,0 +1,76 @@ +local component = require("druid.component") +local rich_text = require("druid.custom.rich_text.rich_text") +local helper = require("druid.helper") + +---@class rich_text_tags: druid.base_component +---@field druid druid_instance +---@field rich_text druid.rich_text +local M = component.create("rich_text_tags") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.rich_text_color = self.druid:new(rich_text, "rich_text_color") --[[@as druid.rich_text]] + self.rich_text_color:set_text("Hello, I'm a Rich Text and it's nested color tag") + + self.rich_text_font = self.druid:new(rich_text, "rich_text_font") --[[@as druid.rich_text]] + self.rich_text_font:set_text("Hello, I'm a Rich Text and this is bold text") + + self.rich_text_size = self.druid:new(rich_text, "rich_text_size") --[[@as druid.rich_text]] + self.rich_text_size:set_text("Hello, I'm have East Pivot and different text scale") + + self.rich_text_breaks = self.druid:new(rich_text, "rich_text_breaks") --[[@as druid.rich_text]] + self.rich_text_breaks:set_text("Hello, I'm Rich Text
With \"Line Breaks\"\nEnabled in GUI") + + self.rich_text_image = self.druid:new(rich_text, "rich_text_image") --[[@as druid.rich_text]] + self.rich_text_image:set_text("Hello, I'mRich Text ") + + self.position = { + [self.rich_text_color] = gui.get_position(self.rich_text_color.root), + [self.rich_text_font] = gui.get_position(self.rich_text_font.root), + [self.rich_text_size] = gui.get_position(self.rich_text_size.root), + [self.rich_text_breaks] = gui.get_position(self.rich_text_breaks.root), + [self.rich_text_image] = gui.get_position(self.rich_text_image.root), + } + -- Adjust positions with pivots + for rich_text, pos in pairs(self.position) do + local size_x = gui.get(rich_text.root, "size.x") + local size_y = gui.get(rich_text.root, "size.y") + local parent_pivot = gui.get_pivot(rich_text.root) + local pivot_offset = helper.get_pivot_offset(parent_pivot) + local offset_x = size_x * pivot_offset.x + local offset_y = size_y * pivot_offset.y + pos.x = pos.x - offset_x + pos.y = pos.y - offset_y + end +end + + +function M:set_pivot(pivot) + local rich_texts = { + self.rich_text_color, + self.rich_text_font, + self.rich_text_size, + self.rich_text_breaks, + self.rich_text_image, + } + + for _, rich_text in ipairs(rich_texts) do + gui.set_pivot(rich_text.root, pivot) + local pos = self.position[rich_text] + local size_x = gui.get(rich_text.root, "size.x") + local size_y = gui.get(rich_text.root, "size.y") + local parent_pivot = gui.get_pivot(rich_text.root) + local pivot_offset = helper.get_pivot_offset(parent_pivot) + local offset_x = size_x * pivot_offset.x + local offset_y = size_y * pivot_offset.y + gui.set_position(rich_text.root, vmath.vector3(pos.x + offset_x, pos.y + offset_y, pos.z)) + rich_text:set_text(rich_text:get_text()) + end +end + + +return M diff --git a/example/examples/basic/rich_text/rich_text_tags_custom.gui b/example/examples/basic/rich_text/rich_text_tags_custom.gui new file mode 100644 index 0000000..3c17183 --- /dev/null +++ b/example/examples/basic/rich_text/rich_text_tags_custom.gui @@ -0,0 +1,92 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + y: 200.0 + } + size { + x: 400.0 + y: 100.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Rich text" + font: "text_regular" + id: "rich_text_link" + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + x: -200.0 + } + size { + x: 400.0 + y: 100.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Rich text" + font: "text_regular" + id: "rich_text_characters" + pivot: PIVOT_W + line_break: true + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + x: -200.0 + y: -200.0 + } + size { + x: 400.0 + y: 100.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Rich text" + font: "text_regular" + id: "rich_text_custom" + pivot: PIVOT_W + line_break: true + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/rich_text/rich_text_tags_custom.lua b/example/examples/basic/rich_text/rich_text_tags_custom.lua new file mode 100644 index 0000000..14d92e2 --- /dev/null +++ b/example/examples/basic/rich_text/rich_text_tags_custom.lua @@ -0,0 +1,67 @@ +local component = require("druid.component") +local rich_text = require("druid.custom.rich_text.rich_text") +local helper = require("druid.helper") +local event = require("druid.event") + +---@class rich_text_tags_custom: druid.base_component +---@field druid druid_instance +---@field rich_text druid.rich_text +local M = component.create("rich_text_tags_custom") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + do -- Init rich text with links example + self.rich_text_link = self.druid:new(rich_text, "rich_text_link") --[[@as druid.rich_text]] + self.rich_text_link:set_text("Hello, I'm a Custom Link") + + local tagged = self.rich_text_link:tagged("custom_link") + for index = 1, #tagged do + local word = tagged[index] + self.druid:new_button(word.node, function() + self.on_link_click:trigger(word.text) + end) + end + end + + self.rich_text_characters = self.druid:new(rich_text, "rich_text_characters") --[[@as druid.rich_text]] + self.rich_text_characters:set_text("Hello, I'm a have a splitted characters") + + self.rich_text_custom = self.druid:new(rich_text, "rich_text_custom") --[[@as druid.rich_text]] + self.rich_text_custom:set_text("Hello, I'm have South Text Pivot to adjust different text scale") + + self.position = { + [self.rich_text_link] = gui.get_position(self.rich_text_link.root), + [self.rich_text_characters] = gui.get_position(self.rich_text_characters.root), + [self.rich_text_custom] = gui.get_position(self.rich_text_custom.root), + } + + self.on_link_click = event.create() +end + + +function M:set_pivot(pivot) + local pivot_offset = helper.get_pivot_offset(pivot) + local rich_texts = { + self.rich_text_link, + self.rich_text_characters, + self.rich_text_custom, + } + + for _, rich_text in ipairs(rich_texts) do + gui.set_pivot(rich_text.root, pivot) + local pos = self.position[rich_text] + local size_x = gui.get(rich_text.root, "size.x") + local size_y = gui.get(rich_text.root, "size.y") + local offset_x = size_x * pivot_offset.x + local offset_y = size_y * pivot_offset.y + gui.set_position(rich_text.root, vmath.vector3(pos.x + offset_x, pos.y + offset_y, pos.z)) + rich_text:set_text(rich_text:get_text()) + end +end + + +return M diff --git a/example/examples/basic/scroll/scroll.gui b/example/examples/basic/scroll/scroll.gui new file mode 100644 index 0000000..f7120b7 --- /dev/null +++ b/example/examples/basic/scroll/scroll.gui @@ -0,0 +1,876 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "scroll_view" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 500.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 1700.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "scroll_content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "scroll_view" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -946.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_tutorial" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button_tutorial/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_tutorial" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "I do nothing!" + font: "text_bold" + id: "button_tutorial/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_tutorial/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 8 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -185.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.75 + y: 0.75 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 900.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "To setup scroll in your scene\n" + "\n" + "- Place \"View\" box node\n" + "\n" + "- Put \"Content\" node inside \"Scroll View\"\n" + "\n" + "- Init scroll with `druid:new_scroll(\"view\", \"content\")" + font: "text_bold" + id: "ui_scroll_text_1" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -185.0 + y: -482.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.75 + y: 0.75 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 400.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Now your content node can be scrollable in View node borders. In this example the content node contains this tutorial text" + font: "text_bold" + id: "ui_scroll_text_2" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -185.0 + y: -713.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.75 + y: 0.75 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 400.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "All other components are placed as usual.\n" + "\n" + "For example, button:" + font: "text_bold" + id: "ui_scroll_text_3" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -185.0 + y: -1042.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.75 + y: 0.75 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 400.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "You probably wish to add \"stencil\" to your view node to clip all content what outside scroll" + font: "text_bold" + id: "ui_scroll_text_4" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -185.0 + y: -1257.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.75 + y: 0.75 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 400.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Druid automatically checks the stencil nodes to add a \"click zone\" for input elements like buttons to prevent the input if they are outside of stencil nodes" + font: "text_bold" + id: "ui_scroll_text_5" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NW + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -1605.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_stencil" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button_stencil/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_stencil" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Try click me outside" + font: "text_bold" + id: "button_stencil/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button_stencil/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/scroll/scroll.lua b/example/examples/basic/scroll/scroll.lua new file mode 100644 index 0000000..65efe8c --- /dev/null +++ b/example/examples/basic/scroll/scroll.lua @@ -0,0 +1,21 @@ +local component = require("druid.component") + +---@class scroll: druid.base_component +---@field root node +---@field scroll druid.scroll +---@field druid druid_instance +local M = component.create("scroll") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.scroll = self.druid:new_scroll("scroll_view", "scroll_content") + + self.button_tutorial = self.druid:new_button("button_tutorial/root") + self.button_stencil = self.druid:new_button("button_stencil/root") +end + + +return M diff --git a/example/examples/basic/scroll_bind_grid/scroll_bind_grid.gui b/example/examples/basic/scroll_bind_grid/scroll_bind_grid.gui new file mode 100644 index 0000000..f713ea6 --- /dev/null +++ b/example/examples/basic/scroll_bind_grid/scroll_bind_grid.gui @@ -0,0 +1,379 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1000.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 400.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 800.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "view" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 800.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "view" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -400.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "prefab" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "content" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "panel" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "prefab" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 240.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Grid Item 1" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "prefab" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/scroll_bind_grid/scroll_bind_grid.lua b/example/examples/basic/scroll_bind_grid/scroll_bind_grid.lua new file mode 100644 index 0000000..ba62a6e --- /dev/null +++ b/example/examples/basic/scroll_bind_grid/scroll_bind_grid.lua @@ -0,0 +1,69 @@ +local component = require("druid.component") + +---@class scroll_bind_grid: druid.base_component +---@field scroll druid.scroll +---@field grid druid.static_grid +---@field text druid.text +---@field druid druid_instance +local M = component.create("scroll_bind_grid") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.created_nodes = {} + + self.prefab = self:get_node("prefab") + gui.set_enabled(self.prefab, false) + + self.scroll = self.druid:new_scroll("view", "content") + self.grid = self.druid:new_static_grid("content", "prefab", 1) + self.scroll:bind_grid(self.grid) + + for index = 1, 20 do + self:add_element() + end +end + + +function M:on_remove() + self:clear() +end + + +function M:add_element() + local prefab_nodes = gui.clone_tree(self.prefab) + local root = prefab_nodes[self:get_template() .. "/prefab"] + local text = prefab_nodes[self:get_template() .. "/text"] + table.insert(self.created_nodes, root) + gui.set_text(text, "Grid Item " .. #self.created_nodes) + gui.set_enabled(root, true) + + self.grid:add(root) +end + + +function M:remove_element() + local last_node = table.remove(self.created_nodes) + if last_node == nil then + return + end + + gui.delete_node(last_node) + local grid_index = self.grid:get_index_by_node(last_node) + self.grid:remove(grid_index) +end + + +function M:clear() + for _, node in ipairs(self.created_nodes) do + gui.delete_node(node) + end + self.created_nodes = {} + self.grid:clear() +end + + +return M diff --git a/example/examples/basic/scroll_bind_grid/scroll_bind_grid_horizontal.gui b/example/examples/basic/scroll_bind_grid/scroll_bind_grid_horizontal.gui new file mode 100644 index 0000000..7165b82 --- /dev/null +++ b/example/examples/basic/scroll_bind_grid/scroll_bind_grid_horizontal.gui @@ -0,0 +1,379 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1000.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: -450.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 900.0 + y: 360.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "view" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 900.0 + y: 360.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_FIT + parent: "view" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 450.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 270.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "prefab" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "content" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 190.0 + y: 250.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "panel" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "prefab" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 150.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Grid Item 1" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "prefab" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/scroll_bind_grid/scroll_bind_grid_horizontal.lua b/example/examples/basic/scroll_bind_grid/scroll_bind_grid_horizontal.lua new file mode 100644 index 0000000..ce762f5 --- /dev/null +++ b/example/examples/basic/scroll_bind_grid/scroll_bind_grid_horizontal.lua @@ -0,0 +1,69 @@ +local component = require("druid.component") + +---@class scroll_bind_grid_horizontal: druid.base_component +---@field scroll druid.scroll +---@field grid druid.static_grid +---@field text druid.text +---@field druid druid_instance +local M = component.create("scroll_bind_grid_horizontal") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.created_nodes = {} + + self.prefab = self:get_node("prefab") + gui.set_enabled(self.prefab, false) + + self.scroll = self.druid:new_scroll("view", "content") + self.grid = self.druid:new_static_grid("content", "prefab", 99999) + self.scroll:bind_grid(self.grid) + + for index = 1, 30 do + self:add_element() + end +end + + +function M:on_remove() + self:clear() +end + + +function M:add_element() + local prefab_nodes = gui.clone_tree(self.prefab) + local root = prefab_nodes[self:get_template() .. "/prefab"] + local text = prefab_nodes[self:get_template() .. "/text"] + table.insert(self.created_nodes, root) + gui.set_text(text, "Grid Item " .. #self.created_nodes) + gui.set_enabled(root, true) + + self.grid:add(root) +end + + +function M:remove_element() + local last_node = table.remove(self.created_nodes) + if last_node == nil then + return + end + + gui.delete_node(last_node) + local grid_index = self.grid:get_index_by_node(last_node) + self.grid:remove(grid_index) +end + + +function M:clear() + for _, node in ipairs(self.created_nodes) do + gui.delete_node(node) + end + self.created_nodes = {} + self.grid:clear() +end + + +return M diff --git a/example/examples/basic/scroll_bind_grid/scroll_bind_grid_points.gui b/example/examples/basic/scroll_bind_grid/scroll_bind_grid_points.gui new file mode 100644 index 0000000..165fbf2 --- /dev/null +++ b/example/examples/basic/scroll_bind_grid/scroll_bind_grid_points.gui @@ -0,0 +1,126 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + y: 400.0 + } + size { + x: 400.0 + y: 800.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + } + type: TYPE_BOX + texture: "druid/ui_circle_32" + id: "view" + pivot: PIVOT_N + parent: "root" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_STENCIL +} +nodes { + size { + x: 400.0 + y: 800.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "content" + pivot: PIVOT_N + parent: "view" + inherit_alpha: true + visible: false +} +nodes { + position { + y: -400.0 + } + size { + x: 300.0 + y: 400.0 + } + type: TYPE_BOX + id: "prefab" + parent: "content" + inherit_alpha: true + visible: false +} +nodes { + size { + x: 300.0 + y: 90.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + } + type: TYPE_BOX + texture: "druid/ui_circle_32" + id: "panel" + parent: "prefab" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } +} +nodes { + size { + x: 240.0 + y: 50.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_TEXT + text: "Grid Item 1" + font: "text_bold" + id: "text" + outline { + x: 1.0 + y: 1.0 + z: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + } + parent: "prefab" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/scroll_bind_grid/scroll_bind_grid_points.lua b/example/examples/basic/scroll_bind_grid/scroll_bind_grid_points.lua new file mode 100644 index 0000000..d1d6ccc --- /dev/null +++ b/example/examples/basic/scroll_bind_grid/scroll_bind_grid_points.lua @@ -0,0 +1,75 @@ +local component = require("druid.component") + +---@class scroll_bind_grid_points: druid.base_component +---@field scroll druid.scroll +---@field grid druid.static_grid +---@field text druid.text +---@field druid druid_instance +local M = component.create("scroll_bind_grid_points") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.created_nodes = {} + + self.prefab = self:get_node("prefab") + gui.set_enabled(self.prefab, false) + + self.scroll = self.druid:new_scroll("view", "content") + self.grid = self.druid:new_static_grid("content", "prefab", 1) + self.scroll:bind_grid(self.grid) + + for index = 1, 20 do + self:add_element() + end + + local points = self.grid:get_all_pos() + for _, point in ipairs(points) do + point.y = point.y + self.scroll.view_size.y/2 + end + self.scroll:set_points(points) +end + + +function M:on_remove() + self:clear() +end + + +function M:add_element() + local prefab_nodes = gui.clone_tree(self.prefab) + local root = prefab_nodes[self:get_template() .. "/prefab"] + local text = prefab_nodes[self:get_template() .. "/text"] + table.insert(self.created_nodes, root) + gui.set_text(text, "Grid Item " .. #self.created_nodes) + gui.set_enabled(root, true) + + self.grid:add(root) +end + + +function M:remove_element() + local last_node = table.remove(self.created_nodes) + if last_node == nil then + return + end + + gui.delete_node(last_node) + local grid_index = self.grid:get_index_by_node(last_node) + self.grid:remove(grid_index) +end + + +function M:clear() + for _, node in ipairs(self.created_nodes) do + gui.delete_node(node) + end + self.created_nodes = {} + self.grid:clear() +end + + +return M diff --git a/example/examples/basic/scroll_slider/scroll_slider.gui b/example/examples/basic/scroll_slider/scroll_slider.gui new file mode 100644 index 0000000..caf0a41 --- /dev/null +++ b/example/examples/basic/scroll_slider/scroll_slider.gui @@ -0,0 +1,2535 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "scroll_view" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 500.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 400.0 + y: 2600.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "scroll_content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "scroll_view" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -100.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button1" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button1/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button1" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 1" + font: "text_bold" + id: "button1/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button1/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -300.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button2" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button2/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button2" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 2" + font: "text_bold" + id: "button2/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button2/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -500.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button3" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button3/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button3" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 3" + font: "text_bold" + id: "button3/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button3/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -700.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button4" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button4/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button4" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 4" + font: "text_bold" + id: "button4/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button4/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -900.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button5" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button5/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button5" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 5" + font: "text_bold" + id: "button5/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button5/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -1100.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button6" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button6/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button6" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 6" + font: "text_bold" + id: "button6/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button6/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -1300.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button7" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button7/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button7" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 7" + font: "text_bold" + id: "button7/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button7/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -1500.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button8" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button8/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button8" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 8" + font: "text_bold" + id: "button8/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button8/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -1700.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button9" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button9/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button9" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 9" + font: "text_bold" + id: "button9/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button9/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -1900.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button10" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button10/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button10" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 10" + font: "text_bold" + id: "button10/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button10/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -2100.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button11" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button11/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button11" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 11" + font: "text_bold" + id: "button11/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button11/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -2300.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button12" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button12/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button12" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 12" + font: "text_bold" + id: "button12/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button12/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -2500.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button13" + parent: "scroll_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button13/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button13" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.9 + y: 0.9 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap to scroll 13" + font: "text_bold" + id: "button13/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "button13/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 3 + overridden_fields: 8 + overridden_fields: 18 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 200.0 + y: 500.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "slider_back" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_NE + adjust_mode: ADJUST_MODE_FIT + parent: "scroll_view" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -8.0 + y: -24.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 48.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_16" + id: "slider_pin" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "slider_back" + layer: "" + inherit_alpha: true + slice9 { + x: 8.0 + y: 8.0 + z: 8.0 + w: 8.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/scroll_slider/scroll_slider.lua b/example/examples/basic/scroll_slider/scroll_slider.lua new file mode 100644 index 0000000..79723ef --- /dev/null +++ b/example/examples/basic/scroll_slider/scroll_slider.lua @@ -0,0 +1,54 @@ +local component = require("druid.component") +local slider = require("druid.extended.slider") + +---@class scroll_slider: druid.base_component +---@field root node +---@field scroll druid.scroll +---@field slider druid.slider +---@field druid druid_instance +local M = component.create("scroll_slider") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.scroll = self.druid:new_scroll("scroll_view", "scroll_content") + self.scroll.on_scroll:subscribe(self.on_scroll) + + self.slider = self.druid:new(slider, "slider_pin", vmath.vector3(-8, -976, 0), self.on_slider) --[[@as druid.slider]] + self.slider:set_input_node("slider_back") + + self.druid:new_hover("slider_back", nil, self.on_slider_back_hover) + + for index = 1, 13 do + self.druid:new_button("button" .. index .. "/root", self.on_button_click) + end +end + + +function M:on_scroll() + local scroll_percent = self.scroll:get_percent() + self.slider:set(1 - scroll_percent.y, true) +end + + +function M:on_slider(value) + self.scroll:scroll_to_percent(vmath.vector3(0, 1 - value, 0), true) +end + + +---@param button druid.button +function M:on_button_click(_, button) + local node = button.node + self.scroll:scroll_to(gui.get_position(node)) +end + + +function M:on_slider_back_hover(is_hover) + local node = self:get_node("slider_pin") + gui.animate(node, "color.w", is_hover and 1.5 or 1, gui.EASING_OUTSINE, 0.2) +end + + +return M diff --git a/example/examples/basic/slider/basic_slider.gui b/example/examples/basic/slider/basic_slider.gui new file mode 100644 index 0000000..a8f132a --- /dev/null +++ b/example/examples/basic/slider/basic_slider.gui @@ -0,0 +1,362 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1000.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_64" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "slider" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/slider.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 260.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "slider/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "slider" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 260.0 + y: 8.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_8" + id: "slider/slider_back" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "slider/root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -118.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 24.0 + y: 24.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_8" + id: "slider/slider_pin" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "slider/root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 150.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "0 %" + font: "text_bold" + id: "slider_value" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/slider/basic_slider.lua b/example/examples/basic/slider/basic_slider.lua new file mode 100644 index 0000000..05fcabc --- /dev/null +++ b/example/examples/basic/slider/basic_slider.lua @@ -0,0 +1,30 @@ +local component = require("druid.component") +local slider = require("druid.extended.slider") + +---@class basic_slider: druid.base_component +---@field druid druid_instance +---@field root node +---@field slider druid.slider +local M = component.create("basic_slider") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.slider = self.druid:new(slider, "slider/slider_pin", vmath.vector3(118, 0, 0), self.on_slider_change) --[[@as druid.slider]] + + -- To add input across all slider widget add a root node to acquire additional input + self.slider:set_input_node("slider/root") + + self.text_value = self:get_node("slider_value") +end + + +function M:on_slider_change(value) + gui.set_text(self.text_value, math.ceil(value * 100) .. "%") +end + + +return M diff --git a/example/examples/basic/slider/basic_slider_stepped.gui b/example/examples/basic/slider/basic_slider_stepped.gui new file mode 100644 index 0000000..a8f132a --- /dev/null +++ b/example/examples/basic/slider/basic_slider_stepped.gui @@ -0,0 +1,362 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1000.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_64" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "slider" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/slider.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 260.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "slider/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "slider" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 260.0 + y: 8.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_8" + id: "slider/slider_back" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "slider/root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -118.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 24.0 + y: 24.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_8" + id: "slider/slider_pin" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "slider/root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 150.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "0 %" + font: "text_bold" + id: "slider_value" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/slider/basic_slider_stepped.lua b/example/examples/basic/slider/basic_slider_stepped.lua new file mode 100644 index 0000000..02becaf --- /dev/null +++ b/example/examples/basic/slider/basic_slider_stepped.lua @@ -0,0 +1,32 @@ +local component = require("druid.component") +local slider = require("druid.extended.slider") + +---@class basic_slider_stepped: druid.base_component +---@field druid druid_instance +---@field root node +---@field slider druid.slider +local M = component.create("basic_slider_stepped") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.slider = self.druid:new(slider, "slider/slider_pin", vmath.vector3(118, 0, 0), self.on_slider_change) --[[@as druid.slider]] + + -- To add input across all slider widget add a root node to acquire additional input + self.slider:set_input_node("slider/root") + + self.slider:set_steps({0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1}) + + self.text_value = self:get_node("slider_value") +end + + +function M:on_slider_change(value) + gui.set_text(self.text_value, math.ceil(value * 100) .. "%") +end + + +return M diff --git a/example/examples/basic/slider/basic_slider_vertical.gui b/example/examples/basic/slider/basic_slider_vertical.gui new file mode 100644 index 0000000..5b22951 --- /dev/null +++ b/example/examples/basic/slider/basic_slider_vertical.gui @@ -0,0 +1,102 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + } + type: TYPE_BOX + texture: "druid/ui_circle_64" + id: "root" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } +} +nodes { + type: TYPE_TEMPLATE + id: "slider" + parent: "root" + inherit_alpha: true + template: "/example/templates/slider.gui" +} +nodes { + size { + x: 40.0 + y: 260.0 + } + type: TYPE_BOX + id: "slider/root" + parent: "slider" + overridden_fields: 4 + template_node_child: true +} +nodes { + size { + x: 9.0 + y: 260.0 + } + type: TYPE_BOX + id: "slider/slider_back" + parent: "slider/root" + overridden_fields: 4 + template_node_child: true +} +nodes { + position { + y: 118.0 + } + type: TYPE_BOX + id: "slider/slider_pin" + parent: "slider/root" + overridden_fields: 1 + template_node_child: true +} +nodes { + position { + y: 160.0 + } + size { + x: 150.0 + y: 50.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + } + type: TYPE_TEXT + text: "0 %" + font: "text_bold" + id: "slider_value" + outline { + x: 1.0 + y: 1.0 + z: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + } + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/slider/basic_slider_vertical.lua b/example/examples/basic/slider/basic_slider_vertical.lua new file mode 100644 index 0000000..ba3eff7 --- /dev/null +++ b/example/examples/basic/slider/basic_slider_vertical.lua @@ -0,0 +1,30 @@ +local component = require("druid.component") +local slider = require("druid.extended.slider") + +---@class basic_slider_vertical: druid.base_component +---@field druid druid_instance +---@field root node +---@field slider druid.slider +local M = component.create("basic_slider_vertical") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.slider = self.druid:new(slider, "slider/slider_pin", vmath.vector3(0, -118, 0), self.on_slider_change) --[[@as druid.slider]] + + -- To add input across all slider widget add a root node to acquire additional input + self.slider:set_input_node("slider/root") + + self.text_value = self:get_node("slider_value") +end + + +function M:on_slider_change(value) + gui.set_text(self.text_value, math.ceil(value * 100) .. "%") +end + + +return M diff --git a/example/examples/basic/swipe/basic_swipe.gui b/example/examples/basic/swipe/basic_swipe.gui new file mode 100644 index 0000000..8faba60 --- /dev/null +++ b/example/examples/basic/swipe/basic_swipe.gui @@ -0,0 +1,143 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 1000.0 + y: 1000.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_64" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 600.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Swipe across area to action" + font: "text_bold" + id: "swipe_hint" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/swipe/basic_swipe.lua b/example/examples/basic/swipe/basic_swipe.lua new file mode 100644 index 0000000..e8d768a --- /dev/null +++ b/example/examples/basic/swipe/basic_swipe.lua @@ -0,0 +1,34 @@ +local component = require("druid.component") +local swipe = require("druid.extended.swipe") + +---@class basic_swipe: druid.base_component +---@field druid druid_instance +local M = component.create("basic_swipe") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.swipe = self.druid:new(swipe, "root", self.on_swipe) --[[@as druid.swipe]] + + self.text_hint = self:get_node("swipe_hint") +end + + +function M:on_swipe(swipe_side, dist, delta_time) + print("Swipe side:", swipe_side, "Distance:", dist, "Time:", delta_time) + + if swipe_side == "up" then + gui.animate(self.text_hint, gui.PROP_POSITION, vmath.vector3(0, 200, 0), gui.EASING_OUTBACK, 0.4) + elseif swipe_side == "down" then + gui.animate(self.text_hint, gui.PROP_POSITION, vmath.vector3(0, -200, 0), gui.EASING_OUTBACK, 0.4) + elseif swipe_side == "left" then + gui.animate(self.text_hint, gui.PROP_POSITION, vmath.vector3(-200, 0, 0), gui.EASING_OUTBACK, 0.4) + elseif swipe_side == "right" then + gui.animate(self.text_hint, gui.PROP_POSITION, vmath.vector3(200, 0, 0), gui.EASING_OUTBACK, 0.4) + end +end + + +return M diff --git a/example/examples/basic/text/basic_text.gui b/example/examples/basic/text/basic_text.gui new file mode 100644 index 0000000..185debb --- /dev/null +++ b/example/examples/basic/text/basic_text.gui @@ -0,0 +1,202 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 600.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "text_area" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 600.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Example text with default adjust" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "text_area" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/text/basic_text.lua b/example/examples/basic/text/basic_text.lua new file mode 100644 index 0000000..63889c5 --- /dev/null +++ b/example/examples/basic/text/basic_text.lua @@ -0,0 +1,42 @@ +local helper = require("druid.helper") +local component = require("druid.component") +local container = require("example.components.container.container") +local lang_text = require("druid.extended.lang_text") + +---@class basic_text: druid.base_component +---@field druid druid_instance +---@field text druid.text +local M = component.create("basic_text") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.text = self.druid:new_text("text") + + -- This code is for adjustable text area with mouse + self.container = self.druid:new(container, "text_area", nil, function(_, size) + self.text:set_size(size) + self:refresh_text_position() + end) --[[@as druid.container]] + + self.container:create_draggable_corners() +end + + +function M:set_pivot(pivot) + self.text:set_pivot(pivot) + self:refresh_text_position() +end + + +function M:refresh_text_position() + -- Need to update text position with different pivot + local pivot = gui.get_pivot(self.text.node) + local pivot_offset = helper.get_pivot_offset(pivot) + gui.set_position(self.text.node, vmath.vector3(pivot_offset.x * self.text.start_size.x, pivot_offset.y * self.text.start_size.y, 0)) +end + + +return M diff --git a/example/examples/basic/text/multiline_text.gui b/example/examples/basic/text/multiline_text.gui new file mode 100644 index 0000000..3a66171 --- /dev/null +++ b/example/examples/basic/text/multiline_text.gui @@ -0,0 +1,202 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 600.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "text_area" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 600.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Example multiline text with default adjust" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "text_area" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/basic/text/multiline_text.lua b/example/examples/basic/text/multiline_text.lua new file mode 100644 index 0000000..15c19c8 --- /dev/null +++ b/example/examples/basic/text/multiline_text.lua @@ -0,0 +1,26 @@ +local component = require("druid.component") +local container = require("example.components.container.container") + +---@class multiline_text: druid.base_component +---@field root node +---@field druid druid_instance +local M = component.create("multiline_text") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self:get_node("root") + self.text = self.druid:new_text("text") + + -- This code is for adjustable text area with mouse + self.container = self.druid:new(container, "text_area", nil, function(_, size) + self.text:set_size(size) + end) --[[@as druid.container]] + + self.container:create_draggable_corners() +end + + +return M diff --git a/example/examples/basic/timer/basic_timer.gui b/example/examples/basic/timer/basic_timer.gui new file mode 100644 index 0000000..f3b59e3 --- /dev/null +++ b/example/examples/basic/timer/basic_timer.gui @@ -0,0 +1,35 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +nodes { + size { + x: 200.0 + y: 100.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + scale { + x: 2.0 + y: 2.0 + } + size { + x: 200.0 + y: 100.0 + } + type: TYPE_TEXT + text: "5:09" + font: "text_bold" + id: "text" + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/basic/timer/basic_timer.lua b/example/examples/basic/timer/basic_timer.lua new file mode 100644 index 0000000..72fcca4 --- /dev/null +++ b/example/examples/basic/timer/basic_timer.lua @@ -0,0 +1,33 @@ +local event = require("druid.event") +local timer = require("druid.extended.timer") + +local component = require("druid.component") + +---@class basic_timer: druid.component +---@field druid druid_instance +---@field root node +---@field text druid.text +local M = component.create("basic_timer") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self:get_node("root") + self.timer = self.druid:new(timer, "text") + + local time = 5 + self.timer:set_interval(time, 0) + self.timer.on_timer_end:subscribe(function() + time = time + 5 + self.timer:set_interval(time, 0) + self.on_cycle_end:trigger() + end) + + self.on_cycle_end = event.create() +end + + +return M diff --git a/example/examples/data_list/add_remove_clear/data_list_add_remove_clear.gui b/example/examples/data_list/add_remove_clear/data_list_add_remove_clear.gui new file mode 100644 index 0000000..c45c867 --- /dev/null +++ b/example/examples/data_list/add_remove_clear/data_list_add_remove_clear.gui @@ -0,0 +1,379 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 350.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 350.0 + y: 700.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "view" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 350.0 + y: 700.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "view" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -400.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "prefab" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "content" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "panel" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "prefab" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 250.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Data Item 1" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "prefab" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/data_list/add_remove_clear/data_list_add_remove_clear.lua b/example/examples/data_list/add_remove_clear/data_list_add_remove_clear.lua new file mode 100644 index 0000000..bdc6eca --- /dev/null +++ b/example/examples/data_list/add_remove_clear/data_list_add_remove_clear.lua @@ -0,0 +1,70 @@ +local event = require("druid.event") +local component = require("druid.component") +local data_list = require("druid.extended.data_list") + +---@class data_list_add_remove_clear: druid.base_component +---@field druid druid_instance +---@field data_list druid.data_list +local M = component.create("data_list_add_remove_clear") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.prefab = self:get_node("prefab") + gui.set_enabled(self.prefab, false) + + self.scroll = self.druid:new_scroll("view", "content") + self.grid = self.druid:new_static_grid("content", self.prefab, 1) + self.data_list = self.druid:new(data_list, self.scroll, self.grid, self.create_item_callback) --[[@as druid.data_list]] + + local data = {} + for index = 1, 20 do + table.insert(data, {}) + end + self.data_list:set_data(data) + + self.on_item_click = event() +end + + +---@param item_data table +---@param index number +---@return node, druid.base_component +function M:create_item_callback(item_data, index) + local nodes = gui.clone_tree(self.prefab) + + local root = nodes[self:get_template() .. "/prefab"] + local text = nodes[self:get_template() .. "/text"] + gui.set_enabled(root, true) + gui.set_text(text, "Data Item " .. index) + + local button = self.druid:new_button(root, self.on_button_click, index) + return root, button +end + + +function M:on_button_click(index) + self.on_item_click:trigger(index) +end + + +function M:add_item(index) + self.data_list:add({}, index) +end + + +function M:remove_item(index) + print("Want to remove item", index) + self.data_list:remove(index) +end + + +function M:clear() + self.data_list:clear() +end + + +return M diff --git a/example/examples/data_list/basic/data_list_basic.gui b/example/examples/data_list/basic/data_list_basic.gui new file mode 100644 index 0000000..c45c867 --- /dev/null +++ b/example/examples/data_list/basic/data_list_basic.gui @@ -0,0 +1,379 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 350.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 350.0 + y: 700.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "view" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 350.0 + y: 700.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "view" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -400.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "prefab" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "content" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "panel" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "prefab" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 250.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Data Item 1" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "prefab" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/data_list/basic/data_list_basic.lua b/example/examples/data_list/basic/data_list_basic.lua new file mode 100644 index 0000000..b3a3d81 --- /dev/null +++ b/example/examples/data_list/basic/data_list_basic.lua @@ -0,0 +1,53 @@ +local event = require("druid.event") +local component = require("druid.component") +local data_list = require("druid.extended.data_list") + +---@class data_list_basic: druid.base_component +---@field druid druid_instance +local M = component.create("data_list_basic") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.prefab = self:get_node("prefab") + gui.set_enabled(self.prefab, false) + + self.scroll = self.druid:new_scroll("view", "content") + self.grid = self.druid:new_static_grid("content", self.prefab, 1) + self.data_list = self.druid:new(data_list, self.scroll, self.grid, self.create_item_callback) --[[@as druid.data_list]] + + local data = {} + for index = 1, 1000 do + table.insert(data, {}) + end + self.data_list:set_data(data) + + self.on_item_click = event() +end + + +---@param item_data table +---@param index number +---@return node, druid.base_component +function M:create_item_callback(item_data, index) + local nodes = gui.clone_tree(self.prefab) + + local root = nodes[self:get_template() .. "/prefab"] + local text = nodes[self:get_template() .. "/text"] + gui.set_enabled(root, true) + gui.set_text(text, "Data Item " .. index) + + local button = self.druid:new_button(root, self.on_button_click, index) + return root, button +end + + +function M:on_button_click(index) + self.on_item_click:trigger(index) +end + + +return M diff --git a/example/examples/data_list/basic/data_list_horizontal_basic.gui b/example/examples/data_list/basic/data_list_horizontal_basic.gui new file mode 100644 index 0000000..31f4823 --- /dev/null +++ b/example/examples/data_list/basic/data_list_horizontal_basic.gui @@ -0,0 +1,379 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: -450.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 900.0 + y: 350.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "view" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 900.0 + y: 350.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_FIT + parent: "view" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 450.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 270.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "prefab" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "content" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 190.0 + y: 250.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "panel" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "prefab" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 150.0 + y: 200.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Data Item 1" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "prefab" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/data_list/basic/data_list_horizontal_basic.lua b/example/examples/data_list/basic/data_list_horizontal_basic.lua new file mode 100644 index 0000000..0f21fc7 --- /dev/null +++ b/example/examples/data_list/basic/data_list_horizontal_basic.lua @@ -0,0 +1,46 @@ +local component = require("druid.component") +local data_list = require("druid.extended.data_list") + +---@class data_list_horizontal_basic: druid.base_component +---@field druid druid_instance +local M = component.create("data_list_horizontal_basic") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.prefab = self:get_node("prefab") + gui.set_enabled(self.prefab, false) + + self.scroll = self.druid:new_scroll("view", "content") + self.grid = self.druid:new_static_grid("content", self.prefab, 1000) + self.data_list = self.druid:new(data_list, self.scroll, self.grid, self.create_item_callback) --[[@as druid.data_list]] + + local data = {} + for index = 1, 100 do + table.insert(data, {}) + end + self.data_list:set_data(data) +end + + +function M:create_item_callback(item_data, index) + local nodes = gui.clone_tree(self.prefab) + local root = nodes[self:get_template() .. "/prefab"] + local text = nodes[self:get_template() .. "/text"] + gui.set_enabled(root, true) + gui.set_text(text, "Data Item " .. index) + + local button = self.druid:new_button(root, self.on_button_click, index) + return root, button +end + + +function M:on_button_click(index) + print("Button clicked", index) +end + + +return M diff --git a/example/examples/data_list/cache_with_component/button_component.gui b/example/examples/data_list/cache_with_component/button_component.gui new file mode 100644 index 0000000..f3c8623 --- /dev/null +++ b/example/examples/data_list/cache_with_component/button_component.gui @@ -0,0 +1,202 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "panel" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 250.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Data Item 1" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/data_list/cache_with_component/button_component.lua b/example/examples/data_list/cache_with_component/button_component.lua new file mode 100644 index 0000000..4719caf --- /dev/null +++ b/example/examples/data_list/cache_with_component/button_component.lua @@ -0,0 +1,35 @@ +local component = require("druid.component") + +---@class button_component: druid.base_component +---@field root node +---@field druid druid_instance +---@field text druid.text +---@field data any +local M = component.create("button_component") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + self.root = self:get_node("root") + + self.button = self.druid:new_button(self.root) + self.text = self.druid:new_text("text") + + self.data = nil +end + + +---@param data any +function M:set_data(data) + self.data = data +end + + +function M:get_data() + return self.data +end + + +return M diff --git a/example/examples/data_list/cache_with_component/cache_with_component.gui b/example/examples/data_list/cache_with_component/cache_with_component.gui new file mode 100644 index 0000000..f39b933 --- /dev/null +++ b/example/examples/data_list/cache_with_component/cache_with_component.gui @@ -0,0 +1,421 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 350.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 350.0 + y: 700.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/pixel" + id: "view" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 350.0 + y: 700.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "view" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: -300.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_component" + parent: "content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/examples/data_list/cache_with_component/button_component.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "button_component/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_component" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button_component/panel" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_component/root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 250.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Data Item 1" + font: "text_bold" + id: "button_component/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_component/root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/data_list/cache_with_component/cache_with_component.lua b/example/examples/data_list/cache_with_component/cache_with_component.lua new file mode 100644 index 0000000..ca308e2 --- /dev/null +++ b/example/examples/data_list/cache_with_component/cache_with_component.lua @@ -0,0 +1,73 @@ +local event = require("druid.event") +local component = require("druid.component") +local data_list = require("druid.extended.data_list") + +local button_component = require("example.examples.data_list.cache_with_component.button_component") + +---@class data_list_cache_with_component: druid.base_component +---@field druid druid_instance +local M = component.create("data_list_cache_with_component") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.prefab = self:get_node("button_component/root") + gui.set_enabled(self.prefab, false) + + self.scroll = self.druid:new_scroll("view", "content") + self.grid = self.druid:new_static_grid("content", self.prefab, 1) + self.data_list = self.druid:new(data_list, self.scroll, self.grid, self.create_item_callback) --[[@as druid.data_list]] + self.data_list:set_use_cache(true) + self.data_list.on_element_add:subscribe(self.on_element_add) + self.data_list.on_element_remove:subscribe(self.on_element_remove) + + local data = {} + for index = 1, 1000 do + table.insert(data, {}) + end + self.data_list:set_data(data) + + self.on_item_click = event() +end + + +---@param item_data table +---@param index number +---@return node, druid.base_component +function M:create_item_callback(item_data, index) + local nodes = gui.clone_tree(self.prefab) + + local instance = self.druid:new(button_component, "button_component", nodes) + gui.set_enabled(instance.root, true) + + return instance.root, instance +end + + +---@param index number +---@param node node +---@param instance button_component +---@param data table +function M:on_element_add(index, node, instance, data) + instance.text:set_to("Data Item " .. index) + instance.button.on_click:subscribe(self.on_button_click, self) + instance:set_data(index) +end + + +function M:on_element_remove(index, node, instance, data) + instance.button.on_click:unsubscribe(self.on_button_click, self) +end + + +---@param instance button_component +function M:on_button_click(instance) + local data = instance:get_data() + self.on_item_click:trigger(data) +end + + +return M diff --git a/example/examples/data_list/examples_list.lua b/example/examples/data_list/examples_list.lua new file mode 100644 index 0000000..5c2992d --- /dev/null +++ b/example/examples/data_list/examples_list.lua @@ -0,0 +1,203 @@ +local M = {} + +function M.get_examples() + ---@type druid.example.data[] + return { + { + name_id = "ui_example_data_list_basic", + information_text_id = "ui_example_data_list_basic_description", + template = "data_list_basic", + root = "data_list_basic/root", + code_url = "example/examples/data_list/basic/data_list_basic.lua", + component_class = require("example.examples.data_list.basic.data_list_basic"), + on_create = function(instance, output_list) + ---@cast instance data_list_basic + instance.on_item_click:subscribe(function(index) + output_list:add_log_text("Item clicked: " .. index) + end) + end, + properties_control = function(instance, properties_panel) + ---@cast instance data_list_basic + + local view_node = instance.scroll.view_node + local is_stencil = gui.get_clipping_mode(view_node) == gui.CLIPPING_MODE_STENCIL + + properties_panel:add_checkbox("ui_clipping", is_stencil, function(value) + gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE) + end) + + properties_panel:add_slider("ui_scroll", 0, function(value) + instance.scroll:scroll_to_percent(vmath.vector3(0, 1 - value, 0), true) + end) + end, + get_debug_info = function(instance) + ---@cast instance data_list_basic + local data_list = instance.data_list + + local data = data_list:get_data() + local info = "" + info = info .. "Data length: " .. #data .. "\n" + info = info .. "First Visual Index: " .. data_list.top_index .. "\n" + info = info .. "Last Visual Index: " .. data_list.last_index .. "\n" + + local s = instance.scroll + info = info .. "\n" + info = info .. "View Size Y: " .. gui.get(s.view_node, "size.y") .. "\n" + info = info .. "Content Size Y: " .. gui.get(s.content_node, "size.y") .. "\n" + info = info .. "Content position Y: " .. math.ceil(s.position.y) .. "\n" + info = info .. "Content Range Y: " .. s.available_pos.y .. " - " .. s.available_pos.w .. "\n" + + return info + end + }, + + { + name_id = "ui_example_data_list_horizontal_basic", + information_text_id = "ui_example_data_list_horizontal_basic_description", + template = "data_list_horizontal_basic", + root = "data_list_horizontal_basic/root", + code_url = "example/examples/data_list/basic/data_list_horizontal_basic.lua", + component_class = require("example.examples.data_list.basic.data_list_horizontal_basic"), + properties_control = function(instance, properties_panel) + ---@cast instance data_list_horizontal_basic + + local view_node = instance.scroll.view_node + local is_stencil = gui.get_clipping_mode(view_node) == gui.CLIPPING_MODE_STENCIL + + properties_panel:add_checkbox("ui_clipping", is_stencil, function(value) + gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE) + end) + end, + get_debug_info = function(instance) + ---@cast instance data_list_horizontal_basic + local data_list = instance.data_list + + local data = data_list:get_data() + local info = "" + info = info .. "Data length: " .. #data .. "\n" + info = info .. "First Visual Index: " .. data_list.top_index .. "\n" + info = info .. "Last Visual Index: " .. data_list.last_index .. "\n" + + local s = instance.scroll + info = info .. "\n" + info = info .. "View Size X: " .. gui.get(s.view_node, "size.x") .. "\n" + info = info .. "Content Size X: " .. gui.get(s.content_node, "size.x") .. "\n" + info = info .. "Content position X: " .. math.ceil(s.position.x) .. "\n" + info = info .. "Content Range X: " .. s.available_pos.x .. " - " .. s.available_pos.z .. "\n" + + return info + end + }, + + { + name_id = "ui_example_data_list_add_remove_clear", + information_text_id = "ui_example_data_list_add_remove_clear_description", + template = "data_list_add_remove_clear", + root = "data_list_add_remove_clear/root", + code_url = "example/examples/data_list/add_remove_clear/data_list_add_remove_clear.lua", + component_class = require("example.examples.data_list.add_remove_clear.data_list_add_remove_clear"), + on_create = function(instance, output_list) + ---@cast instance data_list_add_remove_clear + instance.on_item_click:subscribe(function(index) + instance:remove_item(index) + output_list:add_log_text("Item removed: " .. index) + end) + end, + properties_control = function(instance, properties_panel) + ---@cast instance data_list_add_remove_clear + + local view_node = instance.scroll.view_node + local is_stencil = gui.get_clipping_mode(view_node) == gui.CLIPPING_MODE_STENCIL + + properties_panel:add_checkbox("ui_clipping", is_stencil, function(value) + gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE) + end) + + properties_panel:add_slider("ui_scroll", 0, function(value) + instance.scroll:scroll_to_percent(vmath.vector3(0, 1 - value, 0), true) + end) + + properties_panel:add_button("ui_add_item", function() + instance:add_item() + end) + + properties_panel:add_button("ui_remove_item", function() + instance:remove_item() + end) + + properties_panel:add_button("ui_clear_items", function() + instance.data_list:clear() + end) + end, + get_debug_info = function(instance) + ---@cast instance data_list_add_remove_clear + local data_list = instance.data_list + + local data = data_list:get_data() + local info = "" + info = info .. "Data length: " .. #data .. "\n" + info = info .. "First Visual Index: " .. data_list.top_index .. "\n" + info = info .. "Last Visual Index: " .. data_list.last_index .. "\n" + + local s = instance.scroll + info = info .. "\n" + info = info .. "View Size X: " .. gui.get(s.view_node, "size.x") .. "\n" + info = info .. "Content Size X: " .. gui.get(s.content_node, "size.x") .. "\n" + info = info .. "Content position X: " .. math.ceil(s.position.x) .. "\n" + info = info .. "Content Range X: " .. s.available_pos.x .. " - " .. s.available_pos.z .. "\n" + + return info + end + }, + + { + name_id = "ui_example_data_list_cache_with_component", + information_text_id = "ui_example_data_list_cache_with_component_description", + template = "data_list_cache_with_component", + root = "data_list_cache_with_component/root", + code_url = "example/examples/data_list/cache_with_component/cache_with_component.lua", + component_class = require("example.examples.data_list.cache_with_component.cache_with_component"), + on_create = function(instance, output_list) + ---@cast instance data_list_cache_with_component + instance.on_item_click:subscribe(function(index) + output_list:add_log_text("Item clicked: " .. index) + end) + end, + properties_control = function(instance, properties_panel) + ---@cast instance data_list_cache_with_component + + local view_node = instance.scroll.view_node + local is_stencil = gui.get_clipping_mode(view_node) == gui.CLIPPING_MODE_STENCIL + + properties_panel:add_checkbox("ui_clipping", is_stencil, function(value) + gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE) + end) + + properties_panel:add_slider("ui_scroll", 0, function(value) + instance.scroll:scroll_to_percent(vmath.vector3(0, 1 - value, 0), true) + end) + end, + get_debug_info = function(instance) + ---@cast instance data_list_cache_with_component + local data_list = instance.data_list + + local data = data_list:get_data() + local info = "" + info = info .. "Data length: " .. #data .. "\n" + info = info .. "First Visual Index: " .. data_list.top_index .. "\n" + info = info .. "Last Visual Index: " .. data_list.last_index .. "\n" + + local s = instance.scroll + info = info .. "\n" + info = info .. "View Size Y: " .. gui.get(s.view_node, "size.y") .. "\n" + info = info .. "Content Size Y: " .. gui.get(s.content_node, "size.y") .. "\n" + info = info .. "Content position Y: " .. math.ceil(s.position.y) .. "\n" + info = info .. "Content Range Y: " .. s.available_pos.y .. " - " .. s.available_pos.w .. "\n" + + return info + end + }, + } +end + +return M \ No newline at end of file diff --git a/example/examples/druid_examples.lua b/example/examples/druid_examples.lua new file mode 100644 index 0000000..6aa7f9b --- /dev/null +++ b/example/examples/druid_examples.lua @@ -0,0 +1,49 @@ +local intro_examples = require("example.examples.intro.examples_list") +local basic_examples = require("example.examples.basic.examples_list") +local data_list_examples = require("example.examples.data_list.examples_list") +local layout_examples = require("example.examples.layout.examples_list") +local gamepad_examples = require("example.examples.gamepad.examples_list") +local window_examples = require("example.examples.windows.examples_list") +local panthera_examples = require("example.examples.panthera.examples_list") + +local M = {} + +---@class druid.examples +---@field example_name_id string +---@field examples_list druid.example.data[] + +---@class druid.example.data +---@field name_id string +---@field root string +---@field template string|nil +---@field code_url string|nil @URL to the source code +---@field component_class druid.base_component +---@field on_create fun(instance: druid.base_component, output_list: output_list)|nil +---@field get_debug_info (fun(instance: druid.base_component):string)|nil +---@field properties_control (fun(instance: druid.base_component, properties_panel: properties_panel))|nil +---@field information_text_id string|nil + + +local function add_examples(examples, example_name_id, examples_list) + table.insert(examples, { + example_name_id = example_name_id, + examples_list = examples_list + }) +end + +---@return druid.examples[] +function M.get_examples() + local examples = {} + + add_examples(examples, "ui_examples_intro", intro_examples.get_examples()) + add_examples(examples, "ui_examples_basic", basic_examples.get_examples()) + add_examples(examples, "ui_examples_data_list", data_list_examples.get_examples()) + add_examples(examples, "ui_examples_layout", layout_examples.get_examples()) + add_examples(examples, "ui_examples_gamepad", gamepad_examples.get_examples()) + add_examples(examples, "ui_examples_window", window_examples.get_examples()) + add_examples(examples, "ui_examples_panthera", panthera_examples.get_examples()) + + return examples +end + +return M \ No newline at end of file diff --git a/example/examples/gamepad/examples_list.lua b/example/examples/gamepad/examples_list.lua new file mode 100644 index 0000000..aba51c0 --- /dev/null +++ b/example/examples/gamepad/examples_list.lua @@ -0,0 +1,72 @@ +local M = {} + +---@return druid.example.data[] +function M.get_examples() + ---@type druid.example.data[] + return { + { + name_id = "ui_example_gamepad_tester", + information_text_id = "ui_example_gamepad_tester_description", + template = "gamepad_tester", + root = "gamepad_tester/root", + code_url = "example/examples/gamepad/gamepad_tester/gamepad_tester.lua", + component_class = require("example.examples.gamepad.gamepad_tester.gamepad_tester"), + on_create = function(instance, output_list) + ---@cast instance gamepad_tester + instance.button_left.on_click:subscribe(function() + output_list:add_log_text("Button Left Clicked") + end) + instance.button_right.on_click:subscribe(function() + output_list:add_log_text("Button Right Clicked") + end) + instance.button_up.on_click:subscribe(function() + output_list:add_log_text("Button Up Clicked") + end) + instance.button_down.on_click:subscribe(function() + output_list:add_log_text("Button Down Clicked") + end) + instance.button_a.on_click:subscribe(function() + output_list:add_log_text("Button A Clicked") + end) + instance.button_b.on_click:subscribe(function() + output_list:add_log_text("Button B Clicked") + end) + instance.button_x.on_click:subscribe(function() + output_list:add_log_text("Button X Clicked") + end) + instance.button_y.on_click:subscribe(function() + output_list:add_log_text("Button Y Clicked") + end) + instance.button_back.on_click:subscribe(function() + output_list:add_log_text("Button Back Clicked") + end) + instance.button_start.on_click:subscribe(function() + output_list:add_log_text("Button Start Clicked") + end) + instance.button_l1.on_click:subscribe(function() + output_list:add_log_text("Button L1 Clicked") + end) + instance.button_r1.on_click:subscribe(function() + output_list:add_log_text("Button R1 Clicked") + end) + instance.button_stick_left.on_click:subscribe(function() + output_list:add_log_text("Button Stick Left Clicked") + end) + instance.button_stick_right.on_click:subscribe(function() + output_list:add_log_text("Button Stick Right Clicked") + end) + end, + }, + + { + name_id = "ui_example_on_screen_control", + information_text_id = "ui_example_on_screen_control_description", + template = "on_screen_control", + root = "on_screen_control/root", + code_url = "example/examples/gamepad/on_screen_control/on_screen_control.lua", + component_class = require("example.examples.gamepad.on_screen_control.on_screen_control"), + } + } +end + +return M \ No newline at end of file diff --git a/example/examples/gamepad/gamepad_tester/gamepad_tester.gui b/example/examples/gamepad/gamepad_tester/gamepad_tester.gui new file mode 100644 index 0000000..a6904ed --- /dev/null +++ b/example/examples/gamepad/gamepad_tester/gamepad_tester.gui @@ -0,0 +1,725 @@ +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "root" + inherit_alpha: true + visible: false +} +nodes { + size { + x: 200.0 + y: 100.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "gamepad" + parent: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -200.0 + y: -300.0 + } + type: TYPE_TEMPLATE + id: "stick_left" + parent: "gamepad" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_stick.gui" +} +nodes { + type: TYPE_BOX + id: "stick_left/root" + parent: "stick_left" + template_node_child: true +} +nodes { + type: TYPE_PIE + id: "stick_left/background_mask" + parent: "stick_left/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_left/background" + parent: "stick_left/background_mask" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_left/stick_root" + parent: "stick_left/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_left/stick_shadow" + parent: "stick_left/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_left/stick" + parent: "stick_left/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_left/dot_1" + parent: "stick_left/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_left/dot_2" + parent: "stick_left/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_left/dot_3" + parent: "stick_left/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_left/dot_4" + parent: "stick_left/stick" + template_node_child: true +} +nodes { + position { + x: 200.0 + y: -300.0 + } + type: TYPE_TEMPLATE + id: "stick_right" + parent: "gamepad" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_stick.gui" +} +nodes { + type: TYPE_BOX + id: "stick_right/root" + parent: "stick_right" + template_node_child: true +} +nodes { + type: TYPE_PIE + id: "stick_right/background_mask" + parent: "stick_right/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_right/background" + parent: "stick_right/background_mask" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_right/stick_root" + parent: "stick_right/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_right/stick_shadow" + parent: "stick_right/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_right/stick" + parent: "stick_right/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_right/dot_1" + parent: "stick_right/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_right/dot_2" + parent: "stick_right/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_right/dot_3" + parent: "stick_right/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "stick_right/dot_4" + parent: "stick_right/stick" + template_node_child: true +} +nodes { + position { + x: -330.0 + y: 24.0 + } + size { + x: 290.0 + y: 290.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "dpad" + parent: "gamepad" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -100.0 + } + type: TYPE_TEMPLATE + id: "button_left" + parent: "dpad" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + type: TYPE_BOX + id: "button_left/button" + parent: "button_left" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "button_left/text" + parent: "button_left/button" + overridden_fields: 45 + overridden_fields: 46 + template_node_child: true + enabled: false + visible: false +} +nodes { + rotation { + z: 180.0 + } + type: TYPE_BOX + id: "button_left/icon" + parent: "button_left/button" + overridden_fields: 2 + template_node_child: true +} +nodes { + position { + y: 100.0 + } + type: TYPE_TEMPLATE + id: "button_up" + parent: "dpad" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + type: TYPE_BOX + id: "button_up/button" + parent: "button_up" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "button_up/text" + parent: "button_up/button" + overridden_fields: 45 + overridden_fields: 46 + template_node_child: true + enabled: false + visible: false +} +nodes { + rotation { + z: 90.0 + } + type: TYPE_BOX + id: "button_up/icon" + parent: "button_up/button" + overridden_fields: 2 + template_node_child: true +} +nodes { + position { + x: 100.0 + } + type: TYPE_TEMPLATE + id: "button_right" + parent: "dpad" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + type: TYPE_BOX + id: "button_right/button" + parent: "button_right" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "button_right/text" + parent: "button_right/button" + overridden_fields: 45 + overridden_fields: 46 + template_node_child: true + enabled: false + visible: false +} +nodes { + type: TYPE_BOX + id: "button_right/icon" + parent: "button_right/button" + template_node_child: true +} +nodes { + position { + y: -100.0 + } + type: TYPE_TEMPLATE + id: "button_down" + parent: "dpad" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + type: TYPE_BOX + id: "button_down/button" + parent: "button_down" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "button_down/text" + parent: "button_down/button" + overridden_fields: 45 + overridden_fields: 46 + template_node_child: true + enabled: false + visible: false +} +nodes { + rotation { + z: -90.0 + } + type: TYPE_BOX + id: "button_down/icon" + parent: "button_down/button" + overridden_fields: 2 + template_node_child: true +} +nodes { + position { + x: 330.0 + y: 24.0 + } + size { + x: 290.0 + y: 290.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "buttons" + parent: "gamepad" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -100.0 + } + type: TYPE_TEMPLATE + id: "button_x" + parent: "buttons" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + type: TYPE_BOX + id: "button_x/button" + parent: "button_x" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "button_x/text" + parent: "button_x/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_x/icon" + parent: "button_x/button" + overridden_fields: 45 + template_node_child: true + enabled: false +} +nodes { + position { + y: 100.0 + } + type: TYPE_TEMPLATE + id: "button_y" + parent: "buttons" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + type: TYPE_BOX + id: "button_y/button" + parent: "button_y" + template_node_child: true +} +nodes { + type: TYPE_TEXT + text: "Y" + id: "button_y/text" + parent: "button_y/button" + overridden_fields: 8 + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_y/icon" + parent: "button_y/button" + overridden_fields: 45 + template_node_child: true + enabled: false +} +nodes { + position { + x: 100.0 + } + type: TYPE_TEMPLATE + id: "button_b" + parent: "buttons" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + type: TYPE_BOX + id: "button_b/button" + parent: "button_b" + template_node_child: true +} +nodes { + type: TYPE_TEXT + text: "B" + id: "button_b/text" + parent: "button_b/button" + overridden_fields: 8 + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_b/icon" + parent: "button_b/button" + overridden_fields: 45 + template_node_child: true + enabled: false +} +nodes { + position { + y: -100.0 + } + type: TYPE_TEMPLATE + id: "button_a" + parent: "buttons" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + type: TYPE_BOX + id: "button_a/button" + parent: "button_a" + template_node_child: true +} +nodes { + type: TYPE_TEXT + text: "A" + id: "button_a/text" + parent: "button_a/button" + overridden_fields: 8 + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_a/icon" + parent: "button_a/button" + overridden_fields: 45 + template_node_child: true + enabled: false +} +nodes { + position { + y: 160.0 + } + size { + x: 290.0 + y: 290.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "buttons_system" + parent: "gamepad" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -110.0 + } + type: TYPE_TEMPLATE + id: "button_back" + parent: "buttons_system" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + size { + x: 180.0 + y: 90.0 + } + type: TYPE_BOX + id: "button_back/button" + parent: "button_back" + overridden_fields: 4 + template_node_child: true +} +nodes { + type: TYPE_TEXT + text: "Back" + id: "button_back/text" + parent: "button_back/button" + overridden_fields: 8 + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_back/icon" + parent: "button_back/button" + overridden_fields: 45 + template_node_child: true + enabled: false +} +nodes { + position { + x: 110.0 + } + type: TYPE_TEMPLATE + id: "button_start" + parent: "buttons_system" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + size { + x: 180.0 + y: 90.0 + } + type: TYPE_BOX + id: "button_start/button" + parent: "button_start" + overridden_fields: 4 + template_node_child: true +} +nodes { + type: TYPE_TEXT + text: "Start" + id: "button_start/text" + parent: "button_start/button" + overridden_fields: 8 + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_start/icon" + parent: "button_start/button" + overridden_fields: 45 + template_node_child: true + enabled: false +} +nodes { + position { + x: -330.0 + y: 360.0 + } + size { + x: 200.0 + y: 200.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "button_left_bump" + parent: "gamepad" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -3.0 + y: -57.0 + } + type: TYPE_TEMPLATE + id: "button_l1" + parent: "button_left_bump" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + size { + x: 180.0 + y: 90.0 + } + type: TYPE_BOX + id: "button_l1/button" + parent: "button_l1" + overridden_fields: 4 + template_node_child: true +} +nodes { + type: TYPE_TEXT + text: "L1" + id: "button_l1/text" + parent: "button_l1/button" + overridden_fields: 8 + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_l1/icon" + parent: "button_l1/button" + overridden_fields: 45 + template_node_child: true + enabled: false +} +nodes { + position { + y: 60.0 + } + type: TYPE_TEMPLATE + id: "button_l2" + parent: "button_left_bump" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_trigger.gui" +} +nodes { + type: TYPE_BOX + id: "button_l2/button" + parent: "button_l2" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_l2/fill" + parent: "button_l2/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + text: "L2" + id: "button_l2/text" + parent: "button_l2/button" + overridden_fields: 8 + template_node_child: true +} +nodes { + position { + x: 330.0 + y: 360.0 + } + size { + x: 200.0 + y: 200.0 + } + type: TYPE_BOX + texture: "druid/empty" + id: "button_right_bump" + parent: "gamepad" + inherit_alpha: true + visible: false +} +nodes { + position { + y: -60.0 + } + type: TYPE_TEMPLATE + id: "button_r1" + parent: "button_right_bump" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + size { + x: 180.0 + y: 90.0 + } + type: TYPE_BOX + id: "button_r1/button" + parent: "button_r1" + overridden_fields: 4 + template_node_child: true +} +nodes { + type: TYPE_TEXT + text: "R1" + id: "button_r1/text" + parent: "button_r1/button" + overridden_fields: 8 + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_r1/icon" + parent: "button_r1/button" + overridden_fields: 45 + template_node_child: true + enabled: false +} +nodes { + position { + y: 60.0 + } + type: TYPE_TEMPLATE + id: "button_r2" + parent: "button_right_bump" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_trigger.gui" +} +nodes { + type: TYPE_BOX + id: "button_r2/button" + parent: "button_r2" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_r2/fill" + parent: "button_r2/button" + template_node_child: true +} +nodes { + type: TYPE_TEXT + text: "R2" + id: "button_r2/text" + parent: "button_r2/button" + overridden_fields: 8 + template_node_child: true +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/gamepad/gamepad_tester/gamepad_tester.lua b/example/examples/gamepad/gamepad_tester/gamepad_tester.lua new file mode 100644 index 0000000..af59cab --- /dev/null +++ b/example/examples/gamepad/gamepad_tester/gamepad_tester.lua @@ -0,0 +1,87 @@ +local component = require("druid.component") +local progress = require("druid.extended.progress") + +---@class gamepad_tester: druid.base_component +---@field root node +---@field buttons druid.button +---@field buttons_system druid.button +---@field button_left_bump druid.button +---@field button_right_bump druid.button +---@field druid druid_instance +local M = component.create("gamepad_tester") + +local STICK_DISTANCE = 50 + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self:get_node("root") + + self.button_left = self.druid:new_button("button_left/button"):set_key_trigger("gamepad_lpad_left") + self.button_right = self.druid:new_button("button_right/button"):set_key_trigger("gamepad_lpad_right") + self.button_up = self.druid:new_button("button_up/button"):set_key_trigger("gamepad_lpad_up") + self.button_down = self.druid:new_button("button_down/button"):set_key_trigger("gamepad_lpad_down") + + self.button_x = self.druid:new_button("button_x/button"):set_key_trigger("gamepad_rpad_left") + self.button_b = self.druid:new_button("button_b/button"):set_key_trigger("gamepad_rpad_right") + self.button_y = self.druid:new_button("button_y/button"):set_key_trigger("gamepad_rpad_up") + self.button_a = self.druid:new_button("button_a/button"):set_key_trigger("gamepad_rpad_down") + + self.button_l1 = self.druid:new_button("button_l1/button"):set_key_trigger("gamepad_lshoulder") + self.button_r1 = self.druid:new_button("button_r1/button"):set_key_trigger("gamepad_rshoulder") + + self.button_stick_left = self.druid:new_button("stick_left/root"):set_key_trigger("gamepad_lstick_click") + self.button_stick_right = self.druid:new_button("stick_right/root"):set_key_trigger("gamepad_rstick_click") + + self.button_start = self.druid:new_button("button_start/button"):set_key_trigger("gamepad_start") + self.button_back = self.druid:new_button("button_back/button"):set_key_trigger("gamepad_back") + + self.trigger_l2 = self.druid:new(progress, "button_l2/fill", "x", 0) --[[@as druid.progress]] + self.trigger_r2 = self.druid:new(progress, "button_r2/fill", "x", 0) --[[@as druid.progress]] + + self.stick_left = self:get_node("stick_left/stick_root") + self.stick_right = self:get_node("stick_right/stick_root") +end + + +function M:on_input(action_id, action) + if action_id == hash("gamepad_ltrigger") then + self.trigger_l2:set_to(action.value) + end + if action_id == hash("gamepad_rtrigger") then + self.trigger_r2:set_to(action.value) + end + + -- Left Stick + if action_id == hash("gamepad_lstick_left") then + gui.set(self.stick_left, "position.x", -action.value * STICK_DISTANCE) + end + if action_id == hash("gamepad_lstick_right") then + gui.set(self.stick_left, "position.x", action.value * STICK_DISTANCE) + end + if action_id == hash("gamepad_lstick_up") then + gui.set(self.stick_left, "position.y", action.value * STICK_DISTANCE) + end + if action_id == hash("gamepad_lstick_down") then + gui.set(self.stick_left, "position.y", -action.value * STICK_DISTANCE) + end + + -- Right Stick + if action_id == hash("gamepad_rstick_left") then + gui.set(self.stick_right, "position.x", -action.value * STICK_DISTANCE) + end + if action_id == hash("gamepad_rstick_right") then + gui.set(self.stick_right, "position.x", action.value * STICK_DISTANCE) + end + if action_id == hash("gamepad_rstick_up") then + gui.set(self.stick_right, "position.y", action.value * STICK_DISTANCE) + end + if action_id == hash("gamepad_rstick_down") then + gui.set(self.stick_right, "position.y", -action.value * STICK_DISTANCE) + end +end + + +return M diff --git a/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui b/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui new file mode 100644 index 0000000..a7f8b55 --- /dev/null +++ b/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui @@ -0,0 +1,202 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 90.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.5 + y: 1.5 + z: 1.0 + w: 1.0 + } + size { + x: 40.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "X" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/icon_arrow" + id: "icon" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/gamepad/gamepad_tester/templates/gamepad_stick.gui b/example/examples/gamepad/gamepad_tester/templates/gamepad_stick.gui new file mode 100644 index 0000000..ffa86d2 --- /dev/null +++ b/example/examples/gamepad/gamepad_tester/templates/gamepad_stick.gui @@ -0,0 +1,191 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 12.0 + y: 12.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_BOX + texture: "druid/empty" + id: "root" + inherit_alpha: true +} +nodes { + size { + x: 256.0 + y: 256.0 + } + type: TYPE_PIE + id: "background_mask" + parent: "root" + inherit_alpha: true + perimeterVertices: 64 + clipping_mode: CLIPPING_MODE_STENCIL + clipping_visible: false + size_mode: SIZE_MODE_AUTO +} +nodes { + size { + x: 256.0 + y: 256.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_BOX + texture: "druid/pixel" + id: "background" + parent: "background_mask" + inherit_alpha: true + slice9 { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } +} +nodes { + type: TYPE_BOX + texture: "druid/empty" + id: "stick_root" + parent: "root" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + scale { + x: 2.0 + y: 2.0 + } + color { + x: 0.0 + y: 0.0 + z: 0.0 + } + type: TYPE_BOX + texture: "druid/ui_circle_64_blur_8" + id: "stick_shadow" + parent: "stick_root" + inherit_alpha: true + alpha: 0.25 + size_mode: SIZE_MODE_AUTO +} +nodes { + scale { + x: 2.0 + y: 2.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + } + type: TYPE_BOX + texture: "druid/ui_circle_64" + id: "stick" + parent: "stick_root" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: -22.0 + } + scale { + x: 0.5 + y: 0.5 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_BOX + texture: "druid/ui_circle_16" + id: "dot_1" + parent: "stick" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: 22.0 + } + scale { + x: 0.5 + y: 0.5 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_BOX + texture: "druid/ui_circle_16" + id: "dot_2" + parent: "stick" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: 22.0 + } + scale { + x: 0.5 + y: 0.5 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_BOX + texture: "druid/ui_circle_16" + id: "dot_3" + parent: "stick" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: -22.0 + } + scale { + x: 0.5 + y: 0.5 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_BOX + texture: "druid/ui_circle_16" + id: "dot_4" + parent: "stick" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/gamepad/gamepad_tester/templates/gamepad_trigger.gui b/example/examples/gamepad/gamepad_tester/templates/gamepad_trigger.gui new file mode 100644 index 0000000..ffe202d --- /dev/null +++ b/example/examples/gamepad/gamepad_tester/templates/gamepad_trigger.gui @@ -0,0 +1,202 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 180.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -90.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 180.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "fill" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + adjust_mode: ADJUST_MODE_FIT + parent: "button" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.5 + y: 1.5 + z: 1.0 + w: 1.0 + } + size { + x: 40.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "X" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/gamepad/on_screen_control/on_screen_control.gui b/example/examples/gamepad/on_screen_control/on_screen_control.gui new file mode 100644 index 0000000..63c4bf5 --- /dev/null +++ b/example/examples/gamepad/on_screen_control/on_screen_control.gui @@ -0,0 +1,227 @@ +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + } + type: TYPE_BOX + texture: "druid/ui_circle_64" + id: "root" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } +} +nodes { + size { + x: 128.0 + y: 128.0 + } + color { + x: 0.902 + y: 0.875 + z: 0.624 + } + type: TYPE_BOX + texture: "druid/ui_circle_64" + id: "character" + parent: "root" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } +} +nodes { + position { + x: -25.0 + y: 21.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + } + type: TYPE_BOX + texture: "druid/ui_circle_32" + id: "eye_left" + parent: "character" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: -8.0 + y: 8.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_BOX + texture: "druid/ui_circle_8" + id: "eye_left_blick" + parent: "eye_left" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: 25.0 + y: 21.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + } + type: TYPE_BOX + texture: "druid/ui_circle_32" + id: "eye_right" + parent: "character" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: -8.0 + y: 8.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_BOX + texture: "druid/ui_circle_8" + id: "eye_right_blick" + parent: "eye_right" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: -300.0 + } + type: TYPE_TEMPLATE + id: "on_screen_input" + parent: "root" + inherit_alpha: true + template: "/example/examples/gamepad/on_screen_control/on_screen_input.gui" +} +nodes { + type: TYPE_BOX + id: "on_screen_input/root" + parent: "on_screen_input" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "on_screen_input/on_screen_stick" + parent: "on_screen_input/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/on_screen_stick/root" + parent: "on_screen_input/on_screen_stick" + template_node_child: true +} +nodes { + type: TYPE_PIE + id: "on_screen_input/on_screen_stick/background_mask" + parent: "on_screen_input/on_screen_stick/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/on_screen_stick/background" + parent: "on_screen_input/on_screen_stick/background_mask" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/on_screen_stick/stick_root" + parent: "on_screen_input/on_screen_stick/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/on_screen_stick/stick_shadow" + parent: "on_screen_input/on_screen_stick/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/on_screen_stick/stick" + parent: "on_screen_input/on_screen_stick/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/on_screen_stick/dot_1" + parent: "on_screen_input/on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/on_screen_stick/dot_2" + parent: "on_screen_input/on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/on_screen_stick/dot_3" + parent: "on_screen_input/on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/on_screen_stick/dot_4" + parent: "on_screen_input/on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/on_screen_button" + parent: "on_screen_input/root" + template_node_child: true +} +nodes { + type: TYPE_TEMPLATE + id: "on_screen_input/button_action" + parent: "on_screen_input/on_screen_button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/button_action/button" + parent: "on_screen_input/button_action" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "on_screen_input/button_action/text" + parent: "on_screen_input/button_action/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_input/button_action/icon" + parent: "on_screen_input/button_action/button" + template_node_child: true +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/gamepad/on_screen_control/on_screen_control.lua b/example/examples/gamepad/on_screen_control/on_screen_control.lua new file mode 100644 index 0000000..321c78f --- /dev/null +++ b/example/examples/gamepad/on_screen_control/on_screen_control.lua @@ -0,0 +1,59 @@ +local component = require("druid.component") +local on_screen_input = require("example.examples.gamepad.on_screen_control.on_screen_input") + +---@class on_screen_control: druid.base_component +---@field druid druid_instance +---@field on_screen_input on_screen_input +local M = component.create("on_screen_control") + +local CHARACTER_SPEED = 700 + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.character = self:get_node("character") + self.character_position = gui.get_position(self.character) + + self.character_eye_left = self:get_node("eye_left") + self.character_eye_right = self:get_node("eye_right") + + self.on_screen_input = self.druid:new(on_screen_input, "on_screen_input") --[[@as on_screen_input]] + + self.on_screen_input.on_action:subscribe(self.on_action_button, self) + self.on_screen_input.on_movement:subscribe(self.on_movement, self) + self.on_screen_input.on_movement_stop:subscribe(self.on_movement_stop, self) +end + + +function M:on_action_button() + gui.set_scale(self.character, vmath.vector3(1.5)) + gui.animate(self.character, gui.PROP_SCALE, vmath.vector3(1), gui.EASING_INSINE, 0.2) +end + + +function M:on_movement(x, y, dt) + self.character_position.x = self.character_position.x + x * CHARACTER_SPEED * dt + self.character_position.y = self.character_position.y + y * CHARACTER_SPEED * dt + + -- Clamp to -436, 436, area of the screen + self.character_position.x = math.min(436, math.max(-436, self.character_position.x)) + self.character_position.y = math.min(436, math.max(-436, self.character_position.y)) + + gui.set_position(self.character, self.character_position) + + -- Adjust angle of the eyes + local angle = math.deg(math.atan2(y, x)) - 135 + gui.set(self.character_eye_left, "euler.z", angle) + gui.set(self.character_eye_right, "euler.z", angle) +end + + +function M:on_movement_stop() + gui.set(self.character_eye_left, "euler.z", 0) + gui.set(self.character_eye_right, "euler.z", 0) +end + + +return M diff --git a/example/examples/gamepad/on_screen_control/on_screen_input.gui b/example/examples/gamepad/on_screen_control/on_screen_input.gui new file mode 100644 index 0000000..b1d3488 --- /dev/null +++ b/example/examples/gamepad/on_screen_control/on_screen_input.gui @@ -0,0 +1,132 @@ +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 400.0 + } + type: TYPE_BOX + id: "root" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -300.0 + } + type: TYPE_TEMPLATE + id: "on_screen_stick" + parent: "root" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_stick.gui" +} +nodes { + size { + x: 400.0 + y: 400.0 + } + type: TYPE_BOX + id: "on_screen_stick/root" + parent: "on_screen_stick" + overridden_fields: 4 + template_node_child: true +} +nodes { + type: TYPE_PIE + id: "on_screen_stick/background_mask" + parent: "on_screen_stick/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_stick/background" + parent: "on_screen_stick/background_mask" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_stick/stick_root" + parent: "on_screen_stick/root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_stick/stick_shadow" + parent: "on_screen_stick/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_stick/stick" + parent: "on_screen_stick/stick_root" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_stick/dot_1" + parent: "on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_stick/dot_2" + parent: "on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_stick/dot_3" + parent: "on_screen_stick/stick" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "on_screen_stick/dot_4" + parent: "on_screen_stick/stick" + template_node_child: true +} +nodes { + position { + x: 300.0 + } + size { + x: 400.0 + y: 400.0 + } + type: TYPE_BOX + id: "on_screen_button" + parent: "root" + inherit_alpha: true + visible: false +} +nodes { + type: TYPE_TEMPLATE + id: "button_action" + parent: "on_screen_button" + inherit_alpha: true + template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui" +} +nodes { + type: TYPE_BOX + id: "button_action/button" + parent: "button_action" + template_node_child: true +} +nodes { + type: TYPE_TEXT + id: "button_action/text" + parent: "button_action/button" + template_node_child: true +} +nodes { + type: TYPE_BOX + id: "button_action/icon" + parent: "button_action/button" + overridden_fields: 45 + template_node_child: true + enabled: false +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/gamepad/on_screen_control/on_screen_input.lua b/example/examples/gamepad/on_screen_control/on_screen_input.lua new file mode 100644 index 0000000..41d1d21 --- /dev/null +++ b/example/examples/gamepad/on_screen_control/on_screen_input.lua @@ -0,0 +1,107 @@ +local const = require("druid.const") +local event = require("druid.event") +local helper = require("druid.helper") +local component = require("druid.component") + +---@class on_screen_input: druid.base_component +---@field druid druid_instance +---@field on_action druid.event @() +---@field on_movement druid.event @(x: number, y: number, dt: number) X/Y values are in range -1..1 +---@field on_movement_stop druid.event @() +local M = component.create("on_screen_input") + +local STICK_DISTANCE = 80 + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.button_action = self:get_node("on_screen_button") + self.on_screen_control = self:get_node("on_screen_stick/root") + + self.stick_root = self:get_node("on_screen_stick/stick_root") + self.stick_position = gui.get_position(self.stick_root) + + self.on_action = event() + self.on_movement = event() + self.on_movement_stop = event() + + self.is_multitouch = helper.is_multitouch_supported() +end + + +---@param action_id hash +---@param action action +function M:on_input(action_id, action) + if self.is_multitouch then + if action_id == const.ACTION_MULTITOUCH then + for _, touch in ipairs(action.touch) do + self:process_touch(touch) + end + end + else + if action_id == const.ACTION_TOUCH then + self:process_touch(action) + end + end + + return false +end + + +---@param action action|touch +function M:process_touch(action) + if action.pressed and gui.pick_node(self.button_action, action.x, action.y) then + self.on_action:trigger() + + gui.animate(self.button_action, gui.PROP_SCALE, vmath.vector3(1.2), gui.EASING_OUTSINE, 0.1, 0, function() + gui.animate(self.button_action, gui.PROP_SCALE, vmath.vector3(1), gui.EASING_INSINE, 0.2, 0.05) + end) + end + + if gui.pick_node(self.on_screen_control, action.x, action.y) then + self._is_stick_drag = action.id or true + end + + local is_the_same_touch_id = not action.id or action.id == self._is_stick_drag + if self._is_stick_drag and is_the_same_touch_id then + -- action.dx and action.dy are broken inside touches for some reason, manual calculations seems fine + local dx = action.x - (self._prev_x or action.x) + local dy = action.y - (self._prev_y or action.y) + self._prev_x = action.x + self._prev_y = action.y + + self.stick_position.x = self.stick_position.x + dx + self.stick_position.y = self.stick_position.y + dy + + -- Limit to STICK_DISTANCE + local length = vmath.length(self.stick_position) + if length > STICK_DISTANCE then + self.stick_position.x = self.stick_position.x / length * STICK_DISTANCE + self.stick_position.y = self.stick_position.y / length * STICK_DISTANCE + end + + gui.set_position(self.stick_root, self.stick_position) + end + + if action.released and is_the_same_touch_id then + self._is_stick_drag = false + self.stick_position.x = 0 + self.stick_position.y = 0 + self._prev_x = nil + self._prev_y = nil + gui.animate(self.stick_root, gui.PROP_POSITION, self.stick_position, gui.EASING_OUTBACK, 0.3) + self.on_movement_stop:trigger() + end +end + + +function M:update(dt) + if self.stick_position.x ~= 0 or self.stick_position.y ~= 0 then + self.on_movement:trigger(self.stick_position.x / STICK_DISTANCE, self.stick_position.y / STICK_DISTANCE, dt) + end +end + + +return M diff --git a/example/examples/intro/examples_list.lua b/example/examples/intro/examples_list.lua new file mode 100644 index 0000000..0366886 --- /dev/null +++ b/example/examples/intro/examples_list.lua @@ -0,0 +1,18 @@ +local helper = require "druid.helper" +local M = {} + +function M.get_examples() + ---@type druid.example.data[] + return { + { + name_id = "ui_example_intro", + information_text_id = "ui_example_intro_description", + template = "intro", + root = "intro/root", + code_url = "example/examples/intro/intro/intro.lua", + component_class = require("example.examples.intro.intro.intro"), + }, + } +end + +return M \ No newline at end of file diff --git a/example/examples/intro/intro/intro.gui b/example/examples/intro/intro/intro.gui new file mode 100644 index 0000000..834e285 --- /dev/null +++ b/example/examples/intro/intro/intro.gui @@ -0,0 +1,257 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +fonts { + name: "text_regular" + font: "/example/assets/fonts/text_regular.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +textures { + name: "druid_logo" + texture: "/example/assets/druid_logo.atlas" +} +nodes { + size { + x: 600.0 + y: 1000.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + } + type: TYPE_BOX + texture: "druid/ui_circle_64" + id: "root" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } +} +nodes { + position { + x: -180.0 + y: 375.0 + } + type: TYPE_BOX + texture: "druid_logo/icon_druid" + id: "icon_druid_left" + parent: "root" + layer: "druid_logo" + inherit_alpha: true + alpha: 0.75 + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: 180.0 + y: 375.0 + } + type: TYPE_BOX + texture: "druid_logo/icon_druid" + id: "icon_druid_right" + parent: "root" + layer: "druid_logo" + inherit_alpha: true + alpha: 0.75 + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: 255.0 + } + scale { + x: 2.0 + y: 2.0 + } + size { + x: 200.0 + y: 40.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Hello!" + font: "text_bold" + id: "text_hello" + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + x: -210.0 + y: 191.0 + } + scale { + x: 0.7 + y: 0.7 + } + size { + x: 600.0 + y: 400.0 + } + color { + x: 0.525 + y: 0.525 + z: 0.525 + } + type: TYPE_TEXT + text: "Welcome to Druid Example Page\n" + "\n" + "Navigate over examples on the left\n" + "\n" + "Check example info on the right" + font: "text_bold" + id: "text_description" + pivot: PIVOT_NW + line_break: true + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + x: -210.0 + y: -189.0 + } + scale { + x: 0.7 + y: 0.7 + } + size { + x: 600.0 + y: 300.0 + } + color { + x: 0.525 + y: 0.525 + z: 0.525 + } + type: TYPE_TEXT + text: "Your donation helps me stay engaged in creating valuable projects for Defold.\n" + "\n" + "If you appreciate what I\'m doing, please consider supporting me!" + font: "text_bold" + id: "text_support" + pivot: PIVOT_W + line_break: true + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + x: -170.0 + y: -364.0 + } + type: TYPE_BOX + texture: "druid/icon_heart" + id: "icon_heart1" + parent: "root" + inherit_alpha: true + alpha: 0.75 + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: -364.0 + } + type: TYPE_BOX + texture: "druid/icon_heart" + id: "icon_heart2" + parent: "root" + inherit_alpha: true + alpha: 0.75 + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: 170.0 + y: -364.0 + } + type: TYPE_BOX + texture: "druid/icon_heart" + id: "icon_heart3" + parent: "root" + inherit_alpha: true + alpha: 0.75 + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: -450.0 + } + size { + x: 500.0 + y: 80.0 + } + type: TYPE_BOX + id: "sponsor" + parent: "root" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO + visible: false +} +nodes { + position { + x: -196.0 + y: -3.0 + } + type: TYPE_BOX + texture: "druid_logo/sponsor_github" + id: "sponsor_github" + parent: "sponsor" + layer: "druid_logo" + inherit_alpha: true + alpha: 0.75 + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: 21.0 + y: -3.0 + } + type: TYPE_BOX + texture: "druid_logo/sponsor_coffee" + id: "sponsor_coffee" + parent: "sponsor" + layer: "druid_logo" + inherit_alpha: true + alpha: 0.75 + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: 217.0 + y: -3.0 + } + type: TYPE_BOX + texture: "druid_logo/sponsor_kofi" + id: "sponsor_kofi" + parent: "sponsor" + layer: "druid_logo" + inherit_alpha: true + alpha: 0.75 + size_mode: SIZE_MODE_AUTO +} +layers { + name: "druid_logo" +} +layers { + name: "text_regular" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/intro/intro/intro.lua b/example/examples/intro/intro/intro.lua new file mode 100644 index 0000000..4473ba1 --- /dev/null +++ b/example/examples/intro/intro/intro.lua @@ -0,0 +1,40 @@ +local component = require("druid.component") +local rich_text = require("druid.custom.rich_text.rich_text") +local layout = require("druid.extended.layout") +local panthera = require("panthera.panthera") +local intro_panthera = require("example.examples.intro.intro.intro_panthera") + +---@class intro: druid.base_component +---@field druid druid_instance +---@field root node +local M = component.create("intro") + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + self.root = self:get_node("root") + + self.druid:new(rich_text, "text_hello", "Hello!") + + self.druid:new_button("sponsor_github", self.open_link, "https://github.com/sponsors/insality") + self.druid:new_button("sponsor_coffee", self.open_link, "https://www.buymeacoffee.com/insality") + self.druid:new_button("sponsor_kofi", self.open_link, "https://ko-fi.com/insality") + + self.druid:new(layout, "sponsor") + :add("sponsor_github") + :add("sponsor_coffee") + :add("sponsor_kofi") + :set_margin(8, 0) + + self.animation = panthera.create_gui(intro_panthera, self:get_template(), nodes) + panthera.play(self.animation, "idle", { is_loop = true }) +end + + +function M:open_link(link) + sys.open_url(link, { target = "_blank" }) +end + + +return M diff --git a/example/examples/intro/intro/intro_panthera.lua b/example/examples/intro/intro/intro_panthera.lua new file mode 100644 index 0000000..4574b4d --- /dev/null +++ b/example/examples/intro/intro/intro_panthera.lua @@ -0,0 +1,560 @@ +return { + version = 1, + format = "json", + type = "animation_editor", + data = { + metadata = { + fps = 60, + layers = { + { + name = "druid_logo", + color = "73E84C", + }, + { + name = "text_regular", + color = "90D2F6", + }, + }, + gui_path = "/example/examples/intro/intro/intro.gui", + settings = { + font_size = 40, + }, + gizmo_steps = { + }, + }, + nodes = { + }, + animations = { + { + animation_id = "default", + duration = 1, + animation_keys = { + }, + }, + { + animation_id = "idle", + duration = 10, + animation_keys = { + { + node_id = "icon_druid_left", + property_id = "position_y", + duration = 2, + easing = "outsine", + start_value = 375, + key_type = "tween", + end_value = 370, + }, + { + node_id = "icon_druid_right", + property_id = "position_y", + duration = 2, + easing = "outsine", + start_value = 375, + key_type = "tween", + end_value = 370, + }, + { + end_value = 0.737, + node_id = "icon_heart1", + property_id = "color_b", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 0.7, + }, + { + end_value = 0.38, + node_id = "icon_heart1", + property_id = "color_g", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 0.7, + }, + { + end_value = 0.941, + node_id = "icon_heart1", + property_id = "color_r", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 0.7, + }, + { + end_value = 1, + node_id = "icon_heart1", + property_id = "color_a", + duration = 0.7, + easing = "outsine", + start_value = 0.75, + key_type = "tween", + start_time = 0.7, + }, + { + end_value = 1.1, + node_id = "icon_heart1", + property_id = "scale_x", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 0.7, + }, + { + end_value = 1.1, + node_id = "icon_heart1", + property_id = "scale_y", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 0.7, + }, + { + end_value = 1.2, + node_id = "sponsor_github", + property_id = "color_a", + start_value = 0.75, + easing = "outsine", + duration = 0.7, + key_type = "tween", + start_time = 0.7, + }, + { + end_value = 0.75, + node_id = "icon_heart1", + property_id = "color_a", + duration = 1, + easing = "insine", + start_value = 1, + key_type = "tween", + start_time = 1.4, + }, + { + end_value = 1, + node_id = "icon_heart1", + property_id = "color_b", + duration = 1, + easing = "insine", + start_value = 0.737, + key_type = "tween", + start_time = 1.4, + }, + { + end_value = 1, + node_id = "icon_heart1", + property_id = "color_g", + duration = 1, + easing = "insine", + start_value = 0.38, + key_type = "tween", + start_time = 1.4, + }, + { + end_value = 1, + node_id = "icon_heart1", + property_id = "color_r", + duration = 1, + easing = "insine", + start_value = 0.941, + key_type = "tween", + start_time = 1.4, + }, + { + end_value = 1, + node_id = "icon_heart1", + property_id = "scale_x", + duration = 1, + easing = "insine", + start_value = 1.1, + key_type = "tween", + start_time = 1.4, + }, + { + end_value = 1, + node_id = "icon_heart1", + property_id = "scale_y", + duration = 1, + easing = "insine", + start_value = 1.1, + key_type = "tween", + start_time = 1.4, + }, + { + end_value = 1, + node_id = "sponsor_github", + property_id = "color_a", + start_value = 1.2, + easing = "insine", + duration = 1, + key_type = "tween", + start_time = 1.4, + }, + { + end_value = 380, + node_id = "icon_druid_left", + property_id = "position_y", + duration = 2.5, + easing = "outsine", + start_value = 370, + key_type = "tween", + start_time = 2, + }, + { + end_value = 380, + node_id = "icon_druid_right", + property_id = "position_y", + duration = 2.5, + easing = "outsine", + start_value = 370, + key_type = "tween", + start_time = 2, + }, + { + end_value = 0.353, + node_id = "icon_heart2", + property_id = "color_b", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 3.7, + }, + { + end_value = 1, + node_id = "icon_heart2", + property_id = "color_g", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 3.7, + }, + { + end_value = 1, + node_id = "icon_heart2", + property_id = "color_r", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 3.7, + }, + { + end_value = 1, + node_id = "icon_heart2", + property_id = "color_a", + duration = 0.7, + easing = "outsine", + start_value = 0.75, + key_type = "tween", + start_time = 3.7, + }, + { + end_value = 1.1, + node_id = "icon_heart2", + property_id = "scale_x", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 3.7, + }, + { + end_value = 1.1, + node_id = "icon_heart2", + property_id = "scale_y", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 3.7, + }, + { + end_value = 1.2, + node_id = "sponsor_coffee", + property_id = "color_a", + duration = 0.7, + easing = "outsine", + start_value = 0.75, + key_type = "tween", + start_time = 3.7, + }, + { + end_value = 1.2, + node_id = "icon_druid_left", + property_id = "color_a", + duration = 0.35, + easing = "outsine", + start_value = 0.75, + key_type = "tween", + start_time = 4.15, + }, + { + end_value = 1.2, + node_id = "icon_druid_right", + property_id = "color_a", + duration = 0.35, + easing = "outsine", + start_value = 0.75, + key_type = "tween", + start_time = 4.15, + }, + { + end_value = 0.75, + node_id = "icon_heart2", + property_id = "color_a", + duration = 1, + easing = "insine", + start_value = 1, + key_type = "tween", + start_time = 4.4, + }, + { + end_value = 1, + node_id = "icon_heart2", + property_id = "color_b", + duration = 1, + easing = "insine", + start_value = 0.353, + key_type = "tween", + start_time = 4.4, + }, + { + end_value = 1, + node_id = "icon_heart2", + property_id = "color_g", + duration = 1, + easing = "insine", + start_value = 1, + key_type = "tween", + start_time = 4.4, + }, + { + end_value = 1, + node_id = "icon_heart2", + property_id = "color_r", + duration = 1, + easing = "insine", + start_value = 1, + key_type = "tween", + start_time = 4.4, + }, + { + end_value = 1, + node_id = "icon_heart2", + property_id = "scale_x", + duration = 1, + easing = "insine", + start_value = 1.1, + key_type = "tween", + start_time = 4.4, + }, + { + end_value = 1, + node_id = "icon_heart2", + property_id = "scale_y", + duration = 1, + easing = "insine", + start_value = 1.1, + key_type = "tween", + start_time = 4.4, + }, + { + end_value = 1, + node_id = "sponsor_coffee", + property_id = "color_a", + duration = 1, + easing = "insine", + start_value = 1.2, + key_type = "tween", + start_time = 4.4, + }, + { + end_value = 0.75, + node_id = "icon_druid_left", + property_id = "color_a", + duration = 1.15, + easing = "outsine", + start_value = 1.2, + key_type = "tween", + start_time = 4.5, + }, + { + end_value = 0.75, + node_id = "icon_druid_right", + property_id = "color_a", + duration = 1.15, + easing = "outsine", + start_value = 1.2, + key_type = "tween", + start_time = 4.5, + }, + { + end_value = 375, + node_id = "icon_druid_left", + property_id = "position_y", + duration = 5.5, + easing = "insine", + start_value = 380, + key_type = "tween", + start_time = 4.5, + }, + { + end_value = 375, + node_id = "icon_druid_right", + property_id = "position_y", + duration = 5.5, + easing = "insine", + start_value = 380, + key_type = "tween", + start_time = 4.5, + }, + { + end_value = 0.478, + node_id = "icon_heart3", + property_id = "color_b", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 6.7, + }, + { + end_value = 0.494, + node_id = "icon_heart3", + property_id = "color_g", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 6.7, + }, + { + end_value = 1, + node_id = "icon_heart3", + property_id = "color_r", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 6.7, + }, + { + end_value = 1, + node_id = "icon_heart3", + property_id = "color_a", + duration = 0.7, + easing = "outsine", + start_value = 0.75, + key_type = "tween", + start_time = 6.7, + }, + { + end_value = 1.1, + node_id = "icon_heart3", + property_id = "scale_x", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 6.7, + }, + { + end_value = 1.1, + node_id = "icon_heart3", + property_id = "scale_y", + duration = 0.7, + easing = "outsine", + start_value = 1, + key_type = "tween", + start_time = 6.7, + }, + { + end_value = 1.2, + node_id = "sponsor_kofi", + property_id = "color_a", + duration = 0.7, + easing = "outsine", + start_value = 0.75, + key_type = "tween", + start_time = 6.7, + }, + { + end_value = 0.75, + node_id = "icon_heart3", + property_id = "color_a", + duration = 1, + easing = "insine", + start_value = 1, + key_type = "tween", + start_time = 7.4, + }, + { + end_value = 1, + node_id = "icon_heart3", + property_id = "color_b", + duration = 1, + easing = "insine", + start_value = 0.478, + key_type = "tween", + start_time = 7.4, + }, + { + end_value = 1, + node_id = "icon_heart3", + property_id = "color_g", + duration = 1, + easing = "insine", + start_value = 0.494, + key_type = "tween", + start_time = 7.4, + }, + { + end_value = 1, + node_id = "icon_heart3", + property_id = "color_r", + duration = 1, + easing = "insine", + start_value = 1, + key_type = "tween", + start_time = 7.4, + }, + { + end_value = 1, + node_id = "icon_heart3", + property_id = "scale_x", + duration = 1, + easing = "insine", + start_value = 1.1, + key_type = "tween", + start_time = 7.4, + }, + { + end_value = 1, + node_id = "icon_heart3", + property_id = "scale_y", + duration = 1, + easing = "insine", + start_value = 1.1, + key_type = "tween", + start_time = 7.4, + }, + { + end_value = 1, + node_id = "sponsor_kofi", + property_id = "color_a", + duration = 1, + easing = "insine", + start_value = 1.2, + key_type = "tween", + start_time = 7.4, + }, + }, + }, + }, + }, +} \ No newline at end of file diff --git a/example/examples/layout/basic/basic_layout.gui b/example/examples/layout/basic/basic_layout.gui new file mode 100644 index 0000000..4bb12af --- /dev/null +++ b/example/examples/layout/basic/basic_layout.gui @@ -0,0 +1,190 @@ +script: "" +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 500.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_64" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 500.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "layout" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 70.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_16" + id: "prefab" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "layout" + layer: "" + inherit_alpha: true + slice9 { + x: 8.0 + y: 8.0 + z: 8.0 + w: 8.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/layout/basic/basic_layout.lua b/example/examples/layout/basic/basic_layout.lua new file mode 100644 index 0000000..f6805e1 --- /dev/null +++ b/example/examples/layout/basic/basic_layout.lua @@ -0,0 +1,76 @@ +local helper = require("druid.helper") +local component = require("druid.component") +local layout = require("druid.extended.layout") + +---@class basic_layout: druid.base_component +---@field druid druid_instance +---@field root node +local M = component.create("basic_layout") + +local PIVOTS = { + gui.PIVOT_CENTER, + gui.PIVOT_N, + gui.PIVOT_NE, + gui.PIVOT_E, + gui.PIVOT_SE, + gui.PIVOT_S, + gui.PIVOT_SW, + gui.PIVOT_W, + gui.PIVOT_NW, +} + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self:get_node("root") + self.layout = self.druid:new(layout, "layout", "horizontal_wrap") + + self.prefab = self:get_node("prefab") + gui.set_enabled(self.prefab, false) + local default_size = gui.get_size(self.prefab) + + self.nodes = {} + + for _ = 1, 12 do + local node = gui.clone(self.prefab) + + -- Set different size for some nodes + if math.random() > 0.5 then + local size = vmath.vector3(default_size.x * 2, default_size.y, 0) + gui.set_size(node, size) + end + + -- Set random pivot point for each node + local pivot = PIVOTS[math.random(1, #PIVOTS)] + gui.set_pivot(node, pivot) + + gui.set_enabled(node, true) + self.layout:add(node) + table.insert(self.nodes, node) + end +end + + +function M:set_pivot(pivot) + local offset = helper.get_pivot_offset(pivot) + local size = gui.get_size(self.root) + local pos = vmath.vector3(size.x * offset.x, size.y * offset.y, 0) + gui.set_position(self.layout.node, pos) + gui.set_pivot(self.layout.node, pivot) + + self.layout:refresh_layout() +end + + +function M:on_remove() + self.layout:clear_layout() + for _, node in ipairs(self.nodes) do + gui.delete_node(node) + end +end + + +return M diff --git a/example/examples/layout/examples_list.lua b/example/examples/layout/examples_list.lua new file mode 100644 index 0000000..3dc15ba --- /dev/null +++ b/example/examples/layout/examples_list.lua @@ -0,0 +1,91 @@ +local M = {} + +---@return druid.example.data[] +function M.get_examples() + ---@type druid.example.data[] + return { + { + name_id = "ui_example_layout_basic", + information_text_id = "ui_example_layout_basic_description", + template = "basic_layout", + root = "basic_layout/root", + code_url = "example/examples/layout/basic/basic_layout.lua", + component_class = require("example.examples.layout.basic.basic_layout"), + properties_control = function(instance, properties_panel) + ---@cast instance basic_layout + + properties_panel:add_slider("ui_padding", 0, function(value) + local padding = math.floor((value * 64) * 100) / 100 + instance.layout:set_padding(vmath.vector4(padding)) + end) + + properties_panel:add_slider("ui_margin_x", 0, function(value) + local margin = math.floor((value * 64) * 100) / 100 + instance.layout:set_margin(margin, nil) + end) + + properties_panel:add_slider("ui_margin_y", 0, function(value) + local margin = math.floor((value * 64) * 100) / 100 + instance.layout:set_margin(nil, margin) + end) + + properties_panel:add_checkbox("ui_justify", false, function(value) + instance.layout:set_justify(value) + end) + + local pivot_index = 1 + local pivot_list = { + gui.PIVOT_CENTER, + gui.PIVOT_W, + gui.PIVOT_SW, + gui.PIVOT_S, + gui.PIVOT_SE, + gui.PIVOT_E, + gui.PIVOT_NE, + gui.PIVOT_N, + gui.PIVOT_NW, + } + + properties_panel:add_button("ui_pivot_next", function() + pivot_index = pivot_index + 1 + if pivot_index > #pivot_list then + pivot_index = 1 + end + instance:set_pivot(pivot_list[pivot_index]) + end) + + + local type_index = 1 + local type_list = { + "horizontal_wrap", + "horizontal", + "vertical", + } + + properties_panel:add_button("ui_type_next", function() + type_index = type_index + 1 + if type_index > #type_list then + type_index = 1 + end + instance.layout:set_type(type_list[type_index]) + end) + end, + get_debug_info = function(instance) + ---@cast instance basic_layout + local layout = instance.layout + local p = layout.padding + local info = "" + info = info .. "Layout: " .. layout.type .. "\n" + info = info .. "Padding: " .. math.floor(p.x) .. " " .. math.floor(p.y) .. " " .. math.floor(p.z) .. " " .. math.floor(p.w) .. "\n" + info = info .. "Margin: " .. layout.margin.x .. " " .. layout.margin.y .. "\n" + info = info .. "Justify: " .. tostring(layout.is_justify) .. "\n" + info = info .. "Pivot: " .. tostring(gui.get_pivot(layout.node)) .. "\n" + + return info + end + } + } +end + + +return M \ No newline at end of file diff --git a/example/examples/panthera/animation_blend/animation_blend.gui b/example/examples/panthera/animation_blend/animation_blend.gui new file mode 100644 index 0000000..eb98b38 --- /dev/null +++ b/example/examples/panthera/animation_blend/animation_blend.gui @@ -0,0 +1,218 @@ +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "animation_blend" + texture: "/example/examples/panthera/animation_blend/assets/animation_blend.atlas" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +nodes { + size { + x: 1000.0 + y: 1000.0 + } + color { + x: 0.173 + y: 0.184 + z: 0.204 + } + type: TYPE_BOX + texture: "druid/ui_circle_64" + id: "root" + inherit_alpha: true + slice9 { + x: 32.0 + y: 32.0 + z: 32.0 + w: 32.0 + } +} +nodes { + size { + x: 100.0 + y: 100.0 + } + type: TYPE_BOX + id: "character" + parent: "root" + inherit_alpha: true + visible: false +} +nodes { + type: TYPE_BOX + texture: "animation_blend/pink_body_squircle" + id: "body" + parent: "character" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: 2.0 + } + size { + x: 100.0 + y: 40.0 + } + type: TYPE_BOX + id: "eyes" + parent: "body" + inherit_alpha: true + visible: false +} +nodes { + position { + x: -32.0 + } + type: TYPE_BOX + texture: "animation_blend/facial_part_eye_open" + id: "eye_left" + parent: "eyes" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: 34.0 + } + rotation { + z: 5.0 + } + type: TYPE_BOX + texture: "animation_blend/facial_part_eyebrow_b" + id: "brow_left" + parent: "eye_left" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: 32.0 + } + type: TYPE_BOX + texture: "animation_blend/facial_part_eye_open" + id: "eye_right" + parent: "eyes" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: 34.0 + } + rotation { + z: -5.0 + } + scale { + x: -1.0 + } + type: TYPE_BOX + texture: "animation_blend/facial_part_eyebrow_b" + id: "brow_right" + parent: "eye_right" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: -35.0 + } + type: TYPE_BOX + texture: "animation_blend/facial_part_mouth_happy" + id: "mouth" + parent: "body" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: 130.0 + } + rotation { + z: -10.0 + } + type: TYPE_BOX + texture: "animation_blend/pink_hand_open" + id: "hand_left" + parent: "body" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + x: -130.0 + } + rotation { + z: 10.0 + } + scale { + x: -1.0 + } + type: TYPE_BOX + texture: "animation_blend/pink_hand_open" + id: "hand_right" + parent: "body" + inherit_alpha: true + size_mode: SIZE_MODE_AUTO +} +nodes { + position { + y: -445.0 + } + size { + x: 600.0 + y: 100.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + } + type: TYPE_TEXT + text: "Hover mouse over this area" + font: "text_bold" + id: "text_hint" + outline { + x: 1.0 + y: 1.0 + z: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + } + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +nodes { + position { + x: -200.0 + y: 430.0 + } + size { + x: 400.0 + y: 100.0 + } + color { + x: 0.941 + y: 0.984 + } + type: TYPE_TEXT + text: "Rich text" + font: "text_bold" + id: "rich_text_kenney" + pivot: PIVOT_W + parent: "root" + inherit_alpha: true + outline_alpha: 0.0 + shadow_alpha: 0.0 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT diff --git a/example/examples/panthera/animation_blend/animation_blend.lua b/example/examples/panthera/animation_blend/animation_blend.lua new file mode 100644 index 0000000..cbd5ea6 --- /dev/null +++ b/example/examples/panthera/animation_blend/animation_blend.lua @@ -0,0 +1,75 @@ +local panthera = require("panthera.panthera") +local component = require("druid.component") +local helper = require("druid.helper") +local event = require("druid.event") +local lang_text = require("druid.extended.lang_text") +local rich_text = require("druid.custom.rich_text.rich_text") + +local character_animation_blend = require("example.examples.panthera.animation_blend.character_animation_blend") + +---@class animation_blend: druid.base_component +---@field root node +---@field druid druid_instance +local M = component.create("animation_blend") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.root = self:get_node("root") + self.root_size = gui.get_size(self.root) + self.druid:new(lang_text, "text_hint", "ui_example_panthera_animation_blend_hint") + + self.animation_idle = panthera.create_gui(character_animation_blend, self:get_template(), nodes) + self.animation_vertical = panthera.create_gui(character_animation_blend, self:get_template(), nodes) + self.animation_horizontal = panthera.create_gui(character_animation_blend, self:get_template(), nodes) + + panthera.play(self.animation_idle, "idle", { + is_loop = true, + }) + + self:setup_rich_text() + self.on_update = event() +end + + +---@param action_id hash +---@param action action +function M:on_input(action_id, action) + if action_id == nil and gui.pick_node(self.root, action.x, action.y) then + local root_screen_pos = gui.get_screen_position(self.root) + local gui_scale = helper.get_gui_scale() + + local dx = (action.screen_x - root_screen_pos.x) / gui_scale -- -root_size.x / 2 .. root_size.x / 2 + local animation_progress_x = (dx + self.root_size.x / 2) / self.root_size.x -- 0 .. 1 + panthera.set_time(self.animation_horizontal, "horizontal", animation_progress_x) + + local dy = (action.screen_y - root_screen_pos.y) / gui_scale -- -root_size.y / 2 .. root_size.y / 2 + local animation_progress_y = (dy + self.root_size.y / 2) / self.root_size.y -- 0 .. 1 + panthera.set_time(self.animation_vertical, "vertical", animation_progress_y) + end +end + + +function M:update() + self.on_update:trigger() +end + + +function M:setup_rich_text() + self.rich_text = self.druid:new(rich_text, "rich_text_kenney", "Character assets by Kenney") + + local tagged = self.rich_text:tagged("link") + for index = 1, #tagged do + ---@type druid.rich_text.word + local word = tagged[index] + self.druid:new_button(word.node, function() + sys.open_url("https://kenney.nl/") + end) + end +end + + +return M diff --git a/example/examples/panthera/animation_blend/assets/animation_blend.atlas b/example/examples/panthera/animation_blend/assets/animation_blend.atlas new file mode 100644 index 0000000..5ce1d2b --- /dev/null +++ b/example/examples/panthera/animation_blend/assets/animation_blend.atlas @@ -0,0 +1,46 @@ +images { + image: "/example/examples/panthera/animation_blend/assets/facial_part_eye_open.png" + sprite_trim_mode: SPRITE_TRIM_MODE_OFF +} +images { + image: "/example/examples/panthera/animation_blend/assets/facial_part_eyebrow_b.png" + sprite_trim_mode: SPRITE_TRIM_MODE_OFF +} +images { + image: "/example/examples/panthera/animation_blend/assets/facial_part_mouth_happy.png" + sprite_trim_mode: SPRITE_TRIM_MODE_OFF +} +images { + image: "/example/examples/panthera/animation_blend/assets/facial_part_mouth_smirk.png" + sprite_trim_mode: SPRITE_TRIM_MODE_OFF +} +images { + image: "/example/examples/panthera/animation_blend/assets/pink_body_squircle.png" + sprite_trim_mode: SPRITE_TRIM_MODE_OFF +} +images { + image: "/example/examples/panthera/animation_blend/assets/pink_hand_closed.png" + sprite_trim_mode: SPRITE_TRIM_MODE_OFF +} +images { + image: "/example/examples/panthera/animation_blend/assets/pink_hand_open.png" + sprite_trim_mode: SPRITE_TRIM_MODE_OFF +} +images { + image: "/example/examples/panthera/animation_blend/assets/pink_hand_point.png" + sprite_trim_mode: SPRITE_TRIM_MODE_OFF +} +images { + image: "/example/examples/panthera/animation_blend/assets/shadow.png" + sprite_trim_mode: SPRITE_TRIM_MODE_OFF +} +images { + image: "/example/examples/panthera/animation_blend/assets/facial_part_eye_half_top.png" + sprite_trim_mode: SPRITE_TRIM_MODE_OFF +} +margin: 0 +extrude_borders: 2 +inner_padding: 0 +max_page_width: 0 +max_page_height: 0 +rename_patterns: "" diff --git a/example/examples/panthera/animation_blend/assets/facial_part_eye_half_top.png b/example/examples/panthera/animation_blend/assets/facial_part_eye_half_top.png new file mode 100644 index 0000000..4f7c09f Binary files /dev/null and b/example/examples/panthera/animation_blend/assets/facial_part_eye_half_top.png differ diff --git a/example/examples/panthera/animation_blend/assets/facial_part_eye_open.png b/example/examples/panthera/animation_blend/assets/facial_part_eye_open.png new file mode 100644 index 0000000..ab2251f Binary files /dev/null and b/example/examples/panthera/animation_blend/assets/facial_part_eye_open.png differ diff --git a/example/examples/panthera/animation_blend/assets/facial_part_eyebrow_b.png b/example/examples/panthera/animation_blend/assets/facial_part_eyebrow_b.png new file mode 100644 index 0000000..b498ffb Binary files /dev/null and b/example/examples/panthera/animation_blend/assets/facial_part_eyebrow_b.png differ diff --git a/example/examples/panthera/animation_blend/assets/facial_part_mouth_happy.png b/example/examples/panthera/animation_blend/assets/facial_part_mouth_happy.png new file mode 100644 index 0000000..acb0b1c Binary files /dev/null and b/example/examples/panthera/animation_blend/assets/facial_part_mouth_happy.png differ diff --git a/example/examples/panthera/animation_blend/assets/facial_part_mouth_smirk.png b/example/examples/panthera/animation_blend/assets/facial_part_mouth_smirk.png new file mode 100644 index 0000000..1c8455a Binary files /dev/null and b/example/examples/panthera/animation_blend/assets/facial_part_mouth_smirk.png differ diff --git a/example/examples/panthera/animation_blend/assets/pink_body_squircle.png b/example/examples/panthera/animation_blend/assets/pink_body_squircle.png new file mode 100644 index 0000000..a261a36 Binary files /dev/null and b/example/examples/panthera/animation_blend/assets/pink_body_squircle.png differ diff --git a/example/examples/panthera/animation_blend/assets/pink_hand_closed.png b/example/examples/panthera/animation_blend/assets/pink_hand_closed.png new file mode 100644 index 0000000..6d3c950 Binary files /dev/null and b/example/examples/panthera/animation_blend/assets/pink_hand_closed.png differ diff --git a/example/examples/panthera/animation_blend/assets/pink_hand_open.png b/example/examples/panthera/animation_blend/assets/pink_hand_open.png new file mode 100644 index 0000000..cb400fa Binary files /dev/null and b/example/examples/panthera/animation_blend/assets/pink_hand_open.png differ diff --git a/example/examples/panthera/animation_blend/assets/pink_hand_point.png b/example/examples/panthera/animation_blend/assets/pink_hand_point.png new file mode 100644 index 0000000..1d0b707 Binary files /dev/null and b/example/examples/panthera/animation_blend/assets/pink_hand_point.png differ diff --git a/example/examples/panthera/animation_blend/assets/shadow.png b/example/examples/panthera/animation_blend/assets/shadow.png new file mode 100644 index 0000000..68f07f5 Binary files /dev/null and b/example/examples/panthera/animation_blend/assets/shadow.png differ diff --git a/example/examples/panthera/animation_blend/character_animation_blend.lua b/example/examples/panthera/animation_blend/character_animation_blend.lua new file mode 100644 index 0000000..7f35670 --- /dev/null +++ b/example/examples/panthera/animation_blend/character_animation_blend.lua @@ -0,0 +1,633 @@ +return { + data = { + animations = { + { + animation_id = "default", + duration = 1, + animation_keys = { + }, + }, + { + animation_id = "horizontal", + duration = 1, + animation_keys = { + { + key_type = "tween", + node_id = "eyes", + easing = "outsine", + end_value = -20, + property_id = "position_x", + }, + { + key_type = "tween", + node_id = "mouth", + easing = "outsine", + end_value = -20, + property_id = "position_x", + }, + { + key_type = "tween", + node_id = "mouth", + easing = "outsine", + end_value = -4, + property_id = "rotation_z", + }, + { + key_type = "tween", + node_id = "hand_right", + start_value = -1, + end_value = -0.8, + easing = "outsine", + property_id = "scale_x", + }, + { + key_type = "tween", + node_id = "eye_left", + start_value = 1, + end_value = 0.8, + easing = "outsine", + property_id = "scale_x", + }, + { + key_type = "tween", + node_id = "eye_left", + start_value = 1, + end_value = 0.8, + easing = "outsine", + property_id = "scale_y", + }, + { + key_type = "tween", + node_id = "hand_right", + start_value = 1, + end_value = 0.8, + easing = "outsine", + property_id = "scale_y", + }, + { + key_type = "tween", + node_id = "mouth", + start_value = 1, + end_value = 0.9, + easing = "outsine", + property_id = "scale_x", + }, + { + key_type = "tween", + node_id = "mouth", + start_value = 1, + end_value = 0.9, + easing = "outsine", + property_id = "scale_y", + }, + { + key_type = "tween", + node_id = "hand_left", + start_value = 1, + end_value = 1.2, + easing = "outsine", + property_id = "color_a", + }, + { + key_type = "tween", + node_id = "hand_left", + start_value = 1, + end_value = 1.5, + easing = "outsine", + property_id = "scale_x", + }, + { + key_type = "tween", + node_id = "hand_left", + start_value = 1, + end_value = 1.5, + easing = "outsine", + property_id = "scale_y", + }, + { + key_type = "tween", + node_id = "eye_left", + easing = "outsine", + end_value = 2, + property_id = "position_y", + }, + { + key_type = "tween", + node_id = "hand_left", + start_value = 130, + end_value = 110, + easing = "outsine", + property_id = "position_x", + }, + { + duration = 0.75, + key_type = "tween", + node_id = "eye_left", + easing = "outsine", + start_value = 2, + property_id = "position_y", + }, + { + duration = 0.75, + key_type = "tween", + node_id = "eye_left", + easing = "outsine", + end_value = 1, + start_value = 0.8, + property_id = "scale_x", + }, + { + duration = 0.75, + key_type = "tween", + node_id = "eye_left", + easing = "outsine", + end_value = 1, + start_value = 0.8, + property_id = "scale_y", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_right", + easing = "linear", + end_value = -110, + start_value = -130, + property_id = "position_x", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_right", + easing = "outsine", + end_value = -1.5, + start_value = -0.8, + property_id = "scale_x", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_left", + easing = "outsine", + end_value = 0.8, + start_value = 1.5, + property_id = "scale_x", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_left", + easing = "outsine", + end_value = 0.8, + start_value = 1.5, + property_id = "scale_y", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_left", + easing = "outsine", + end_value = 1, + start_value = 1.2, + property_id = "color_a", + }, + { + duration = 1, + key_type = "tween", + node_id = "mouth", + easing = "inoutsine", + end_value = 1.1, + start_value = 0.9, + property_id = "scale_x", + }, + { + duration = 1, + key_type = "tween", + node_id = "mouth", + easing = "inoutsine", + end_value = 1.1, + start_value = 0.9, + property_id = "scale_y", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_right", + easing = "outsine", + end_value = 1.2, + start_value = 1, + property_id = "color_a", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_right", + easing = "outsine", + end_value = 1.5, + start_value = 0.8, + property_id = "scale_y", + }, + { + duration = 1, + key_type = "tween", + node_id = "mouth", + easing = "inoutsine", + end_value = 4, + start_value = -4, + property_id = "rotation_z", + }, + { + duration = 1, + key_type = "tween", + node_id = "eyes", + easing = "inoutsine", + end_value = 20, + start_value = -20, + property_id = "position_x", + }, + { + duration = 1, + key_type = "tween", + node_id = "mouth", + easing = "inoutsine", + end_value = 20, + start_value = -20, + property_id = "position_x", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_left", + easing = "linear", + end_value = 130, + start_value = 110, + property_id = "position_x", + }, + { + duration = 0.75, + key_type = "tween", + node_id = "eye_right", + easing = "outsine", + start_value = 1, + end_value = 0.8, + start_time = 0.25, + property_id = "scale_x", + }, + { + duration = 0.75, + key_type = "tween", + node_id = "eye_right", + easing = "outsine", + start_value = 1, + end_value = 0.8, + start_time = 0.25, + property_id = "scale_y", + }, + { + duration = 0.75, + key_type = "tween", + node_id = "eye_right", + easing = "outsine", + end_value = 2, + start_time = 0.25, + property_id = "position_y", + }, + }, + }, + { + animation_id = "vertical", + duration = 1, + animation_keys = { + { + key_type = "tween", + node_id = "mouth", + start_value = -35, + end_value = -50, + easing = "outsine", + property_id = "position_y", + }, + { + key_type = "tween", + node_id = "hand_left", + easing = "outsine", + end_value = -35, + property_id = "position_y", + }, + { + key_type = "tween", + node_id = "hand_left", + start_value = -10, + end_value = -35, + easing = "outsine", + property_id = "rotation_z", + }, + { + key_type = "tween", + node_id = "hand_right", + easing = "outsine", + end_value = -35, + property_id = "position_y", + }, + { + key_type = "tween", + node_id = "eyes", + start_value = 2, + end_value = -10, + easing = "outsine", + property_id = "position_y", + }, + { + key_type = "tween", + node_id = "brow_left", + start_value = 5, + easing = "outsine", + property_id = "rotation_z", + }, + { + key_type = "tween", + node_id = "brow_right", + start_value = -5, + easing = "outsine", + property_id = "rotation_z", + }, + { + key_type = "trigger", + node_id = "hand_left", + easing = "linear", + data = "animation_blend/pink_hand_point", + start_data = "animation_blend/pink_hand_open", + property_id = "texture", + }, + { + key_type = "trigger", + node_id = "hand_right", + easing = "linear", + data = "animation_blend/pink_hand_point", + start_data = "animation_blend/pink_hand_open", + property_id = "texture", + }, + { + key_type = "trigger", + node_id = "mouth", + easing = "linear", + data = "animation_blend/facial_part_mouth_smirk", + start_data = "animation_blend/facial_part_mouth_happy", + property_id = "texture", + }, + { + key_type = "tween", + node_id = "hand_right", + start_value = 10, + end_value = 35, + easing = "outsine", + property_id = "rotation_z", + }, + { + duration = 1, + key_type = "tween", + node_id = "mouth", + easing = "inoutsine", + end_value = -20, + start_value = -50, + property_id = "position_y", + }, + { + duration = 1, + key_type = "tween", + node_id = "brow_right", + easing = "outsine", + end_value = -10, + property_id = "rotation_z", + }, + { + duration = 1, + key_type = "tween", + node_id = "brow_left", + easing = "outsine", + end_value = -5, + property_id = "position_x", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_left", + easing = "outsine", + start_value = -35, + property_id = "rotation_z", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_right", + easing = "outsine", + start_value = 35, + property_id = "rotation_z", + }, + { + duration = 1, + key_type = "tween", + node_id = "character", + easing = "outsine", + end_value = 0.96, + start_value = 1, + property_id = "scale_x", + }, + { + duration = 1, + key_type = "tween", + node_id = "character", + easing = "outsine", + end_value = 1.04, + start_value = 1, + property_id = "scale_y", + }, + { + duration = 1, + key_type = "tween", + node_id = "brow_right", + easing = "outsine", + end_value = 5, + property_id = "position_x", + }, + { + duration = 1, + key_type = "tween", + node_id = "brow_left", + easing = "outsine", + end_value = 15, + property_id = "rotation_z", + }, + { + duration = 1, + key_type = "tween", + node_id = "eyes", + easing = "inoutsine", + end_value = 25, + start_value = -10, + property_id = "position_y", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_left", + easing = "insine", + end_value = 100, + start_value = -35, + property_id = "position_y", + }, + { + duration = 1, + key_type = "tween", + node_id = "hand_right", + easing = "insine", + end_value = 100, + start_value = -35, + property_id = "position_y", + }, + { + start_time = 0.4, + key_type = "trigger", + node_id = "hand_left", + easing = "linear", + data = "animation_blend/pink_hand_closed", + start_data = "animation_blend/pink_hand_point", + property_id = "texture", + }, + { + start_time = 0.4, + key_type = "trigger", + node_id = "hand_right", + easing = "linear", + data = "animation_blend/pink_hand_closed", + start_data = "animation_blend/pink_hand_point", + property_id = "texture", + }, + { + start_time = 0.41, + key_type = "trigger", + node_id = "mouth", + easing = "linear", + data = "animation_blend/facial_part_mouth_happy", + start_data = "animation_blend/facial_part_mouth_smirk", + property_id = "texture", + }, + { + start_time = 0.62, + key_type = "trigger", + node_id = "eye_left", + easing = "linear", + data = "animation_blend/facial_part_eye_half_top", + start_data = "animation_blend/facial_part_eye_open", + property_id = "texture", + }, + { + start_time = 0.62, + key_type = "trigger", + node_id = "eye_right", + easing = "linear", + data = "animation_blend/facial_part_eye_half_top", + start_data = "animation_blend/facial_part_eye_open", + property_id = "texture", + }, + { + start_time = 0.78, + key_type = "trigger", + node_id = "hand_left", + easing = "linear", + data = "animation_blend/pink_hand_open", + start_data = "animation_blend/pink_hand_closed", + property_id = "texture", + }, + { + start_time = 0.78, + key_type = "trigger", + node_id = "hand_right", + easing = "linear", + data = "animation_blend/pink_hand_open", + start_data = "animation_blend/pink_hand_closed", + property_id = "texture", + }, + }, + }, + { + animation_id = "idle", + duration = 3, + animation_keys = { + { + duration = 0.75, + key_type = "tween", + node_id = "body", + easing = "outsine", + end_value = 0.98, + start_value = 1, + property_id = "scale_y", + }, + { + duration = 0.75, + key_type = "tween", + node_id = "body", + easing = "outsine", + end_value = 1.02, + start_value = 1, + property_id = "scale_x", + }, + { + duration = 1.37, + key_type = "tween", + node_id = "body", + easing = "outsine", + start_value = 1.02, + end_value = 0.98, + start_time = 0.75, + property_id = "scale_x", + }, + { + duration = 1.37, + key_type = "tween", + node_id = "body", + easing = "outsine", + start_value = 0.98, + end_value = 1.02, + start_time = 0.75, + property_id = "scale_y", + }, + { + duration = 0.88, + key_type = "tween", + node_id = "body", + easing = "outsine", + start_value = 0.98, + end_value = 1, + start_time = 2.12, + property_id = "scale_x", + }, + { + duration = 0.88, + key_type = "tween", + node_id = "body", + easing = "outsine", + start_value = 1.02, + end_value = 1, + start_time = 2.12, + property_id = "scale_y", + }, + }, + }, + }, + metadata = { + gui_path = "/example/examples/panthera/animation_blend/animation_blend.gui", + gizmo_steps = { + }, + layers = { + }, + fps = 60, + settings = { + font_size = 40, + }, + }, + nodes = { + }, + }, + version = 1, + type = "animation_editor", + format = "json", +} \ No newline at end of file diff --git a/example/examples/panthera/basic_animation/basic_animation.gui b/example/examples/panthera/basic_animation/basic_animation.gui new file mode 100644 index 0000000..fef1c91 --- /dev/null +++ b/example/examples/panthera/basic_animation/basic_animation.gui @@ -0,0 +1,241 @@ +script: "" +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button" + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_blue.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Hover Me!" + font: "text_bold" + id: "button/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 8 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/panthera/basic_animation/basic_animation.lua b/example/examples/panthera/basic_animation/basic_animation.lua new file mode 100644 index 0000000..b179207 --- /dev/null +++ b/example/examples/panthera/basic_animation/basic_animation.lua @@ -0,0 +1,37 @@ +local panthera = require("panthera.panthera") +local component = require("druid.component") + +local basic_animation_panthera = require("example.examples.panthera.basic_animation.basic_animation_panthera") + +---@class basic_animation: druid.base_component +---@field druid druid_instance +local M = component.create("basic_animation") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.animation = panthera.create_gui(basic_animation_panthera, self:get_template(), nodes) + + self.button = self.druid:new_button("button/root", function() + panthera.play(self.animation, "on_click", { + is_skip_init = true + }) + end) + self.button:set_style(nil) -- Reset all button style animations + + self.button.hover.on_mouse_hover:subscribe(function(_, is_hover) + if is_hover then + panthera.play(self.animation, "on_hover") + else + panthera.play(self.animation, "reset", { + is_skip_init = true + }) + end + end) +end + + +return M diff --git a/example/examples/panthera/basic_animation/basic_animation_panthera.lua b/example/examples/panthera/basic_animation/basic_animation_panthera.lua new file mode 100644 index 0000000..bddbc6f --- /dev/null +++ b/example/examples/panthera/basic_animation/basic_animation_panthera.lua @@ -0,0 +1,319 @@ +return { + version = 1, + format = "json", + data = { + animations = { + { + duration = 0.35, + animation_keys = { + { + key_type = "trigger", + data = "C", + property_id = "text", + start_data = "Hover Me!", + easing = "linear", + node_id = "button/text", + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 0.624, + property_id = "color_b", + start_value = 0.961, + duration = 0.35, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 0.875, + property_id = "color_g", + start_value = 0.843, + duration = 0.35, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 0.902, + property_id = "color_r", + start_value = 0.631, + duration = 0.35, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outback", + end_value = 1.3, + property_id = "scale_x", + start_value = 1, + duration = 0.35, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outback", + end_value = 1.3, + property_id = "scale_y", + start_value = 1, + duration = 0.35, + }, + { + key_type = "trigger", + start_time = 0.047, + data = "Cl", + start_data = "C", + property_id = "text", + easing = "linear", + node_id = "button/text", + }, + { + key_type = "trigger", + start_time = 0.1, + data = "Cli", + start_data = "Cl", + property_id = "text", + easing = "linear", + node_id = "button/text", + }, + { + key_type = "trigger", + start_time = 0.145, + data = "Clic", + start_data = "Cli", + property_id = "text", + easing = "linear", + node_id = "button/text", + }, + { + key_type = "trigger", + start_time = 0.195, + data = "Click", + start_data = "Clic", + property_id = "text", + easing = "linear", + node_id = "button/text", + }, + { + key_type = "trigger", + start_time = 0.24, + data = "Click M", + start_data = "Click", + property_id = "text", + easing = "linear", + node_id = "button/text", + }, + { + key_type = "trigger", + start_time = 0.293, + data = "Click Me", + start_data = "Click M", + property_id = "text", + easing = "linear", + node_id = "button/text", + }, + { + key_type = "trigger", + start_time = 0.34, + data = "Click Me!", + start_data = "Click Me", + property_id = "text", + easing = "linear", + node_id = "button/text", + }, + }, + animation_id = "on_hover", + }, + { + duration = 0.35, + initial_state = "on_hover", + animation_id = "on_click", + animation_keys = { + { + key_type = "trigger", + data = "BOOM", + property_id = "text", + start_data = "Click Me!", + easing = "linear", + node_id = "button/text", + }, + { + key_type = "tween", + node_id = "button/text", + easing = "outsine", + end_value = 1.3, + property_id = "scale_x", + start_value = 1, + duration = 0.1, + }, + { + key_type = "tween", + node_id = "button/text", + easing = "outsine", + end_value = 1.3, + property_id = "scale_y", + start_value = 1, + duration = 0.1, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 0.608, + property_id = "color_b", + start_value = 0.624, + duration = 0.2, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 0.608, + property_id = "color_g", + start_value = 0.875, + duration = 0.2, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 0.957, + property_id = "color_r", + start_value = 0.902, + duration = 0.2, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outback", + end_value = 1.6, + property_id = "scale_x", + start_value = 1.3, + duration = 0.2, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outback", + end_value = 1.6, + property_id = "scale_y", + start_value = 1.3, + duration = 0.2, + }, + { + node_id = "button/text", + key_type = "tween", + start_time = 0.1, + easing = "outsine", + end_value = 1, + property_id = "scale_x", + start_value = 1.3, + duration = 0.13, + }, + { + node_id = "button/text", + key_type = "tween", + start_time = 0.1, + easing = "outsine", + end_value = 1, + property_id = "scale_y", + start_value = 1.3, + duration = 0.13, + }, + }, + }, + { + duration = 0.5, + animation_keys = { + { + key_type = "trigger", + data = "Hover Me!", + property_id = "text", + start_data = "BOOM", + easing = "linear", + node_id = "button/text", + }, + { + key_type = "tween", + node_id = "button/text", + easing = "outsine", + end_value = 1, + property_id = "scale_x", + start_value = 1, + duration = 0.2, + }, + { + key_type = "tween", + node_id = "button/text", + easing = "outsine", + end_value = 1, + property_id = "scale_y", + start_value = 1, + duration = 0.2, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 0.627, + property_id = "color_r", + start_value = 0.957, + duration = 0.5, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 0.839, + property_id = "color_g", + start_value = 0.608, + duration = 0.5, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 0.961, + property_id = "color_b", + start_value = 0.608, + duration = 0.5, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 1, + property_id = "scale_x", + start_value = 1.5, + duration = 0.5, + }, + { + key_type = "tween", + node_id = "button/root", + easing = "outsine", + end_value = 1, + property_id = "scale_y", + start_value = 1.5, + duration = 0.5, + }, + }, + animation_id = "reset", + }, + }, + metadata = { + gui_path = "/example/examples/panthera/basic_animation/basic_animation.gui", + layers = { + }, + fps = 60, + gizmo_steps = { + }, + settings = { + font_size = 40, + }, + }, + nodes = { + }, + }, + type = "animation_editor", +} \ No newline at end of file diff --git a/example/examples/panthera/examples_list.lua b/example/examples/panthera/examples_list.lua new file mode 100644 index 0000000..7f401ee --- /dev/null +++ b/example/examples/panthera/examples_list.lua @@ -0,0 +1,45 @@ +local panthera = require("panthera.panthera") + +local M = {} + +function M.get_examples() + return { + { + name_id = "ui_example_panthera_basic_animation", + information_text_id = "ui_example_panthera_basic_animation_description", + template = "basic_animation", + root = "basic_animation/root", + code_url = "example/examples/panthera/basic_animation/basic_animation.lua", + component_class = require("example.examples.panthera.basic_animation.basic_animation"), + }, + { + name_id = "ui_example_panthera_animation_blend", + information_text_id = "ui_example_panthera_animation_blend_description", + template = "animation_blend", + root = "animation_blend/root", + code_url = "example/examples/panthera/animation_blend/animation_blend.lua", + component_class = require("example.examples.panthera.animation_blend.animation_blend"), + properties_control = function(instance, properties_panel) + ---@cast instance animation_blend + local vertical_time = panthera.get_time(instance.animation_vertical) + + local vertical_slider = properties_panel:add_slider("ui_animation_vertical", vertical_time, function(value) + panthera.set_time(instance.animation_vertical, "vertical", value) + end) + + local horizontal_time = panthera.get_time(instance.animation_horizontal) + + local horizontal_slider = properties_panel:add_slider("ui_animation_horizontal", horizontal_time, function(value) + panthera.set_time(instance.animation_horizontal, "horizontal", value) + end) + + instance.on_update:subscribe(function() + vertical_slider:set_value(panthera.get_time(instance.animation_vertical)) + horizontal_slider:set_value(panthera.get_time(instance.animation_horizontal)) + end) + end, + } + } +end + +return M \ No newline at end of file diff --git a/example/examples/windows/examples_list.lua b/example/examples/windows/examples_list.lua new file mode 100644 index 0000000..d4efb1d --- /dev/null +++ b/example/examples/windows/examples_list.lua @@ -0,0 +1,66 @@ +local M = {} + +---@return druid.example.data[] +function M.get_examples() + ---@type druid.example.data[] + return { + { + name_id = "ui_example_window_language", + template = "window_language", + root = "window_language/root", + code_url = "example/examples/windows/window_language/window_language.lua", + component_class = require("example.examples.windows.window_language.window_language"), + on_create = function(instance, output_list) + ---@cast instance window_language + instance.on_language_change:subscribe(function(language) + output_list:add_log_text("Language changed to " .. language) + end) + end + }, + { + name_id = "ui_example_window_confirmation", + template = "window_confirmation", + root = "window_confirmation/root", + information_text_id = "ui_example_window_language_description", + code_url = "example/examples/windows/window_confirmation/window_confirmation.lua", + component_class = require("example.examples.windows.window_confirmation.window_confirmation"), + on_create = function(instance, output_list) + ---@cast instance window_confirmation + instance.text_header:translate("ui_confirmation") + instance.text_button_accept:translate("ui_confirm") + instance.text_button_decline:translate("ui_cancel") + instance.text_description:translate("ui_confirmation_description") + + instance.button_accept.on_click:subscribe(function() + output_list:add_log_text("Confirmation Accepted") + end) + instance.button_decline.on_click:subscribe(function() + output_list:add_log_text("Confirmation Declined") + end) + end, + get_debug_info = function(instance) + return "Any info we want" + end + }, + { + name_id = "ui_example_window_information", + template = "window_info", + root = "window_info/root", + information_text_id = "ui_example_window_information_description", + code_url = "example/examples/windows/window_info/window_info.lua", + component_class = require("example.examples.windows.window_info.window_info"), + on_create = function(instance, output_list) + ---@cast instance window_info + instance.text_header:translate("ui_information") + instance.text_button_accept:translate("ui_confirm") + instance.text_description:translate("ui_example_window_information_text") + + instance.button_accept.on_click:subscribe(function() + output_list:add_log_text("Information Accepted") + end) + end + } + } +end + +return M \ No newline at end of file diff --git a/example/examples/windows/window_animation_panthera.lua b/example/examples/windows/window_animation_panthera.lua new file mode 100644 index 0000000..ea4bad6 --- /dev/null +++ b/example/examples/windows/window_animation_panthera.lua @@ -0,0 +1,176 @@ +return { + version = 1, + format = "json", + data = { + nodes = { + }, + metadata = { + fps = 60, + gizmo_steps = { + }, + gui_path = "/example/examples/windows/window_language/window_language.gui", + layers = { + { + name = "druid", + color = "73E84C", + }, + { + name = "text_bold", + color = "90D2F6", + }, + }, + settings = { + font_size = 40, + }, + }, + animations = { + { + animation_id = "open", + animation_keys = { + { + start_value = 1, + node_id = "content", + easing = "outsine", + property_id = "color_a", + key_type = "tween", + }, + { + start_value = 1, + node_id = "root", + easing = "outsine", + property_id = "color_a", + key_type = "tween", + }, + { + start_value = 1, + node_id = "root", + easing = "outsine", + property_id = "scale_x", + key_type = "tween", + }, + { + start_value = 1, + node_id = "root", + easing = "outsine", + property_id = "scale_y", + key_type = "tween", + }, + { + start_value = 1, + end_value = 1, + node_id = "button_close", + easing = "outsine", + property_id = "color_a", + key_type = "tween", + }, + { + end_value = 5, + node_id = "root", + easing = "outsine", + property_id = "rotation_z", + key_type = "tween", + }, + { + end_value = 1, + property_id = "color_a", + node_id = "root", + easing = "outsine", + duration = 0.3, + key_type = "tween", + }, + { + end_value = 1, + property_id = "scale_x", + node_id = "root", + easing = "outsine", + duration = 0.3, + key_type = "tween", + }, + { + end_value = 1, + property_id = "scale_y", + node_id = "root", + easing = "outsine", + duration = 0.3, + key_type = "tween", + }, + { + start_value = 5, + property_id = "rotation_z", + node_id = "root", + easing = "outback", + duration = 0.5, + key_type = "tween", + }, + { + end_value = 1, + duration = 0.25, + property_id = "color_a", + node_id = "content", + easing = "outsine", + start_time = 0.15, + key_type = "tween", + }, + }, + duration = 1, + }, + { + animation_id = "close", + animation_keys = { + { + start_value = 1, + property_id = "color_a", + node_id = "button_close", + easing = "outsine", + duration = 0.15, + key_type = "tween", + }, + { + start_value = 1, + property_id = "color_a", + node_id = "content", + easing = "outsine", + duration = 0.15, + key_type = "tween", + }, + { + end_value = -5, + property_id = "rotation_z", + node_id = "root", + easing = "insine", + duration = 0.3, + key_type = "tween", + }, + { + start_value = 1, + property_id = "color_a", + node_id = "root", + easing = "insine", + duration = 0.3, + key_type = "tween", + }, + { + start_value = 1, + end_value = 0.1, + property_id = "scale_x", + node_id = "root", + easing = "inback", + duration = 0.3, + key_type = "tween", + }, + { + start_value = 1, + end_value = 0.1, + property_id = "scale_y", + node_id = "root", + easing = "inback", + duration = 0.3, + key_type = "tween", + }, + }, + duration = 1, + }, + }, + }, + type = "animation_editor", +} \ No newline at end of file diff --git a/example/examples/windows/window_confirmation/window_confirmation.collection b/example/examples/windows/window_confirmation/window_confirmation.collection new file mode 100644 index 0000000..6017d36 --- /dev/null +++ b/example/examples/windows/window_confirmation/window_confirmation.collection @@ -0,0 +1,39 @@ +name: "window_confirmation" +scale_along_z: 0 +embedded_instances { + id: "go" + data: "components {\n" + " id: \"window_confirmation\"\n" + " component: \"/example/examples/windows/window_confirmation/window_confirmation.gui\"\n" + " position {\n" + " x: 0.0\n" + " y: 0.0\n" + " z: 0.0\n" + " }\n" + " rotation {\n" + " x: 0.0\n" + " y: 0.0\n" + " z: 0.0\n" + " w: 1.0\n" + " }\n" + " property_decls {\n" + " }\n" + "}\n" + "" + position { + x: 0.0 + y: 0.0 + z: 0.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale3 { + x: 1.0 + y: 1.0 + z: 1.0 + } +} diff --git a/example/examples/windows/window_confirmation/window_confirmation.gui b/example/examples/windows/window_confirmation/window_confirmation.gui new file mode 100644 index 0000000..27ed7fc --- /dev/null +++ b/example/examples/windows/window_confirmation/window_confirmation.gui @@ -0,0 +1,847 @@ +script: "/example/examples/windows/window_confirmation/window_confirmation.gui_script" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 960.0 + y: 540.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 700.0 + y: 500.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_STRETCH + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 700.0 + y: 500.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "window" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 250.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 700.0 + y: 92.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.902 + y: 0.875 + z: 0.624 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_rounded_top_32" + id: "panel_header" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "window" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -46.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.5 + y: 1.5 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Confirmation" + font: "text_bold" + id: "text_header" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "panel_header" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 300.0 + y: -46.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 100.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "button_close" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "panel_header" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/icon_cross" + id: "icon_close" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_close" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -45.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 700.0 + y: 400.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 75.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.5 + y: 1.5 + z: 1.0 + w: 1.0 + } + size { + x: 420.0 + y: 140.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Do you agree with selected action?" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "content" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -160.0 + y: -100.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_accept" + parent: "content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button_accept/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_accept" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Confirm" + font: "text_bold" + id: "button_accept/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_accept/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 160.0 + y: -100.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_decline" + parent: "content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_red.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.957 + y: 0.608 + z: 0.608 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button_decline/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_decline" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Cancel" + font: "text_bold" + id: "button_decline/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_decline/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_bold" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/windows/window_confirmation/window_confirmation.gui_script b/example/examples/windows/window_confirmation/window_confirmation.gui_script new file mode 100644 index 0000000..82f2b0c --- /dev/null +++ b/example/examples/windows/window_confirmation/window_confirmation.gui_script @@ -0,0 +1,44 @@ +local lang = require("lang.lang") +local druid = require("druid.druid") + +local window_confirmation = require("example.examples.windows.window_confirmation.window_confirmation") + + +local function debug_stub(self) + if msg.url().socket ~= hash("window_confirmation") then + return + end + + lang.init() + druid.set_text_function(lang.txp) +end + + +function init(self) + debug_stub(self) + + -- Using component instead put all inside gui_script to + -- allow use it as example and as separate collection + self.druid = druid.new(self) + self.druid:new(window_confirmation) +end + + +function final(self) + self.druid:final() +end + + +function update(self, dt) + self.druid:update(dt) +end + + +function on_message(self, message_id, message, sender) + self.druid:on_message(message_id, message, sender) +end + + +function on_input(self, action_id, action) + return self.druid:on_input(action_id, action) +end \ No newline at end of file diff --git a/example/examples/windows/window_confirmation/window_confirmation.lua b/example/examples/windows/window_confirmation/window_confirmation.lua new file mode 100644 index 0000000..a59bcd9 --- /dev/null +++ b/example/examples/windows/window_confirmation/window_confirmation.lua @@ -0,0 +1,41 @@ +local component = require("druid.component") +local lang_text = require("druid.extended.lang_text") +local panthera = require("panthera.panthera") + +local window_animation_panthera = require("example.examples.windows.window_animation_panthera") + +---@class window_confirmation: druid.base_component +---@field druid druid_instance +---@field text_header druid.lang_text +---@field text_button_accept druid.lang_text +---@field text_button_decline druid.lang_text +---@field text_description druid.lang_text +---@field button_close druid.button +local M = component.create("window_confirmation") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.text_header = self.druid:new(lang_text, "text_header", "ui_confirmation") --[[@as druid.lang_text]] + self.text_button_accept = self.druid:new(lang_text, "button_accept/text", "ui_accept") --[[@as druid.lang_text]] + self.text_button_decline = self.druid:new(lang_text, "button_decline/text", "ui_decline") --[[@as druid.lang_text]] + self.text_description = self.druid:new(lang_text, "text") --[[@as druid.lang_text]] + + self.button_close = self.druid:new_button("button_close", self.on_button_close) + self.button_accept = self.druid:new_button("button_accept/root") + self.button_decline = self.druid:new_button("button_decline/root") + + self.animation = panthera.create_gui(window_animation_panthera, self:get_template(), nodes) + panthera.play(self.animation, "open") +end + + +function M:on_button_close() + panthera.play(self.animation, "close") +end + + +return M diff --git a/example/examples/windows/window_info/window_info.collection b/example/examples/windows/window_info/window_info.collection new file mode 100644 index 0000000..6790821 --- /dev/null +++ b/example/examples/windows/window_info/window_info.collection @@ -0,0 +1,39 @@ +name: "window_info" +scale_along_z: 0 +embedded_instances { + id: "go" + data: "components {\n" + " id: \"window_info\"\n" + " component: \"/example/examples/windows/window_info/window_info.gui\"\n" + " position {\n" + " x: 0.0\n" + " y: 0.0\n" + " z: 0.0\n" + " }\n" + " rotation {\n" + " x: 0.0\n" + " y: 0.0\n" + " z: 0.0\n" + " w: 1.0\n" + " }\n" + " property_decls {\n" + " }\n" + "}\n" + "" + position { + x: 0.0 + y: 0.0 + z: 0.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale3 { + x: 1.0 + y: 1.0 + z: 1.0 + } +} diff --git a/example/examples/windows/window_info/window_info.gui b/example/examples/windows/window_info/window_info.gui new file mode 100644 index 0000000..1d45e4f --- /dev/null +++ b/example/examples/windows/window_info/window_info.gui @@ -0,0 +1,679 @@ +script: "/example/examples/windows/window_info/window_info.gui_script" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 960.0 + y: 540.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 700.0 + y: 500.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_STRETCH + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 700.0 + y: 500.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "window" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 250.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 700.0 + y: 92.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_rounded_top_32" + id: "panel_header" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "window" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -46.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.5 + y: 1.5 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Information" + font: "text_bold" + id: "text_header" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "panel_header" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 300.0 + y: -46.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 100.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "button_close" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "panel_header" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/icon_cross" + id: "icon_close" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_close" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -45.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 700.0 + y: 400.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 75.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.5 + y: 1.5 + z: 1.0 + w: 1.0 + } + size { + x: 420.0 + y: 140.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "You are the best!" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: true + parent: "content" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -100.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_accept" + parent: "content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_green.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button_accept/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_accept" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Confirm" + font: "text_bold" + id: "button_accept/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_accept/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_bold" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/windows/window_info/window_info.gui_script b/example/examples/windows/window_info/window_info.gui_script new file mode 100644 index 0000000..9c4e5e9 --- /dev/null +++ b/example/examples/windows/window_info/window_info.gui_script @@ -0,0 +1,44 @@ +local lang = require("lang.lang") +local druid = require("druid.druid") + +local window_info = require("example.examples.windows.window_info.window_info") + + +local function debug_stub(self) + if msg.url().socket ~= hash("window_info") then + return + end + + lang.init() + druid.set_text_function(lang.txp) +end + + +function init(self) + debug_stub(self) + + -- Using component instead put all inside gui_script to + -- allow use it as example and as separate collection + self.druid = druid.new(self) + self.druid:new(window_info) +end + + +function final(self) + self.druid:final() +end + + +function update(self, dt) + self.druid:update(dt) +end + + +function on_message(self, message_id, message, sender) + self.druid:on_message(message_id, message, sender) +end + + +function on_input(self, action_id, action) + return self.druid:on_input(action_id, action) +end \ No newline at end of file diff --git a/example/examples/windows/window_info/window_info.lua b/example/examples/windows/window_info/window_info.lua new file mode 100644 index 0000000..26c36c1 --- /dev/null +++ b/example/examples/windows/window_info/window_info.lua @@ -0,0 +1,38 @@ +local component = require("druid.component") +local panthera = require("panthera.panthera") +local lang_text = require("druid.extended.lang_text") + +local window_animation_panthera = require("example.examples.windows.window_animation_panthera") + +---@class window_info: druid.base_component +---@field text_header druid.lang_text +---@field text_button_accept druid.lang_text +---@field text_description druid.lang_text +---@field button_close druid.button +---@field druid druid_instance +local M = component.create("window_info") + + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.text_header = self.druid:new(lang_text, "text_header", "ui_information") --[[@as druid.lang_text]] + self.text_button_accept = self.druid:new(lang_text, "button_accept/text", "ui_accept") --[[@as druid.lang_text]] + self.text_description = self.druid:new(lang_text, "text") --[[@as druid.lang_text]] + + self.button_close = self.druid:new_button("button_close", self.on_button_close) + self.button_accept = self.druid:new_button("button_accept/root") + + self.animation = panthera.create_gui(window_animation_panthera, self:get_template(), nodes) + panthera.play(self.animation, "open") +end + + +function M:on_button_close() + panthera.play(self.animation, "close") +end + + +return M diff --git a/example/examples/windows/window_language/window_language.collection b/example/examples/windows/window_language/window_language.collection new file mode 100644 index 0000000..b479753 --- /dev/null +++ b/example/examples/windows/window_language/window_language.collection @@ -0,0 +1,39 @@ +name: "window_language" +scale_along_z: 0 +embedded_instances { + id: "go" + data: "components {\n" + " id: \"window_language\"\n" + " component: \"/example/examples/windows/window_language/window_language.gui\"\n" + " position {\n" + " x: 0.0\n" + " y: 0.0\n" + " z: 0.0\n" + " }\n" + " rotation {\n" + " x: 0.0\n" + " y: 0.0\n" + " z: 0.0\n" + " w: 1.0\n" + " }\n" + " property_decls {\n" + " }\n" + "}\n" + "" + position { + x: 0.0 + y: 0.0 + z: 0.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale3 { + x: 1.0 + y: 1.0 + z: 1.0 + } +} diff --git a/example/examples/windows/window_language/window_language.gui b/example/examples/windows/window_language/window_language.gui new file mode 100644 index 0000000..1076352 --- /dev/null +++ b/example/examples/windows/window_language/window_language.gui @@ -0,0 +1,674 @@ +script: "/example/examples/windows/window_language/window_language.gui_script" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 960.0 + y: 540.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 600.0 + y: 580.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_STRETCH + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 600.0 + y: 580.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "window" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 290.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 600.0 + y: 92.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_rounded_top_32" + id: "panel_header" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_N + adjust_mode: ADJUST_MODE_FIT + parent: "window" + layer: "" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -46.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.5 + y: 1.5 + z: 1.0 + w: 1.0 + } + size { + x: 300.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Language" + font: "text_bold" + id: "text_header" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "panel_header" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 250.0 + y: -46.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 100.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "button_close" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "panel_header" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/icon_cross" + id: "icon_close" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_close" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_AUTO + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: -45.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 600.0 + y: 470.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "content" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 260.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "button_prefab" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "content" + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button" + parent: "button_prefab" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button_text_white.gui" + template_node_child: false + custom_type: 0 + enabled: true +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 240.0 + y: 70.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "button/root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button" + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + overridden_fields: 4 + template_node_child: true + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 220.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "English" + font: "text_bold" + id: "button/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button/root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + overridden_fields: 4 + overridden_fields: 8 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_bold" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/examples/windows/window_language/window_language.gui_script b/example/examples/windows/window_language/window_language.gui_script new file mode 100644 index 0000000..d213f31 --- /dev/null +++ b/example/examples/windows/window_language/window_language.gui_script @@ -0,0 +1,44 @@ +local lang = require("lang.lang") +local druid = require("druid.druid") + +local window_language = require("example.examples.windows.window_language.window_language") + + +local function debug_stub(self) + if msg.url().socket ~= hash("window_language") then + return + end + + lang.init() + druid.set_text_function(lang.txp) +end + + +function init(self) + debug_stub(self) + + -- Using component instead put all inside gui_script to + -- allow use it as example and as separate collection + self.druid = druid.new(self) + self.druid:new(window_language) +end + + +function final(self) + self.druid:final() +end + + +function update(self, dt) + self.druid:update(dt) +end + + +function on_message(self, message_id, message, sender) + self.druid:on_message(message_id, message, sender) +end + + +function on_input(self, action_id, action) + return self.druid:on_input(action_id, action) +end \ No newline at end of file diff --git a/example/examples/windows/window_language/window_language.lua b/example/examples/windows/window_language/window_language.lua new file mode 100644 index 0000000..f5f4120 --- /dev/null +++ b/example/examples/windows/window_language/window_language.lua @@ -0,0 +1,117 @@ +local lang = require("lang.lang") +local druid = require("druid.druid") +local event = require("druid.event") +local component = require("druid.component") +local lang_text = require("druid.extended.lang_text") +local panthera = require("panthera.panthera") + +local window_animation_panthera = require("example.examples.windows.window_animation_panthera") + +---@class window_language: druid.base_component +---@field text_header druid.text +---@field button_close druid.button +---@field druid druid_instance +---@field lang_buttons table +---@field grid druid.static_grid +---@field on_language_change druid.event +local M = component.create("window_language") + +---Color: #F0FBFF +local DEFAULT_LANGUAGE_COLOR = vmath.vector4(240/255, 251/255, 255/255, 1.0) +---Color: #E6DF9F +local SELECTED_LANGUAGE_COLOR = vmath.vector4(230/255, 223/255, 159/255, 1.0) + +---@param template string +---@param nodes table +function M:init(template, nodes) + self.druid = self:get_druid(template, nodes) + + self.lang_buttons = {} + self.created_nodes = {} + self.prefab = self:get_node("button_prefab") + gui.set_enabled(self.prefab, false) + + self._current_lang_id = lang.get_lang() + + self.button_close = self.druid:new_button("button_close", self.on_button_close) + + self.druid:new(lang_text, "text_header", "ui_language") + self.grid = self.druid:new_static_grid("content", self.prefab, 2) + self.grid.style.IS_DYNAMIC_NODE_POSES = true + + self.animation = panthera.create_gui(window_animation_panthera, self:get_template(), nodes) + panthera.play(self.animation, "open") + + self:load_langs() + + self.on_language_change = event() +end + + +function M:on_remove() + for index = 1, #self.created_nodes do + local nodes = self.created_nodes[index] + for _, node in pairs(nodes) do + gui.delete_node(node) + end + end +end + + +function M:load_langs() + local languages = lang.get_langs() + for index = 1, #languages do + local lang_id = languages[index] + + local template = self:get_template() + if template and template ~= "" then + template = template .. "/" + end + local prefab_nodes = gui.clone_tree(self.prefab) + local root = prefab_nodes[template .. "button_prefab"] + local button_node = prefab_nodes[template .. "button/root"] + local text = prefab_nodes[template .. "button/text"] + + local button = self.druid:new_button(button_node, self.on_language_button, lang_id) + self.druid:new(lang_text, text, "ui_language_" .. lang_id) + gui.set_enabled(root, true) + self.grid:add(root) + + self.lang_buttons[lang_id] = button + table.insert(self.created_nodes, prefab_nodes) + end + + do -- Update window size to fit all languages + local height = self.grid:get_size().y + gui.set(self:get_node("window"), "size.y", height + 110) + gui.set(self:get_node("panel_header"), "position.y", (height + 110)/2) + end + + do -- Select current language button + local current_lang_button = self.lang_buttons[self._current_lang_id] + gui.animate(current_lang_button.node, "color", SELECTED_LANGUAGE_COLOR, gui.EASING_OUTQUAD, 0.2) + end +end + + +function M:on_button_close() + panthera.play(self.animation, "close") +end + + +function M:on_language_button(lang_id) + local current_lang_button = self.lang_buttons[self._current_lang_id] + local new_lang_button = self.lang_buttons[lang_id] + + self._current_lang_id = lang_id + lang.set_lang(lang_id) + druid.on_language_change() + + self.on_language_change:trigger(lang_id) + + gui.animate(current_lang_button.node, "color", DEFAULT_LANGUAGE_COLOR, gui.EASING_OUTQUAD, 0.2) + gui.animate(new_lang_button.node, "color", SELECTED_LANGUAGE_COLOR, gui.EASING_OUTQUAD, 0.2) +end + + +return M diff --git a/example/locales/de.json b/example/locales/de.json new file mode 100644 index 0000000..d87ed88 --- /dev/null +++ b/example/locales/de.json @@ -0,0 +1,172 @@ +{ + "ui_examples": "Beispiele", + "ui_properties_panel": "Eigenschaften", + "ui_output": "Ausgabe", + "ui_view_code": "Code anzeigen", + "ui_profiler": "Profiler", + "ui_profiler_memory": "Speicher", + "ui_profiler_fps": "FPS", + "ui_profiler_components": "Komponenten", + "ui_profiler_events": "Ereignisse", + "ui_confirm": "Bestätigen", + "ui_cancel": "Abbrechen", + "ui_value": "Wert", + "ui_scroll": "Scrollen", + "ui_clipping": "Zuschneiden", + "ui_no_properties": "Keine Eigenschaften für dieses Beispiel", + "ui_padding": "Innenabstand", + "ui_margin_x": "Außenabstand X", + "ui_margin_y": "Außenabstand Y", + "ui_justify": "Ausrichten", + "ui_pivot_next": "Nächster Pivot", + "ui_type_next": "Nächster Typ", + "ui_adjust_next": "Nächste Anpassung", + "ui_enabled": "Aktiviert", + + "ui_examples_basic": "Basis", + "ui_examples_data_list": "Datenliste", + "ui_examples_gamepad": "Gamepad", + "ui_examples_window": "Fenster", + "ui_examples_panthera": "Panthera", + + "ui_example_intro": "Einführung", + "ui_example_intro_description": "Hier wird eine kurze Beschreibung des ausgewählten Beispiels stehen.", + + "ui_example_basic_button": "Schaltfläche", + "ui_example_basic_button_description": "Beispiel für eine grundlegende Druid-Schaltfläche", + + "ui_example_basic_button_double_click": "Doppelklick", + "ui_example_basic_button_double_click_description": "Wie man Doppelklick-Funktionalität zur Schaltfläche hinzufügt.", + + "ui_example_basic_button_hold": "Halten", + "ui_example_basic_button_hold_description": "Wie man Halte- und Triggerfunktionalität für die Schaltfläche erstellt.", + + "ui_example_basic_text": "Text", + "ui_example_basic_text_description": "Überprüfen Sie, wie Text mit verschiedenen Eigenschaften angepasst wird.", + + "ui_example_basic_multiline_text": "Mehrzeiliger Text", + "ui_example_basic_multiline_text_description": "Überprüfen Sie, wie mehrzeiliger Text mit verschiedenen Eigenschaften angepasst wird.", + + "ui_example_basic_hover": "Hover", + "ui_example_basic_hover_description": "Hover hat zwei Hover-Ereignisse. Eines für die Maus und eines für den Touch. Verwenden Sie mouse_callback für Mausereignisse.", + + "ui_example_basic_drag": "Ziehen", + "ui_example_basic_drag_description": "Wie man einen einfachen Zieh-Knoten erstellt", + + "ui_example_basic_drag_to_node": "Ziehen zu Knoten", + "ui_example_basic_drag_to_node_description": "Wie man einen Knoten zu einem anderen Knoten zieht und Rückrufe erhält", + + "ui_example_basic_slider": "Schieberegler", + "ui_example_basic_slider_description": "Wie man einen einfachen Schieberegler erstellt", + + "ui_example_basic_slider_vertical": "Vertikaler Schieberegler", + "ui_example_basic_slider_vertical_description": "Wie man einen einfachen vertikalen Schieberegler erstellt", + + "ui_example_basic_slider_stepped": "Schieberegler mit Schritten", + "ui_example_basic_slider_stepped_description": "Schieberegler können eine \"Schritte\"-Eigenschaft haben, um ihn gestuft zu machen", + + "ui_example_basic_progress_bar": "Fortschrittsanzeige", + "ui_example_basic_progress_bar_description": "Wie man eine einfache Fortschrittsanzeige erstellt", + + "ui_example_basic_progress_bar_slice9": "Fortschrittsanzeige Slice9", + "ui_example_basic_progress_bar_slice9_description": "Die Fortschrittskomponente kann die Eigenschaft slice9 verarbeiten, um sie am Anfang skalierbar zu machen", + + "ui_example_basic_timer": "Timer", + "ui_example_basic_timer_description": "Die Timer-Komponente wird verwendet, um einen Sekunden-Timer mit einem Rückruf anzuzeigen", + + "ui_example_basic_hotkey": "Tastenkombination", + "ui_example_basic_hotkey_description": "Wie man eine Tastenkombination für einen Rückruf erstellt", + + "ui_example_basic_scroll": "Scrollen", + "ui_example_basic_scroll_description": "Wie man einfaches Scrollen erstellt", + "ui_elastic_scroll": "Elastisches Scrollen", + + "ui_example_basic_scroll_slider": "Scrollen mit Schieberegler", + "ui_example_basic_scroll_slider_description": "Wie man eine Schieberegler-Steuerung zum Scrollen hinzufügt und sie verwendet", + + "ui_example_basic_grid": "Statische Gitter", + "ui_example_basic_grid_description": "Wie man Knoten in einem Gitter platziert", + "ui_grid_in_row": "Elemente in Zeile", + "ui_add_element": "Element hinzufügen", + "ui_remove_element": "Element entfernen", + "ui_clear_elements": "Elemente löschen", + + "ui_example_basic_scroll_bind_grid": "Scrollen mit gebundenem Gitter", + "ui_example_basic_scroll_bind_grid_description": "Scrollen funktioniert gut mit Gittern und vordefinierten Größen, dies ist ein Beispiel für ein gebundenes Scrollgitter.", + + "ui_example_basic_scroll_bind_grid_horizontal": "Scrollen mit gebundenem horizontalem Gitter", + "ui_example_basic_scroll_bind_grid_horizontal_description": "Scrollen funktioniert gut mit Gittern und vordefinierten Größen, dies ist ein Beispiel für ein gebundenes horizontales Scrollgitter.", + + "ui_example_basic_input": "Eingabe", + "ui_example_basic_input_description": "Wie man die einfachste Eingabe in Druid macht", + + "ui_example_input_password": "Passworteingabe", + "ui_example_input_password_description": "Wie die Passworteingabe funktioniert", + + "ui_example_basic_rich_input": "Reiche Eingabe", + "ui_example_basic_rich_input_description": "Wie man eine reiche Eingabe in Druid erstellt", + + "ui_example_basic_rich_text": "Reicher Text", + "ui_example_basic_rich_text_description": "Wie man einen reichen Text in Druid erstellt", + + "ui_example_rich_text_tags": "Tags für reichen Text", + "ui_example_rich_text_tags_description": "Hier ist ein einfaches Beispiel für reichen Text mit Tags\n - Farbe\n - Schriftart\n - Größe\n - br\n - img", + + "ui_example_basic_swipe": "Wischen", + "ui_example_basic_swipe_description": "Wie man Rückrufe für Wischereignisse hinzufügt", + + "ui_example_data_list_basic": "Einfache Datenliste", + "ui_example_data_list_basic_description": "Wie man eine einfache Datenliste erstellt", + + "ui_example_data_list_horizontal_basic": "Einfache horizontale Datenliste", + "ui_example_data_list_horizontal_basic_description": "Wie man eine einfache horizontale Datenliste erstellt", + + "ui_example_data_list_add_remove_clear": "Datenliste hinzufügen, entfernen, löschen", + "ui_example_data_list_add_remove_clear_description": "Wie die Funktionen Hinzufügen, Entfernen und Löschen in der Datenliste funktionieren", + + "ui_example_data_list_cache_with_component": "Gecachte Version der Datenliste", + "ui_example_data_list_cache_with_component_description": "Die gecachte Version erfordert mehr Einrichtung für Rückrufe zum Hinzufügen/Entfernen, ist aber speichereffizienter", + + "ui_language": "Sprache", + "ui_example_window_language": "Fenster Sprache", + "ui_example_window_language_description": "Hier ist ein einfaches Beispiel für ein Fenster mit Sprachenauswahl.", + + "ui_confirmation": "Bestätigung", + "ui_example_window_confirmation": "Fensterbestätigung", + "ui_confirmation_description": "Bestätigen Sie den Kauf des Autos für eine Million Dollar?", + + "ui_information": "Information", + "ui_example_window_information": "Fensterinformation", + "ui_example_window_information_text": "Du bist der Beste der Besten!", + "ui_example_window_information_description": "Hier ist ein einfaches Beispiel für ein Fenster mit Informationsnachricht.", + + "ui_example_gamepad_tester": "Gamepad-Tester", + "ui_example_gamepad_tester_description": "Testen Sie hier Ihr Gamepad, um Tasten und Achsen zu binden", + + "ui_example_on_screen_control": "Bildschirmsteuerung", + "ui_example_on_screen_control_description": "Hier ist ein einfaches Beispiel für eine Bildschirmsteuerung. Die on_screen_input hier ist ein einfacher Joystick mit einem Rückruf als Druid-Komponente", + + "ui_example_layout_basic": "Layout", + "ui_example_layout_basic_description": "Dieses Layout kann so angepasst werden, dass es mit Figma übereinstimmt", + + "ui_example_panthera_basic_animation": "Panthera Grundanimation", + "ui_example_panthera_basic_animation_description": "Hier ist ein einfaches Beispiel für die Grundanimation von Panthera.", + + "ui_example_panthera_animation_blend": "Panthera Animationsmischung", + "ui_example_panthera_animation_blend_description": "Hier ist ein einfaches Beispiel für die Animationsmischung von Panthera.", + "ui_example_panthera_animation_blend_hint": "Bewege die Maus über diesen Bereich", + + "ui_animation_vertical": "Vertikal", + "ui_animation_horizontal": "Horizontal", + + "ui_language_en": "Englisch", + "ui_language_ru": "Русский", + "ui_language_es": "Español", + "ui_language_de": "Deutsch", + "ui_language_fr": "Français", + "ui_language_ja": "日本語", + "ui_language_pt": "Português", + "ui_language_it": "Italiano", + "ui_language_kr": "한국어", + "ui_language_zh": "中文" +} diff --git a/example/locales/en.json b/example/locales/en.json new file mode 100644 index 0000000..8e7cb01 --- /dev/null +++ b/example/locales/en.json @@ -0,0 +1,184 @@ +{ + "additional_characters": "\"&! :%1234567890*абвгдеёжзийклмнопрстуфхцчшщъыьэюяАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯÀàÂâÆæÇçÈèÉéÊêËëÎîÏïÔôŒœÙùÛûÜüŸÿ", + "ui_examples": "Examples", + "ui_properties_panel": "Properties", + "ui_output": "Output", + "ui_view_code": "View code", + "ui_profiler": "Profiler", + "ui_profiler_memory": "Memory", + "ui_profiler_fps": "FPS", + "ui_profiler_components": "Components", + "ui_profiler_events": "Events", + "ui_confirm": "Confirm", + "ui_cancel": "Cancel", + "ui_value": "Value", + "ui_scroll": "Scroll", + "ui_clipping": "Clipping", + "ui_no_properties": "No properties for this example", + "ui_padding": "Padding", + "ui_margin_x": "Margin X", + "ui_margin_y": "Margin Y", + "ui_justify": "Justify", + "ui_pivot_next": "Next Pivot", + "ui_type_next": "Next Type", + "ui_adjust_next": "Next Adjust", + "ui_enabled": "Enabled", + + "ui_examples_basic": "Basic", + "ui_examples_data_list": "Data List", + "ui_examples_gamepad": "Gamepad", + "ui_examples_window": "Windows", + "ui_examples_panthera": "Panthera", + + "ui_example_intro": "Introduction", + "ui_example_intro_description": "Here will be a brief description of the selected example.", + + "ui_example_basic_button": "Button", + "ui_example_basic_button_description": "Basic Druid button example", + + "ui_example_basic_button_double_click": "Button Double Click", + "ui_example_basic_button_double_click_description": "How to add double click functionality to the button.", + + "ui_example_basic_button_hold": "Button Hold", + "ui_example_basic_button_hold_description": "How to make hold and trigger functionality for the button.", + + "ui_example_basic_text": "Text", + "ui_example_basic_text_description": "Check how text is adjusted with different properties.", + + "ui_example_basic_multiline_text": "Multiline Text", + "ui_example_basic_multiline_text_description": "Check how multiline text is adjusted with different properties.", + + "ui_example_basic_hover": "Hover", + "ui_example_basic_hover_description": "Hover have two hover events. One for mouse and one for touch. Use mouse_callback for mouse events", + + "ui_example_basic_drag": "Drag", + "ui_example_basic_drag_description": "How to make simple drag node", + + "ui_example_basic_drag_to_node": "Drag To Node", + "ui_example_basic_drag_to_node_description": "How to make drag node to another node and get callbacks", + + "ui_example_basic_slider": "Slider", + "ui_example_basic_slider_description": "How to make simple slider", + + "ui_example_basic_slider_vertical": "Slider Vertical", + "ui_example_basic_slider_vertical_description": "How to make simple vertical slider", + + "ui_example_basic_slider_stepped": "Slider Steps", + "ui_example_basic_slider_stepped_description": "Sliders can have a \"steps\" property to make it stepped", + + "ui_example_basic_progress_bar": "Progress Bar", + "ui_example_basic_progress_bar_description": "How to make simple progress bar", + + "ui_example_basic_progress_bar_slice9": "Progress Bar Slice9", + "ui_example_basic_progress_bar_slice9_description": "The progress component can handle slice9 property to make it scalable at the beginning", + + "ui_example_basic_blocker": "Blocker", + "ui_example_basic_blocker_description": "How to make a blocker from a node to interrupt the input", + + "ui_example_basic_back_handler": "Back Handler", + "ui_example_basic_back_handler_description": "How to create back handler. Is used to shorthand for back button or backspace to call a callback", + + "ui_example_basic_timer": "Timer", + "ui_example_basic_timer_description": "The Timer component is used to display a second timer with a callback", + + "ui_example_basic_hotkey": "Hotkey", + "ui_example_basic_hotkey_description": "How to create a hotkey for a callback", + + "ui_example_basic_scroll": "Scroll", + "ui_example_basic_scroll_description": "How to make simple scroll", + "ui_elastic_scroll": "Elastic Scroll", + + "ui_example_basic_scroll_slider": "Scroll with Slider", + "ui_example_basic_scroll_slider_description": "How to add a slider control to the scroll and use them", + + "ui_example_basic_grid": "Static Grid", + "ui_example_basic_grid_description": "How to place nodes in a grid", + "ui_grid_in_row": "Elements In Row", + "ui_add_element": "Add Element", + "ui_remove_element": "Remove Element", + "ui_clear_elements": "Clear Elements", + + "ui_example_basic_scroll_bind_grid": "Scroll Grid", + "ui_example_basic_scroll_bind_grid_description": "Scroll works good with grids and predefined sizes, this is an example of scroll bind grid.", + + "ui_example_basic_scroll_bind_grid_horizontal": "Scroll Grid Horizontal", + "ui_example_basic_scroll_bind_grid_horizontal_description": "Scroll works good with grids and predefined sizes, this is an example of scroll bind grid horizontal.", + + "ui_example_basic_scroll_bind_grid_points": "Scroll Grid Points", + + "ui_example_basic_input": "Input", + "ui_example_basic_input_description": "How to make most simple input in Druid", + + "ui_example_input_password": "Input Password", + "ui_example_input_password_description": "How the password input works", + + "ui_example_basic_rich_input": "Rich Input", + "ui_example_basic_rich_input_description": "How to make a rich input in Druid", + + "ui_example_basic_rich_text": "Rich Text", + "ui_example_basic_rich_text_description": "How to create a rich text in Druid", + + "ui_example_rich_text_tags": "Rich Text Tags", + "ui_example_rich_text_tags_description": "Here is a simple example of rich text with tags\n - color\n - font\n - size\n - br\n - img", + + "ui_example_basic_swipe": "Swipe", + "ui_example_basic_swipe_description": "How to add callbacks on swipe events", + + "ui_example_basic_checkbox": "Checkbox", + "ui_example_basic_checkbox_description": "How to make a simple checkbox using Druid Button", + + "ui_example_data_list_basic": "Data List Basic", + "ui_example_data_list_basic_description": "How to make a simple data list", + + "ui_example_data_list_horizontal_basic": "Data List Horizontal Basic", + "ui_example_data_list_horizontal_basic_description": "How to make a simple horizontal data list", + + "ui_example_data_list_add_remove_clear": "Data List Add Remove Clear", + "ui_example_data_list_add_remove_clear_description": "How the add, remove and clear functions work in the data list", + + "ui_example_data_list_cache_with_component": "Data List Cached Version", + "ui_example_data_list_cache_with_component_description": "Cached version requires more setup for add/remove callbacks, but it's more memory performant", + + "ui_language": "Language", + "ui_example_window_language": "Window Language", + "ui_example_window_language_description": "Here is a simple example of window with language selection.", + + "ui_confirmation": "Confirmation", + "ui_example_window_confirmation": "Window Confirmation", + "ui_confirmation_description": "Confirm buy the one million dollar car?", + + "ui_information": "Information", + "ui_example_window_information": "Window Information", + "ui_example_window_information_text": "You are the best of the best!", + "ui_example_window_information_description": "Here is a simple example of window with information message.", + + "ui_example_gamepad_tester": "Gamepad Tester", + "ui_example_gamepad_tester_description": "Test your gamepad here to bind buttons and axes", + + "ui_example_on_screen_control": "On Screen Control", + "ui_example_on_screen_control_description": "Here is a simple example of on screen control. The on_screen_input here is a simple joystick with a callback as Druid component", + + "ui_example_layout_basic": "Layout", + "ui_example_layout_basic_description": "This layout can be adjusted to be the same as in Figma", + + "ui_example_panthera_basic_animation": "Panthera Basic Animation", + "ui_example_panthera_basic_animation_description": "Here is a simple example of Panthera Basic Animation.", + + "ui_example_panthera_animation_blend": "Panthera Animation Blend", + "ui_example_panthera_animation_blend_description": "Here is a simple example of Panthera Animation Blend.", + "ui_example_panthera_animation_blend_hint": "Hover mouse over this area", + + "ui_animation_vertical": "Vertical", + "ui_animation_horizontal": "Horizontal", + + "ui_language_en": "English", + "ui_language_ru": "Русский", + "ui_language_es": "Español", + "ui_language_de": "Deutsch", + "ui_language_fr": "Français", + "ui_language_ja": "日本語", + "ui_language_pt": "Português", + "ui_language_it": "Italiano", + "ui_language_kr": "한국어", + "ui_language_zh": "中文" +} \ No newline at end of file diff --git a/example/locales/es.json b/example/locales/es.json new file mode 100644 index 0000000..8c097d0 --- /dev/null +++ b/example/locales/es.json @@ -0,0 +1,172 @@ +{ + "ui_examples": "Ejemplos", + "ui_properties_panel": "Propiedades", + "ui_output": "Salida", + "ui_view_code": "Ver código", + "ui_profiler": "Profiler", + "ui_profiler_memory": "Memoria", + "ui_profiler_fps": "FPS", + "ui_profiler_components": "Componentes", + "ui_profiler_events": "Eventos", + "ui_confirm": "Confirmar", + "ui_cancel": "Cancelar", + "ui_value": "Valor", + "ui_scroll": "Desplazamiento", + "ui_clipping": "Recorte", + "ui_no_properties": "No hay propiedades para este ejemplo", + "ui_padding": "Relleno", + "ui_margin_x": "Margen X", + "ui_margin_y": "Margen Y", + "ui_justify": "Justificar", + "ui_pivot_next": "Siguiente pivote", + "ui_type_next": "Siguiente tipo", + "ui_adjust_next": "Siguiente ajuste", + "ui_enabled": "Habilitado", + + "ui_examples_basic": "Básico", + "ui_examples_data_list": "Lista de datos", + "ui_examples_gamepad": "Gamepad", + "ui_examples_window": "Ventanas", + "ui_examples_panthera": "Panthera", + + "ui_example_intro": "Introducción", + "ui_example_intro_description": "Aquí habrá una breve descripción del ejemplo seleccionado.", + + "ui_example_basic_button": "Botón", + "ui_example_basic_button_description": "Ejemplo de botón básico de Druid", + + "ui_example_basic_button_double_click": "Doble clic", + "ui_example_basic_button_double_click_description": "Cómo agregar funcionalidad de doble clic al botón.", + + "ui_example_basic_button_hold": "Mantener", + "ui_example_basic_button_hold_description": "Cómo hacer funcionalidad de mantener y activar para el botón.", + + "ui_example_basic_text": "Texto", + "ui_example_basic_text_description": "Verifique cómo se ajusta el texto con diferentes propiedades.", + + "ui_example_basic_multiline_text": "Texto multilinea", + "ui_example_basic_multiline_text_description": "Verifique cómo se ajusta el texto multilinea con diferentes propiedades.", + + "ui_example_basic_hover": "Hover", + "ui_example_basic_hover_description": "Hover tiene dos eventos de hover. Uno para el ratón y otro para el tacto. Use mouse_callback para eventos de ratón.", + + "ui_example_basic_drag": "Arrastrar", + "ui_example_basic_drag_description": "Cómo hacer un nodo de arrastre simple", + + "ui_example_basic_drag_to_node": "Arrastrar a nodo", + "ui_example_basic_drag_to_node_description": "Cómo arrastrar un nodo a otro nodo y obtener callbacks", + + "ui_example_basic_slider": "Deslizador", + "ui_example_basic_slider_description": "Cómo hacer un deslizador simple", + + "ui_example_basic_slider_vertical": "Deslizador vertical", + "ui_example_basic_slider_vertical_description": "Cómo hacer un deslizador vertical simple", + + "ui_example_basic_slider_stepped": "Deslizador con pasos", + "ui_example_basic_slider_stepped_description": "Los deslizadores pueden tener una propiedad \"pasos\" para hacer que sea escalonado", + + "ui_example_basic_progress_bar": "Barra de progreso", + "ui_example_basic_progress_bar_description": "Cómo hacer una barra de progreso simple", + + "ui_example_basic_progress_bar_slice9": "Barra de progreso Slice9", + "ui_example_basic_progress_bar_slice9_description": "El componente de progreso puede manejar la propiedad slice9 para hacerlo escalable desde el principio", + + "ui_example_basic_timer": "Temporizador", + "ui_example_basic_timer_description": "El componente Temporizador se usa para mostrar un temporizador de segundos con un callback", + + "ui_example_basic_hotkey": "Tecla de acceso rápido", + "ui_example_basic_hotkey_description": "Cómo crear una tecla de acceso rápido para un callback", + + "ui_example_basic_scroll": "Desplazamiento", + "ui_example_basic_scroll_description": "Cómo hacer un desplazamiento simple", + "ui_elastic_scroll": "Desplazamiento elástico", + + "ui_example_basic_scroll_slider": "Desplazamiento con deslizador", + "ui_example_basic_scroll_slider_description": "Cómo agregar un control deslizante al desplazamiento y usarlos", + + "ui_example_basic_grid": "Cuadrícula estática", + "ui_example_basic_grid_description": "Cómo colocar nodos en una cuadrícula", + "ui_grid_in_row": "Elementos en fila", + "ui_add_element": "Agregar elemento", + "ui_remove_element": "Eliminar elemento", + "ui_clear_elements": "Limpiar elementos", + + "ui_example_basic_scroll_bind_grid": "Desplazamiento vinculado a cuadrícula", + "ui_example_basic_scroll_bind_grid_description": "El desplazamiento funciona bien con cuadrículas y tamaños predefinidos, este es un ejemplo de desplazamiento vinculado a cuadrícula.", + + "ui_example_basic_scroll_bind_grid_horizontal": "Desplazamiento vinculado a cuadrícula horizontal", + "ui_example_basic_scroll_bind_grid_horizontal_description": "El desplazamiento funciona bien con cuadrículas y tamaños predefinidos, este es un ejemplo de desplazamiento vinculado a cuadrícula horizontal.", + + "ui_example_basic_input": "Entrada", + "ui_example_basic_input_description": "Cómo hacer la entrada más simple en Druid", + + "ui_example_input_password": "Entrada de contraseña", + "ui_example_input_password_description": "Cómo funciona la entrada de contraseña", + + "ui_example_basic_rich_input": "Entrada enriquecida", + "ui_example_basic_rich_input_description": "Cómo hacer una entrada enriquecida en Druid", + + "ui_example_basic_rich_text": "Texto enriquecido", + "ui_example_basic_rich_text_description": "Cómo crear un texto enriquecido en Druid", + + "ui_example_rich_text_tags": "Etiquetas de texto enriquecido", + "ui_example_rich_text_tags_description": "Aquí hay un ejemplo simple de texto enriquecido con etiquetas\n - color\n - fuente\n - tamaño\n - br\n - img", + + "ui_example_basic_swipe": "Deslizar", + "ui_example_basic_swipe_description": "Cómo agregar callbacks en eventos de deslizar", + + "ui_example_data_list_basic": "Lista de datos básica", + "ui_example_data_list_basic_description": "Cómo hacer una lista de datos simple", + + "ui_example_data_list_horizontal_basic": "Lista de datos horizontal básica", + "ui_example_data_list_horizontal_basic_description": "Cómo hacer una lista de datos horizontal simple", + + "ui_example_data_list_add_remove_clear": "Lista de datos agregar, eliminar, limpiar", + "ui_example_data_list_add_remove_clear_description": "Cómo funcionan las funciones agregar, eliminar y limpiar en la lista de datos", + + "ui_example_data_list_cache_with_component": "Versión en caché de la lista de datos", + "ui_example_data_list_cache_with_component_description": "La versión en caché requiere más configuración para callbacks de agregar/eliminar, pero es más eficiente en memoria", + + "ui_language": "Idioma", + "ui_example_window_language": "Ventana de idioma", + "ui_example_window_language_description": "Aquí hay un ejemplo simple de una ventana con selección de idioma.", + + "ui_confirmation": "Confirmación", + "ui_example_window_confirmation": "Ventana de confirmación", + "ui_confirmation_description": "¿Confirmar la compra del coche de un millón de dólares?", + + "ui_information": "Información", + "ui_example_window_information": "Ventana de información", + "ui_example_window_information_text": "¡Eres el mejor de los mejores!", + "ui_example_window_information_description": "Aquí hay un ejemplo simple de una ventana con un mensaje de información.", + + "ui_example_gamepad_tester": "Tester de gamepad", + "ui_example_gamepad_tester_description": "Prueba tu gamepad aquí para vincular botones y ejes", + + "ui_example_on_screen_control": "Control en pantalla", + "ui_example_on_screen_control_description": "Aquí hay un ejemplo simple de control en pantalla. La entrada en pantalla aquí es un joystick simple con un callback como componente Druid", + + "ui_example_layout_basic": "Diseño", + "ui_example_layout_basic_description": "Este diseño se puede ajustar para que sea igual al de Figma", + + "ui_example_panthera_basic_animation": "Animación básica de Panthera", + "ui_example_panthera_basic_animation_description": "Aquí hay un ejemplo simple de la animación básica de Panthera.", + + "ui_example_panthera_animation_blend": "Mezcla de animaciones de Panthera", + "ui_example_panthera_animation_blend_description": "Aquí hay un ejemplo simple de mezcla de animaciones de Panthera.", + "ui_example_panthera_animation_blend_hint": "Pasa el ratón sobre esta área", + + "ui_animation_vertical": "Vertical", + "ui_animation_horizontal": "Horizontal", + + "ui_language_en": "English", + "ui_language_ru": "Русский", + "ui_language_es": "Español", + "ui_language_de": "Deutsch", + "ui_language_fr": "Français", + "ui_language_ja": "日本語", + "ui_language_pt": "Português", + "ui_language_it": "Italiano", + "ui_language_kr": "한국어", + "ui_language_zh": "中文" +} diff --git a/example/locales/fr.json b/example/locales/fr.json new file mode 100644 index 0000000..0e6def5 --- /dev/null +++ b/example/locales/fr.json @@ -0,0 +1,172 @@ +{ + "ui_examples": "Exemples", + "ui_properties_panel": "Propriétés", + "ui_output": "Sortie", + "ui_view_code": "Voir le code", + "ui_profiler": "Profiler", + "ui_profiler_memory": "Mémoire", + "ui_profiler_fps": "FPS", + "ui_profiler_components": "Composants", + "ui_profiler_events": "Événements", + "ui_confirm": "Confirmer", + "ui_cancel": "Annuler", + "ui_value": "Valeur", + "ui_scroll": "Défilement", + "ui_clipping": "Découpe", + "ui_no_properties": "Aucune propriété pour cet exemple", + "ui_padding": "Marge intérieure", + "ui_margin_x": "Marge X", + "ui_margin_y": "Marge Y", + "ui_justify": "Justifier", + "ui_pivot_next": "Prochain pivot", + "ui_type_next": "Prochain type", + "ui_adjust_next": "Prochain ajustement", + "ui_enabled": "Activé", + + "ui_examples_basic": "De base", + "ui_examples_data_list": "Liste de données", + "ui_examples_gamepad": "Gamepad", + "ui_examples_window": "Fenêtres", + "ui_examples_panthera": "Panthera", + + "ui_example_intro": "Introduction", + "ui_example_intro_description": "Voici une brève description de l'exemple sélectionné.", + + "ui_example_basic_button": "Bouton", + "ui_example_basic_button_description": "Exemple de bouton de base Druid", + + "ui_example_basic_button_double_click": "Double clic", + "ui_example_basic_button_double_click_description": "Comment ajouter une fonctionnalité de double clic au bouton.", + + "ui_example_basic_button_hold": "Maintenir", + "ui_example_basic_button_hold_description": "Comment créer une fonctionnalité de maintien et de déclenchement pour le bouton.", + + "ui_example_basic_text": "Texte", + "ui_example_basic_text_description": "Vérifiez comment le texte est ajusté avec différentes propriétés.", + + "ui_example_basic_multiline_text": "Texte multiligne", + "ui_example_basic_multiline_text_description": "Vérifiez comment le texte multiligne est ajusté avec différentes propriétés.", + + "ui_example_basic_hover": "Survol", + "ui_example_basic_hover_description": "Le survol a deux événements de survol. Un pour la souris et un pour le toucher. Utilisez mouse_callback pour les événements de la souris.", + + "ui_example_basic_drag": "Glisser", + "ui_example_basic_drag_description": "Comment créer un nœud de glissement simple", + + "ui_example_basic_drag_to_node": "Glisser vers le nœud", + "ui_example_basic_drag_to_node_description": "Comment glisser un nœud vers un autre nœud et obtenir des rappels", + + "ui_example_basic_slider": "Curseur", + "ui_example_basic_slider_description": "Comment créer un curseur simple", + + "ui_example_basic_slider_vertical": "Curseur vertical", + "ui_example_basic_slider_vertical_description": "Comment créer un curseur vertical simple", + + "ui_example_basic_slider_stepped": "Curseur à étapes", + "ui_example_basic_slider_stepped_description": "Les curseurs peuvent avoir une propriété \"étapes\" pour les rendre à étapes", + + "ui_example_basic_progress_bar": "Barre de progression", + "ui_example_basic_progress_bar_description": "Comment créer une barre de progression simple", + + "ui_example_basic_progress_bar_slice9": "Barre de progression Slice9", + "ui_example_basic_progress_bar_slice9_description": "Le composant de progression peut gérer la propriété slice9 pour le rendre évolutif dès le début", + + "ui_example_basic_timer": "Minuteur", + "ui_example_basic_timer_description": "Le composant Minuteur est utilisé pour afficher un minuteur en secondes avec un rappel", + + "ui_example_basic_hotkey": "Raccourci", + "ui_example_basic_hotkey_description": "Comment créer un raccourci pour un rappel", + + "ui_example_basic_scroll": "Défilement", + "ui_example_basic_scroll_description": "Comment créer un défilement simple", + "ui_elastic_scroll": "Défilement élastique", + + "ui_example_basic_scroll_slider": "Défilement avec curseur", + "ui_example_basic_scroll_slider_description": "Comment ajouter un contrôle de curseur au défilement et les utiliser", + + "ui_example_basic_grid": "Grille statique", + "ui_example_basic_grid_description": "Comment placer des nœuds dans une grille", + "ui_grid_in_row": "Éléments dans la ligne", + "ui_add_element": "Ajouter un élément", + "ui_remove_element": "Supprimer un élément", + "ui_clear_elements": "Effacer les éléments", + + "ui_example_basic_scroll_bind_grid": "Défilement lié à la grille", + "ui_example_basic_scroll_bind_grid_description": "Le défilement fonctionne bien avec les grilles et les tailles prédéfinies, voici un exemple de défilement lié à une grille.", + + "ui_example_basic_scroll_bind_grid_horizontal": "Défilement lié à la grille horizontale", + "ui_example_basic_scroll_bind_grid_horizontal_description": "Le défilement fonctionne bien avec les grilles et les tailles prédéfinies, voici un exemple de défilement lié à une grille horizontale.", + + "ui_example_basic_input": "Entrée", + "ui_example_basic_input_description": "Comment créer l'entrée la plus simple dans Druid", + + "ui_example_input_password": "Entrée de mot de passe", + "ui_example_input_password_description": "Comment fonctionne l'entrée de mot de passe", + + "ui_example_basic_rich_input": "Entrée riche", + "ui_example_basic_rich_input_description": "Comment créer une entrée riche dans Druid", + + "ui_example_basic_rich_text": "Texte riche", + "ui_example_basic_rich_text_description": "Comment créer un texte riche dans Druid", + + "ui_example_rich_text_tags": "Étiquettes de texte riche", + "ui_example_rich_text_tags_description": "Voici un exemple simple de texte riche avec des étiquettes\n - couleur\n - police\n - taille\n - br\n - img", + + "ui_example_basic_swipe": "Glissement", + "ui_example_basic_swipe_description": "Comment ajouter des rappels aux événements de glissement", + + "ui_example_data_list_basic": "Liste de données de base", + "ui_example_data_list_basic_description": "Comment créer une liste de données simple", + + "ui_example_data_list_horizontal_basic": "Liste de données horizontale de base", + "ui_example_data_list_horizontal_basic_description": "Comment créer une liste de données horizontale simple", + + "ui_example_data_list_add_remove_clear": "Liste de données ajouter, supprimer, effacer", + "ui_example_data_list_add_remove_clear_description": "Comment fonctionnent les fonctions ajouter, supprimer et effacer dans la liste de données", + + "ui_example_data_list_cache_with_component": "Version mise en cache de la liste de données", + "ui_example_data_list_cache_with_component_description": "La version mise en cache nécessite plus de configuration pour les rappels d'ajout/suppression, mais est plus efficace en mémoire", + + "ui_language": "Langue", + "ui_example_window_language": "Fenêtre de langue", + "ui_example_window_language_description": "Voici un exemple simple d'une fenêtre avec sélection de langue.", + + "ui_confirmation": "Confirmation", + "ui_example_window_confirmation": "Fenêtre de confirmation", + "ui_confirmation_description": "Confirmer l'achat de la voiture d'un million de dollars ?", + + "ui_information": "Information", + "ui_example_window_information": "Fenêtre d'information", + "ui_example_window_information_text": "Vous êtes le meilleur des meilleurs !", + "ui_example_window_information_description": "Voici un exemple simple d'une fenêtre avec un message d'information.", + + "ui_example_gamepad_tester": "Testeur de gamepad", + "ui_example_gamepad_tester_description": "Testez votre gamepad ici pour lier des boutons et des axes", + + "ui_example_on_screen_control": "Contrôle à l'écran", + "ui_example_on_screen_control_description": "Voici un exemple simple de contrôle à l'écran. L'entrée à l'écran ici est un joystick simple avec un rappel en tant que composant Druid", + + "ui_example_layout_basic": "Mise en page", + "ui_example_layout_basic_description": "Cette mise en page peut être ajustée pour correspondre à celle de Figma", + + "ui_example_panthera_basic_animation": "Animation de base de Panthera", + "ui_example_panthera_basic_animation_description": "Voici un exemple simple de l'animation de base de Panthera.", + + "ui_example_panthera_animation_blend": "Mélange d'animations de Panthera", + "ui_example_panthera_animation_blend_description": "Voici un exemple simple de mélange d'animations de Panthera.", + "ui_example_panthera_animation_blend_hint": "Survolez cette zone avec la souris", + + "ui_animation_vertical": "Vertical", + "ui_animation_horizontal": "Horizontal", + + "ui_language_en": "English", + "ui_language_ru": "Русский", + "ui_language_es": "Español", + "ui_language_de": "Deutsch", + "ui_language_fr": "Français", + "ui_language_ja": "日本語", + "ui_language_pt": "Português", + "ui_language_it": "Italiano", + "ui_language_kr": "한국어", + "ui_language_zh": "中文" +} diff --git a/example/locales/it.json b/example/locales/it.json new file mode 100644 index 0000000..9785b10 --- /dev/null +++ b/example/locales/it.json @@ -0,0 +1,172 @@ +{ + "ui_examples": "Esempi", + "ui_properties_panel": "Proprietà", + "ui_output": "Uscita", + "ui_view_code": "Visualizza codice", + "ui_profiler": "Profiler", + "ui_profiler_memory": "Memoria", + "ui_profiler_fps": "FPS", + "ui_profiler_components": "Componenti", + "ui_profiler_events": "Eventi", + "ui_confirm": "Conferma", + "ui_cancel": "Annulla", + "ui_value": "Valore", + "ui_scroll": "Scorrimento", + "ui_clipping": "Ritaglio", + "ui_no_properties": "Nessuna proprietà per questo esempio", + "ui_padding": "Padding", + "ui_margin_x": "Margine X", + "ui_margin_y": "Margine Y", + "ui_justify": "Giustifica", + "ui_pivot_next": "Prossimo Pivot", + "ui_type_next": "Prossimo Tipo", + "ui_adjust_next": "Prossimo Regolazione", + "ui_enabled": "Abilitato", + + "ui_examples_basic": "Base", + "ui_examples_data_list": "Lista di dati", + "ui_examples_gamepad": "Gamepad", + "ui_examples_window": "Finestre", + "ui_examples_panthera": "Panthera", + + "ui_example_intro": "Introduzione", + "ui_example_intro_description": "Qui ci sarà una breve descrizione dell'esempio selezionato.", + + "ui_example_basic_button": "Pulsante", + "ui_example_basic_button_description": "Esempio di pulsante base di Druid", + + "ui_example_basic_button_double_click": "Doppio clic", + "ui_example_basic_button_double_click_description": "Come aggiungere la funzionalità di doppio clic al pulsante.", + + "ui_example_basic_button_hold": "Tieni premuto", + "ui_example_basic_button_hold_description": "Come creare la funzionalità di mantenimento e attivazione per il pulsante.", + + "ui_example_basic_text": "Testo", + "ui_example_basic_text_description": "Controlla come il testo viene regolato con diverse proprietà.", + + "ui_example_basic_multiline_text": "Testo multiriga", + "ui_example_basic_multiline_text_description": "Controlla come il testo multiriga viene regolato con diverse proprietà.", + + "ui_example_basic_hover": "Hover", + "ui_example_basic_hover_description": "L'hover ha due eventi di hover. Uno per il mouse e uno per il tocco. Usa mouse_callback per gli eventi del mouse.", + + "ui_example_basic_drag": "Trascina", + "ui_example_basic_drag_description": "Come creare un nodo di trascinamento semplice", + + "ui_example_basic_drag_to_node": "Trascina al nodo", + "ui_example_basic_drag_to_node_description": "Come trascinare un nodo su un altro nodo e ottenere callback", + + "ui_example_basic_slider": "Slider", + "ui_example_basic_slider_description": "Come creare uno slider semplice", + + "ui_example_basic_slider_vertical": "Slider verticale", + "ui_example_basic_slider_vertical_description": "Come creare uno slider verticale semplice", + + "ui_example_basic_slider_stepped": "Slider a passi", + "ui_example_basic_slider_stepped_description": "Gli slider possono avere una proprietà \"passi\" per renderli a scatti", + + "ui_example_basic_progress_bar": "Barra di avanzamento", + "ui_example_basic_progress_bar_description": "Come creare una barra di avanzamento semplice", + + "ui_example_basic_progress_bar_slice9": "Barra di avanzamento Slice9", + "ui_example_basic_progress_bar_slice9_description": "Il componente di avanzamento può gestire la proprietà slice9 per renderlo scalabile dall'inizio", + + "ui_example_basic_timer": "Timer", + "ui_example_basic_timer_description": "Il componente Timer viene utilizzato per visualizzare un timer di secondi con un callback", + + "ui_example_basic_hotkey": "Tasto di scelta rapida", + "ui_example_basic_hotkey_description": "Come creare un tasto di scelta rapida per un callback", + + "ui_example_basic_scroll": "Scorrimento", + "ui_example_basic_scroll_description": "Come creare uno scorrimento semplice", + "ui_elastic_scroll": "Scorrimento elastico", + + "ui_example_basic_scroll_slider": "Scorrimento con slider", + "ui_example_basic_scroll_slider_description": "Come aggiungere un controllo slider allo scorrimento e usarli", + + "ui_example_basic_grid": "Griglia statica", + "ui_example_basic_grid_description": "Come posizionare nodi in una griglia", + "ui_grid_in_row": "Elementi nella riga", + "ui_add_element": "Aggiungi elemento", + "ui_remove_element": "Rimuovi elemento", + "ui_clear_elements": "Pulisci elementi", + + "ui_example_basic_scroll_bind_grid": "Scorrimento con griglia vincolata", + "ui_example_basic_scroll_bind_grid_description": "Lo scorrimento funziona bene con le griglie e le dimensioni predefinite, questo è un esempio di scorrimento con griglia vincolata.", + + "ui_example_basic_scroll_bind_grid_horizontal": "Scorrimento con griglia vincolata orizzontale", + "ui_example_basic_scroll_bind_grid_horizontal_description": "Lo scorrimento funziona bene con le griglie e le dimensioni predefinite, questo è un esempio di scorrimento con griglia vincolata orizzontale.", + + "ui_example_basic_input": "Input", + "ui_example_basic_input_description": "Come creare l'input più semplice in Druid", + + "ui_example_input_password": "Input password", + "ui_example_input_password_description": "Come funziona l'input della password", + + "ui_example_basic_rich_input": "Input ricco", + "ui_example_basic_rich_input_description": "Come creare un input ricco in Druid", + + "ui_example_basic_rich_text": "Testo ricco", + "ui_example_basic_rich_text_description": "Come creare un testo ricco in Druid", + + "ui_example_rich_text_tags": "Tag di testo ricco", + "ui_example_rich_text_tags_description": "Ecco un semplice esempio di testo ricco con tag\n - colore\n - font\n - dimensione\n - br\n - img", + + "ui_example_basic_swipe": "Scorrere", + "ui_example_basic_swipe_description": "Come aggiungere callback agli eventi di scorrimento", + + "ui_example_data_list_basic": "Lista dati di base", + "ui_example_data_list_basic_description": "Come creare una semplice lista di dati", + + "ui_example_data_list_horizontal_basic": "Lista dati orizzontale di base", + "ui_example_data_list_horizontal_basic_description": "Come creare una semplice lista di dati orizzontale", + + "ui_example_data_list_add_remove_clear": "Lista dati aggiungi, rimuovi, cancella", + "ui_example_data_list_add_remove_clear_description": "Come funzionano le funzioni di aggiunta, rimozione e cancellazione nella lista di dati", + + "ui_example_data_list_cache_with_component": "Versione cache della lista dati", + "ui_example_data_list_cache_with_component_description": "La versione cache richiede più configurazione per i callback di aggiunta/rimozione, ma è più efficiente in termini di memoria", + + "ui_language": "Lingua", + "ui_example_window_language": "Finestra di selezione lingua", + "ui_example_window_language_description": "Ecco un semplice esempio di finestra con selezione della lingua.", + + "ui_confirmation": "Conferma", + "ui_example_window_confirmation": "Finestra di conferma", + "ui_confirmation_description": "Confermare l'acquisto dell'auto da un milione di dollari?", + + "ui_information": "Informazione", + "ui_example_window_information": "Finestra di informazione", + "ui_example_window_information_text": "Sei il migliore del migliore!", + "ui_example_window_information_description": "Ecco un semplice esempio di finestra con un messaggio informativo.", + + "ui_example_gamepad_tester": "Tester di gamepad", + "ui_example_gamepad_tester_description": "Prova qui il tuo gamepad per collegare pulsanti e assi", + + "ui_example_on_screen_control": "Controllo a schermo", + "ui_example_on_screen_control_description": "Ecco un semplice esempio di controllo a schermo. L'input a schermo qui è un joystick semplice con un callback come componente Druid", + + "ui_example_layout_basic": "Layout", + "ui_example_layout_basic_description": "Questo layout può essere regolato per essere uguale a quello di Figma", + + "ui_example_panthera_basic_animation": "Animazione base di Panthera", + "ui_example_panthera_basic_animation_description": "Ecco un semplice esempio dell'animazione base di Panthera.", + + "ui_example_panthera_animation_blend": "Mischia di animazioni di Panthera", + "ui_example_panthera_animation_blend_description": "Ecco un semplice esempio di mischia di animazioni di Panthera.", + "ui_example_panthera_animation_blend_hint": "Passa il mouse su quest'area", + + "ui_animation_vertical": "Verticale", + "ui_animation_horizontal": "Orizzontale", + + "ui_language_en": "English", + "ui_language_ru": "Русский", + "ui_language_es": "Español", + "ui_language_de": "Deutsch", + "ui_language_fr": "Français", + "ui_language_ja": "日本語", + "ui_language_pt": "Português", + "ui_language_it": "Italiano", + "ui_language_kr": "한국어", + "ui_language_zh": "中文" +} diff --git a/example/locales/ja.json b/example/locales/ja.json new file mode 100644 index 0000000..cc04529 --- /dev/null +++ b/example/locales/ja.json @@ -0,0 +1,172 @@ +{ + "ui_examples": "例", + "ui_properties_panel": "プロパティ", + "ui_output": "出力", + "ui_view_code": "コードを見る", + "ui_profiler": "プロファイラ", + "ui_profiler_memory": "メモリ", + "ui_profiler_fps": "FPS", + "ui_profiler_components": "コンポーネント", + "ui_profiler_events": "イベント", + "ui_confirm": "確認", + "ui_cancel": "キャンセル", + "ui_value": "値", + "ui_scroll": "スクロール", + "ui_clipping": "クリッピング", + "ui_no_properties": "この例にプロパティはありません", + "ui_padding": "パディング", + "ui_margin_x": "マージン X", + "ui_margin_y": "マージン Y", + "ui_justify": "両端揃え", + "ui_pivot_next": "次のピボット", + "ui_type_next": "次のタイプ", + "ui_adjust_next": "次の調整", + "ui_enabled": "有効", + + "ui_examples_basic": "基本", + "ui_examples_data_list": "データリスト", + "ui_examples_gamepad": "ゲームパッド", + "ui_examples_window": "ウィンドウ", + "ui_examples_panthera": "パンテラ", + + "ui_example_intro": "紹介", + "ui_example_intro_description": "ここには、選択された例の簡単な説明が表示されます。", + + "ui_example_basic_button": "ボタン", + "ui_example_basic_button_description": "Druid の基本的なボタンの例", + + "ui_example_basic_button_double_click": "ダブルクリック", + "ui_example_basic_button_double_click_description": "ボタンにダブルクリック機能を追加する方法。", + + "ui_example_basic_button_hold": "長押し", + "ui_example_basic_button_hold_description": "ボタンの長押しとトリガー機能を作成する方法。", + + "ui_example_basic_text": "テキスト", + "ui_example_basic_text_description": "異なるプロパティでテキストがどのように調整されるかを確認します。", + + "ui_example_basic_multiline_text": "複数行テキスト", + "ui_example_basic_multiline_text_description": "異なるプロパティで複数行のテキストがどのように調整されるかを確認します。", + + "ui_example_basic_hover": "ホバー", + "ui_example_basic_hover_description": "ホバーには2つのホバーイベントがあります。マウス用とタッチ用です。マウスイベントには mouse_callback を使用してください。", + + "ui_example_basic_drag": "ドラッグ", + "ui_example_basic_drag_description": "簡単なドラッグノードを作成する方法", + + "ui_example_basic_drag_to_node": "ノードにドラッグ", + "ui_example_basic_drag_to_node_description": "ノードを別のノードにドラッグしてコールバックを取得する方法", + + "ui_example_basic_slider": "スライダー", + "ui_example_basic_slider_description": "簡単なスライダーを作成する方法", + + "ui_example_basic_slider_vertical": "垂直スライダー", + "ui_example_basic_slider_vertical_description": "簡単な垂直スライダーを作成する方法", + + "ui_example_basic_slider_stepped": "ステップ付きスライダー", + "ui_example_basic_slider_stepped_description": "スライダーには「ステップ」プロパティがあり、ステップ付きにすることができます。", + + "ui_example_basic_progress_bar": "プログレスバー", + "ui_example_basic_progress_bar_description": "簡単なプログレスバーを作成する方法", + + "ui_example_basic_progress_bar_slice9": "プログレスバー Slice9", + "ui_example_basic_progress_bar_slice9_description": "プログレスコンポーネントは、最初からスケーラブルにするために slice9 プロパティを処理できます。", + + "ui_example_basic_timer": "タイマー", + "ui_example_basic_timer_description": "タイマーコンポーネントは、コールバック付きの秒数のタイマーを表示するために使用されます。", + + "ui_example_basic_hotkey": "ホットキー", + "ui_example_basic_hotkey_description": "コールバック用のホットキーを作成する方法", + + "ui_example_basic_scroll": "スクロール", + "ui_example_basic_scroll_description": "簡単なスクロールを作成する方法", + "ui_elastic_scroll": "エラスティックスクロール", + + "ui_example_basic_scroll_slider": "スライダー付きスクロール", + "ui_example_basic_scroll_slider_description": "スクロールにスライダーコントロールを追加して使用する方法", + + "ui_example_basic_grid": "静的グリッド", + "ui_example_basic_grid_description": "ノードをグリッドに配置する方法", + "ui_grid_in_row": "行の要素", + "ui_add_element": "要素を追加", + "ui_remove_element": "要素を削除", + "ui_clear_elements": "要素をクリア", + + "ui_example_basic_scroll_bind_grid": "スクロールバインドグリッド", + "ui_example_basic_scroll_bind_grid_description": "スクロールはグリッドと事前定義されたサイズでうまく機能します。これはスクロールバインドグリッドの例です。", + + "ui_example_basic_scroll_bind_grid_horizontal": "水平スクロールバインドグリッド", + "ui_example_basic_scroll_bind_grid_horizontal_description": "スクロールはグリッドと事前定義されたサイズでうまく機能します。これは水平スクロールバインドグリッドの例です。", + + "ui_example_basic_input": "入力", + "ui_example_basic_input_description": "Druid で最も単純な入力を作成する方法", + + "ui_example_input_password": "パスワード入力", + "ui_example_input_password_description": "パスワード入力がどのように機能するか", + + "ui_example_basic_rich_input": "リッチ入力", + "ui_example_basic_rich_input_description": "Druid でリッチ入力を作成する方法", + + "ui_example_basic_rich_text": "リッチテキスト", + "ui_example_basic_rich_text_description": "Druid でリッチテキストを作成する方法", + + "ui_example_rich_text_tags": "リッチテキストタグ", + "ui_example_rich_text_tags_description": "ここにタグ付きリッチテキストの簡単な例があります\n - 色\n - フォント\n - サイズ\n - br\n - img", + + "ui_example_basic_swipe": "スワイプ", + "ui_example_basic_swipe_description": "スワイプイベントにコールバックを追加する方法", + + "ui_example_data_list_basic": "基本データリスト", + "ui_example_data_list_basic_description": "シンプルなデータリストを作成する方法", + + "ui_example_data_list_horizontal_basic": "基本水平データリスト", + "ui_example_data_list_horizontal_basic_description": "シンプルな水平データリストを作成する方法", + + "ui_example_data_list_add_remove_clear": "データリストの追加、削除、クリア", + "ui_example_data_list_add_remove_clear_description": "データリスト内の追加、削除、およびクリア機能がどのように機能するか", + + "ui_example_data_list_cache_with_component": "キャッシュされたデータリスト", + "ui_example_data_list_cache_with_component_description": "キャッシュされたバージョンは、追加/削除のコールバックにより多くの設定が必要ですが、メモリ効率が向上します。", + + "ui_language": "言語", + "ui_example_window_language": "ウィンドウ言語", + "ui_example_window_language_description": "言語選択のあるウィンドウの簡単な例です。", + + "ui_confirmation": "確認", + "ui_example_window_confirmation": "ウィンドウ確認", + "ui_confirmation_description": "100万ドルの車を購入することを確認しますか?", + + "ui_information": "情報", + "ui_example_window_information": "ウィンドウ情報", + "ui_example_window_information_text": "あなたは最高の中の最高です!", + "ui_example_window_information_description": "情報メッセージを含むウィンドウの簡単な例です。", + + "ui_example_gamepad_tester": "ゲームパッドテスター", + "ui_example_gamepad_tester_description": "ここでゲームパッドをテストして、ボタンと軸をバインドします", + + "ui_example_on_screen_control": "画面上のコントロール", + "ui_example_on_screen_control_description": "画面上のコントロールの簡単な例です。ここでの on_screen_input はコールバックを持つシンプルなジョイスティックです。Druid コンポーネントとして", + + "ui_example_layout_basic": "レイアウト", + "ui_example_layout_basic_description": "このレイアウトは、Figma と同じになるように調整できます。", + + "ui_example_panthera_basic_animation": "パンテラ基本アニメーション", + "ui_example_panthera_basic_animation_description": "ここにパンテラ基本アニメーションの簡単な例があります。", + + "ui_example_panthera_animation_blend": "パンテラアニメーションブレンド", + "ui_example_panthera_animation_blend_description": "ここにパンテラアニメーションブレンドの簡単な例があります。", + "ui_example_panthera_animation_blend_hint": "この領域にマウスをホバーします。", + + "ui_animation_vertical": "垂直", + "ui_animation_horizontal": "水平", + + "ui_language_en": "English", + "ui_language_ru": "Русский", + "ui_language_es": "Español", + "ui_language_de": "Deutsch", + "ui_language_fr": "Français", + "ui_language_ja": "日本語", + "ui_language_pt": "Português", + "ui_language_it": "Italiano", + "ui_language_kr": "한국어", + "ui_language_zh": "中文" +} diff --git a/example/locales/kr.json b/example/locales/kr.json new file mode 100644 index 0000000..915c70e --- /dev/null +++ b/example/locales/kr.json @@ -0,0 +1,172 @@ +{ + "ui_examples": "예시", + "ui_properties_panel": "속성", + "ui_output": "출력", + "ui_view_code": "코드 보기", + "ui_profiler": "프로파일러", + "ui_profiler_memory": "메모리", + "ui_profiler_fps": "FPS", + "ui_profiler_components": "구성 요소", + "ui_profiler_events": "이벤트", + "ui_confirm": "확인", + "ui_cancel": "취소", + "ui_value": "값", + "ui_scroll": "스크롤", + "ui_clipping": "클리핑", + "ui_no_properties": "이 예제에 대한 속성이 없습니다.", + "ui_padding": "패딩", + "ui_margin_x": "여백 X", + "ui_margin_y": "여백 Y", + "ui_justify": "정렬", + "ui_pivot_next": "다음 피벗", + "ui_type_next": "다음 유형", + "ui_adjust_next": "다음 조정", + "ui_enabled": "활성화", + + "ui_examples_basic": "기본", + "ui_examples_data_list": "데이터 목록", + "ui_examples_gamepad": "게임패드", + "ui_examples_window": "윈도우", + "ui_examples_panthera": "팬테라", + + "ui_example_intro": "소개", + "ui_example_intro_description": "여기에는 선택한 예제에 대한 간략한 설명이 표시됩니다.", + + "ui_example_basic_button": "버튼", + "ui_example_basic_button_description": "Druid의 기본 버튼 예시", + + "ui_example_basic_button_double_click": "더블 클릭", + "ui_example_basic_button_double_click_description": "버튼에 더블 클릭 기능을 추가하는 방법입니다.", + + "ui_example_basic_button_hold": "버튼 누르기", + "ui_example_basic_button_hold_description": "버튼에 대해 누르기 및 트리거 기능을 만드는 방법입니다.", + + "ui_example_basic_text": "텍스트", + "ui_example_basic_text_description": "텍스트가 다양한 속성으로 어떻게 조정되는지 확인하십시오.", + + "ui_example_basic_multiline_text": "다중 행 텍스트", + "ui_example_basic_multiline_text_description": "다중 행 텍스트가 다양한 속성으로 어떻게 조정되는지 확인하십시오.", + + "ui_example_basic_hover": "호버", + "ui_example_basic_hover_description": "호버에는 두 개의 호버 이벤트가 있습니다. 하나는 마우스용이고, 다른 하나는 터치용입니다. 마우스 이벤트에는 mouse_callback을 사용하십시오.", + + "ui_example_basic_drag": "드래그", + "ui_example_basic_drag_description": "간단한 드래그 노드를 만드는 방법입니다.", + + "ui_example_basic_drag_to_node": "노드로 드래그", + "ui_example_basic_drag_to_node_description": "노드를 다른 노드로 드래그하고 콜백을 받는 방법입니다.", + + "ui_example_basic_slider": "슬라이더", + "ui_example_basic_slider_description": "간단한 슬라이더를 만드는 방법입니다.", + + "ui_example_basic_slider_vertical": "수직 슬라이더", + "ui_example_basic_slider_vertical_description": "간단한 수직 슬라이더를 만드는 방법입니다.", + + "ui_example_basic_slider_stepped": "단계 슬라이더", + "ui_example_basic_slider_stepped_description": "슬라이더는 \"단계\" 속성을 가질 수 있어 단계를 만들 수 있습니다.", + + "ui_example_basic_progress_bar": "진행 바", + "ui_example_basic_progress_bar_description": "간단한 진행 바를 만드는 방법입니다.", + + "ui_example_basic_progress_bar_slice9": "진행 바 Slice9", + "ui_example_basic_progress_bar_slice9_description": "진행 컴포넌트는 시작할 때 스케일 가능하도록 slice9 속성을 처리할 수 있습니다.", + + "ui_example_basic_timer": "타이머", + "ui_example_basic_timer_description": "타이머 구성 요소는 콜백이 있는 초 타이머를 표시하는 데 사용됩니다.", + + "ui_example_basic_hotkey": "단축키", + "ui_example_basic_hotkey_description": "콜백에 대한 단축키를 만드는 방법입니다.", + + "ui_example_basic_scroll": "스크롤", + "ui_example_basic_scroll_description": "간단한 스크롤을 만드는 방법입니다.", + "ui_elastic_scroll": "탄력 스크롤", + + "ui_example_basic_scroll_slider": "슬라이더와 함께 스크롤", + "ui_example_basic_scroll_slider_description": "스크롤에 슬라이더 컨트롤을 추가하고 사용하는 방법입니다.", + + "ui_example_basic_grid": "정적 그리드", + "ui_example_basic_grid_description": "그리드에 노드를 배치하는 방법입니다.", + "ui_grid_in_row": "행 내 요소", + "ui_add_element": "요소 추가", + "ui_remove_element": "요소 제거", + "ui_clear_elements": "요소 지우기", + + "ui_example_basic_scroll_bind_grid": "스크롤 바인드 그리드", + "ui_example_basic_scroll_bind_grid_description": "스크롤은 그리드 및 사전 정의된 크기와 잘 작동합니다. 이것은 스크롤 바인드 그리드의 예입니다.", + + "ui_example_basic_scroll_bind_grid_horizontal": "수평 스크롤 바인드 그리드", + "ui_example_basic_scroll_bind_grid_horizontal_description": "스크롤은 그리드 및 사전 정의된 크기와 잘 작동합니다. 이것은 수평 스크롤 바인드 그리드의 예입니다.", + + "ui_example_basic_input": "입력", + "ui_example_basic_input_description": "Druid에서 가장 간단한 입력을 만드는 방법입니다.", + + "ui_example_input_password": "비밀번호 입력", + "ui_example_input_password_description": "비밀번호 입력이 어떻게 작동하는지입니다.", + + "ui_example_basic_rich_input": "리치 입력", + "ui_example_basic_rich_input_description": "Druid에서 리치 입력을 만드는 방법입니다.", + + "ui_example_basic_rich_text": "리치 텍스트", + "ui_example_basic_rich_text_description": "Druid에서 리치 텍스트를 만드는 방법입니다.", + + "ui_example_rich_text_tags": "리치 텍스트 태그", + "ui_example_rich_text_tags_description": "여기에는 태그가 있는 리치 텍스트의 간단한 예가 있습니다\n - 색상\n - 글꼴\n - 크기\n - br\n - img", + + "ui_example_basic_swipe": "스와이프", + "ui_example_basic_swipe_description": "스와이프 이벤트에 콜백을 추가하는 방법입니다.", + + "ui_example_data_list_basic": "기본 데이터 목록", + "ui_example_data_list_basic_description": "간단한 데이터 목록을 만드는 방법입니다.", + + "ui_example_data_list_horizontal_basic": "수평 기본 데이터 목록", + "ui_example_data_list_horizontal_basic_description": "간단한 수평 데이터 목록을 만드는 방법입니다.", + + "ui_example_data_list_add_remove_clear": "데이터 목록 추가, 제거, 지우기", + "ui_example_data_list_add_remove_clear_description": "데이터 목록에서 추가, 제거 및 지우기 기능이 어떻게 작동하는지입니다.", + + "ui_example_data_list_cache_with_component": "캐시된 데이터 목록 버전", + "ui_example_data_list_cache_with_component_description": "캐시된 버전은 추가/제거 콜백에 대해 더 많은 설정이 필요하지만 메모리 효율이 더 좋습니다.", + + "ui_language": "언어", + "ui_example_window_language": "창 언어", + "ui_example_window_language_description": "언어 선택이 있는 창의 간단한 예입니다.", + + "ui_confirmation": "확인", + "ui_example_window_confirmation": "창 확인", + "ui_confirmation_description": "100만 달러 자동차 구매를 확인하시겠습니까?", + + "ui_information": "정보", + "ui_example_window_information": "정보 창", + "ui_example_window_information_text": "당신은 최고 중의 최고입니다!", + "ui_example_window_information_description": "정보 메시지를 포함한 창의 간단한 예입니다.", + + "ui_example_gamepad_tester": "게임패드 테스터", + "ui_example_gamepad_tester_description": "여기에서 게임패드를 테스트하여 버튼과 축을 바인딩합니다.", + + "ui_example_on_screen_control": "화면 위의 제어", + "ui_example_on_screen_control_description": "화면 위의 제어에 대한 간단한 예입니다. 여기의 on_screen_input은 Druid 구성 요소로서 콜백이 있는 간단한 조이스틱입니다.", + + "ui_example_layout_basic": "레이아웃", + "ui_example_layout_basic_description": "이 레이아웃은 Figma와 같도록 조정할 수 있습니다.", + + "ui_example_panthera_basic_animation": "팬테라 기본 애니메이션", + "ui_example_panthera_basic_animation_description": "여기에는 팬테라 기본 애니메이션의 간단한 예가 있습니다.", + + "ui_example_panthera_animation_blend": "팬테라 애니메이션 혼합", + "ui_example_panthera_animation_blend_description": "여기에는 팬테라 애니메이션 혼합의 간단한 예가 있습니다.", + "ui_example_panthera_animation_blend_hint": "이 영역 위에 마우스를 올려 놓으세요.", + + "ui_animation_vertical": "수직", + "ui_animation_horizontal": "수평", + + "ui_language_en": "English", + "ui_language_ru": "Русский", + "ui_language_es": "Español", + "ui_language_de": "Deutsch", + "ui_language_fr": "Français", + "ui_language_ja": "日本語", + "ui_language_pt": "Português", + "ui_language_it": "Italiano", + "ui_language_kr": "한국어", + "ui_language_zh": "中文" +} diff --git a/example/locales/pt.json b/example/locales/pt.json new file mode 100644 index 0000000..c572229 --- /dev/null +++ b/example/locales/pt.json @@ -0,0 +1,172 @@ +{ + "ui_examples": "Exemplos", + "ui_properties_panel": "Propriedades", + "ui_output": "Saída", + "ui_view_code": "Ver código", + "ui_profiler": "Profiler", + "ui_profiler_memory": "Memória", + "ui_profiler_fps": "FPS", + "ui_profiler_components": "Componentes", + "ui_profiler_events": "Eventos", + "ui_confirm": "Confirmar", + "ui_cancel": "Cancelar", + "ui_value": "Valor", + "ui_scroll": "Rolagem", + "ui_clipping": "Recorte", + "ui_no_properties": "Sem propriedades para este exemplo", + "ui_padding": "Preenchimento", + "ui_margin_x": "Margem X", + "ui_margin_y": "Margem Y", + "ui_justify": "Justificar", + "ui_pivot_next": "Próximo Ponto de Pivô", + "ui_type_next": "Próximo Tipo", + "ui_adjust_next": "Próxima Ajuste", + "ui_enabled": "Habilitado", + + "ui_examples_basic": "Básico", + "ui_examples_data_list": "Lista de dados", + "ui_examples_gamepad": "Gamepad", + "ui_examples_window": "Janelas", + "ui_examples_panthera": "Panthera", + + "ui_example_intro": "Introdução", + "ui_example_intro_description": "Aqui haverá uma breve descrição do exemplo selecionado.", + + "ui_example_basic_button": "Botão", + "ui_example_basic_button_description": "Exemplo de botão básico do Druid", + + "ui_example_basic_button_double_click": "Duplo Clique", + "ui_example_basic_button_double_click_description": "Como adicionar funcionalidade de duplo clique ao botão.", + + "ui_example_basic_button_hold": "Manter Botão", + "ui_example_basic_button_hold_description": "Como fazer a funcionalidade de manter e acionar para o botão.", + + "ui_example_basic_text": "Texto", + "ui_example_basic_text_description": "Verifique como o texto é ajustado com diferentes propriedades.", + + "ui_example_basic_multiline_text": "Texto Multilinha", + "ui_example_basic_multiline_text_description": "Verifique como o texto multilinha é ajustado com diferentes propriedades.", + + "ui_example_basic_hover": "Hover", + "ui_example_basic_hover_description": "O hover possui dois eventos de hover. Um para o mouse e um para toque. Use mouse_callback para eventos de mouse.", + + "ui_example_basic_drag": "Arrastar", + "ui_example_basic_drag_description": "Como criar um nó de arrastar simples", + + "ui_example_basic_drag_to_node": "Arrastar para Nó", + "ui_example_basic_drag_to_node_description": "Como arrastar um nó para outro nó e obter callbacks", + + "ui_example_basic_slider": "Slider", + "ui_example_basic_slider_description": "Como fazer um slider simples", + + "ui_example_basic_slider_vertical": "Slider Vertical", + "ui_example_basic_slider_vertical_description": "Como fazer um slider vertical simples", + + "ui_example_basic_slider_stepped": "Slider com Passos", + "ui_example_basic_slider_stepped_description": "Os sliders podem ter uma propriedade \"passos\" para torná-los escalonados.", + + "ui_example_basic_progress_bar": "Barra de Progresso", + "ui_example_basic_progress_bar_description": "Como fazer uma barra de progresso simples", + + "ui_example_basic_progress_bar_slice9": "Barra de Progresso Slice9", + "ui_example_basic_progress_bar_slice9_description": "O componente de progresso pode lidar com a propriedade slice9 para torná-lo escalável desde o início.", + + "ui_example_basic_timer": "Temporizador", + "ui_example_basic_timer_description": "O componente Temporizador é usado para exibir um temporizador de segundos com um callback.", + + "ui_example_basic_hotkey": "Tecla de Atalho", + "ui_example_basic_hotkey_description": "Como criar uma tecla de atalho para um callback.", + + "ui_example_basic_scroll": "Rolagem", + "ui_example_basic_scroll_description": "Como fazer uma rolagem simples.", + "ui_elastic_scroll": "Rolagem Elástica", + + "ui_example_basic_scroll_slider": "Rolagem com Slider", + "ui_example_basic_scroll_slider_description": "Como adicionar um controle deslizante à rolagem e usá-lo.", + + "ui_example_basic_grid": "Grade Estática", + "ui_example_basic_grid_description": "Como posicionar nós em uma grade.", + "ui_grid_in_row": "Elementos na Linha", + "ui_add_element": "Adicionar Elemento", + "ui_remove_element": "Remover Elemento", + "ui_clear_elements": "Limpar Elementos", + + "ui_example_basic_scroll_bind_grid": "Rolagem com Grade Vinculada", + "ui_example_basic_scroll_bind_grid_description": "A rolagem funciona bem com grades e tamanhos predefinidos; este é um exemplo de rolagem com grade vinculada.", + + "ui_example_basic_scroll_bind_grid_horizontal": "Rolagem com Grade Vinculada Horizontal", + "ui_example_basic_scroll_bind_grid_horizontal_description": "A rolagem funciona bem com grades e tamanhos predefinidos; este é um exemplo de rolagem com grade vinculada horizontal.", + + "ui_example_basic_input": "Entrada", + "ui_example_basic_input_description": "Como fazer a entrada mais simples no Druid.", + + "ui_example_input_password": "Entrada de Senha", + "ui_example_input_password_description": "Como funciona a entrada de senha.", + + "ui_example_basic_rich_input": "Entrada Rica", + "ui_example_basic_rich_input_description": "Como fazer uma entrada rica no Druid.", + + "ui_example_basic_rich_text": "Texto Rico", + "ui_example_basic_rich_text_description": "Como criar um texto rico no Druid.", + + "ui_example_rich_text_tags": "Tags de Texto Rico", + "ui_example_rich_text_tags_description": "Aqui está um exemplo simples de texto rico com tags\n - cor\n - fonte\n - tamanho\n - br\n - img", + + "ui_example_basic_swipe": "Deslizar", + "ui_example_basic_swipe_description": "Como adicionar callbacks em eventos de deslizar.", + + "ui_example_data_list_basic": "Lista de Dados Básica", + "ui_example_data_list_basic_description": "Como fazer uma lista de dados simples.", + + "ui_example_data_list_horizontal_basic": "Lista de Dados Horizontal Básica", + "ui_example_data_list_horizontal_basic_description": "Como fazer uma lista de dados horizontal simples.", + + "ui_example_data_list_add_remove_clear": "Adicionar, Remover e Limpar na Lista de Dados", + "ui_example_data_list_add_remove_clear_description": "Como as funções de adicionar, remover e limpar funcionam na lista de dados.", + + "ui_example_data_list_cache_with_component": "Versão em Cache da Lista de Dados", + "ui_example_data_list_cache_with_component_description": "A versão em cache requer mais configuração para callbacks de adicionar/remover, mas é mais eficiente em memória.", + + "ui_language": "Idioma", + "ui_example_window_language": "Janela de Idioma", + "ui_example_window_language_description": "Aqui está um exemplo simples de uma janela com seleção de idioma.", + + "ui_confirmation": "Confirmação", + "ui_example_window_confirmation": "Janela de Confirmação", + "ui_confirmation_description": "Confirmar a compra do carro de um milhão de dólares?", + + "ui_information": "Informação", + "ui_example_window_information": "Janela de Informação", + "ui_example_window_information_text": "Você é o melhor dos melhores!", + "ui_example_window_information_description": "Aqui está um exemplo simples de uma janela com uma mensagem de informação.", + + "ui_example_gamepad_tester": "Testador de Gamepad", + "ui_example_gamepad_tester_description": "Teste seu gamepad aqui para vincular botões e eixos.", + + "ui_example_on_screen_control": "Controle na Tela", + "ui_example_on_screen_control_description": "Aqui está um exemplo simples de controle na tela. A entrada na tela aqui é um joystick simples com um callback como componente do Druid.", + + "ui_example_layout_basic": "Layout", + "ui_example_layout_basic_description": "Este layout pode ser ajustado para ser igual ao do Figma.", + + "ui_example_panthera_basic_animation": "Animação Básica da Panthera", + "ui_example_panthera_basic_animation_description": "Aqui está um exemplo simples da animação básica da Panthera.", + + "ui_example_panthera_animation_blend": "Mistura de Animações da Panthera", + "ui_example_panthera_animation_blend_description": "Aqui está um exemplo simples da mistura de animações da Panthera.", + "ui_example_panthera_animation_blend_hint": "Passe o mouse sobre esta área.", + + "ui_animation_vertical": "Vertical", + "ui_animation_horizontal": "Horizontal", + + "ui_language_en": "English", + "ui_language_ru": "Русский", + "ui_language_es": "Español", + "ui_language_de": "Deutsch", + "ui_language_fr": "Français", + "ui_language_ja": "日本語", + "ui_language_pt": "Português", + "ui_language_it": "Italiano", + "ui_language_kr": "한국어", + "ui_language_zh": "中文" +} diff --git a/example/locales/ru.json b/example/locales/ru.json new file mode 100644 index 0000000..d3b1f75 --- /dev/null +++ b/example/locales/ru.json @@ -0,0 +1,172 @@ +{ + "ui_examples": "Примеры", + "ui_properties_panel": "Свойства", + "ui_output": "Вывод", + "ui_view_code": "Просмотр кода", + "ui_profiler": "Профайлер", + "ui_profiler_memory": "Память", + "ui_profiler_fps": "FPS", + "ui_profiler_components": "Компоненты", + "ui_profiler_events": "События", + "ui_confirm": "Подтвердить", + "ui_cancel": "Отмена", + "ui_value": "Значение", + "ui_scroll": "Прокрутка", + "ui_clipping": "Обрезка", + "ui_no_properties": "Нет свойств для этого примера", + "ui_padding": "Отступ", + "ui_margin_x": "Отступ по X", + "ui_margin_y": "Отступ по Y", + "ui_justify": "Выровнять", + "ui_pivot_next": "След. якорь", + "ui_type_next": "След. тип", + "ui_adjust_next": "След. тип сжатия", + "ui_enabled": "Включено", + + "ui_examples_basic": "Основные", + "ui_examples_data_list": "Список данных", + "ui_examples_gamepad": "Геймпад", + "ui_examples_window": "Окна", + "ui_examples_panthera": "Пантера", + + "ui_example_intro": "Введение", + "ui_example_intro_description": "Здесь будет краткое описание выбранного примера.", + + "ui_example_basic_button": "Кнопка", + "ui_example_basic_button_description": "Пример базовой кнопки Druid", + + "ui_example_basic_button_double_click": "Двойной щелчок", + "ui_example_basic_button_double_click_description": "Как добавить функциональность двойного щелчка к кнопке.", + + "ui_example_basic_button_hold": "Удержание кнопки", + "ui_example_basic_button_hold_description": "Как сделать функционал удержания и триггера для кнопки.", + + "ui_example_basic_text": "Текст", + "ui_example_basic_text_description": "Проверьте, как текст настраивается с различными свойствами.", + + "ui_example_basic_multiline_text": "Многострочный текст", + "ui_example_basic_multiline_text_description": "Проверьте, как многострочный текст настраивается с различными свойствами.", + + "ui_example_basic_hover": "Наведение", + "ui_example_basic_hover_description": "Наведение имеет два события. Одно для мыши и одно для касания. Используйте mouse_callback для событий мыши.", + + "ui_example_basic_drag": "Перетаскивание", + "ui_example_basic_drag_description": "Как создать простой узел перетаскивания.", + + "ui_example_basic_drag_to_node": "Перетаскивание к узлу", + "ui_example_basic_drag_to_node_description": "Как перетащить узел к другому узлу и получить обратные вызовы.", + + "ui_example_basic_slider": "Слайдер", + "ui_example_basic_slider_description": "Как сделать простой слайдер.", + + "ui_example_basic_slider_vertical": "Вертикальный слайдер", + "ui_example_basic_slider_vertical_description": "Как сделать простой вертикальный слайдер.", + + "ui_example_basic_slider_stepped": "Слайдер с шагами", + "ui_example_basic_slider_stepped_description": "Слайдеры могут иметь свойство «шаги», чтобы сделать их пошаговыми.", + + "ui_example_basic_progress_bar": "Полоса прогресса", + "ui_example_basic_progress_bar_description": "Как сделать простую полосу прогресса.", + + "ui_example_basic_progress_bar_slice9": "Полоса прогресса Slice9", + "ui_example_basic_progress_bar_slice9_description": "Компонент прогресса может обрабатывать свойство slice9, чтобы сделать его масштабируемым с самого начала.", + + "ui_example_basic_timer": "Таймер", + "ui_example_basic_timer_description": "Компонент Таймера используется для отображения секундомера с обратным вызовом.", + + "ui_example_basic_hotkey": "Горячая клавиша", + "ui_example_basic_hotkey_description": "Как создать горячую клавишу для обратного вызова.", + + "ui_example_basic_scroll": "Прокрутка", + "ui_example_basic_scroll_description": "Как сделать простую прокрутку.", + "ui_elastic_scroll": "Эластичная прокрутка", + + "ui_example_basic_scroll_slider": "Прокрутка со слайдером", + "ui_example_basic_scroll_slider_description": "Как добавить элемент управления слайдером к прокрутке и использовать их.", + + "ui_example_basic_grid": "Статическая сетка", + "ui_example_basic_grid_description": "Как разместить узлы в сетке.", + "ui_grid_in_row": "Элементы в строке", + "ui_add_element": "Добавить элемент", + "ui_remove_element": "Удалить элемент", + "ui_clear_elements": "Очистить элементы", + + "ui_example_basic_scroll_bind_grid": "Прокрутка с привязанной сеткой", + "ui_example_basic_scroll_bind_grid_description": "Прокрутка хорошо работает с сетками и заранее заданными размерами, это пример привязанной прокрутки с сеткой.", + + "ui_example_basic_scroll_bind_grid_horizontal": "Горизонтальная привязанная прокрутка", + "ui_example_basic_scroll_bind_grid_horizontal_description": "Прокрутка хорошо работает с сетками и заранее заданными размерами, это пример горизонтальной привязанной прокрутки с сеткой.", + + "ui_example_basic_input": "Ввод", + "ui_example_basic_input_description": "Как сделать самый простой ввод в Druid.", + + "ui_example_input_password": "Ввод пароля", + "ui_example_input_password_description": "Как работает ввод пароля.", + + "ui_example_basic_rich_input": "Расширенный ввод", + "ui_example_basic_rich_input_description": "Как сделать расширенный ввод в Druid.", + + "ui_example_basic_rich_text": "Расширенный текст", + "ui_example_basic_rich_text_description": "Как создать расширенный текст в Druid.", + + "ui_example_rich_text_tags": "Теги расширенного текста", + "ui_example_rich_text_tags_description": "Здесь простой пример расширенного текста с тегами\n - цвет\n - шрифт\n - размер\n - br\n - img", + + "ui_example_basic_swipe": "Свайп", + "ui_example_basic_swipe_description": "Как добавить обратные вызовы на события свайпа.", + + "ui_example_data_list_basic": "Основной список данных", + "ui_example_data_list_basic_description": "Как сделать простой список данных.", + + "ui_example_data_list_horizontal_basic": "Горизонтальный основной список данных", + "ui_example_data_list_horizontal_basic_description": "Как сделать простой горизонтальный список данных.", + + "ui_example_data_list_add_remove_clear": "Добавление, удаление и очистка в списке данных", + "ui_example_data_list_add_remove_clear_description": "Как работают функции добавления, удаления и очистки в списке данных.", + + "ui_example_data_list_cache_with_component": "Кэшированная версия списка данных", + "ui_example_data_list_cache_with_component_description": "Кэшированная версия требует большего количества настроек для обратных вызовов добавления/удаления, но более эффективна с точки зрения памяти.", + + "ui_language": "Язык", + "ui_example_window_language": "Окно выбора языка", + "ui_example_window_language_description": "Здесь простой пример окна с выбором языка.", + + "ui_confirmation": "Подтверждение", + "ui_example_window_confirmation": "Окно подтверждения", + "ui_confirmation_description": "Подтвердить покупку автомобиля за миллион долларов?", + + "ui_information": "Информация", + "ui_example_window_information": "Окно информации", + "ui_example_window_information_text": "Ты лучший из лучших!", + "ui_example_window_information_description": "Здесь простой пример окна с информационным сообщением.", + + "ui_example_gamepad_tester": "Тестер геймпада", + "ui_example_gamepad_tester_description": "Проверьте здесь свой геймпад, чтобы настроить кнопки и оси.", + + "ui_example_on_screen_control": "Наэкранное управление", + "ui_example_on_screen_control_description": "Здесь простой пример наэкранного управления. Наэкранный ввод здесь — это простой джойстик с обратным вызовом в качестве компонента Druid.", + + "ui_example_layout_basic": "Макет", + "ui_example_layout_basic_description": "Этот макет может быть настроен так, как в Figma.", + + "ui_example_panthera_basic_animation": "Базовая анимация Panthera", + "ui_example_panthera_basic_animation_description": "Здесь простой пример базовой анимации Panthera.", + + "ui_example_panthera_animation_blend": "Смешивание анимаций Panthera", + "ui_example_panthera_animation_blend_description": "Здесь простой пример смешивания анимаций Panthera.", + "ui_example_panthera_animation_blend_hint": "Наведите мышь на эту область.", + + "ui_animation_vertical": "Вертикальная", + "ui_animation_horizontal": "Горизонтальная", + + "ui_language_en": "English", + "ui_language_ru": "Русский", + "ui_language_es": "Español", + "ui_language_de": "Deutsch", + "ui_language_fr": "Français", + "ui_language_ja": "日本語", + "ui_language_pt": "Português", + "ui_language_it": "Italiano", + "ui_language_kr": "한국어", + "ui_language_zh": "中文" +} diff --git a/example/locales/zh.json b/example/locales/zh.json new file mode 100644 index 0000000..949eb76 --- /dev/null +++ b/example/locales/zh.json @@ -0,0 +1,172 @@ +{ + "ui_examples": "示例", + "ui_properties_panel": "属性", + "ui_output": "输出", + "ui_view_code": "查看代码", + "ui_profiler": "分析器", + "ui_profiler_memory": "内存", + "ui_profiler_fps": "FPS", + "ui_profiler_components": "组件", + "ui_profiler_events": "事件", + "ui_confirm": "确认", + "ui_cancel": "取消", + "ui_value": "值", + "ui_scroll": "滚动", + "ui_clipping": "裁剪", + "ui_no_properties": "此示例没有属性", + "ui_padding": "填充", + "ui_margin_x": "边距 X", + "ui_margin_y": "边距 Y", + "ui_justify": "对齐", + "ui_pivot_next": "下一个支点", + "ui_type_next": "下一个类型", + "ui_adjust_next": "下一个调整", + "ui_enabled": "启用", + + "ui_examples_basic": "基础", + "ui_examples_data_list": "数据列表", + "ui_examples_gamepad": "游戏手柄", + "ui_examples_window": "窗口", + "ui_examples_panthera": "美洲豹", + + "ui_example_intro": "介绍", + "ui_example_intro_description": "这里将有所选示例的简要说明。", + + "ui_example_basic_button": "按钮", + "ui_example_basic_button_description": "Druid 的基本按钮示例", + + "ui_example_basic_button_double_click": "双击", + "ui_example_basic_button_double_click_description": "如何向按钮添加双击功能。", + + "ui_example_basic_button_hold": "长按按钮", + "ui_example_basic_button_hold_description": "如何为按钮创建长按和触发功能。", + + "ui_example_basic_text": "文本", + "ui_example_basic_text_description": "检查文本如何通过不同的属性进行调整。", + + "ui_example_basic_multiline_text": "多行文本", + "ui_example_basic_multiline_text_description": "检查多行文本如何通过不同的属性进行调整。", + + "ui_example_basic_hover": "悬停", + "ui_example_basic_hover_description": "悬停有两个悬停事件。一个用于鼠标,一个用于触摸。请使用 mouse_callback 处理鼠标事件。", + + "ui_example_basic_drag": "拖动", + "ui_example_basic_drag_description": "如何创建简单的拖动节点。", + + "ui_example_basic_drag_to_node": "拖动到节点", + "ui_example_basic_drag_to_node_description": "如何将节点拖动到另一个节点并获取回调。", + + "ui_example_basic_slider": "滑块", + "ui_example_basic_slider_description": "如何创建简单的滑块。", + + "ui_example_basic_slider_vertical": "垂直滑块", + "ui_example_basic_slider_vertical_description": "如何创建简单的垂直滑块。", + + "ui_example_basic_slider_stepped": "分步滑块", + "ui_example_basic_slider_stepped_description": "滑块可以有一个 \"步骤\" 属性,使其分步。", + + "ui_example_basic_progress_bar": "进度条", + "ui_example_basic_progress_bar_description": "如何创建简单的进度条。", + + "ui_example_basic_progress_bar_slice9": "进度条 Slice9", + "ui_example_basic_progress_bar_slice9_description": "进度组件可以处理 slice9 属性,使其从一开始就可缩放。", + + "ui_example_basic_timer": "计时器", + "ui_example_basic_timer_description": "计时器组件用于显示带有回调的秒表。", + + "ui_example_basic_hotkey": "快捷键", + "ui_example_basic_hotkey_description": "如何为回调创建快捷键。", + + "ui_example_basic_scroll": "滚动", + "ui_example_basic_scroll_description": "如何创建简单的滚动。", + "ui_elastic_scroll": "弹性滚动", + + "ui_example_basic_scroll_slider": "带滑块的滚动", + "ui_example_basic_scroll_slider_description": "如何将滑块控件添加到滚动中并使用它们。", + + "ui_example_basic_grid": "静态网格", + "ui_example_basic_grid_description": "如何将节点放置在网格中。", + "ui_grid_in_row": "行中的元素", + "ui_add_element": "添加元素", + "ui_remove_element": "移除元素", + "ui_clear_elements": "清除元素", + + "ui_example_basic_scroll_bind_grid": "滚动绑定网格", + "ui_example_basic_scroll_bind_grid_description": "滚动与网格和预定义大小搭配使用良好,这是滚动绑定网格的示例。", + + "ui_example_basic_scroll_bind_grid_horizontal": "水平滚动绑定网格", + "ui_example_basic_scroll_bind_grid_horizontal_description": "滚动与网格和预定义大小搭配使用良好,这是水平滚动绑定网格的示例。", + + "ui_example_basic_input": "输入", + "ui_example_basic_input_description": "如何在 Druid 中创建最简单的输入。", + + "ui_example_input_password": "密码输入", + "ui_example_input_password_description": "密码输入如何工作。", + + "ui_example_basic_rich_input": "富输入", + "ui_example_basic_rich_input_description": "如何在 Druid 中创建富输入。", + + "ui_example_basic_rich_text": "富文本", + "ui_example_basic_rich_text_description": "如何在 Druid 中创建富文本。", + + "ui_example_rich_text_tags": "富文本标签", + "ui_example_rich_text_tags_description": "这是一个带有标签的富文本简单示例\n - 颜色\n - 字体\n - 大小\n - br\n - img", + + "ui_example_basic_swipe": "滑动", + "ui_example_basic_swipe_description": "如何在滑动事件上添加回调。", + + "ui_example_data_list_basic": "基本数据列表", + "ui_example_data_list_basic_description": "如何创建简单的数据列表。", + + "ui_example_data_list_horizontal_basic": "基本水平数据列表", + "ui_example_data_list_horizontal_basic_description": "如何创建简单的水平数据列表。", + + "ui_example_data_list_add_remove_clear": "数据列表添加、删除、清除", + "ui_example_data_list_add_remove_clear_description": "数据列表中的添加、删除和清除功能如何工作。", + + "ui_example_data_list_cache_with_component": "缓存版本数据列表", + "ui_example_data_list_cache_with_component_description": "缓存版本需要更多设置以添加/删除回调,但在内存上更高效。", + + "ui_language": "语言", + "ui_example_window_language": "窗口语言", + "ui_example_window_language_description": "这里是一个带有语言选择的窗口简单示例。", + + "ui_confirmation": "确认", + "ui_example_window_confirmation": "窗口确认", + "ui_confirmation_description": "确认购买一百万美元的汽车吗?", + + "ui_information": "信息", + "ui_example_window_information": "窗口信息", + "ui_example_window_information_text": "你是最好的中的最好!", + "ui_example_window_information_description": "这是一个带有信息消息的窗口简单示例。", + + "ui_example_gamepad_tester": "游戏手柄测试器", + "ui_example_gamepad_tester_description": "在这里测试你的游戏手柄以绑定按钮和轴。", + + "ui_example_on_screen_control": "屏幕控制", + "ui_example_on_screen_control_description": "这里是一个简单的屏幕控制示例。这里的屏幕输入是一个简单的操纵杆,带有 Druid 组件的回调。", + + "ui_example_layout_basic": "布局", + "ui_example_layout_basic_description": "此布局可以调整为与 Figma 相同。", + + "ui_example_panthera_basic_animation": "美洲豹基本动画", + "ui_example_panthera_basic_animation_description": "这里是美洲豹基本动画的简单示例。", + + "ui_example_panthera_animation_blend": "美洲豹动画混合", + "ui_example_panthera_animation_blend_description": "这里是美洲豹动画混合的简单示例。", + "ui_example_panthera_animation_blend_hint": "将鼠标悬停在此区域。", + + "ui_animation_vertical": "垂直", + "ui_animation_horizontal": "水平", + + "ui_language_en": "English", + "ui_language_ru": "Русский", + "ui_language_es": "Español", + "ui_language_de": "Deutsch", + "ui_language_fr": "Français", + "ui_language_ja": "日本語", + "ui_language_pt": "Português", + "ui_language_it": "Italiano", + "ui_language_kr": "한국어", + "ui_language_zh": "中文" +} diff --git a/example/templates/button_text_blue.gui b/example/templates/button_text_blue.gui new file mode 100644 index 0000000..ca44671 --- /dev/null +++ b/example/templates/button_text_blue.gui @@ -0,0 +1,149 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Info" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 +layers { + name: "druid" +} +layers { + name: "text_bold" +} diff --git a/example/templates/button_text_green.gui b/example/templates/button_text_green.gui new file mode 100644 index 0000000..41d3b0f --- /dev/null +++ b/example/templates/button_text_green.gui @@ -0,0 +1,149 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.557 + y: 0.835 + z: 0.62 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Confirm" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_bold" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/templates/button_text_red.gui b/example/templates/button_text_red.gui new file mode 100644 index 0000000..737878b --- /dev/null +++ b/example/templates/button_text_red.gui @@ -0,0 +1,149 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.957 + y: 0.608 + z: 0.608 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Cancel" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_bold" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/templates/button_text_white.gui b/example/templates/button_text_white.gui new file mode 100644 index 0000000..2935f42 --- /dev/null +++ b/example/templates/button_text_white.gui @@ -0,0 +1,149 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.941 + y: 0.984 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Action" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +layers { + name: "druid" +} +layers { + name: "text_bold" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/templates/button_text_yellow.gui b/example/templates/button_text_yellow.gui new file mode 100644 index 0000000..99593a5 --- /dev/null +++ b/example/templates/button_text_yellow.gui @@ -0,0 +1,149 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 280.0 + y: 90.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.902 + y: 0.875 + z: 0.624 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_32" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "druid" + inherit_alpha: true + slice9 { + x: 16.0 + y: 16.0 + z: 16.0 + w: 16.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 245.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Warn" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "text_bold" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 +layers { + name: "druid" +} +layers { + name: "text_bold" +} diff --git a/example/templates/input.gui b/example/templates/input.gui new file mode 100644 index 0000000..776bbbf --- /dev/null +++ b/example/templates/input.gui @@ -0,0 +1,143 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 80.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.463 + y: 0.475 + z: 0.49 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -240.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 480.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Tap me to input" + font: "text_bold" + id: "text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_W + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "root" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/templates/rich_input.gui b/example/templates/rich_input.gui new file mode 100644 index 0000000..5467ee9 --- /dev/null +++ b/example/templates/rich_input.gui @@ -0,0 +1,395 @@ +script: "" +fonts { + name: "text_bold" + font: "/example/assets/fonts/text_bold.font" +} +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 80.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: false + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 500.0 + y: 80.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/rect_round2_width1" + id: "button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 480.0 + y: 60.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.31 + y: 0.318 + z: 0.322 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Placeholder" + font: "text_bold" + id: "placeholder_text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 0.4 + y: 0.4 + z: 0.4 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 480.0 + y: 60.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "User input" + font: "text_bold" + id: "input_text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button" + layer: "" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 118.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 16.0 + y: 50.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.631 + y: 0.843 + z: 0.961 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_16" + id: "cursor_node" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button" + layer: "" + inherit_alpha: true + slice9 { + x: 8.0 + y: 8.0 + z: 8.0 + w: 8.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 0.5 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 4.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.2 + y: 1.2 + z: 1.0 + w: 1.0 + } + size { + x: 20.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "|" + font: "text_bold" + id: "cursor_text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + shadow { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "cursor_node" + layer: "" + inherit_alpha: false + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.0 + template_node_child: false + text_leading: 1.0 + text_tracking: 0.0 + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/templates/slider.gui b/example/templates/slider.gui new file mode 100644 index 0000000..ac7f71e --- /dev/null +++ b/example/templates/slider.gui @@ -0,0 +1,190 @@ +script: "" +textures { + name: "druid" + texture: "/example/assets/druid.atlas" +} +background_color { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 260.0 + y: 40.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/empty" + id: "root" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + layer: "" + inherit_alpha: true + slice9 { + x: 0.0 + y: 0.0 + z: 0.0 + w: 0.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 260.0 + y: 8.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.129 + y: 0.141 + z: 0.157 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_8" + id: "slider_back" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +nodes { + position { + x: -118.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 24.0 + y: 24.0 + z: 0.0 + w: 1.0 + } + color { + x: 0.722 + y: 0.741 + z: 0.761 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "druid/ui_circle_8" + id: "slider_pin" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "root" + layer: "" + inherit_alpha: true + slice9 { + x: 4.0 + y: 4.0 + z: 4.0 + w: 4.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: false + size_mode: SIZE_MODE_MANUAL + custom_type: 0 + enabled: true + visible: true + material: "" +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/game.project b/game.project index a9c06eb..85a33f1 100644 --- a/game.project +++ b/game.project @@ -1,23 +1,28 @@ [bootstrap] -main_collection = /test/test.collectionc +main_collection = /example/druid.collectionc [script] shared_state = 1 [display] -width = 600 -height = 900 +width = 1920 +height = 1080 display_profiles = /builtins/render/default.display_profilesc dynamic_orientation = 1 high_dpi = 1 [project] -title = druid -version = 0.11.0 +title = Druid +version = 1.0.0 publisher = Insality developer = Maksim Tuprikov +custom_resources = /example/locales dependencies#0 = https://github.com/insalitygames/deftest/archive/master.zip dependencies#1 = https://github.com/britzl/monarch/archive/refs/tags/3.3.0.zip +dependencies#2 = https://github.com/Insality/defold-saver/archive/refs/tags/1.zip +dependencies#3 = https://github.com/Insality/defold-tweener/archive/refs/tags/3.zip +dependencies#4 = https://github.com/Insality/panthera/archive/refs/heads/develop.zip +dependencies#5 = https://github.com/Insality/defold-lang/archive/refs/tags/3.zip [library] include_dirs = druid @@ -25,6 +30,7 @@ include_dirs = druid [input] gamepads = /builtins/input/default.gamepadsc use_accelerometer = 0 +game_binding = /builtins/input/all.input_bindingc [druid] no_auto_input = 0 @@ -45,10 +51,11 @@ input_scroll_down = mouse_wheel_down engine_arguments = --verify-graphics-calls=false heap_size = 64 splash_image = /media/druid_logo.png -scale_mode = fit +scale_mode = stretch show_fullscreen_button = 0 show_made_with_defold = 0 -cssfile = /example/light_theme.css +cssfile = /builtins/manifests/web/dark_theme.css +show_console_banner = 0 [native_extension] app_manifest = @@ -92,3 +99,11 @@ max_count = 64 [collection] max_instances = 128 +[saver] +autosave_timer = 2 + +[lang] +path = /example/locales +langs = en,ru,es,de,fr,ja,pt,it,kr,zh +default = es +