How to make a button using when released

tutorial
button
petrichor
when-released

#1

A little while ago I made a tutorial on making a button using the new when not pressed block. This is a similar tutorial but it uses some when released code. I recommend reading that tutorial first, since this tutorial will reference it for blocks common to both projects.


Using some when released code, you can make a button that looks like this.
image




Really this image is just stuff shown in the last tutorial. But notice that we need to add the default size and color code to this when, we can’t just have it in the when released code. This is because you need to tap and release something for it to count as released. Since we want this to happen at the start, we need to call the code at the start.



This is the main rule of the tutorial. It’s the when released code. Going down the when blocks, there are three.
The first one sets a variable to one when it is pressed. This means that the second rule will change the variable to two when it is released. Before then, it will only ever be equal to 0 or 1. Make sense?
The second rule is when not pressed. Since it has three blocks in it, let’s take a closer look.

What is the difference between tapped and pressed?

In Hopscotch, there are three when blocks relating to your finger touching an object. Each of them either involves taps or presses. When pressed means when you hold down on the object. If you just tap it for a split second, when pressed will not fire. The opposite of it is when not pressed, which is new. The third when block relating to your finger touching an object is when tapped. This only fires when your finger first touches an object. To run when is tapped a second time, you must release the object then tap again. The opposite of it would be when released. Since that is not currently a block, we have to make our own code for it. It is pretty easy though.

The first block increases the variable by one. Keep in mind that this code only fires when you are not touching the object. This means that it will usually only equal one, but since it increases the variable, and pressings the object sets it To one, one plus one is two. That is enough to fire the next rule. But we need to make sure that it has time. That is why we have the wait 0 block.
The third block resets the variable to zero, so that it doesn’t constantly fire the third rule when you aren’t pressing the object.
That was one long rule, wasn’t it? We still have another one though. Don’t worry, this one’s simple. The only thing that matters is the when itself. It says when pressed is greater than one. This means when is released. The code inside it will run when the object is released.
But why does that statement mean the same thing as when released? To know that, we have to look at this custom ability as a whole.
Let’s say you just pressed the object. What does this do?
It sets the variable to one. The variable will not be changed by anything for as long as you touch it. It will stay at one.
When you let go, the second rule fires. It increases the variable by one. What does the variable equal now?
The variable is equal to two.
The next block fires at the same time as the next rule. Since it is a wait zero, this block is essentially skipped. What’s important at this time is the third rule. It asks whether the variable is greater than one. Is the variable greater than one?
The variable is equal to two.
Since two is greater than one, the rule fires. The next block the second rule sets the variable to zero. Let’s assume you didn’t touch the object this time around the rules. The first one never fires. The second rule increases the variable by one. What is the variable now?
The variable is one.
The next block waits zero, and the third rule fires. Is the variable greater than one?
No. It’s equal to one. So the rule does not fire.
The next block sets the variable back to zero.



The inside of this code was explained in the other tutorial, but the when block is when tapped. It’s the opposite of our when released code.

This code was mostly explained in the other tutorial



Let me know if There’s anything you don’t understand, and I’ll explain it.


#2

ℏՊՊ, тℏ!ṧ ℵḙω ḙℓḙՊḙℵт ṧḙḙՊṧ ṳṧḙḟṳℓ. ṧᾰᖱℓ⑂ ! ℏᾰṽḙ ℵ✺т ❡ᾰ!ℵḙᖱ тℏḙ ḉℏᾰℵḉḙ т✺ ṳт!ℓ!ℨḙ !т ⑂ḙт…


#3

Cool tutorial, just like the other one! :+1:


#4

Hi @Petrichor

Nice tutorial. One small comment…

image

This Wait block could be removed. The code works with it was well, but it’s not needed.


#5

Yeah I thought that as I was doing the screenshots. I planned to pu that in the post but I must have forgotten.


#6

Very nice tutorial!! :clap: