Call Random Animations with an Array

5

Stats

4,496 visits, 7,587 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 17 Jan, 2013. Last updated 19 Feb, 2019

INTRODUCTION

Hello! First, thank you for taking the time to check out my very first tutorial! I'm very grateful. I hope this helps you find solutions to your bewilderment or alternatives to make your games work even better! Or both!

Second, please don't get discouraged. I'm writing this tutorial after having recently figured out a solution to one of my own programming dilemmas...one that took me two whole days to figure out (and it's really a simple thing in hindsight). Actually, that success is what allows me to write this tutorial in the first place. So don't give up. I can assure you that the joy of success is looming close by if you just keep trying. And that's what my tutorial and everyone else's are here for - to help you succeed and have fun!

OTHER RESOURCES

If you're not familiar with Arrays, you can get oriented with them via the Construct 2 manual, or this beginners' tutorial by ramones. Weishaupt has a similar tutorial for a random call to animations using the random([value]), tokenat( ), and tokencount( ) instructions. (I admit that Weishaupt's example may be much easier to implement than mine. But for those looking to use Arrays, we continue.)

THE GOAL

What we're going to be doing here is setting up a kind of countdown (count up?) to play a random animation while your character is standing idle. As you'll see, I'm working on a platform-oriented game, but you can tweek the Event conditions to suit your purposes since the highlight will be on the use of the Array to call a random animation into motion.

THE SET UP

I want to make sure everyone is on par as we move on... In some pictures I'll be referencing things that show the final result even as I walk you through the steps to help you see what the result ought to be. This is to help accommodate the beginners. Keep in mind that I'm using the beta release 115, and there might also be some minor differences to icon images or labels by the time you read this tutorial...or perhaps not!

While the animations you'll use in your game will be selected randomly, the instructions you have to give C2 must be quite specific. But that's okay; we're just going to declare a few things to start. This tutorial will make some assumptions that you know how to navigate through the basics of C2...but don't be afraid to ask for help if you get totally lost. It's really okay! You're learning!

First, create a new Array object.

Right-click in the Objects pane (usually oriented on the right-side of the C2 editor). Select Insert New Object.

In my game, I've already created an Array named IdleAnimationSelect, but of course you can name it whatever works for you. The name implies that the Array will be used as a reference to some animations I've created that will play during the character idle period.

After clicking Insert New Object, a pop up menu appears. "Array" should already be pre-highlighted. You can double-click on it or click it once and select Insert. Your Array now appears in your Objects pane, as well as the Projects pane above showing it's in the Object Type folder. (Right-click on the Array listing and you can select to rename it to something suitable.)

TICK-TOCK

Now that you have your Array, we need to establish a kind of countdown clock. Because I'm still learning, too, at this point in time, there may be an easier way to set up a countdown; so if you find one, you should be able to use it without any problems.

Right-click in the gray space of the Event Sheet and click on Add Global Variable.

A New Global Variable window pops up, prompting you to set a Name, Type, Initial Value, and a few other things. Leave the Type and Value fields and Constant check box as is. Rename it to IdleTick or something suitable so you don't forget what it's for. You can always add a description which will display next to your variable, removing more mystery as to its purpose.

The IdleTick is going to track how many times C2 has run through all the events. Ideally, a single second will yield 60 ticks. (That's pretty fast!) Basically, this is our timer.

AN IDLE START

It is assumed you have some animations ready to go, just waiting to show what they can do. For this tutorial, I presently have two animation and one single-frame sprite, thus, three idle options.

Add a new Event and select System, then select On Finished Loading. Add the new Actions as follows:

Notice that we didn't declare the Array like we did the IdleTick variable. This is because the Array already exists as an object, just waiting to be used...to feel...included...less lonely. We basically declared it near the beginning of this tutorial, so you're already set!

For each click of Add Action (per Event condition(s) as noted in the image above):

1. Select System, set value of IdleTick to int(random(1,301)).

The int(random(1,301)) takes only the inter value of whatever random number - including the decimal value - that is generated. So a random number of 3.2484857 would return a value of 3 due to the influence of int( ).

random([valueA],[valueB]) returns a number from valueA upto but not including valueB. So a range of 1 to 10 could return values like 1, 4, 7, 9, 9.8701, 9.9999999...but never 10. Because 60 ticks is roughly one second, I set the range up to approximately 5 seconds (300 ticks / 60 ticks per second = 5 seconds).

2. Select IdleAnimationSelect (or whatever you named your Array. Because we only have a one-dimensional array, select Set at X. The following pop up...er, pops up.

Arrays have cells, compartments for storing data, and are each labeled with an index number. The first index number is always 0. So an array with 3 cells would have indices of 0, 1, and 2.

In the value field for each cell, make sure you include quotation marks ("[text]"). When you reference the name of the animation, it's by way of a text label, and C2 will recognize the difference between "Animation" and Animation. The former is a string and the latter is a variable. If you stored Animation into an array cell and call on it later, it's going to return whatever value Animation has in it. But if you are wanting to call on the name of an animation, you need to make sure it returns the actual text name so that text can be applied when we use the Set Animation To action command later. The quotation marks will make all the difference.

TOCKING THE TICKS

Every tick - or pass that C2 makes over the Event conditions - we want to add a +1 value to IdleTick. This is our "stopwatch", of sorts. This will be ongoing throughout your game.

In a moment, we'll set a condition that, when true, willreset IdleTick so that a new random animation will strut its stuff...which doesn't make it very idle, oddly enough.

THE ACTIVE IDLER

And finally! Hopefully you have followed along without difficulty and I hope you've enjoyed the learning. We're almost to the end, and before long, you'll have your finished random animation generator ready for you to adjust to your needs. And don't be scared to mess around with it - that's how I got this figured out, myself. I kept trying different things until something made sense. (I also scoured the tutorials, manual, and forums like crazy.)

So! Without further ado...

Now we need an event that, when the conditions are just right, will trigger randomly one of three idle options when my character is not moving (we'll skip past the specifics of determining when the character is actually stationary...it's beyond the scope of this tutorial).

Every tick, IdleTick adds 1 on top of its previous value. For this Event, before any Actions can play, IdleTick must equal 600, that is, IdleTick = 600 must return as true when tested. It's an arbitrary number but it amounts to about 10 seconds. For testing purposes, you may want to reduce this number in increments of 60 ticks (1 second) so you're not waiting long to see if it works to your liking.

For the purposes of my game, I instruct C2 to stop any currently playing animation, but this is not required and might interfere with your own images. So edit this as you see fit.

The key element is the second Action: Set animation to (IdleAnimationSelect.At(int(random(0,3)))) (play from beginning).

WHEW! That's a mouthful! (Mentally chew slowly.)

The first part is the easiest, though. You're going to tell C2 to set to your character a particular animation sequence. That's it. The slightly (and it's only slightly) more complicated bit is how to actually tell which animation to play. So I'll break that down for you as we close this tutorial.

Remember that I named my array IdleAnimationSelect. Somewhere in this array is an animation that will be randomly selected. But how do we get at that animation, you ask? The .At( ) extension. It's basically saying, "at index position X, pull out its value." X, though, is being fulfilled by a randomly-generated number. Recall from earlier how the int( ) and random( ) commands work? Well, they're at it again, folks. Except this time we've limited them to the indices range of IdleAnimationSelect (that is, 0 to 2 since random( ) never returns its maximum range). And the value that is pulled is the text of the name of one the animations to play.

It is highly important that you include the outer-most parentheses. This was my number-one obstacle as I was figuring this out, myself. Without those parentheses, C2 will literally look for an animation named IdleAnimationSelect.At(int(random(0,3)))...and find nothing. But since that entire line is not a name of an animation, quotation marks will not do. We need a way to "contain" it so C2 recognizes it as a reference to something else - that's what the parentheses are for here. Don't forget them!

Last, I tell C2 to store another random integer number to IdleTick again.

THE COUNTDOWN IS GOING...UP?

And finally, the moment we've all been waiting for. The Run Layout. When you test your random animation generator, IdleTick will increase by 1 until it equals 600. Then C2 will randomly select an animation to play and reset IdleTick to a number between 1 and 300 and resume the incremental process it's so devoted to (aka binary conscripted slave labor). This means you'll see another random animation somewhere between every 5 to 10 seconds.

And with that, we have reached the end of the tutorial! I welcome your feedback and any way I can make things clearer. And, of course, did it work?

.

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • This helped tremendously! I'm currently making a dialog system with JSON and arrays. Been trying to figure out how to call an animation or even a sfx with the array.

    • I'm very pleased that my tutorial helped you out!

      Looking back, there are some easier ways to go about this - namely by using the choose( ) action (something I didn't learn about until much later after writing this).

      Choose( ) works basically like this:

      [event] : action - choose (option 1, option 2, ... option x). So you can actually specify a specific number of options that are randomly selected from. In hindsight, I could have just told it to do choose(animation 1, animation 2, animation 3) and it would have been so much simpler. The Array wouldn't have been necessary.

      I hope it all works out for you!