Tutorial Downloads

File Size
Callbacks.capx226KB

Translations

Know another language? Translate this tutorial!

Stats

2,113 visitors
14.4K page views

How to improve your Construct 2 code with Callbacks

Favourite 61 favourites
Tutorial written by ValerienOriginally published on 9th, July 2014 - 1 revision

Today, we will take a look at synchronous callbacks. Behind this expression lies a simple, yet powerful programming concept. Let us see how it can help us to build more efficient code in construct 2. And if you like what I'm doing, you can follow me on twitter and on facebook!

What is a callback?

According to wikipedia, "a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time." In other words, a callback is a bit of text that is read by your program and executed as a function.

In construct 2, let us use that concept to call functions based on text stored into our objects’ variables. In practice, we are going to apply callbacks to UI elements.

An example: the UI mess

When writing code for UI elements we generally want a specific button to call a specific function. For example, the pause button will pause the game. The mute button will mute the sound or the music… the list goes on. In construct 2, using brute force, we have to create a specific button touch check condition for each button, like that:

Cluttered code
Here, all buttons are placed into a family. Yet, as we add more and more buttons, the code gets heavier. And harder to update.

Callbacks in Construct 2

The callback technique will permit us to have a single event that will determine the function to use for each unique button. First of all, we have to create a text variable in our family. We'll call it "callback".

Callback variable creation
Then, let us create the input event. When any object of the button type is touched, it will be filtered by construct. We then call a function called "callback" and send it our callback variable as parameter 0. Our callback function still doesn't exist. Let's create it as well. It will call another function using the Function.Call() method. We simply have to use the text contained in the parameter 0 of our function!

The full Callback code


Now, we only have to create a function for each button, and type its name and parameters in the callback variable of our objects. For the pause button, we can create a "pause" function. The callback variable of the bPause object will be filled with the text "pause" (without the quote marks).

Button Functions


You may have noticed that we actually don't need the separate callback function here. We can actually call the function we want directly from the input event. Why bother creating a callback function then? Mainly for debugging purposes: if we want to check the content of the variable you are parsing to the callback function, for example. It permits us to check all of the faulty callback variables at specific times in the code, without having to check objects in construct 2's properties panel.

This is a key technique in programming that permits you to establish a modular workflow, and helps you scale your productions up more easily. In our example, we can add any buttons and pair them with any new function quickly! As your project grows, callbacks give you more and more back.

Going further

We have seen how callbacks could be used when a player touches a button on the screen. This is but one of many possible applications! I'll leave you with two slightly more elaborate examples:

1- Let's say we have a platformer game with multiple types of enemies. We want all of them to be contained inside a single family, for organisation's sake, but we want some to feature special abilities. Some die, and we want some others to resurrect after a while. We can simply create a deathCallback text variable and set it to call the functions "death", or "resurrect, timer", or even "explode, timer"

2- We can create a callbackMultipleFunctions function, and have it, for example, call the "setAnimation; death" function and "addScore, 50" at the same time. In our imaginary game, this would set the enemy to play the death animation and add 50 points to the player points pool. The good thing about that is that we can contain all the possible enemy deaths in a single line of code.

Last words

Do you have any idea on how to use callbacks in a clever way? Don't hesitate to leave it in the comments or share it with everyone on Construct 2's forums!

Want a specific tutorial, more information on pretty much anything you see here? Drop me a message! You can follow me and ask me questions directly on twitter, facebook and google plus.
You can find all of my articles and tutorials about game design directly on my website: GDquest.com !

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

2
Madrasmadnes 2,447 rep

I am gonna try this soon. Thanks for creating this!!!

Wednesday, July 09, 2014 at 10:45:50 AM
3
Lordshiva1948 39.0k rep

Thank you so much for sharing this

Wednesday, July 09, 2014 at 10:52:40 AM
1
part12studios 6,362 rep

That's really interesting. great to see not only some advanced options mentioned, but explained as well.

Thursday, July 10, 2014 at 2:03:18 AM
2
DUTOIT 12.7k rep

Bravo... great tutorial. Great explanation of callbacks and how to use them in construct2.

'Functions' are the best thing since sliced bread ;)

Thursday, July 10, 2014 at 7:32:46 AM
5
Aphrodite 16.5k rep

This is a great introduction to "how to reduce the unessecary amount of code and how to have a clear and understandable workflow", I think this can be expanded further to the fact that every functionnality a little complex to read or repetitive, should be hidden behind a function name. Not only this is easier to read, but when you correct something, it will be corrected everywhere, which is great.

Thursday, July 10, 2014 at 1:14:37 PM
1
jastrazz 3,535 rep

Thanks for sharing.

Thursday, July 10, 2014 at 3:07:00 PM
1
MrGoatsnake 1,862 rep

Excellent topic! Thanks.

Thursday, July 10, 2014 at 4:35:36 PM
1
Tedg 9,349 rep

Thank you for sharing this.!!!

Thursday, July 10, 2014 at 4:50:26 PM
1
jobel 14.5k rep

cool to make the call dynamic by adding the callback variable... nice..

Thursday, July 10, 2014 at 8:28:55 PM
1
beardedeagle 1,890 rep

Very useful

Thursday, July 10, 2014 at 11:50:45 PM
1
K969 1,499 rep

Nice tutorial, thanks for sharing it ;o)

Friday, July 11, 2014 at 11:32:40 AM
3
jayderyu 15.0k rep

I gotta admit while I've done this for years with C2. This is really well written. Kudo's. You should also go into a tutorial that teaches NOT to individualize UI into it's own objects. Instead in the UI Mess take it step further and go over that all those image buttons should be 1 single Sprite Object and should be using frames/animations to distuinguish the difference.

Friday, July 11, 2014 at 3:54:08 PM
4
Valerien 12.4k rep

Thank you everybody for the kind words! I'll try to provide tutorials of that quality on a regular basis now, maybe it be construct specific, or more design-oriented.

@jayderyu : that's true, although I personally like to have a visual representation of the UI inside the editor. It works well when you only have a handful of buttons (drag them from your windows folder, add them to the family and done). But it's effectively better to handle a single global button object, and maybe to have a little editor that stores the UI in JSON or XML. Well, it's always good to have a flexible, scalable system if you make a big or multiple game projects.

I'm adding it to my todolist then! Thanks a lot.

Nathan

Saturday, July 12, 2014 at 10:42:58 AM
1
AbelaNET 14.7k rep

Super, thanks for this. Good explanation.

Tuesday, July 15, 2014 at 10:04:46 PM
0
chadorireborn 59.1k rep

Nice. Thanks, very helpful. XD

Sunday, April 24, 2016 at 6:25:09 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.