{"id":4600,"date":"2020-11-13T13:10:20","date_gmt":"2020-11-13T12:10:20","guid":{"rendered":"http:\/\/godotengine.eu\/?p=4600"},"modified":"2020-11-13T18:05:56","modified_gmt":"2020-11-13T17:05:56","slug":"gra-air-combat-tworzenie-prostego-ui-6","status":"publish","type":"post","link":"https:\/\/godotengine.eu\/?p=4600","title":{"rendered":"Gra Air Combat \u2013 Tworzenie prostego UI \u2013 6"},"content":{"rendered":"\n<p class=\"has-background\" style=\"background-color:#b4c4d9\">Dobra, to wracamy do naszej Sceny g\u0142\u00f3wnej, czas doda\u0107 kilka przycisk\u00f3w, jeden startuj\u0105cy gr\u0119 i drugi by j\u0105 zako\u0144czy\u0107. Sprawi to, \u017ce nasz ekran g\u0142\u00f3wny b\u0119dzie r\u00f3wnie\u017c menu g\u0142\u00f3wnym.<\/p>\n\n\n\n<p><strong>Tworzenie prostego UI<\/strong><\/p>\n\n\n\n<p>Zaczynamy od dodania <strong>ToolButton <\/strong>do sceny, podrz\u0119dnej do w\u0119z\u0142a g\u0142\u00f3wnego <strong>Control<\/strong>. Zmieniamy nazw\u0119 przycisku na <strong>QuitGameButton<\/strong>. Po utworzeniu mo\u017cesz ustawi\u0107 tekst przycisku w <strong>Inspektorze <\/strong>w polu <strong>Text<\/strong>.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=async  width=\"243\" height=\"170\" src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-CZuv-Q1G\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/01.png\" alt=\"\" class=\"wp-image-4602\"\/><\/figure><\/div>\n\n\n\n<p><strong>Tworzenie czcionki<\/strong><\/p>\n\n\n\n<p>Przycisk u\u017cywa w tej chwili domy\u015blnej czcionki, kt\u00f3ra nie wygl\u0105da zbyt dobrze, wi\u0119c stw\u00f3rzmy w\u0142asn\u0105. Przewi\u0144 w d\u00f3\u0142 sekcj\u0119 <strong>Control <\/strong>w <strong>Inspektorze<\/strong>, odnajd\u017a <strong>CustomFonts<\/strong>, rozwi\u0144 t\u0119 pozycj\u0119 i wybierz <strong>Nowy DynamicFont (New DynamicFont)<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=async  src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-MF4OxuNM\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/02.png\" alt=\"\" class=\"wp-image-4603\" width=\"223\" height=\"207\"\/><\/figure><\/div>\n\n\n\n<p>Teraz dwuklik na nowo stworzonym <strong>DynamicFont <\/strong>by rozwin\u0105\u0107 opcje, teraz ustaw nast\u0119puj\u0105ce warto\u015bci w sekcji <strong>Settings<\/strong>:&nbsp; <strong>Size <\/strong>= 64, <strong>Outline Size <\/strong>= 4, <strong>Outline Color <\/strong>ustaw czarny. W ko\u0144cu znajd\u017a plik <strong>animeace.ttf<\/strong> z lokalizacji <strong>assets\/font <\/strong>i przeci\u0105gnij go na pole <strong>Font Data<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=async  src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-dRZcm2Ab\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/03.png\" alt=\"\" class=\"wp-image-4604\" width=\"354\" height=\"391\"\/><\/figure><\/div>\n\n\n\n<p>W ko\u0144cu nasz przycisk wygl\u0105da du\u017co lepiej, ale my potrzebujemy jeszcze jednego przycisku. Po prostu skopiujemy nasz istniej\u0105cy, zmienimy mu nazw\u0119 na <strong>NewGameButton<\/strong>, i ustawimy <strong>Text <\/strong>na <strong>New Game<\/strong>. Aby skopiowa\u0107, po prostu prawoklik na istniej\u0105cym przycisku w zak\u0142adce <strong>Scena (Scene) <\/strong>i wybieramy <strong>Duplikuj <\/strong>(<strong>Duplicate<\/strong>).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=async  data-opt-src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-H_quw-Ej\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/04.png\"  src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-H_quw-Ej\/w:auto\/h:auto\/q:eco\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/04.png\" alt=\"\" class=\"wp-image-4605\" width=\"354\" height=\"371\"\/><noscript><img decoding=async  src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-H_quw-Ej\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/04.png\" alt=\"\" class=\"wp-image-4605\" width=\"354\" height=\"371\"\/></noscript><\/figure><\/div>\n\n\n\n<p>Finalnie twoja scena powinna wygl\u0105da\u0107 jak na zrzucie.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=async  data-opt-src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-1_9FlhD7\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/05.png\"  width=\"245\" height=\"208\" src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-1_9FlhD7\/w:auto\/h:auto\/q:eco\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/05.png\" alt=\"\" class=\"wp-image-4606\"\/><noscript><img decoding=async  width=\"245\" height=\"208\" src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-1_9FlhD7\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/05.png\" alt=\"\" class=\"wp-image-4606\"\/></noscript><\/figure><\/div>\n\n\n\n<p>Musimy tak\u017ce rozmie\u015bci\u0107 odpowiednio wszystkie obiekty na scenie. Po prostu wybieramy przycisk, <strong>Tryb przesuwania<\/strong> (<strong>Move mode<\/strong>) w widoku 2D i ustawiamy przyciski.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=async  data-opt-src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-korMCvJd\/w:1024\/h:694\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/06.png\"  width=\"1024\" height=\"694\" src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-korMCvJd\/w:1024\/h:694\/q:eco\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/06.png\" alt=\"\" class=\"wp-image-4608\"\/><noscript><img decoding=async  width=\"1024\" height=\"694\" src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-korMCvJd\/w:1024\/h:694\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/06.png\" alt=\"\" class=\"wp-image-4608\"\/></noscript><\/figure><\/div>\n\n\n\n<p>Teraz musimy po\u0142\u0105czy\u0107 przyciski z odpowiednimi akcjami.<\/p>\n\n\n\n<p><strong>Obs\u0142uga zdarze\u0144\/sygna\u0142\u00f3w<\/strong><\/p>\n\n\n\n<p>Wybierz jeden z przycisk\u00f3w, prze\u0142\u0105cz si\u0119 na panel <strong>W\u0119ze\u0142 <\/strong>(<strong>Node<\/strong>), dwuklik na sygnale <strong>pressed<\/strong>().&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=async  data-opt-src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-x52qBoGZ\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/07-1.png\"  src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-x52qBoGZ\/w:auto\/h:auto\/q:eco\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/07-1.png\" alt=\"\" class=\"wp-image-4609\" width=\"363\" height=\"243\"\/><noscript><img decoding=async  src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-x52qBoGZ\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/07-1.png\" alt=\"\" class=\"wp-image-4609\" width=\"363\" height=\"243\"\/></noscript><\/figure><\/div>\n\n\n\n<p>To wywo\u0142a okienko, w kt\u00f3rym ustawiamy kod, kt\u00f3ry zostanie wykonany po wci\u015bni\u0119ciu naszego przycisku. U\u017cyjemy skryptu, kt\u00f3ry ju\u017c do\u0142\u0105czyli\u015bmy do g\u0142\u00f3wnego w\u0119z\u0142a <strong>Control<\/strong>, wi\u0119c wybieramy go.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=async  data-opt-src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-opxjOf4s\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/08.png\"  src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-opxjOf4s\/w:auto\/h:auto\/q:eco\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/08.png\" alt=\"\" class=\"wp-image-4610\" width=\"294\" height=\"215\"\/><noscript><img decoding=async  src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-opxjOf4s\/w:auto\/h:auto\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/08.png\" alt=\"\" class=\"wp-image-4610\" width=\"294\" height=\"215\"\/></noscript><\/figure><\/div>\n\n\n\n<p>Je\u015bli nazwa\u0142e\u015b poprawnie przyciski, to opcja automatycznego stworzenia nazwy funkcji b\u0119dzie dobrym wyborem wi\u0119c tak to zostawiamy. Klikamy po prostu przycisk <strong>Po\u0142\u0105cz <\/strong>(<strong>Connect<\/strong>).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=async  data-opt-src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-Ek8idX_n\/w:1024\/h:303\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/09.png\"  src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-Ek8idX_n\/w:1024\/h:303\/q:eco\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/09.png\" alt=\"\" class=\"wp-image-4611\" width=\"593\" height=\"175\"\/><noscript><img decoding=async  src=\"https:\/\/ml8gqeyap2f3.i.optimole.com\/1Syg-7E-Ek8idX_n\/w:1024\/h:303\/q:auto\/https:\/\/godotengine.eu\/wp-content\/uploads\/2020\/11\/09.png\" alt=\"\" class=\"wp-image-4611\" width=\"593\" height=\"175\"\/></noscript><\/figure><\/div>\n\n\n\n<p>Powtarzamy te same czynno\u015bci dla przycisku <strong>New Game<\/strong>, ponownie \u0142\u0105cz\u0105c przycisk do g\u0142\u00f3wnego w\u0119z\u0142a <strong>Control <\/strong>i pozostawiamy domy\u015bln\u0105 nazw\u0119. W ten spos\u00f3b stworzymy dwie nowe funkcje w naszym istniej\u0105cym ju\u017c skrypcie. Zast\u0105p skrypt poni\u017cszym kodem:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nextends Control\n\nfunc _ready():\n  globals.kills = 0\n  globals.currentStage = 0\n\nfunc _on_QuitGameButton_pressed():\n  get_tree().quit()\n\nfunc _on_NewGameButton_pressed():\n  get_tree().change_scene(&quot;GameScene.tscn&quot;)\n<\/pre><\/div>\n\n\n<p>Ten kod umo\u017cliwia wyj\u015bcie z gry po naci\u015bni\u0119ciu przycisku <strong>Exit Game <\/strong>(niesamowite \ud83d\ude42 ) i prze\u0142\u0105cza scen\u0119 na <strong>GameScene.tscn<\/strong> po naci\u015bni\u0119ciu przycisku <strong>Play Game<\/strong>. Oczywi\u015bcie teraz powinni\u015bmy stworzy\u0107 <strong>GameScene<\/strong>, prawda?<\/p>\n\n\n\n<div class=\"wp-block-button alignleft\"><a class=\"wp-block-button__link has-text-color has-background\" href=\"https:\/\/godotengine.eu\/?page_id=4330\" title=\"Air Combat\" style=\"background-color:#40372f;color:#a6937c\" rel=\"http:\/\/godotengine.eu\/air-combat\/\">Menu<\/a><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dobra, to wracamy do naszej Sceny g\u0142\u00f3wnej, czas doda\u0107 kilka przycisk\u00f3w, jeden startuj\u0105cy gr\u0119 i drugi by j\u0105 zako\u0144czy\u0107. Sprawi to, \u017ce nasz ekran g\u0142\u00f3wny b\u0119dzie r\u00f3wnie\u017c menu g\u0142\u00f3wnym. Tworzenie prostego UI Zaczynamy od dodania ToolButton do sceny, podrz\u0119dnej do w\u0119z\u0142a g\u0142\u00f3wnego Control. Zmieniamy nazw\u0119 przycisku na QuitGameButton. Po utworzeniu mo\u017cesz ustawi\u0107 tekst przycisku w [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4291,"comment_status":"open","ping_status":"open","sticky":false,"template":"templates\/template-cover.php","format":"standard","meta":[],"categories":[39],"tags":[38,36],"_links":{"self":[{"href":"https:\/\/godotengine.eu\/index.php?rest_route=\/wp\/v2\/posts\/4600"}],"collection":[{"href":"https:\/\/godotengine.eu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/godotengine.eu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/godotengine.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/godotengine.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4600"}],"version-history":[{"count":11,"href":"https:\/\/godotengine.eu\/index.php?rest_route=\/wp\/v2\/posts\/4600\/revisions"}],"predecessor-version":[{"id":4627,"href":"https:\/\/godotengine.eu\/index.php?rest_route=\/wp\/v2\/posts\/4600\/revisions\/4627"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/godotengine.eu\/index.php?rest_route=\/wp\/v2\/media\/4291"}],"wp:attachment":[{"href":"https:\/\/godotengine.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/godotengine.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/godotengine.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}