grid push
This commit is contained in:
chimchooree
@@ -1,112 +0,0 @@
|
||||
<!--221006,220922,221103-->
|
||||
<h1>coroutines in godot engine </h1>
|
||||
august 11, 2022<br>
|
||||
#gamedev #coroutines #godotengine #programming #demo<br>
|
||||
<br>
|
||||
<p>Demonstrating coroutines in Godot Engine with a simple application. <br></p>
|
||||
<img src="/static/img/ent/stoplight_screenshot.png" alt="(screenshot: a simple tech demo with a stoplight and a walk button.)"><br>
|
||||
<br>
|
||||
<h2>defining coroutines </h2>
|
||||
<p>Coroutines are functions that, instead of running to completion, 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">yield()</a>, <a href="https://docs.godotengine.org/en/stable/classes/class_gdscriptfunctionstate.html#class-gdscriptfunctionstate-method-resume">resume()</a>, and the <a href="https://docs.godotengine.org/en/stable/classes/class_gdscriptfunctionstate.html">GDScriptFunctionState</a> object. <br></p>
|
||||
<br>
|
||||
<h2>why use a coroutine? </h2>
|
||||
<p>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></p>
|
||||
<br>
|
||||
<h2>stoplight example </h2>
|
||||
<p>As a simple demonstration, I made a stoplight. Follow along with my code on <a href="https://gitlab.com/chimchooree/stoplight">GitLab</a>. <br></p>
|
||||
<br>
|
||||
<p>The light changes every few seconds, going from green, yellow, then red. The light changes immediately if the walk button is pressed. This demonstrates that methods can wait for criteria (a timed duration in this case) to be met before resuming, and they can be influenced by player action. <br></p>
|
||||
<br>
|
||||
<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>
|
||||
<br>
|
||||
<h2>how is it written? </h2>
|
||||
<h3>node hierarchy </h3>
|
||||
<img src="/static/img/ent/stoplight_nodehierarchy.png" alt="(screenshot: node hierarchy in the editor. 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>
|
||||
<p>I have a TextureRect background, an AnimatedSprite stoplight, a Sprite walk button with a TextureButton, and a label for displaying a timer. Most of the code is attached to the root. It's better to have code closer to where it's being used and to mind your separation of concerns in real projects, though. <br></p>
|
||||
<br>
|
||||
<h3>animation</h3>
|
||||
<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>
|
||||
<p>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></p>
|
||||
<h3>the code </h3>
|
||||
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>
|
||||
<h4>Main.gd - available on <a href="https://gitlab.com/chimchooree/stoplight/-/blob/master/Main.gd">GitLab</a></h4>
|
||||
<pre><code>extends Node
|
||||
|
||||
onready var stoplight = $Stoplight
|
||||
|
||||
func _ready():
|
||||
stoplight.play()
|
||||
|
||||
var result = wait(5, 'green')
|
||||
$WalkButton/TextureButton.connect('pressed', result, 'resume',
|
||||
['interrupted on green'], CONNECT_ONESHOT)
|
||||
yield(result, 'completed')
|
||||
|
||||
result = wait(5, 'yellow')
|
||||
$WalkButton/TextureButton.connect('pressed', result, 'resume',
|
||||
['interrupted on yellow'], CONNECT_ONESHOT)
|
||||
yield(result, 'completed')
|
||||
|
||||
result = wait(5, 'red')
|
||||
$WalkButton/TextureButton.connect('pressed', result, 'resume',
|
||||
['interrupted on red'], CONNECT_ONESHOT)
|
||||
yield(result, 'completed')
|
||||
|
||||
func wait(time, color):
|
||||
print('waiting for: ' + color)
|
||||
var result = yield(get_tree().create_timer(time), 'timeout')
|
||||
if result:
|
||||
print(result)
|
||||
stoplight.animation = color
|
||||
print('done: ' + color)
|
||||
|
||||
func _on_completed():
|
||||
print('completed')
|
||||
|
||||
func _on_WalkButton_gui_input(event):
|
||||
if event is InputEventMouseButton and event.pressed:
|
||||
print ("Walk Button not functioning.")</code></pre><br>
|
||||
<br>
|
||||
<h4>Label.gd - available on <a href="https://gitlab.com/chimchooree/stoplight/-/blob/master/Label.gd">GitLab</a></h4>
|
||||
<pre><code>extends Label
|
||||
var time_start = 0
|
||||
var time_now = 0
|
||||
|
||||
func _ready():
|
||||
time_start = OS.get_unix_time()
|
||||
set_process(true)
|
||||
|
||||
func _process(delta):
|
||||
time_now = OS.get_unix_time()
|
||||
var elapsed = time_now - time_start
|
||||
var minutes = elapsed / 60
|
||||
var seconds = elapsed % 60
|
||||
var str_elapsed = "%02d" % [seconds]
|
||||
text = str(str_elapsed)</code></pre><br>
|
||||
<br>
|
||||
<h2>how does it work? </h2>
|
||||
<p>At <span class="code">_ready()</span>, <span class="code">wait()</span> is assigned to the GDScriptFunctionState <span class="code">result</span> and is called for the first color, green. <span class="code">_ready()</span> yields until <span class="code">wait()</span> is completed. <br></p>
|
||||
<br>
|
||||
<p>The wait method yields for the given amount of seconds then sets the stoplight to the given color. <br></p>
|
||||
<br>
|
||||
<p>At <span class="code">wait()</span>'s completion, <span class="code">_ready()</span> calls <span class="code">wait()</span> for yellow, then red. Each is called one at a time, waiting for the color to complete before moving on. <br></p>
|
||||
<br>
|
||||
<h3>interrupting the stoplight </h3>
|
||||
<p>The Wait Button interrupts the wait times between colors. Before <span class="code">_ready()</span> yields, it connects the <span class="code">'pressed'</span> signal on the Wait Button. <br></p>
|
||||
<br>
|
||||
<p>If the Wait Button is clicked during <span class="code">wait()</span>'s yield, the GDScriptFunctionState <span class="code">result</span> resumes immediately, ignoring <span class="code">wait()</span>'s yield timer. This time, <span class="code">result</span> has a string arg <span class="code">"interrupted on green,"</span> so it will print the result, change the stoplight's color, then print <span class="code">"done: green."</span> The <span class="code">wait</span> method is complete, so <span class="code">_ready()</span> resumes and calls <span class="code">wait()</span> for the next color. <br></p>
|
||||
<br>
|
||||
<h2>play it yourself </h2>
|
||||
<iframe frameborder="0" src="https://itch.io/embed/1643944?dark=true" width="552" height="167"><a href="https://chimchooree.itch.io/stoplight">stoplight by chimchooree</a></iframe><br>
|
||||
<br>
|
||||
<h2>applications </h2>
|
||||
<p>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. Anything influenced by other entities is a good coroutine candidate. <br></p>
|
||||
<br>
|
||||
<p>Coroutines enable practical ways to improve the flow and interactivity of games, so practice the concept a lot! <br></p>
|
||||
<br>
|
||||
<br>
|
||||
Last updated July 31, 2022 <br>
|
||||
<br>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!---->
|
||||
<h1>blessfrey.me under construction </h1>
|
||||
august 31, 2022<br>
|
||||
#webdev <br>
|
||||
<br>
|
||||
The website doesn't look how I want it yet! <br>
|
||||
<br>
|
||||
<h2>working on it </h2>
|
||||
<br>
|
||||
Iterating over the website again. Lots of placeholder pages are up, but few are close to my current plan. This version will be better than ever, with embedded HTML5 applications, a content mix planned for articles, and more artwork. <br>
|
||||
<br>
|
||||
<br>
|
||||
Last updated August 31, 2022 <br>
|
||||
<br>
|
||||
+80
-41
@@ -1,73 +1,112 @@
|
||||
<!--201001,201112-->
|
||||
<!--221006,220922,221103-->
|
||||
<h1>coroutines in godot engine </h1>
|
||||
september 17, 2020<br>
|
||||
#coroutines #godot #programming<br>
|
||||
august 11, 2022<br>
|
||||
#gamedev #coroutines #godotengine #programming #demo<br>
|
||||
<br>
|
||||
<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>
|
||||
<p>Demonstrating coroutines in Godot Engine with a simple application. <br></p>
|
||||
<img src="/static/img/ent/stoplight_screenshot.png" alt="(screenshot: a simple tech demo with a stoplight and a walk button.)"><br>
|
||||
<br>
|
||||
<h2>defining coroutines </h2>
|
||||
<p>Coroutines are functions that, instead of running to completion, 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">yield()</a>, <a href="https://docs.godotengine.org/en/stable/classes/class_gdscriptfunctionstate.html#class-gdscriptfunctionstate-method-resume">resume()</a>, and the <a href="https://docs.godotengine.org/en/stable/classes/class_gdscriptfunctionstate.html">GDScriptFunctionState</a> object. <br></p>
|
||||
<br>
|
||||
<h2>why use a coroutine? </h2>
|
||||
<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>
|
||||
<p>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></p>
|
||||
<br>
|
||||
<h2>stoplight example </h2>
|
||||
<p>As a simple demonstration, I made a stoplight. Follow along with my code on <a href="https://gitlab.com/chimchooree/stoplight">GitLab</a>. <br></p>
|
||||
<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>
|
||||
<p>The light changes every few seconds, going from green, yellow, then red. The light changes immediately if the walk button is pressed. This demonstrates that methods can wait for criteria (a timed duration in this case) to be met before resuming, and they can be influenced by player action. <br></p>
|
||||
<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>
|
||||
<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>how does it work? </h2>
|
||||
<br>
|
||||
<h2>how is it written? </h2>
|
||||
<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>
|
||||
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>
|
||||
<img src="/static/img/ent/stoplight_nodehierarchy.png" alt="(screenshot: node hierarchy in the editor. 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>
|
||||
<p>I have a TextureRect background, an AnimatedSprite stoplight, a Sprite walk button with a TextureButton, and a label for displaying a timer. Most of the code is attached to the root. It's better to have code closer to where it's being used and to mind your separation of concerns in real projects, though. <br></p>
|
||||
<br>
|
||||
<h3>animation</h3>
|
||||
<br>
|
||||
<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>
|
||||
<p>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></p>
|
||||
<h3>the code </h3>
|
||||
<br>
|
||||
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>
|
||||
<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>
|
||||
<h4>Main.gd - available on <a href="https://gitlab.com/chimchooree/stoplight/-/blob/master/Main.gd">GitLab</a></h4>
|
||||
<pre><code>extends Node
|
||||
|
||||
onready var stoplight = $Stoplight
|
||||
|
||||
func _ready():
|
||||
stoplight.play()
|
||||
|
||||
var result = wait(5, 'green')
|
||||
$WalkButton/TextureButton.connect('pressed', result, 'resume',
|
||||
['interrupted on green'], CONNECT_ONESHOT)
|
||||
yield(result, 'completed')
|
||||
|
||||
result = wait(5, 'yellow')
|
||||
$WalkButton/TextureButton.connect('pressed', result, 'resume',
|
||||
['interrupted on yellow'], CONNECT_ONESHOT)
|
||||
yield(result, 'completed')
|
||||
|
||||
result = wait(5, 'red')
|
||||
$WalkButton/TextureButton.connect('pressed', result, 'resume',
|
||||
['interrupted on red'], CONNECT_ONESHOT)
|
||||
yield(result, 'completed')
|
||||
|
||||
func wait(time, color):
|
||||
print('waiting for: ' + color)
|
||||
var result = yield(get_tree().create_timer(time), 'timeout')
|
||||
if result:
|
||||
print(result)
|
||||
stoplight.animation = color
|
||||
print('done: ' + color)
|
||||
|
||||
func _on_completed():
|
||||
print('completed')
|
||||
|
||||
func _on_WalkButton_gui_input(event):
|
||||
if event is InputEventMouseButton and event.pressed:
|
||||
print ("Walk Button not functioning.")</code></pre><br>
|
||||
<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>
|
||||
<h4>Label.gd - available on <a href="https://gitlab.com/chimchooree/stoplight/-/blob/master/Label.gd">GitLab</a></h4>
|
||||
<pre><code>extends Label
|
||||
var time_start = 0
|
||||
var time_now = 0
|
||||
|
||||
func _ready():
|
||||
time_start = OS.get_unix_time()
|
||||
set_process(true)
|
||||
|
||||
func _process(delta):
|
||||
time_now = OS.get_unix_time()
|
||||
var elapsed = time_now - time_start
|
||||
var minutes = elapsed / 60
|
||||
var seconds = elapsed % 60
|
||||
var str_elapsed = "%02d" % [seconds]
|
||||
text = str(str_elapsed)</code></pre><br>
|
||||
<br>
|
||||
<h3>how the code works </h3>
|
||||
<h2>how does it work? </h2>
|
||||
<p>At <span class="code">_ready()</span>, <span class="code">wait()</span> is assigned to the GDScriptFunctionState <span class="code">result</span> and is called for the first color, green. <span class="code">_ready()</span> yields until <span class="code">wait()</span> is completed. <br></p>
|
||||
<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>
|
||||
<p>The wait method yields for the given amount of seconds then sets the stoplight to the given color. <br></p>
|
||||
<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>
|
||||
<p>At <span class="code">wait()</span>'s completion, <span class="code">_ready()</span> calls <span class="code">wait()</span> for yellow, then red. Each is called one at a time, waiting for the color to complete before moving on. <br></p>
|
||||
<br>
|
||||
<h3>interrupting the stoplight </h3>
|
||||
<p>The Wait Button interrupts the wait times between colors. Before <span class="code">_ready()</span> yields, it connects the <span class="code">'pressed'</span> signal on the Wait Button. <br></p>
|
||||
<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>
|
||||
<p>If the Wait Button is clicked during <span class="code">wait()</span>'s yield, the GDScriptFunctionState <span class="code">result</span> resumes immediately, ignoring <span class="code">wait()</span>'s yield timer. This time, <span class="code">result</span> has a string arg <span class="code">"interrupted on green,"</span> so it will print the result, change the stoplight's color, then print <span class="code">"done: green."</span> The <span class="code">wait</span> method is complete, so <span class="code">_ready()</span> resumes and calls <span class="code">wait()</span> for the next color. <br></p>
|
||||
<br>
|
||||
<h2>play it yourself </h2>
|
||||
<iframe frameborder="0" src="https://itch.io/embed/1643944?dark=true" width="552" height="167"><a href="https://chimchooree.itch.io/stoplight">stoplight by chimchooree</a></iframe><br>
|
||||
<br>
|
||||
<h2>applications </h2>
|
||||
<p>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. Anything influenced by other entities is a good coroutine candidate. <br></p>
|
||||
<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>
|
||||
<p>Coroutines enable practical ways to improve the flow and interactivity of games, so practice the concept a lot! <br></p>
|
||||
<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>
|
||||
Last updated July 31, 2022 <br>
|
||||
<br>
|
||||
|
||||
Reference in New Issue
Block a user