anchors on demo...but wanna change the grid again
This commit is contained in:
+56
-35
@@ -1,52 +1,73 @@
|
||||
<!--220728,220811-->
|
||||
<h1>artfight 2022: team bloom </h1>
|
||||
august 25, 2022<br>
|
||||
#personal #artfight #art <br>
|
||||
<!--201001,201112-->
|
||||
<h1>coroutines in godot engine </h1>
|
||||
september 17, 2020<br>
|
||||
#coroutines #godot #programming<br>
|
||||
<br>
|
||||
<h2>what's artfight? </h2>
|
||||
<b>Artfight</b> is an online art game every July. You post profiles for your original characters then go off browsing to find someone else's character to draw. Everyone's sorted into teams and each "attack" or drawing is valued for a certain number of points, so one side wins at the end of the event. You don't get anything for winning, and people game the system so bad that it's hard to even care about the competitive side of the site. <br></p>
|
||||
<b>Coroutines</b> are functions that, instead of running to completion, can yield until certain criteria are met. Godot Engine supports coroutines through <a href="https://docs.godotengine.org/en/stable/classes/class_@gdscript.html#class-gdscript-method-yield"><b>yield</b> ( Object object=null, String signal="")</a>, <a href="https://docs.godotengine.org/en/stable/classes/class_gdscriptfunctionstate.html#class-gdscriptfunctionstate-method-resume"><b>resume</b></a>, and the <a href="https://docs.godotengine.org/en/stable/classes/class_gdscriptfunctionstate.html"><b>GDScriptFunctionState</b></a> object.<br>
|
||||
<br>
|
||||
<p>It's more fun to approach the game with your own personal challenge. I know a lot of people try a new style or technique during this month, like my friend trying single-layer digital paintings. My personal approach this year is thematic. I'm drawing cute couples! I don't usually draw boys, so it's a good compromise if his girlfriend will be in the frame, too. Also, more characters per attack = more points! <br></p>
|
||||
<h2>why use a coroutine? </h2>
|
||||
<br>
|
||||
It's a huge community, so at least a few people are bound to draw your characters, which is such a fun surprise when it happens. Some people like to make art in return for people who attack them, too, as thanks. Their discord is probably the best place to get attention, but it's intimidatingly fast for me. <br>
|
||||
Coroutines allow for scripted game scenarios that respond dynamically to the player and the changing game world. They let you bounce between functions, step-by-step, and respond to interruptions. This means functions can be automatically called at the completion of other functions, animations, player actions, in-game events, or timers. Add in interruptions and conditionals, and you have a tool for building a responsive game world. <br>
|
||||
<br>
|
||||
<h2>my attacks </h2>
|
||||
<p>These are the characters I drew. <br></p>
|
||||
<img src="/static/img/ent/AF22_Abbey_Lune_Arcon_SanoAmaterasu_goddess.png" alt="(pixelart: Sano Amaterasu in a lupine field, playing her harp.)"><br>
|
||||
<img src="/static/img/ent/AF22_Abbey_Lune_Arcon_SanoAmaterasu_goddess_big.png" alt="(pixelart: same but larger size)"><br>
|
||||
My pixelart of Lune_Archon's Sano Amaterasu, a horned goddess with her harp. (75x75px, 45 colors) <br>
|
||||
<h2>stoplight example </h2>
|
||||
<br>
|
||||
<img src="/static/img/ent/AF22_Abbey_Skye_0723_Aisu+LunaStarleaf.png" alt="(pixelart: Aisu, a blue winged man in a sweater standing behind his seated blonde wife with a pink shirt.)"><br>
|
||||
<img src="/static/img/ent/AF22_Abbey_Skye_0723_Aisu+LunaStarleaf_big.png" alt="(pixelart: same but larger size.)"><br>
|
||||
My pixelart of Skye_0723's Aisu and Luna Starleaf, a winged warrior and his druid wife who can turn into a pink unicorn. (163x157px, 79 colors) <br>
|
||||
As a basic example of coroutines in Godot Engine, I made a stoplight. Follow along with my code on <a href="https://gitlab.com/chimchooree/stoplight">GitLab</a>. <br>
|
||||
<br>
|
||||
<img src="/static/img/ent/AF22_Abbey_EmmArrGus_Brody+Char.png" alt="(pixelart: Brody, a scruffy fisherman sitting on a bench with his anthro shark girlfriend Char.)"><br>
|
||||
<img src="/static/img/ent/AF22_Abbey_EmmArrGus_Brody+Char_big.png" alt="(pixelart: same but larger size.)"><br>
|
||||
My pixelart of EmmArrGus's fisherman Brody and his shark girlfriend Char. (150x123px, 54 colors) <br>
|
||||
In my example, the light changes every few seconds, going from green, yellow, then finally red. The light changes immediately if the Walk Button is pressed. This project demonstrates methods that can wait, resume, and be affected through player action. <br>
|
||||
<br>
|
||||
<img src="/static/img/ent/AF22_Abbey_BlackReshiram_Lilac_dragongirl.png" alt="(pixelart: a fluffy pink dragon girl named Lilac.)"><br>
|
||||
<img src="/static/img/ent/AF22_Abbey_BlackReshiram_Lilac_dragongirl_big.png" alt="(pixelart: same but larger size.)"><br>
|
||||
My pixelart of BlackReshiram's Lilac, a fluffy pink dragon girl. (51 colors) <br>
|
||||
<center>
|
||||
<a target="_blank" href="/static/img/ent/stoplight_demonstration.gif">
|
||||
<img src="/static/img/ent/stoplight_demonstration.gif" alt="(gif: demonstration)" width="500" height="281.67">
|
||||
</a><br>
|
||||
</center>
|
||||
<br>
|
||||
<h2>my defenses </h2>
|
||||
<p>These are my characters, drawn by other people. <br></p>
|
||||
<img src="/static/img/ent/AF22_CawfeeCakes_Abbey_Rune_sadlittleguy.png" alt="(image: a bust of a sad Rune in a dark hoodie)"><br>
|
||||
CawfeeCakes's bust of Rune. He's so sad, he's droopy! <br>
|
||||
<h2>how does it work? </h2>
|
||||
<br>
|
||||
<img src="/static/img/ent/AF22_Lune_Archon_Abbey_TessaSkyeStMartin.jpeg" alt="(image: Tessa with a vampy lip!)"><br>
|
||||
Lune_Archon's bust of Tessa with a vampy lip! <br>
|
||||
<h3>node hierarchy </h3>
|
||||
<br><center>
|
||||
<img src="/static/img/ent/stoplight_nodehierarchy.png" alt="(image: node hierarchy - Root is a node named Main. It's children are TextureRect BG, AnimatedSprite Stoplight, Sprite WalkButton, and a Label. Stoplight's child is a Sprite. WalkButton's child is a TextureButton.)"><br>
|
||||
</center>
|
||||
<br>
|
||||
<img src="/static/img/ent/AF22_BlackReshiram_Abbey_floofdrago.png" alt="(image: Abbey in an adorable style!)"><br>
|
||||
BlackReshiram's illustration of Abbey in an adorable style! <br>
|
||||
I have a TextureRect background, an AnimatedSprite stoplight, a Sprite walk button with a TextureButton, and a label for displaying a timer. Since this is a simple example, most of the code is attached to the root. It's better to have code closer to where it's being used and to watch your separation of concerns in real projects, though. <br>
|
||||
<br>
|
||||
<h3>animation</h3>
|
||||
<br>
|
||||
<h2>do you recommend this game? </h2>
|
||||
<p>It's one of the more fun art communities these days. A lot of communities have turned completely business-minded or are littered with off-topic content. Artfight, however, is necessarily interactive and collaborative, more like how art communities felt in the 10s. I try to play every year to motivate myself to draw more, especially things outside my comfort zone of cute girls. <br></p>
|
||||
<center>
|
||||
<img src="/static/img/ent/stoplight_animationframes.png" alt="(image: the AnimatedSprite Stoplight has 4 animations - default (which is no light), green, red, and yellow.)"><br>
|
||||
</center><br>
|
||||
The light is changed by setting its animation to one of these options. Each is one-frame - just the stoplight with the one or none of the lights colored in. <br>
|
||||
<h3>the code </h3>
|
||||
<br>
|
||||
<p>This community has a lot of overlap with Toyhouse and Tumblr, though, so don't be surprised if you keep running into massive text walls of character permissions and "original character donut steal" warnings. There's also a wide range of ability. I see everything from grainy photos of lined paper to Tearzah copycat artists to university illustration students. It feels like old DeviantART in that respect. <br></p>
|
||||
This project has two scripts: Main.gd, which is attached to the root node, and Label.gd, which is attached to the Label. <br>
|
||||
<br>
|
||||
<p>You should know that the servers reliably crash during the first week of July every year, so if you do want to play, prepare during June. Upload a few characters and their reference pictures, find targets you'd like to draw, and save their usernames and reference pictures. Even if the servers crash, you've got everything you need for a few days. <br></p>
|
||||
<b>Main.gd</b> - code available on <a href="https://gitlab.com/chimchooree/stoplight/-/blob/master/Main.gd">GitLab</a><br>
|
||||
<center>
|
||||
<img src="/static/img/ent/stoplight_main.png" alt="(image: Main script.)"><br>
|
||||
</center>
|
||||
<br>
|
||||
<b>Label.gd</b> - code available on <a href="https://gitlab.com/chimchooree/stoplight/-/blob/master/Label.gd">GitLab</a><br>
|
||||
<center>
|
||||
<img src="/static/img/ent/stoplight_label.png" alt="(image: Label script.)"><br>
|
||||
</center>
|
||||
<br>
|
||||
Last updated June 4, 2022 <br>
|
||||
<h3>how the code works </h3>
|
||||
<br>
|
||||
At <code>_ready()</code>, <code>wait()</code> is assigned to the GDScriptFunctionState <code>result</code> and is called for the first color, green. <code>_ready()</code> yields until the given function <code>wait()</code> is completed. <br>
|
||||
<br>
|
||||
The wait method yields for the given amount of seconds then sets the stoplight to the given color. <br>
|
||||
<br>
|
||||
At <code>wait()</code>'s completion, <code>_ready()</code> calls <code>wait()</code> for yellow, then red. Each is called one at a time, waiting for the color to complete before moving on. <br>
|
||||
<br>
|
||||
<h3>interrupting the stoplight </h3>
|
||||
<br>
|
||||
The Wait Button interrupts the wait times between colors. Before <code>_ready()</code> yields, it connects the <code>'pressed'</code> signal on the Wait Button. <br>
|
||||
If the Wait Button is clicked during <code>wait()</code>'s yield, the GDScriptFunctionState <code>result</code> resumes immediately, ignoring <code>wait()</code>'s yield timer. This time, <code>result</code> has a string arg <code>'interrupted on green'</code>, so it will print the result, change the stoplight's color, then print <code>'done: green'</code>. The <code>wait</code> method is complete, so <code>_ready()</code> resumes and calls <code>wait()</code> for the next color. <br>
|
||||
<br>
|
||||
<h2>applications </h2>
|
||||
<br>
|
||||
The outcomes in this example can be swapped out with anything. I use coroutines in Blessfrey's skills to manage the flow of phases from activation, different phases of effects, cooldown, and interactions with any counters. I also use it in the basic weapon attack so the character continuously swings at the rate of his attack speed until he cancels, uses a skill, or moves. It could also be used for something like cars that stop and honk when the player walks in front of them then drive off once the path is clear. <br>
|
||||
<br>
|
||||
Coroutines enable lots of practical ways to improve the flow and interactivity of your game, so just keep experimenting. <br>
|
||||
<br>
|
||||
Last updated June 8, 2021 <br>
|
||||
<br>
|
||||
|
||||
Reference in New Issue
Block a user